Hi,
I'm having a few problems wanting to highlight the current tab in the navigation.
I'm wondering if this could be because I have different stylesheets for some pages? Can this affect the way it works? I'm still using the same code in each stylesheet for the navigation...
I'll post some of the HTML and CSS. I'm really hoping someone can help me out. It's frustrating me! I've looked up a few different ways to do it, and none seem to work so far.
Also, does it matter if I have the navigation in an includes folder (using php)?
I'm using <body id="home"> and a different one for each page.
HTML
<div id="nav">
<ul>
<li id="nav-home"><a href="index.php" id="home" title="home">home</a></li>
<li id="nav-about"><a href="about.php" id="about" title="about">about</a></li>
<li id="nav-services"><a href="corporate.php" id="services" title="services">services</a></li>
<li id="nav-products"><a href="products.php" id="products" title="products">products</a></li>
<li id="nav-servicearea"><a href="servicearea.php" id="servicearea" title="ServiceArea">service area</a></li>
<li id="nav-contactus"><a href="contact.php" id="contact" title="ContactUs">contact us</a></li>
</ul>
</div>CSS
#nav ul {
display: block;
padding: 0px;
margin-left:5px;
margin-top: 20px;
margin-bottom:0px;
list-style: none;
text-align: center;
float:left;
}
#nav ul li {
display: inline;
padding: 0px 10px;
margin: 0px;
list-style: none;
}
#nav li a {
height:20px;
float:left;
text-indent:-9999px;
}
#nav li#nav-home a {
width:101px;
height:20px;
background:url(../images/main%20menu%20tabs/nav_home.png) no-repeat;/* X and Y position at 0 */
}
#nav li#nav-home a:hover {
width:101px;
height:20px;
background:url(../images/main%20menu%20tabs/nav_home.png) no-repeat;
background-position: 0 -20px;
}
body#home a#home {
width:101px;
height:20px;
background:url(../images/main%20menu%20tabs/nav_home.png) no-repeat;
background-position: 0 -100px;
}