Another CSS overriding question [Archive]

Husker72

03-18-2007, 06:29 AM

I'm tired of pulling my hair out searching the web for answers and figured this is the best place to ask. I'll start by first admitting that I'm very new to the whole CSS idea and how html has evolved since I last designed a webpage. That being said I've been asked to redesign a webpage and I'm using Dreamweaver 8 to accomplish this.

In Dreamweaver, I've designed the template and am satisfied with the layout and have left a large cell in the center for the "page content" that will be used on idividual pages on the site. At the bottom of the page is a table named #footer and has a purple background in each cell with Footer.css set to control the text/links in these, including a:active, a:visited, a:link, and a:hover. The text in the footer is controlled to be white (over the purple background) in all situations except a:hover in which the link text is changed to italic and red. Everything works great. Now the problem.

As can be expected, in the area designed to to contain the main page content (editable region (cell) in the template named "main") all the links put in here are overriden by the Footer.css file. This doesn't jive well as the background in this main area is white, so the Footer.css defined in the template makes all the links in the main area on all .html pages white as well and thus unreadable.

I have no idea how to keep my formatting of the footer area links white on the purple background with the hover attribute intact and yet links in other areas of the page purple text on the white background (which I've set up as being controlled by commonpage.css in which the identical attributes of the above mentioned footer.css are defined except text is purple instead of white). I know they are conflicting attributes and that the footer attributes win out as it is named last in the .css style list.

Here are applicable code areas:
From the <head> section

<style type="text/css">

</style>
</head>

From the main area section:

<tr>
<th width="687" height="826" align="left" valign="top">  </th>


From the footer area:

<tr>
<th height="50" valign="top"><table width="100%" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#6600cc" id="Footer">

<tr>
<td class="Footer" width="137" height="25"><a href="mailto:xxxxxxx">Contact Us</a></div></td>
<td class="Footer" width="137"><div><a href="mailto:xxxxxx">Webmaster</a></div></td>
<td class="Footer" width="137"><div><a href="https://www.usacycling.org">USA Cycling</a></div></td>
<td class="Footer" width="137"><div><a href="join.html">Join</a></div></td>
<td class="Footer" width="139"><div><a href="sitemap.html">Site Map</a></div></td>
</tr>
<tr>
<td height="25"> </td>
<td> </td>
<td class="Footer" ><div><em>2007 KSU Cycling</em></div></td>
<td> </td>
<td> </td>
</tr>

All help is greatly appreciated, Thanks.

GhettoT

03-18-2007, 08:41 AM

OK, its late so excuse my spelling and such... but here is what I would do.

In your footer.css do this,

make a div "class" which would look like this:

.class_name {
ALL CSS STUFF ;
}
Make the class name uniqe from all others. Then in that same file add this:

.class_name a:active{
}
.class_name a:visited{
}
.class_name a:link {
.class_name a:hover{
}

I think you are running into overriding class/id names... Good-Luck!

GhettoT

03-18-2007, 03:03 PM

Also forgot to mention last night...

Now that you have a CSS class created you can do this in your HTML:

<div class="class_name">

</div>

Now everything within the <div class="class_name"></div> will be affected by everything within the .class_name class. Including the links.

Husker72

03-18-2007, 11:23 PM

Dude...you're a lifesaver! That was easy and did the trick...thanks!!!