2 replies [Last post]
kurto55
Offline
newbie
Last seen: 17 years 26 weeks ago
Joined: 2005-01-04
Posts: 1
Points: 0

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;
}

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 6 years 22 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Help with a:active

Are you declaring them in the correct order? It needs to be:

Link - Visited - Hover - Active
(LoVe HAte)

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Guy
Guy's picture
Offline
Enthusiast
Cambridge, UK
Last seen: 11 years 1 week ago
Cambridge, UK
Timezone: GMT+1
Joined: 2004-04-26
Posts: 54
Points: 0

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

Who discovered we could get milk from cows, and what did he THINK he was doing at
the time? - Billy Connolly