Welcome to WebmasterWorld Guest from 54.159.89.7

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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 15, 2002
posts:971
votes: 0


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

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

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts: 646
votes: 0


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.

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

Full Member

10+ Year Member

joined:Apr 9, 2004
posts:250
votes: 0


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 Sept 12, 2006 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts: 646
votes: 0


Yeah, that's what "the container for -everything-" part meant :)
12:52 pm on Sept 12, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 14, 2005
posts:117
votes: 0


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]

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

Full Member

10+ Year Member

joined:Apr 9, 2004
posts:250
votes: 0



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 Sept 14, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 15, 2002
posts:971
votes: 0


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 Sept 14, 2006 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts:646
votes: 0


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.