9 replies [Last post]
mandogirl
mandogirl's picture
Offline
newbie
Last seen: 7 years 39 weeks ago
Timezone: GMT+1
Joined: 2012-01-25
Posts: 10
Points: 14

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

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 3 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

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.

mandogirl
mandogirl's picture
Offline
newbie
Last seen: 7 years 39 weeks ago
Timezone: GMT+1
Joined: 2012-01-25
Posts: 10
Points: 14

Ok, thanks. But what does

Ok, thanks. But what does that actually mean I need to do? I really am useless!

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 3 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

mandogirl wrote: Ok, thanks.

mandogirl wrote:

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.

mandogirl
mandogirl's picture
Offline
newbie
Last seen: 7 years 39 weeks ago
Timezone: GMT+1
Joined: 2012-01-25
Posts: 10
Points: 14

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 Smile

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 3 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

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.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 3 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

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.

gary.turner
gary.turner's picture
Online
Moderator
Dallas
Last seen: 6 min 42 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mandogirl
mandogirl's picture
Offline
newbie
Last seen: 7 years 39 weeks ago
Timezone: GMT+1
Joined: 2012-01-25
Posts: 10
Points: 14

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

mandogirl
mandogirl's picture
Offline
newbie
Last seen: 7 years 39 weeks ago
Timezone: GMT+1
Joined: 2012-01-25
Posts: 10
Points: 14

It works! Thanks!

It works! Thanks! Smile