Log in

View Full Version : 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 (http://www.frogstyling.be/CSS_nieuw/CSS_NavHead_test.asp)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...


<!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>