How to keep the active link "down" ?

**Yammaski** · 06-22-2010, 06:45 PM

I want the active link the same as the hover link.
My example only works in IE7.

**traq** · 06-22-2010, 07:16 PM

it seems to be working on firefox.

By "active" link, do you mean the link that is being used (i.e., clicked on) or the link that matches the page you're on? In CSS terms, "active" means "being used."

If, on the other hand, you want the "Home" button to look like its pressed down when you are on the home page, you would have to give it a class name (like "down", for example) and then style it using that class.

**Yammaski** · 06-22-2010, 07:34 PM

Yes, I want the button to look like its pressed when you are on the page from the link.
Can you give a little more explanation on how to do this ?

**bluewalrus** · 06-22-2010, 07:36 PM

Assuming the user were on home...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>NavHead_test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--

#menu ul li{
	display:block;
	float:left;
	margin:0;
	padding:0;
}
#menu ul{
	margin: 0px auto;
	padding:0;
	list-style-type:none;
	width:746px;
	position:relative;
	display:block;
	height:36px;
	font-size:12px;
	font-family:Helvetica,Arial,Verdana,sans-serif;
	border-bottom:4px solid #666666;
	border-top:1px solid #E6E6E6;
	background-color: transparent;
	background-image: url(OFF.gif);
	background-repeat: repeat-x;
	background-position: left top;
}
#menu ul li a{
	display:block;
	float:none;
	color:#FF0000;
	text-decoration:none;
	font-weight:bold;
	height:24px;
	text-align: center;
	padding-top: 12px;
	padding-right: 20px;
	padding-bottom: 0;
	padding-left: 20px;
	background-color: transparent;
	background-image: url("DIVIDER.gif");
	background-repeat: no-repeat;
	background-position: right top;
	width: auto;
	}

#menu ul li a:hover{
	background-color: transparent;
	background-image: url(HOVER.gif);
	background-repeat: repeat-x;
	background-position: right top;
	}
#active_page{
	background-color: transparent;
	background-image: url(HOVER.gif);
	background-repeat: repeat-x;
	background-position: right top;
	}

-->
</style>
</head>
<body>
<span id="menu"><ul>
<li><a id="active_page" href="#">home</a></li>
<li><a href="#">catalogus</a></li>
<li><a href="#">new</a></li>

<li><a href="#">galerij</a></li>
<li><a href="#">plakinstructies</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">faq</a></li>
</ul></span>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

**Yammaski** · 06-22-2010, 08:06 PM

this is working !

<li id="active_page"><a href="#">home</a></li>

Thread: How to keep the active link "down" ?

Thread Tools

Search Thread

How to keep the active link "down" ?

Bookmarks

Bookmarks

Posting Permissions