Conflicting CSSs solutions? HELP!?!

need to apply 1 sheet to left menu and 1 to top menu

[GeddyLeeRocks]

Hello All,
I am building a site in DW. It is template driven. The top/header has navigation using some CSS. I built the left navigation separately with the styles in the styles tags <styles> above the html/body tags. When I copied and pasted the styles into the CSS sheet I am using for the entire site it blows the header out of the water. I need some sort of solution to have the left navigation get those style without the header getting them too. Any way to solve this?
Thanks
R

[nigassma]

Assigning selectors with different names such as a few psuedo-classes...

.leftbar and .topbar and giving them their own styles should work.

if you want to style links differently it would be

.leftbar a and .topbar a

or <li>s differently

.leftbar li and .topbar li

or even use div selectors

#leftbar li and #topbar li

Read up on selectors here

[w3.org...]

[bedlam]

I need some sort of solution to have the left navigation get those style without the header getting them too. Any way to solve this?

Yes :)

You need to explore contextual selectors [google.com]. Very briefly, contextual selectors in a stylsheet allow you to target elements based on the context in which they occur. Try the following very simple example in an html page:

CSS

a { color:#009; }
p a { color:#f90;font-weight:bold;}
p a span { color:#fff;background:#f90; }
div#greenLinks a { color:#090; }
div#redLinks a { color:#900;font-style:italic; }

HTML

<a href="#">This link is blue and the same weight as</a> normal text.
<p><a href="#">This link is orange and bold, except for the following word: "<span>foobar</span>".</a></p>
<div id="greenLinks">Links in here are <a href="#">green</a>!</div>
<div id="redLinks">Links in here are <a href="#">red and italic</a>!</div>

-B

<added>
nigassma, just saw your post. You're quite right about contextual selectors.

Assigning selectors with different names such as a few psuedo-classes...

But 'pseudo-classes [w3.org]' are different from classes; the common link states such as 'link', 'visited', 'hover', 'active' and 'focus' are pseudo-classes, but something like '.top' or '.leftMenu' are just plain classes.

And incidentally, though defining page sections with classes such as ".leftbar a and .topbar a" is both correct and permissible, uniquely occurring areas on a page are best specified with ids - they're more useful in that they're a) more specific, and b) provide a little more information about the containers they're attached to by designating them as unique on the page.

or even use div selectors

#leftbar li and #topbar li

Lastly (just to clarify), an id selector such as '#topbar' has nothing inherently to do with div elements - ids can be applied to any element including divs...

Sorry for nitpicking...
</added>

[edited by: bedlam at 6:41 pm (utc) on July 22, 2005]

[GeddyLeeRocks]

Thanks again Nigassma

there still seems to be conflict -

LEFT BAR NAV>

.leftBarNav *{margin:0;padding:0;}
#container{width:510px;}
#menu{width:180px;background:#609f83;font:0.8em/1.7 "Lucida Grande", Helvetica, Arial, sans-serif;margin-right:10px;}
#text{float:right;width:200px;font-size:1.0em;background:#000;border:1px solid #fff;}
#text p{padding:2px 15px;}

a{display:block;text-decoration:none;line-height:30px;border-top:1px solid #fff;}
ul{list-style-type:none;text-align:left;margin-left:5px;}
li{display:inline;}

#main li a:link,ul#main li a:visited {background:#609f83;color:#000000;border-top:1px solid #fff;}
#main li a:link:hover,ul#main li a:visited:hover {background:#609f83;}

#ul_one, #ul_two, #ul_three, #ul_four {display:none;margin-left:5px;}

ul#main li ul.sub li a:link,ul#main ul.sub li a:visited {border-top:1px solid #fff;background:#CDDBB7;color:#333;padding:5px;line-height:20px}
ul#main li ul.sub li a:link:hover,ul#main ul.sub li a:visited:hover {background:#D8E3C6;color:#fff;padding:5px;line-height:20px}

TOP MENU>
.topMenu{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color:#FFFFFF;
font-size: 12px;
padding-top: 0px;
padding-right: 3px;
padding-bottom: 0px;
padding-left: 3px;
text-align: center;
}

I can't seem to see the forest throught he trees here

[tedster]

When I copied and pasted the styles into the CSS sheet I am using for the entire site it blows the header out of the water.

This sounds like a cascade issue. The styles were fine when they were in the <head> section of the html document, correct? But you pasted them into the global .css file and then everything went wonky.

Did you paste them in at the VERY END of the .css file? That way they should still cascade in over whatever rules you declared earlier in the .css file -- the same as having them in a <style> tag in the head. If you paste them in earlier, rules that are further down the file are also further down the "cascade" and will take precedence.

[edited by: tedster at 8:09 pm (utc) on July 22, 2005]

[nigassma]

I was hoping someone would nitpick it. I feel like I am a highschool kid in Spanish 3 when it comes to CSS. I know enough to understand how it works, but sometimes the words come out wrong. :)