Thu, 2012-01-26 09:02
Hello,
I'm new to this so it's probably a really stupid mistake I've made, but I'd be really grateful if nyone can help! I'm making a website for which I'm using a style sheet. At the top of the page there is a navigation bar which has a black background and is grey when hovered over but should also be grey when a link is active. As far as I can tell, it should be working, but it isn't. Any ideas?
Here's the CSS
/* Default CSS */ /* Generated by the CoffeeCup HTML Editor - <a href="http://www.coffeecup.com" rel="nofollow">www.coffeecup.com</a> */ body { background-color:#000000; background-image:url('Bryn Background.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position:50% 60px; margin: 0px; padding: 0px; } div#centered { width: 800px; text-align: left; border: 0px; padding: 0; margin: 0 auto; } div#main { position: absolute; left: 50%; width: 800px; margin-top: 0px; margin-left: -400px; padding: 0px; border: 0px; } div.nav { width:800px; height:44px; overflow:hidden; position:absolute; top:40px; } div.nav ul { list-style-type:none; margin:0; padding:0; } div.nav li { display:inline; list-style:none; float:left; font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; } div.nav a:link, a:visited { display:block; width:auto; font-weight:bold; font-size:18px; color:#FFFFFF; background-color:#000000; text-align:center; padding-left:11px; padding-right:11px; padding-top:4px; padding-bottom:4px; text-decoration:none; text-transform:small-caps; } div.nav a:hover, a:active { background-color:#4D4D4D; } p { font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; } p.standard { width:780px; text-align:left; margin-left:11px; margin-top:400px; font-size:18px; color:#FFFFFF; }
And here's the HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="generator" content="CoffeeCup HTML Editor (<a href="http://www.coffeecup.com" rel="nofollow">www.coffeecup.com</a>)"> <meta name="created" content="Tue, 25 Jan 2011 18:13:45 GMT"> <meta name="description" content=""> <meta name="keywords" content=""> <title></title> <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="stylesheet" type="text/css" href="bryncss.css" /> </head> <body> <div id="centered"> <div class="nav" id="main"> <ul> <li><a href="home.html">HOME</a></li> <li><a href="contact.html">CONTACT</a></li> <li><a href="models.html">MODELS</a></li> <li><a href="gallery.html">GALLERY</a></li> <li><a href="listen.html">LISTEN</a></li> <li><a href="festivals.html">FESTIVALS & EVENTS</a></li> <li><a href="links.html">LINKS</a></li> </ul> </div> </div> </body> </html>
Thanks for your help!
Charlotte
Thu, 2012-01-26 13:16
#1
div.nav a:hover, a:active is
div.nav a:hover, a:active is not the same as div.nav a:hover, div.nav a:active. So my guess is that the div.nav a:link is overriding a:active due to specificity.
Thu, 2012-01-26 14:41
#2
Ok, thanks. But what does
Ok, thanks. But what does that actually mean I need to do? I really am useless!
Thu, 2012-01-26 15:20
#3
mandogirl wrote: Ok, thanks.
Ok, thanks. But what does that actually mean I need to do? I really am useless!
No, way. I'm not falling for the self-deprecating damsel in distress routine. Try what I posted that differs from what you have.
Thu, 2012-01-26 17:50
#4
Hello, Yes, I thought you
Hello,
Yes, I thought you might mean that but it still didn't work so I assumed I must have misunderstood. Maybe I still am! Oh well, I'll keep searching 
Thu, 2012-01-26 19:32
#5
I don't know but the code
I don't know but the code works as expected without the changes I suggested. Hover and active states are both applied in your original code in the first post above. Can you explain the issue you're experiencing? Please state the behavior you expect and the behavior you consider incorrect.
Thu, 2012-01-26 19:50
#6
By the way the specificity
By the way the specificity issue is there. I tried adding a color to a:active and it didn't work except on visited links.
Thu, 2012-01-26 20:25
#7
Not clear on the concept?
It may be, mandogirl, that you have misunderstood the meaning of the :active pseudo class. A link is active while the mouse button is down, or the [enter] key is pressed. It is not a persistent state. Once the mouse button or the [enter] key is released, the link is no longer active.
If it is a misunderstanding, you may benefit from this recent thread. In that thread, Hugo pointed to the "How To" forum, which has this topic, "CSS current page nav link highlight", where Hugo more completely explained the reasoning behind my suggestion.
cheers,
gary
Fri, 2012-01-27 09:33
#8
Gary, thanks for that. Yes,
Gary, thanks for that. Yes, you're right - I did misunderstand what it did. I'll have a look at the link you've posted. Thanks!
Charlotte
Fri, 2012-01-27 10:45
#9
It works! Thanks!
It works! Thanks!