Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'Website Coding & Programming Forum:' started by djb, Oct 6, 2010.

  1. 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?
     
  2. chris_17

    chris_17 Member

    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: Oct 6, 2010
  3. djb

    djb Member

    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!
     
  4. hotzigidi

    hotzigidi New Member

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

    :icon_wink:
     

Share This Page