homepage Welcome to WebmasterWorld Guest from 23.22.97.26
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Differnt Link Colors
brnm98105




msg:4063577
 3:10 pm on Jan 19, 2010 (gmt 0)

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




msg:4063730
 6:54 pm on Jan 19, 2010 (gmt 0)

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




msg:4074398
 4:45 pm on Feb 4, 2010 (gmt 0)

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




msg:4074475
 6:38 pm on Feb 4, 2010 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved