Multiple style sheets... or is there another way?

**djb** · 10-06-2010, 06:20 PM

I’m putting together a website at the moment and some of the pages are different widths (don’t ask, not my idea). Ideally I’d just like to have one stylesheet for the whole website just to keep things simple but these three widths need to change depending on the page template being used:

body { width: 960px; }
#centre { width: 900px; }
#centre-nav {width: 880px;}

Is there a clever way of doing this all in one stylesheet? #centre and #centre nav I could just duplicate and change the names slightly per page, but obviously I can’t do with this body... or can I?

**chris_17** · 10-06-2010, 08:00 PM

Use a body class. So set a body class for each page then just call it in the CSS.

Example:

Homepage

HTML Code:

<body class="home">

<div id="container">
     <!--Content-->
</div>

</body>

Then in the CSS:

Code:

body.home #container{
	width:960px;
	margin:0 auto;
        ...
}

Another Page would be

HTML Code:

<body class="about">

<div id="container">
     <!--Content-->
</div>

</body>

CSS:

Code:

body.about#container{
	width:460px;
	margin:0 auto;
        ...
}

EDIT: I also dont understand why you are changing the width of the body? It would be more accessible and usable surely if you left it so it could be a bit more responsive???

**djb** · 10-06-2010, 09:59 PM

I got accused of having ‘divitis’ in a previous post, so for this site I decided to try it a different way and set the body width to centre the content. I’d normally use a div to contain all the elements and plonk them in the centre. I may have lost the plot and gone off in the wrong direction though!

From what you’re saying though, which sounds perfect, I need to do this:

Code:

body.960wide { width: 960px; }
body.960wide#centre { width: 900px; }
body.960wide#centre-nav {width: 880px;}

Code:

<body class="960wide">

<div id="centre">

<div id="centre-nav">
</div>

</div>

</body>

And then for the larger pages this:

Code:

body.1200wide { width: 1200px; }
body.1200wide#centre { width: 1140px; }
body.1200wide#centre-nav {width: 1120px;}

Have a look if you want, although it’s work in progress and I will be mucking around with the style sheets!

**hotzigidi** · 10-19-2010, 12:53 PM

Make sure the body is set a class and not an ID. It causes less problems with the developers.

Thread: Multiple style sheets... or is there another way?

LinkBack

Thread Tools

Display

Multiple style sheets... or is there another way?

Similar Threads

Multiple Small Print Runs?

Digital Printing on Vinyl Sheets, Help!

Multiple Links to same image

Multiple Radio Buttons

Style over substance, but oh what style it is...

Posting Permissions