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

djb

djb

Member
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?
 
Use a body class. So set a body class for each page then just call it in the CSS.

Example:

Homepage

HTML: 
<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: 
<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???
 
Last edited:
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!
 
Make sure the body is set a class and not an ID. It causes less problems with the developers.

:icon_wink:
 
You must log in or register to reply here.
Back
Top