CSS + multiple pages with differing designs

lenora · 26 December 2008 at 12:30AM

I have created a site with 5 different pages, each page has its own unique style - same positioning just different colours - so i have created a css file for each page. Each stylesheet is configured to make the page look good in IE.

Yesterday I realised that it looked crap in FF, Google Chrome and Safari. I set about creating a stylesheet which would fix some of those errors but I now realise that i would have to create another 5 stylesheets - one for each page, so each page would page would end up with 2 stylesheets.

This is not really sensible, am I missing something here, is there a way to cut down on the number of stylesheets I have?

TediousPhoenix · 26 December 2008 at 2:14AM

You only need one (use different classes/ids as necessary) and link to it in the header by using code like this:

<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>

See http://www.w3schools.com/css/ for more info.

But I imagine your site doesn't display propably due to the IE Box Model Bug - http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Check that out and code around it, it'll save time in the future.

TediousPhoenix · 26 December 2008 at 2:36AM

Just pulled out some of my code and the work around I use:

#main !!
    float: left;
    width: 450px;
    background-color: #ffffff;
    border: 1px;
    border-style: solid;
    border-color: #e0d8e8;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    padding: 10px;
    padding-top: 7px;
    margin-bottom: 7px;
    background: url(images/dice.gif) no-repeat bottom right;
}

 /* Fix IE box problem \*/
* html div.main !!
    width: 470px;
}

/* End */

Basically that's saying that if the browser is IE the width will be 470px, anything else will be 450 plus 10 to the right padding and 10px for the left padding, thus displaying the same. The Wikipedia page I linked to above has good diagrams explaining this.

That code isn't very efficient and I probably could have written it on half the number of lines... but you get the jist!

Merry Christmas!

Edit: The two !! are supposed to be open curly brackets, but the editor doesn't like them!

lenora · 26 December 2008 at 6:49PM

I'm not sure if you quite understand what I mean, so I have

about.htm
index.htm
qualifications.htm
cv.htm
career.htm

and then I have a corresponding stylesheet for each:

about.css
index.css
qualifications.css
cv.css
career.css

If I do what am thinking of doing which is to create another set of stylesheets for Safari/FF/Google Chrome I would have 10 stylesheets. I wanted to know if there is a more efficient way of doing this?

Thanks
Lenora

Xaviera · 26 December 2008 at 7:30PM

What kind of errors are you getting re; the display? Can you be more specific? Would help us help you

You shouldn't need seperate style sheets for different browsers no, no, no! You just need to style the one stylesheet to work in different browsers. :cool:

Are you using dreamweaver?

M4RKM · 26 December 2008 at 8:51PM

aaah.... age old, design for IE, and it looks crap in everything else..

i design for FF, and suprisingly, it normally looks ok in IE...

just wait til IE8, and all these IE5/6/7 designs will break, and web designers are gonna have some great fun on their hands....

and, i agree, you only need 1 CSS file, and just different id's and classes in there...

M

FreheitOverture · 26 December 2008 at 10:33PM

Or you could copy everything from the main div and create a new style sheet which is called after the other stylesheet if the browser is IE, and then overwrites (I think) anything similar from the previous CSS sheet.

<link rel="[B]style[/B][B]sheet[/B]" href="generalstuff.css" type="text/css"> 
<!--[[B]if[/B] [B]ie[/B]]> 
<link rel="[B]style[/B][B]sheet[/B]" href="[B]ie[/B]basic.css" type="text/css"> 
<![end[B]if[/B]]-->

Unless you have many different bits that are different, then it may just be a bit of a mess

TediousPhoenix · 26 December 2008 at 10:46PM

You will only need one style sheet for your whole website.

The positioning you say is the same, so it can be repeated. Let's say you have a navigation menu on the left hand side and the main content to the right of that. The navigation, let's call it 'nav', may be 250px wide, the content could be 500px wide and we'll call it 'main'.

So our HTML would look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Home</TITLE>

<link rel="stylesheet" type="text/css"href="style.css" />

</HEAD>

<BODY>

<div id="nav">
<!--All our navigation links
Home
About
Qualifications
CV
Career
etc.
-->
</div>

<div id="main">
<!-- And all your content would go here -->
</div>
  
</BODY>
</HTML>

So our CSS will look something like this:

div#nav !!
        width:250px;
        float:left;
        padding-left: 20px;
        margin-left: 10px;
}


div#main !!
        width:500px;
        float:left;
        padding-left: 20px;
        margin-left: 10px;
}

Now, we want to sort out the problem with IE, so we add a few lines of code so that an IE browser will see it how we think it will look.

div#nav !!
        width:250px;
        float:left;
        padding-left: 20px;
        margin-left: 10px;
}

* html div.nav !!
    width: 280px;
}


div#main !!
        width:500px;
        float:left;
        padding-left: 20px;
        margin-left: 10px;
}

* html div.main !!
    width: 530px;
}

Now, lets say that you want the content of each page to be a different colour, we could have something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Home</TITLE>

<link rel="stylesheet" type="text/css"href="style.css" />

</HEAD>

<BODY>

<div id="nav">
<!--All our navigation links
Home
About
Qualifications
CV
Career
etc.
-->
</div>

<div id="main">
<span class="bodytext">
<p class="home">This could be the text you have on your Home page. This could be red, for example. You can define any other attributes in the CSS, like size, font, etc.</p>
</span>

</BODY>
</HTML>

Our CSS will now look like this:

/*Layout*/

div#nav !!
        width:250px;
        float:left;
        padding-left: 20px;
        margin-left: 10px;
}

* html div.nav !!
    width: 280px;
}


div#main !!
        width:500px;
        float:left;
        padding-left: 20px;
        margin-left: 10px;
}

* html div.main !!
    width: 530px;
}

/*Text*/

.BodyText !!
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: 9pt;
        color: #000000;
}


p.home !!
        color: #FF0000;
}

What we have done here is to say that all text will have attribute of 'bodytext' as long as they are in the span class tag. And anything in the p class of 'home' will be red.

Now, let's look at another page of your site, like you CV page. The HTML may look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>CV</TITLE>

<link rel="stylesheet" type="text/css"href="style.css" />

</HEAD>

<BODY>

<div id="nav">
<!--All our navigation links
Home
About
Qualifications
CV
Career
etc.
-->
</div>

<div id="main">
<span class="bodytext">
<p class="cv">This could be the text you have on your CV page.  Let's say for argument's sake that you wanted this to be blue.</p>
</span>
</div>
  
</BODY>
</HTML>

Your CSS would then look like this as all we need to do is add a class to the paragraph tag for the CV page:

/*Layout*/

div#nav !!
        width:250px;
        float:left;
        padding-left: 20px;
        margin-left: 10px;
}

* html div.nav !!
    width: 280px;
}


div#main !!
        width:500px;
        float:left;
        padding-left: 20px;
        margin-left: 10px;
}

* html div.main !!
    width: 530px;
}

/*Text*/

.bodytext !!
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: 9pt;
        color: #000000;
}


p.home !!
        color: #FF0000;
}

p.cv !!
        color: #0300FF;
}

So as you can see from my very simplistic example, we will only need one style page for a whole website; we just build it up as we need to. We use IDs when we define them once in a page - like the navigation bar - and use classes if we want to use them more than once - like in text in different places.

I've got the beta IE8 and all my sites display correctly so either IE ignores * html in the CSS or it works off W3C correctly... I haven't looked into it, so I don't know!

EDIT: And I still can't get the open curly brackets in the CSS to display properly!

M4RKM · 27 December 2008 at 1:08AM

TediousPhoenix..

wow... great example, and simply explained..

i wish you could have told me that a few years ago when i was teaching myself CSS....

M

TediousPhoenix · 27 December 2008 at 2:40AM

markymoo wrote: »

TediousPhoenix..

wow... great example, and simply explained..

i wish you could have told me that a few years ago when i was teaching myself CSS....

M

I wish someone had taught me when I first started too! It took me hours and quite a few websites to figure it out!

M4RKM · 27 December 2008 at 10:28AM

yeah, many hours, other websites, and the trusty CSS book i have on my desk....

M

CSS + multiple pages with differing designs

Comments

Confirm your email address to Create Threads and Reply

🚀 Getting Started

Categories

Is this how you want to be seen?

Get our FREE Weekly email full of deals & guides - and it’s spam-free