Topic: div id / classes Question (Page 1 of 1)

I've been trying to get validated html for the past 2 hours but I can't figure out how to do this without breaking the validity of the css. (per your suggestion Reisio)

http://wayoutwestenterprises.com/admin.usd21/

http://wayoutwestenterprises.com/admin.usd21/css/asmin2.css

I sort of hacked the nav section by giving it an id of navbox1, navbox2, etc. but I know that's now the right way to do this.

In the body of the page there are tutorial boxes with content, and the id is #tutbox. How would I achieve this effect without using div id="tutbox"? I've been reading that I need to use class instead but I'm lost.

Any help would be solid... (cough.. cough...reisio...) :-)

All you've got to do is replace the id="tutbox" with class="tutbox" and change the #tutbox in the CSS to .tutbox.
You seem to be using plenty of classes already...I'm not sure I understand where your confusion lies...?

Same with the #navbox (2,3). Just make the class .navbox and apply in your HTML as above.

I think that pretty much answers it! Thanks DL... I'm still trying to determine the correct usage for certain aspects of CSS.
I'm totally loving it though!

Nice site.
All the navigations should be ULs, and there's too many DIVs to my taste though.

Just remember that an ID is only used to identify an unique element on a page. Generally used to define the main page layout blocks, and those special features...

I would also reiterate Poi's comments. The Nav at the top should definitely not be <p>'s - ul's will do the job nicely and be semantically correct.

And an overabundance of divs is an easy trap to fall into. Try thinking in terms of the least possible number of divs, and use the proper element for the job. You;ve got a lot of things wrapped in divs that don't need a wrapper (apply the class directly to the img rather than to a div wrapped around the img), and p tags that should header tags as well, and *gasp* - "<p>&nbsp;</p>" Use your margins and padding to achieve this, rather than extra markup.

And so on...

I'm trying guys... I felt an achievement in itself having my site very correctly. :-)
I definitely agree that I need to know when to format with div's, id's, classes's, etc. And for the "<p>&nbsp;</p>"
I know, i know... the margins tend to throw me off and I'm still working on it as well.

I think I've come a long way though... thanks to you guys.

I cannot express how much I appreciate all the help I've ever gotten from the peeps in here.
That's what makes me come back over and over again.

UGH! ok, I last final (hopefully) question about my CSS layout for another site i did...

www.caicc.net works perfectly in FF but in EX6 the formating is jacked up and the content gets pushed way below the navigation on the left.

I know I have alot of word to do to make this site VALID XHTML but for starters how can I fix this problem?
I've tried numerous tweaks with no successfull results....

sorry, I have just a second but...

see if changing your clear div to clear:all instead of clear:both

Later,

C:\

Often this problem happens because there isn't enough space between the two floated elements,, have you tried taking off the width of the right element, it probably doesn't need it.

Also try floating left instead of right. Haven't had a good look, but these can sometimes help.

Cheers,

neither seemed to work... I'm starting to get frustrated here with this layout. Where's my old friend the "table" at??? :-S