How best to consolidate multiple CSS pages into one

HTML & CSS
1

I am currently working on a project where the client asked for some changes to an existing site. The original designer is out of business but when I downloaded all the HTML and CSS pages, I found that he created a menu and content CSS page for every page in the site. There are about 12 or 13 total pages. I want to consolidate all code together in one easy to handle CSS page. I forgot exactly how to do this. I am also updating from HTML to XHTML. Do I add a div that will link back to each page (which are all different so that is probably why he originally set it up that way)? Something like:

<body>
<div id=“page 1 or 2 or 3, etc”>
blah blah blah
</div>
</body>

What would be the easiest to do so that I can take the existing CSS pages, copy and paste them to one page and rename each page so that it points to the correct area of the CSS page? This would also be for the CSS menu pages.

Here is the site in case you want to see the pages that I am dealing with and what I am trying to do. I am also making the site larger but I am okay with fixing that.

Thanks.

2

Just copy and paste everything in a single css sheet and link to that sheet?

3

Problem is that all HTML pages are different in how things are placed. That is why he set up separate CSS pages. I want to add a line of code on each HTML page so that it will point to the correct layout on the new and improved CSS page. Does that make sense?

4

You mean that on the products page the images and text are different placed then e.g. on the stages page? Well, that’s because of the css… it doesn’t matter if it’s in one stylesheet. If that stylesheet is linked to in every page, each page will pick up the appropriate css rule. You want to avoid having several css sheets, especially for a small site like this. But by pasting everything in a single sheet, you need to make sure that there are no conflicting rules.

5

Maybe an example would make it clear: suppose on the products page you want the image floated right and on the stages page you want them floated left. You wrap them in a div with an id (e.g.) products_page and float them right. For the stages page, you use a div with id stages_page and float them left. All this goes in the same css sheet. You might need to adjust the html so the divs are called products_page and stages_page. You link to one stylesheet and the products page will pick up the float right and the stages page the float left.

Get the idea ? :slight_smile:

6

Hi,
I see what you are saying, on the index.html page the css links look like this -

<link href="[B]indexmenus.css[/B]" rel="stylesheet" type="text/css">
<link href="[B]indexcontent.css"[/B] rel="stylesheet" type="text/css">

Then on the plan.html page it has this -

<link href="[B]planmenus.css[/B]" rel="stylesheet" type="text/css">
<link href="[B]plancontent.css[/B]" rel="stylesheet" type="text/css">

What you are wanting is to have “Page Specific CSS” and that can be done by setting an ID or Class on the body element and then using combined selectors in your new css. It is usually best to use a class on the body element when catering to IE6 since it has trouble with concatenated selectors of both ID, or both class.

The link I gave above uses a class on the body which gives the freedom to set IDs on all your major divs without choking IE6.

I have done the same thing on this Current Page Highlighted navbar, just click through the links and view the page source of each page and you will see that body class. Then you can see how it effects the selectors in [URL=“http://www.css-lab.com/demos/navbar/current-page/nav.css”]The CSS.

Your page is also missing a complete doctype, it is missing the referring url.
It will be worth your while to validate the page as there are several other errors as well. :wink:

7

Hi Ray, the page specific css is another option i guess, if the OP doesn’t want to change the html to match eventual rules i guess

8

Thanks Rayzur. I am validating each page as I am changing it to XHTML transitional. I have found many errors that have already been fixed locally. I have not uploaded anything yet. The link that I gave is the original site.

Unfortunately the HTML code that the former designer used is pretty much the same for each page so that is where I think I will run into problems. He has generic paragraph01, paragraph02, etc and image01, image02, etc. I don’t want to have to rename everything so that is why I just want to add something like page 1 on the HTML page and have it follow the rules for page 1 in the CSS page. Am I not thinking this through correctly when I believe I can add <body page 1> or something similar? I looked at the code from the link you gave me and this is not what I am looking to do since all the content is different on each page. I think I am confusing everyone because I feel very confused myself as to what I am trying to say.

9

I think how much trouble you will have depends on what selectors were used. If you have more than one CSS file using the same selector but with different rules you’re going to have problems. If you don’t want to change the mark-up (much) you could do what you’re starting to think about.

eg. if one page’s CSS is
#nav_bkgnd {float: right;}
but another’s is
#nav_bkgnd {float: left;}
you could give individual pages a unique “parent” id eg.
<body id=“blue”>
and then change the CSS for that page from
#nav_bkgnd {
to
#blue #nav_bkgnd {

Either way you’re probably going to need to edit something.

10

So I can put <body id=“page 1”> on the HTML page and then all the CSS code for that particular page add #page 1 indexcontent {}, etc and that should work? If so, then it shouldn’t be that difficult to change a little bit of code that way.

I guess I will have to do that for the menus as well since he created a page for each page’s menu. He used an image that shows like this HOME HOME HOME with each image being different to show an up image, a down image, and an active image. I have worked with something similar on my business site and tried to change it like that but ran into too many problems so I don’t want to really change the menu bar. On my business site they are set up one on top of another. You can see it at www.foxdenwebsolutions.com.

11

That will choke IE6 as I mentioned above, it will ignore the first ID in the selector.

That is why I suggested using a class for the body so it frees you up to set IDs as you normally would on your main divs.

But yes, either way something is going to have to change. :slight_smile:

12

At this time (and I know I probably shouldn’t say this) but I don’t test for IE6 any more. I know it is still being used but if that is the case, then they need to upgrade to IE7 or IE8 and get it over with! I don’t test for Netscape any more either.

13

Whether you support IE6 or not is entirely up to you, but the example that Mittineague gave was the same method I was proposing. I was just using a class on the body which is all it takes to get IE6 to cooperate.

14

Thanks for catching that

@cgacfox maybe you ignore IE6

But not eveyone else does (yet). And I certainly wouldn’t want them to find this thread and follow buggy advice.

And my apologies Rayzur, I should have looked more closely at your reply, that’s what I get for browsing with a half dozen tabs open. It seems counter-intuitive to have a unique class, but if it works, so be it.

15

Rayzur - my bad…I did not see the other links in your original post. I checked it out and I believe that is exactly what I want to do.

So…on the index page I would put <body class=“home”> and then on the CSS page I would put

/* -------- start home menu buttons ------------*/

. home #menuhome a {
position:relative;
display:block;
width:83px;
HEIGHT:23px;
margin: 0;
padding: 0px 0px 0px 0px;
background: url(…/images/menuhome.gif) 00 no-repeat;
background-position: -166px 0;
text-decoration: none;
left: 85px;
top: -158px;
visibility: visible;

}

.home #menuplan a {
position:relative;
display:block;
width:83px;
HEIGHT:23px;
margin: 0;
padding: 0px 0px 0px 0px;
background: url(…/images/menuplan.gif) 00 no-repeat;
text-decoration: none;
left: 185px;
top: -181px;
visibility: visible;

}
.home #menuplan a:hover {
background-position: -83px 0;
color: #FFFF00;
}
.home #menuplan a:active {
background-position: -166px 0;
color:white;
}

.home #menuidentify a {
position:relative;
display:block;
width:83px;
HEIGHT:23px;
margin: 0;
padding: 0px 0px 0px 0px;
background: url(…/images/menuidentify.gif) 0 0 no-repeat;
text-decoration: none;
left: 285px;
top: -204px;
visibility: visible;

}
.home #menuidentify a:hover {
background-position: -83px 0;
color: #FFFF00;
}
.home #menuidentify a:active {
background-position: -166px 0;
color:white;
}

.home #menustages a {
position:relative;
display:block;
width:83px;
HEIGHT:23px;
margin: 0;
padding: 0px 0px 0px 0px;
background: url(…/images/menustages.gif) 0 0 no-repeat;
text-decoration: none;
left: 385px;
top: -227px;
visibility: visible;

}

.home #menustages a:hover {
background-position: -83px 0;
color: #FFFF00;
}
.home #menustages a:active {
background-position: -166px 0;
color:white;
}

.home #menuproducts a {
position:relative;
display:block;
width:83px;
HEIGHT:23px;
margin: 0;
padding: 0px 0px 0px 0px;
background: url(…/images/menuproducts.gif) 0 0 no-repeat;
text-decoration: none;
left: 485px;
top: -250px;
visibility: visible;

}
.home #menuproducts a:hover {
background-position: -83px 0;
color: #FFFF00;
}
.home #menuproducts a:active {
background-position: -166px 0;
color:white;
}

.home #menuclientele a {
position:relative;
display:block;
width:83px;
HEIGHT:23px;
margin: 0;
padding: 0px 0px 0px 0px;
background: url(…/images/menuclientele.gif) 0 0 no-repeat;
text-decoration: none;
left: 585px;
top: -273px;
visibility: visible;

}

.home #menuclientele a:hover {
background-position: -83px 0;
color: #FFFF00;
}
.home #menuclientele a:active {
background-position: -166px 0;
color:white;
}

.home #menuportfolio a {
position:relative;
display:block;
width:83px;
HEIGHT:23px;
margin: 0;
padding: 0px 0px 0px 0px;
background: url(…/images/menuportfolio.gif) 0 0 no-repeat;
text-decoration: none;
left: 685px;
top: -296px;
visibility: visible;

}

.home #menuportfolio a:hover {
background-position: -83px 0;
color: #FFFF00;
}
.home #menuportfolio a:active {
background-position: -166px 0;
color:white;
}

.home #menucontact a {
position:relative;
display:block;
width:83px;
HEIGHT:23px;
margin: 0;
padding: 0px 0px 0px 0px;
color:#FFFFFF;
background: url(…/images/menucontact.gif) 0 0 no-repeat;
text-decoration: none;
left: 785px;
top: -319px;
visibility: visible;

}

.home #menucontact a:hover {
background-position: -83px 0;
color: #FFFF00;
}
.home #menucontact a:active {
background-position: -166px 0;
color:white;
}
/* -------- end home menu buttons ------------*/

/---------start home content--------/

.home #indexcontent {
position:relative;
width:945px;
height:330px;
background:;
padding: 0px;
margin-top: -330px;
margin-right: auto;
margin-left: auto;
border: 0px solid #ff00ff;
text-align:left;
z-index: 4;
overflow: hidden;

}
.home #image01 {
position:relative;
width:133px;
height:177px;
background:#FFFFFF;
margin:0px 0px 0px 0px;
border: 1px solid #C4B795;
left: 50px;
top: 10px;
background: url(…/images/image01.jpg);

}

.home #image02 {
position:relative;
width:177px;
height:133px;
background:#FFFFFF;
margin:0px 0px 0px 0px;
border: 1px solid #C4B795;
left: 250px;
top: -5px;
background: url(…/images/image02.jpg);
}

.home #image03 {
position:relative;
width:177px;
height:133px;
background:#FFFFFF;
margin:0px 0px 0px 0px;
border: 1px solid #C4B795;
left: 500px;
top: -310px;
background: url(…/images/website034.jpg);
}

.home #image04 {
position:relative;
width:133px;
height:177px;
background:#FFFFFF;
margin:0px 0px 0px 0px;
border: 1px solid #C4B795;
left: 760px;
top: -320px;
background: url(…/images/image04.jpg);
}

.home #paragraph01 {
position:relative;
width: 170px;
left: 250px;
top: -575px;

}

.home #paragraph02 {
position:relative;
width: 192px;
left: 500px;
top: -555px;

}

.home #topimage {
position:relative;
width:500px;
height:132px;
background:#FFFFFF;
margin:0px 0px 0px 0px;
border-right: 1px solid #000000;
left: 445px;
top: -132px;
background: url(…/images/topimgindex.jpg);

}

.home #submenu01 {
position:relative;
width:700px;
margin:0px 0px 0px 0px;
left: 25px;
top: -352px;
overflow: hidden;
}

.home .subnav {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #4C4E2B;
}

.home .subnav a:link {
color: #4C4E2B;
text-decoration: none;
}

.home .subnav a:visited {
color: #666666;
text-decoration: none;
}

.home .subnav a:hover {
color: #FF0000;
text-decoration: none;
}

.home .subnav a:active {
color: #333333;
text-decoration: none;
}

.home .redtext {
color: #FF0000;
}

/-------end home content-------/

I just want to make sure I have the syntax correct before I go changing a bunch of code. I want all menu CSS and content CSS on 1 page. Please look through the code and let me know if I am off anywhere and what I should change it to as I am not by any means an expert at CSS yet. This will end up being one HUGE CSS page but I really need to colsolidate all code so that it is easier to handle in the future whether it is me that is doing changes or someone else. Thanks.

16

Hi,
Yes, that is the general idea.
I would suggest that you rebuild the menu using a UL though. You can just float the list items left and get rid of all that relative position you are using. That will reduce your css dramatically.

The old page just has a series of divs and nested anchors for the nav. It looks like you are doing the same again. If you are going to the trouble of rebuilding the page then use an unordered list (ul) with list items (li).

You will still need IDs or classes on the anchors since you are using specific BG images for each one. The navbar example I posted above will show you how that is done too.

17

OK thanks Rayzur I will redo the menu as an unordered list with list items. If I run into any problems converting it, I will post what I am stuck on. Thanks for your help.

18

One thing I have noticed as I go through each page and make it larger before I combine the CSS into one page. There are many positions that are all negative and each page even though it may be the same item there are different negative values for each. This is making it really difficult to get everything aligned properly. I am almost contemplating starting over from scratch. Why would there be so many negative values for placement of items?

19

Hi,
Yes, I would rebuild the site completely. The previous designer used way too much Relative Positioning (RP). The problem with RP elements is that they are only moved visually, they still occupy their original place in the page.

The more RP elements you have compensating for each other the worse it gets as you go down the page.

Learn more about RP here

The thing to remember about relative positioning is that it’s only the generated box that is shifted. The element still remains where it was in the static document flow. That’s where it “takes up space” as far as other elements are concerned. This means that the shifted box may end up overlapping other elements’ boxes, because they still act like the relatively positioned element has remained where it should be, before the positioning was applied. As far as the document flow is concerned, the element has not moved—it is just the end visual result that shows the box being moved.
You should just be using static blocks and floats to lay the page out with. Then you can fine tune their placement with margins. :wink:

20

Well I have decided to start from scratch and am trying to figure out the navigation. I have used the Sprite navigation solution before but that was with images one on top of the other. This site has the images next to each other for the different stages. I have attached a copy of the menu image for the home page. How do I go about doing this? Do I take all the button images and make one image as I did with www.foxdenwebsolutions.com? I want a little space in between each button. The “red bar” at the top of the site works well for not showing white space in between the buttons. I am trying to create one nav solution for CSS instead of the current nav CSS for each page. There are a total of eight separate nav images.