...

View Full Version : a:active problem



swiltch
02-22-2011, 04:46 PM
Hi guys I'm having a problem showing when the link is active, the highlight isn't working on my navigation.

The link should turn red when on that page, but at the moment nothing happens.

Any help appreciated.

HTML -



<ul id="menu">
<li class="active"><a href="#">Home</a></li>
<li><a href="index2.html">Flight Check</a></li>
<li><a href="index3.html">Holiday</a></li>
<li><a href="index4.html">Hotel</a></li>
<li><a href="index5.html">Car Rental</a></li>
<li><a href="index6.html">Insurance</a></li>
<li><a href="index7.html">Contact</a></li>
</ul>


CSS -



}
#menu li {
float: left;
margin: 0;
}
#menu li a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
}

#menu li a:hover {
border-bottom-color: #2894d1;
color: #b7e3fa;
background: #c10e06;
border-bottom: 2px solid;
}

#menu li a:active {
border-bottom-color: #2894d1;
color: #b7e3fa;
background: #c10e06;
border-bottom: 2px solid;
}

harbingerOTV
02-22-2011, 06:22 PM
a:active applies when the link is actively being clicked. Once the link takes you to anohter page, it's no longer active. You need to define current page links. Take a look at:

http://hicksdesign.co.uk/journal/highlighting-current-page-with-css

kansel
02-22-2011, 06:23 PM
You may be confusing a declared class "active" with the pseudo-class :active. The pseudo-class :active only occurs during the instant the link is clicked. If you want the Home link in your example to be "active" while the page is displayed, then you will need to alter your CSS (change in blue):
#menu li {
float: left;
margin: 0;
}
#menu li a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
}

#menu li a:hover {
border-bottom-color: #2894d1;
color: #b7e3fa;
background: #c10e06;
border-bottom: 2px solid;
}

#menu li.active a {
border-bottom-color: #2894d1;
color: #b7e3fa;
background: #c10e06;
border-bottom: 2px solid;
}

Excavator
02-22-2011, 07:21 PM
Hello swiltch,
Have a look at a demo of a little trick for indicating what page your user what page he's on - http://nopeople.com/CSS%20tips/h_ul_menu-with_images/index.html

That method saves you from having to add the extra class to each page your menu is on.

swiltch
02-22-2011, 07:54 PM
Thankyou very much guys!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum