Welcome to WebmasterWorld Guest from 220.127.116.11
Forum Moderators: not2easy
Should all elements be separate (nav, content/header div, footer, etc)? For instance, it seems to me that wrapping the nav bar within the content div (or something similar) would somehow cause trouble when building a completely different design with the sheet.
Any suggestions and ideas are appreciated, I just want to make sure I'm doing it right from the get go.
If you take a look at the CSS Zen Garden xHTML, you can see how they have hooks around every individual element that someone may want to customise - that's a good start.
I wouldn't put a menu
inside a content [code]div[/div], mostly because I don't believe the menu is semantically correct being "content".
I'd separate out header from menu, from content, from footer. I'd have a container for -everything-, an extra container just containing header, a container just containing content, and a container just containing the menu and the content's container.
Maybe a container just containing the footer too :)
That should provide you enough hooks to change a layout however you may please.
This is a lot more redunancy than most designs would need, but it will give your CSS a hell of a lot to play with.
The main thing you have to watch out for is code bloat; Too many divs and before you know it you'll have just as many HTML elements as you did back in the table days.
[edited by: Ingolemo at 12:57 pm (utc) on Sep. 12, 2006]
You could always add in more hooks later if you need them :)
After all, it's not set in stone like CSS Zen Garden's is - you have no choice but to use that xHTML file.
With your own, you can just add a class/ID/something in your header/footer/something and use it :)
I'd start out with that amount for now - if you find you need more, start adding more.