All -
Trying to create a menu with style sheets and it looks good
using a:hover, a:visited, etc.
Actually, it looks well when I was setting it up and didnt have the a href location specified, just a # symbol. Once I put the name of an actual page in the link instead of the # symbol, the a: hover code
still worked correctly, but the a: active no longer worked.
Any suggestions on getting the a:active to work.
The code is below.
#linksmenu li a:active {
color: #000;
background-color: #fff;
border-top: 2px double #000;
border-bottom: 2px double #000;
}
Help with a:active
Are you declaring them in the correct order? It needs to be:
Link - Visited - Hover - Active
(LoVe HAte)
Help with a:active
I may have the wrong end of the stick here, but if your link is to another page then the browser does not keep track of the active link from page to page! You will need to set up an attribute for the link to the page it is on!
an example of mine:
HTML:
<div id="nav"> <ul> <li><a href="index.html">Home</a></li> <li id="active"><a href="#" id="current">Events Diary</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="people.html">People</a></li> <li><a href="forum.html">Forum</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div>
CSS:
/* Navigation Bar */ #nav ul { margin: 0 0 5px 0; padding: 0; border-bottom: 4px #999 solid; } #nav li { display: inline; list-style-type: none; margin:0px; padding: 0px; } #nav li a, #nav a:link, #nav a:visited { color: #666; text-decoration: none; padding: 0px 8px; } #nav a:hover { color: #666; text-decoration: none; border-bottom: 4px #003399 solid; background-color: #ddd; color: #003399; } #nav li a#current, #nav li a#current:link { cursor: default; background-color: #ddd; color: #444; border-bottom: 4px #999 solid; } #navlist li a#current:hover { cursor: default; background-color: #ddd; color: #444; }
You could check out this as well,
http://www.projectseven.com/tutorials/css/uberlinks/
Does that help?
Guy