a: active

[AV1611]

I can never get a:active to work. 

 

the background changes on hover, but when the link is clicked, it reverts to normal, not active.  How do you make it work???

 

(only the hover works)

 

<style type="text/css">

li, li a

{

background-color: white;

background: url(images/buttonback.jpg);

background-repeat: repeat-y;

display: block;

list-style: none;

margin: 2px;

text-align: center;

color: black;

font-size: 18px;

font-weight: bold;

padding: 0;

text-decoration: none;

}

li a:active, li a:hover{

background: url(images/buttonback2.jpg);

background-repeat: repeat-y;

display: block;

color: red;

}

[bronzemonkey]

Due to the nature of cascading stylesheets you have to declare the :active state after :hover. The correct order is :link, :visited, :hover, :active

[AV1611]

Sorry, I knew that.  Changing it to this still doesn't help.  I'm a back to my original question: how do you get a:active to work? I've never been able to do it.

 

Here's the site I'm working on:

 

http://tranquilpenguin.com/~osprey/trustwisconsin

 

Changed to:

li, li a, li a:link, li a:visited

{

background-color: white;

background: url(images/buttonback.jpg);

background-repeat: repeat-y;

display: block;

list-style: none;

margin: 2px;

text-align: center;

color: black;

font-size: 18px;

padding: 1px 0px;

text-decoration: none;

}

li a:hover, li a:active{

background: url(images/buttonback2.jpg);

background-repeat: repeat-y;

display: block;

padding: 1px 0px;

color: red;

}

[bronzemonkey]

it's working fine on the site

[AV1611]

Maybe I don't understand what a:active does then?

 

If I click HOME, then HOME should stay with the alternate background.  Same goes for others links.  I want the current link to be "active".  Is that not what a:active does?  That's not what it's doing.

 

I'm on my linux box with ff 2.0.0.10

it doesn't work on my M$ ie 6.1 either.

 

here is a change to my CSS to make sure there is no misunderstanding...

 

li{

list-style: none;

}

 

li a

{

background-color: white;

background: url(images/buttonback.jpg);

background-repeat: repeat-y;

display: block;

list-style: none;

margin: 2px;

text-align: center;

color: black;

font-size: 18px;

padding: 1px 0px;

text-decoration: none;

}

li a:link

{

background-color: white;

background: url(images/buttonback.jpg);

background-repeat: repeat-y;

display: block;

list-style: none;

margin: 2px;

text-align: center;

color: black;

font-size: 18px;

padding: 1px 0px;

text-decoration: none;

}

li a:visited

{

background-color: white;

background: url(images/buttonback.jpg);

background-repeat: repeat-y;

display: block;

list-style: none;

margin: 2px;

text-align: center;

color: black;

font-size: 18px;

padding: 1px 0px;

text-decoration: none;

}

 

 

 

li a:hover{

background: url(images/buttonback2.jpg);

background-repeat: repeat-y;

display: block;

padding: 1px 0px;

color: red;

}

 

 

 

li a:active{

background: url(images/buttonback2.jpg);

background-repeat: repeat-y;

display: block;

padding: 1px 0px;

color: red;

}

[AV1611]

On further review, it would seem that I am asking the wrong question. 

 

The menu stays highlighted when you tab through it so I guess a:active is working.

 

I guess I want something different:

 

when I click a link, it reloads the page with index.php?page=3 so is there a way to make the "page 3" link stay highlighted when on page 3?  If this requires JS just say so, I will stop here.  If this can be done with CSS, please at a minimum tell me it can be done, and help me if you might...

 

Thanks.

[bronzemonkey]

That's right, a:active is only referring to what happens when you "click" on the link. It is styling to indicate that the user has clicked successfully, so it is working just fine for you. If you want people tabbing through you links to also see the :hover styles (or perhaps a distinct and unique focus state) you declare styles for a:focus, which can come before or after a:active but after a:hover in the stylesheet.

 

{list-style:none} needs to be declared for the list element, ul, and not the list items, li.

 

All that css code can be shorted to this:

 

ul {list-style:none;}

li a:link, li a:visited
{
background:#fff url(images/buttonback.jpg) repeat-y;
display: block;
margin: 2px;
text-align: center;
color: black;
font-size: 18px;
padding: 1px 0px;
text-decoration: none;
}

li a:hover, li a:active {
background: url(images/buttonback2.jpg) repeat-y;
display: block;
padding: 1px 0px;
color: red;
}

 

You can create a "selected" state for certain menu links using only css (although you can use php to insert a class into the li element of the menu link that corresponds to the page url you are on). Give each li element a unique id (e.g., navhome, navcontact) and then also give the body tag on the corresponding page an id (e.g., home for the homepage, contact for the contact page) and then use css to style the li elements only when they are contained within the body element with the id that corresponds to the link:

 

body#home li#navhome, body#contact li#navcontact {/*some styles*/}

<body id="home">
  <ul>
    <li id="navhome"><a href="">Home</a></li>
    <li id="navcontact"><a href="">Contact</a></li>
  </ul>
</body>

 

Hope that helps

[AV1611]

That is the most clear, concise explanation I've read ever.  Thank you. I'll be saving this answer.