What to do when you have lots of page structure variations

Forum Moderators: not2easy

Message Too Old, No Replies

What to do when you have lots of page structure variations

when doing CSS page layouts

TravelSite

10:50 am on Feb 22, 2007 (gmt 0)

In the past I only used CSS to control all formating - but now I'm attempting to use it for doing layouts.

But what happens when you have many pages all with slightly different layouts (excluding the header/footer/navigation)?

E.g. some information pages about widgets laid out one way, then a page about how people use widgets, a feedback form, a map page, etc etc.

Each of these pages/subsections have unique formats suitable for that particular page (though they retain the same header/footer/navigation).

Do you create one huge css file which holds all the unique structures for all the unique page formats used in the site? Or do you import the stylesheets you need for each page (doesn't this do away with their benefits)? Or do you use on page css formating for all of these things?

Any advice would be very welcome!

alias

7:29 am on Feb 23, 2007 (gmt 0)

I personally tend to use a global stylesheet like main.css and then, if needed, personal stylesheets for individual pages - maps.css, product.css, etc.
It ain't a good idea to put everything into one css file - it's a headache to edit one later on.

SuzyUK

9:50 am on Feb 23, 2007 (gmt 0)

if the pages can have similar MAIN divisions (by their name) you just want to style their contents differently you could add an ID to the html or body element to enable you to reuse a lot of the same properties but get a little more specific if you need to override them, the file needn't become huge becasue you're reusing most things

say on your feedback page you put an ID of feedback onto the <body> and within that page you have your header footer nav etc.. all the same - no extra css is necessary for them

but in the content area - and lets say it's already got an ID of "content" the same as the widgetpages - so far it's the same - but then you want the <h3> that's at the top of your feedback form which is within the content div to look different from the <h3> that would normally appear in the widgetpages you can get more specific and overrule the "norm"

e.g. regular rule for targetting most h3's in a sitewide content div might look like

div#content h3 {color: blue;}

but you want it to be red in the feedback page

body#feedback div#content h3 {color: red;}

the second rule will only be applied if the content div has an ancestor with an ID of feedback, that's a simple example but using the same theory you can control visibility, adjust widths and more of certain areas(subdivisions) - page dependantly.. me I would keep it the same sheet too. If I'm splitting sheets it wouldn't be page dependant it would be element dependant. but everyone has their own way of doing splits and it depends what you get used to

In you want to use this method I would advise not to think so much in terms of the end visual while planning but of more about common content areas/divisions - and bear in mind that an area /column, within a content area, can e.g. be empty, unfloated or collapsed as required.

Suzy

[edited by: SuzyUK at 9:52 am (utc) on Feb. 23, 2007]