homepage Welcome to WebmasterWorld Guest from 54.196.196.108
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Just change the external style sheet
...css zen garden style.
madcat




msg:3078753
 12:24 pm on Sep 11, 2006 (gmt 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

 

Setek




msg:3079599
 2:28 am on Sep 12, 2006 (gmt 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.

katana_one




msg:3079947
 12:02 pm on Sep 12, 2006 (gmt 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.

Setek




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

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

Ingolemo




msg:3080000
 12:52 pm on Sep 12, 2006 (gmt 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]

katana_one




msg:3080654
 8:53 pm on Sep 12, 2006 (gmt 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. :)

madcat




msg:3082361
 3:00 am on Sep 14, 2006 (gmt 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.

Setek




msg:3082385
 3:54 am on Sep 14, 2006 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved