glad it worked out, great advice here
Just wondering, i was following a tutorial that was creating the div's by assigning ID's, and another tutorial assigning classes. May i ask what is the difference between the two?
Can you give me an example of how classes would be incorporated into a page constructed from div's using ID's?
The advice, you have been given about using ID's only once per page and as a main structural element is spot on, but see the "back to basics" reason below for more if it helps.
A small example of how and when to use and reuse classes.
<div id=header">
<ul>
<li class="first">First Item</li>
<li>Second Item</li>
<li class="last">Last Item</li>
</ul>
</div>
<div id="maincontent">Main content</div>
<div id="footer">
<ul>
<li class="first">First Item</li>
<li>Second Item</li>
<li class="last">Last Item</li>
</ul>
</div>
pseudo example of two menus one in the header and the other in the footer, both to be style very differently, say the first is nice rollover effect one, but the one in the footer is to be simple inline list, a very common scenario.
In either case it's often best to know which is the first and last link in a list so that borders or padding or something can be set slightly different on either or both to make the list even up..
so say for example your whole top navbar has rounded edges you might choose to apply the left corner graphic and a bit extra left padding to the "first" li and similarly the right side rounded edge to the "last" li you use the first and last class names by specifically targetting them using something like:
#header li.first {padding-left: 30px; background: url(..);}
#header li.last {padding-right: 30px; background: url(..);}
your footer nav list has no such fanciness but you would just like the listed items to have a vertical separator, which you do by applying a left border to all the li's except the first one to maintain the "separator effect" you can do this reusing the same classname and a bit of specificity:
#footer li {border-left: 1px solid #ccc;}
#footer li.first {border: 0;}
You have just reused the class name - by adding the ID in front of it you have simply targeted them separately via their previously identified area. Simply put both identified areas (header and footer) use the same classification (class name) for the list items inside them, - those list items ARE the first and last links in their <ul> that is what they are, that is what they are classified as! no need to go back to the HTML after the fact to dream up new/extra class names to get to them ;) - they can be specifically targeted and differently styled in the CSS via their ancestors already given ID this is what CSS specificity is about.
You don't actually need to know at the time of writing your page that what the actual styling is to be, or indeed if you'll need any, but you have classified those links.. just in case ;)
That is the simplest form of reusing classes just by making the CSS targeting more specific. Changes can be made sitewide via the CSS alone.
Chaining CSS Classes The other way, is chaining classes together, this involves HTML work and knowledge but some people find this theory easier.. (and yes I know not to name class names this way, but this for illustration only!)
CSS:
.redtext {color: #f00;}
.bold {font-weight: bold;}
.allcaps {font-variant: small-caps;}
HTML:
<p>Some Plain Text</p>
<p class="redtext">Some Red Text</p>
<p class="redtext bold">Some Red Bold Text</p>
<p class="redtext bold allcaps">Some Red Bold Text in small caps</p>
Now you see what looks like spaces in the class names (as mentioned regards the original problem) but it isn't - it's actually chaining the various class names together so you use the properties of each.
While the second method can have it's advantages in some cases, it's only advisable in hand-coding or WYSIWYG editing if you are editing the HTML via a HTML template page, as in only one change required to affect all the pages that that particular bit of HTML resides in, otherwise it kind of defeats the purpose of CSS specificity (the first method) and you may as well just put the CSS code itself inline if you're going to do it that way. This method does have very legitimate uses though, the main one is probably in Javascript or AJAX whereby the script dynamically chains an additional class onto an element say in order to toggle the display value for example.
Back to Basics: Lastly there is one more way to think about it, ID's should only be used once per page for a very valid reason, but it needn't always be just because the element is a main structural element or for a CSS reason, although it will help your CSS and Javascript hooks - if you have to use them.
An element with an ID can also be linked to via Fragment Identifier:
http://www.example.com/foo.html#bar
that's a bookmark, anchor, or jump link, it will take you to the foo page and scroll you to the element that has the ID of "bar" - the bit after the hash is identifying a fragment on that page if you like.. so that's the real reason you can only use one ID per page, you can never take the user to more then one destination on the same page -
just like a "you are here" map, you can't be two places at once! ;)
When to Use ID's or Classes in CSS It's not all about CSS really ;) - I find it easier to think about the page in plain text format and how I might like a
table of contents for that page to work if there was one, most times it's intuitive as to when to use an ID that way, for everything else use a class. In fact if you're visiting any pages that have a TOC at the top (list of links) and on clicking a link you are taken to a bit of content further down the page - if you view the source you will either find the "name" attribute has been attached to the element you've just jumped to, or it will have an ID (or both as "name" was the older attribute and it took browsers a while to all support the ID attribute properly for this purpose)
Obviously in this case you might land up with more ID's than you need for CSS purposes, but you don't have to use them in your CSS yet... though they might avoid you having to add a class in the future should you need to hook a style or script onto those elements
See:
Edward's visual example [seoconsultants.com] for more on this, the h2's all have ID's on them for Fragment
IDentification purposes but those same h2's are all styled the same by virtue of simply styling the h2 via the CSS, but say at some point in the future he wanted to add a different icon as a background image to each of those h2's or toggle the display of them on click, he would have no need to amend any HTML, it would be good to go..
many ways to achieve the same thing, but the last back to basics HTML method should provide a good place to start. And once the ID's are properly in place you might actually find you need very few classes, or at least it should be more obvious where you might need them
