I created the nav bar on my page with CSS div tags. But, I can't figure out what the code is to add the active state so the users know where they are...i was just able to do the hover state. thanks for your help! html: <div class="nav"><ul> <li><a href="index.html">home</a></li> <li><a href="about.html">about baf</a></li> <li><a href="projects.html">projects</a></li> <li><a href="honduras.html">get involved </a></li> <li><a href="news.html">news</a></li> <li><a href="contact.html">contact us</a></li> </ul></div> .nav{ width:717px; height:30px; background:url(images/navbg.gif) repeat-x top; } .nav ul { margin:0; font-size:11px; font-weight:bold; padding-left:50px; padding-top:5px; list-style:none; } .nav li { float:left; background:url(images/navleft.gif) no-repeat left top; margin-right:10px; padding:0 0 0 15px; } .nav a { float:left; display:block; background:url(images/navright.gif) no-repeat right top; padding-top:5px; padding-right:20px; padding-bottom:3px; padding-left:6px; text-decoration:none; color:#85a157; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ .nav a {float:none;} /* End IE5-Mac hack */ .nav a:hover{ color:#A8AC9C; text-decoration:none; }
There is no CSS rule that will automatically determine what page the user is on, if that's what you meant. There are a few workarounds possible though. My favorite/easiest one to implement is to give a class to the <body> tag. For example, if you're on the 'About' page, then the BODY would carry <body class="page_about">. You then then style your menu accordingly by using conditional rules: li.about { background-color: blue; } body.about_page li.about { background-color: red; } Code (markup):
I know that using a:active should highlight the button so the user knows which page they're on, but its not working. for example, I added this code to my css style, but it doesn't do anything.... } .nav a:hover{ color:#A8AC9C; text-decoration:none; } .nav a:active{ color:#A8AC9C; } i think i'm just having difficulty explaining what I want to do. i know its probably so easy....I already is create a tab menu and when a tab is selected and active, the tab or the text in the tab button that hovers should stay active, but it doesn't. I want to figure out how to do this, like any other tab design, where the tab merges with the bottom background color of the page: http://www.webcredible.co.uk/ mine is choppy right now, and I have a tab design, but I can't get them to behave like real tabs...i think I need to create an image file for each button???