Differnt Link Colors

[brnm98105]

I looked and looked. I use to know how to do this but havent in some time. Im creating a Nav Bar and I want all text links in bar to be different colors and hover colors. Heres what I have so far. Any help please

#menu{
float: left;
width: 45%;
padding: 1%;
color: #000;
display: inline;
margin-top: 1%;
margin-right: 0;
margin-bottom: 1%;
margin-left: 25%;
}
#menu ul {
list-style:none;
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
}
#menu li{
list-style:none;
display:inline;
float:left;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
#menu li a{
display:inline;
float:left;
}
#menu li a span{
display:inline;
}
#menu li a:hover{
color: #FF0000;
}
#menu li a.home{
}
#menu li a:hover.home{
}
#menu li a.about{
}
#menu li a:hover.about{
}
#menu li a.services{
}
#menu li a:hover.services{
}
#menu li a.solutions{
}
#menu li a:hover.solutions{
}
#menu li a.contact{
}
#menu li a:hover.contact{
}

[rocknbil]

Well, having a nav bar with each link element different colors is a bad idea for design and accessibility considerations, the idea is to present them as a cohesive group that "flocks together" visually, and this will disturb that concept and create chaos.

But one way to go at it would be like this.

#menu li #home:link{
}
#menu li #home:visited{
}
#menu li #home:hover{
}
#menu li #home:active{
}

<ul id="menu">
<li><a id="home">Home</li>
</ul>

Or,

#menu #home a:link{ /* etc.*/
}

<ul id="menu">
<li id="home"><a>Home</li>
</ul>

[milosevic]

I would make rules like

.red {
color:#f00 !important;
}

use like this:

<ul>
<li><a class="red" href="url">text</a></li>
</ul>

Then any text element on the site just has to be given a class of "red" to be shown red.

With the hover elements, I simply wouldn't bother. It's not worth the hassle unless you are a total perfectionist. I'd just choose grey or a neutral colour and go with that - is it really likely anyone is going to react "OH MY GOD THE LINK IS THE WRONG COLOUR WHEN MY MOUSE IS OVER IT! THIS WEBSITE SUX!"?

rocknbil, do you know if that (first method) falls foul of the IE6 'hover only on anchor' bug? I ask because it is an anchor but the style is not directly on the html element. I've never needed to do this though so it's not something I've tested.

I definitely agree that having a menu with different link colours is bad for usability (90% of the time) - it might look nice, and if that's all that counts on your site then go for it, otherwise I'd steer clear.
The only cases I've seen it done as anything more than a pointless gimmick are where items in the menu have natural thematic colours - eg winter = white, spring green, summer orange and autumn brown, or things like that.

[rocknbil]

rocknbil, do you know if that (first method) falls foul of the IE6 'hover only on anchor' bug?

This?
#menu li #home:link{
}
#menu li #home:visited{
}
#menu li #home:hover{
}
#menu li #home:active{
}

<ul id="menu">
<li><a id="home">Home</li>
</ul>

I don't see why it would, I don't recall having any run-ins with IE6 using something like this. Don't have time to chase it ATM. IF it did, ah well, there are worse things to worry about with IE6.

I ask because it is an anchor but the style is not directly on the html element.

I've no idea what this means, sorry. The style is a selector for the html element with the ID "home",

#menu li #home:link{
}

and the html element **is** the anchor.

<li><a id="home">Home</li>

is it really likely anyone is going to react "OH MY GOD THE LINK IS THE WRONG COLOUR WHEN MY MOUSE IS OVER IT! THIS WEBSITE SUX!"?

The reasons for the four states of an anchor lie more in accessibility than presentation. Once you go beyond presentation and start making your documents accessible and semantically correct, it makes a much larger difference.