Forum Moderators: not2easy

Message Too Old, No Replies

Problems with differentiating links

         

Enigmatic

5:29 pm on May 4, 2004 (gmt 0)

10+ Year Member



I'm in the midst of building a new site that uses a horizontal CSS menu. My CSS document is therefore controlling the link effects on rollover, hover, etc. for that menu. My questions is, how do I go about controlling the colors and effects of other links, other than the menu, without effecting the horizontal menu itself? Here is my coding for the menu. Thanks in advance for any help.

#navcontainer ul
{
padding: .2em 0;
margin: 0;
list-style-type: none;
background-color: #333333;
color: #CCCCCC;
width: 760px;
font: bold 76% arial, helvetica, sans-serif;
text-align: center;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}

li { display: inline; }

li a
{
text-decoration: none;
background-color: #333333;
color: #CCCCCC;
padding: .2em 1em;
border-right: 1px solid #000000;
}

li a:hover
{
background-color: #CCCCCC;
color: #333333;
}

Bonusbana

5:51 pm on May 4, 2004 (gmt 0)

10+ Year Member



When writing
li a { [attributes] } 
you specify the links for all lists in your document that uses the css. If you want to write attributes for lists in your #navcontainer only, and not for the rest of your lists in your document you should do it like this:

#navcontainer li { display: inline; }

#navcontainer li a
{
text-decoration: none;
background-color: #333333;
color: #CCCCCC;
padding: .2em 1em;
border-right: 1px solid #000000;
}

#navcontainer li a:hover
{
background-color: #CCCCCC;
color: #333333;
}

I hope this helps.

Enigmatic

6:02 pm on May 4, 2004 (gmt 0)

10+ Year Member



Thanks Bonusbana for clarifying that for me. It's greatly appreciated!

Enigmatic