cass27
March 16, 2010, 5:28pm
1
hi,
I have created two different sets of links for my index page. One for my main menu and one for my footer.
However now when i click on a link in the main menu its visited appearence is that of the attributes I have given to the footer. This can be seen at: http://www.alphatest.co.uk
The css code for the main menu is:
#mainNav ul a:link, a:visited {
display:block;
text-decoration:none;
text-indent:25px;
width:120px;
height:39px;
border:#0099cc;
line-height:39px;
color: #ffffff;
background:#0099cc; background:url(c2_images/button.gif) no-repeat left top;
}
#mainNav ul a:hover, a:active {
color: #FFFF00;
background:#0099cc; background:url(c2_images/button_over.gif) no-repeat left top;
border:#0099cc;
}
the css code for the footer is:
#footer a:link, a:visited {
display:inline;
line-height:10px;
text-decoration:none;
color: #ffffff;
font-size:10px;
background:none;
}
#footer a:hover, a:active {
display:inline;
line-height:10px;
color: #FFFF00;
font-size:10px;
background:none;
}
Can someone help me with this as it is doing my head in
thanks:(
Rayzur
March 16, 2010, 5:36pm
2
Hi,
That’s because you set every a:visited with those styles at the bottom of your css. The cascade overrides previous styles.
Just be more specific and target the footer only -
#footer a:link, [B]#footer a:visited [/B] {
display:inline;
line-height:10px;
text-decoration:none;
color: #ffffff;
font-size:10px;
background:none;
}
Hi, the problem is that you define the footer visited styles after the menus visited styles. So as a result they are being used.
You do realize that this selector
#mainNav ul a:link, a:visited {
display:block;
text-decoration:none;
text-indent:25px;
width:120px;
height:39px;
border:#0099cc;
line-height:39px;
color: #ffffff;
background:#0099cc; background:url(c2_images/button.gif) no-repeat left top;
}
Is the EXACT same as this?
#mainNav ul a:link {
display:block;
text-decoration:none;
text-indent:25px;
width:120px;
height:39px;
border:#0099cc;
line-height:39px;
color: #ffffff;
background:#0099cc; background:url(c2_images/button.gif) no-repeat left top;
}
a:visited {
display:block;
text-decoration:none;
text-indent:25px;
width:120px;
height:39px;
border:#0099cc;
line-height:39px;
color: #ffffff;
background:#0099cc; background:url(c2_images/button.gif) no-repeat left top;
}
When you seperate rules via a comma they are completely seperate rules. You’d need to set your visited styles just like you set your other styles :).
So like this
#mainNav ul a:link, [b]#mainNav ul [/b]a:visited {
display:block;
text-decoration:none;
text-indent:25px;
width:120px;
height:39px;
border:#0099cc;
line-height:39px;
color: #ffffff;
background:#0099cc; background:url(c2_images/button.gif) no-repeat left top;
}
You need to do the same for the footer and wherever else this is at
cass27
March 16, 2010, 5:39pm
4
bl****dy hell that was quick!
thanks ryanreese.
Learn something new everyday. However I will continue to get things wrong as i dont want sitepoint top go out of business.
cheers
We are glad to help :). People asking questions keeps me busy on my days off from work/school, so feel free!
Off Topic:
Of course it was fast, I’m a ninja!
cass27
March 16, 2010, 5:45pm
6
check out the link to your homepage in the sidepanel when you click on your name. when i clicked on it a broken link page came up.
cass27
I saw your visitor message :).
I responded there (as to not make this become off topic)