Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Just change the external style sheet

...css zen garden style.



12:24 pm on Sep 11, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

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.



2:28 am on Sep 12, 2006 (gmt 0)

10+ Year Member

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

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.


12:02 pm on Sep 12, 2006 (gmt 0)

10+ Year Member

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.


12:19 pm on Sep 12, 2006 (gmt 0)

10+ Year Member

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


12:52 pm on Sep 12, 2006 (gmt 0)

10+ Year Member

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

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]


8:53 pm on Sep 12, 2006 (gmt 0)

10+ Year Member

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. :)


3:00 am on Sep 14, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

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.


3:54 am on Sep 14, 2006 (gmt 0)

10+ Year Member

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.


Featured Threads

Hot Threads This Week

Hot Threads This Month