Hi All - I'm new to CSS and would love some help with styling my navigation links.
I'm trying to keep the current page navigation link a different colour to the rest of the navigation link - this way users will know what page they are on. Ie: if the user is on the 'ABOUT US' page - then the About US link in the navigation bar is a different colour. I don't want to use JavaScript. I tried adding a:active but this just made all the navigation links a different colour - any clues would be greatly appreciated.! Thanks Sofia [email protected] CSS } #nav { width: 740px; height:48px; margin: 0px 0px 0px 20px; background-image:url(../images/Layout/nav_bar.gif); background-repeat:no-repeat; display:inline; float:left; font-family: Verdana, Geneva, Arial, sans-serif; color: #FFF; } #nav a{ font-size:14px; font-style:normal; font-family:Verdana, Geneva, Arial, sans-serif; display:inline; float:left; margin-top: 12px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 16px; padding-bottom: 0px; padding-left: 20px; border-right-width: 2px; border-right-style: inset; border-right-color: #FFF; color: #FFF; } #nav a:focus { color: #600; } #nav a:hover { color:#600; text-decoration:none; } .lastchild { border-right: none 0px !important; } /*to keep the border off the last navigation item*/ HTML: <div id="nav"> <a href="index.html" class="link-two">Home</a> <a href="about_viva.html">About VIVA</a> <a href="#">Mat Classes</a> <a href="#">About Pilates</a> <a href="#">Osteoporosis Classes</a> <a href="index.html" class="lastchild">Contact</a> ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
