Just change the external style sheet

...css zen garden style.

[madcat]

I like the idea of just having to change one external style sheet and getting a brand new design site wide. But am having a bit of trouble understanding the best way to layout the HTML page.

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.

Thanks

[Setek]

I have changing of stylesheets to make an entirely different layout on my website.

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

div

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.

[katana_one]

I do things pretty much as Setek suggested, but with the addition of a "wrapper" div that contains all of the elements (divs) of the page. It just adds a little bit more control if you need it, and it doesn't get in the way if you decide not to utilize it.

[Setek]

Yeah, that's what "the container for -everything-" part meant :)

[Ingolemo]

In case the descriptions aren't clear enough for you:

html#(name-of-page)
+body
¦+div#pagecontainer
¦¦+div#header
¦¦¦+h1
¦¦¦+div#tagline
¦¦+div#contentcontainer
¦¦¦+div#maincontent
¦¦¦+div#sidecontent
¦¦¦¦+div#menu.panel
¦¦¦¦+div.panel
¦¦¦¦+div.panel
¦¦¦¦+...etc...
¦¦+div#footer

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]

[katana_one]

Yeah, that's what "the container for -everything-" part meant :)

Ah, ok. I didn't read it that way the first time - I just thought you were being redundant. My bad. :)

[madcat]

So basically, keep as much separate as possible.

Thanks for the suggestions.

I know the csszengarden html page is fairly busy though - i guess to suit all of the different possible styles. i was hoping to keep my code a bit trimmer.

[Setek]

You can, assuming you're happy with that level of customisation.

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.