Log in

View Full Version : "Visited" state link



dee_em
11-06-2008, 02:38 PM
Hello!

I'm trying to set a different color (let's say #cccccc) for the "visited" state of these links.
For some reason I'm unable to. Can you please help? Thanks!

Here's my CSS code:

#navigation {
position:absolute;
left:100px;
top:252px;
width:451px;
height:130px;
z-index:2;
}
#navlist {
margin: 0; /*removes indent IE and Opera*/
padding: 0; /*removes indent Mozilla and NN7*/
list-style-type: none; /*turns off display of bullet*/
}
#navlist a, #navlist a:visited {
display: block;
padding: 8px 2px 2px 20px;
background-repeat: no-repeat;
background-position: 0% 50%;
color: #00a0dc;
text-decoration: none;
}
#navlist a:hover, .selected {
color:#000000
}
#navlist a.selected {
color:#000000;
}

Snookerman
11-06-2008, 02:55 PM
You have the same color for the visited and the unvisited links so you wont see any difference.

Schmoopy
11-06-2008, 03:25 PM
As mentioned above, change:

#navlist a, #navlist a:visited {
display: block;
padding: 8px 2px 2px 20px;
background-repeat: no-repeat;
background-position: 0% 50%;
color: #00a0dc;
text-decoration: none;
}

to:


#navlist a{
display: block;
padding: 8px 2px 2px 20px;
background-repeat: no-repeat;
background-position: 0% 50%;
color: #00a0dc;
text-decoration: none;
}

#navlist a:visited {
color:#cccccc
}

sandyk3
11-06-2008, 03:29 PM
seems to me you have this navigation as a list and i'm not sure what .selected means but the code below is a snippet of css for navigation using lists.

#nav li {
padding: 3px 5px 3px 10px;
margin-left: 0px;
font-size: 0.9em;
font-weight: bold;
line-height: 120%;
list-style-type: none;
}
#nav li a:link, #nav li a:visited {
display: block;
color: #ffffff;
font-weight: bold;
line-height: 120%;
font-size: 0.9em;
padding: 3px 5px 3px 10px;
margin-left: 0px;
text-decoration: none;
}
#nav li a:hover, #nav li a:focus {
color: #000033;
font-size: 0.9em;
font-weight: bold;
line-height: 120%;
padding: 3px 5px 3px 10px;
margin-left: 0px;
text-decoration: none;
background-color: #CCD9FF;
}
#nav li a.current{
background-color: #CCD9FF;
color: #000033;
}
I've always put "li" after the "#nav" and I don't see where you have done that.
I know I probably have duplicate code in each for text decoration and I'm still cleaning that up. In your first bit of code

#navlist a, #navlist a:visited {
display: block;
padding: 8px 2px 2px 20px;
background-repeat: no-repeat;
background-position: 0% 50%;
color: #00a0dc;
text-decoration: none;
}
you are calling for both visited and not visited. you need to split out the "a" and the "a:visited". Remember to keep the lvha order to the links in your code. Link, Visited, Hover and Active.
Hope this helps.
SAndy K