Hey all,
I'm pretty sure this is just a small problem that I'm overlooking right now, but I'm having problems with an active link in my main nav using CSS. I am not using the active pseudo-class state because, well... it doesn't always work. Here's the code for the nav.
CODE
<div id="wrapNav">
<h1><img alt="23 Ellsworth Avenue" src="images/banner.jpg" /></h1>
<ul id="MainNav">
<li> </li>
<li id="home"><a class="active" href="index.html">HOME</a></li>
<li id="features"><a href="features.html">FEATURES</a></li>
<li id="photographs"><a href="photos.html">PHOTOGRAPHS</a></li>
<li id="floorplans"><a href="floorplans.html">FLOOR PLANS</a></li>
<li id="pricing"><a href="pricing.html">PRICING</a></li>
<li id="location"><a href="neighborhood.html">NEIGHBORHOOD</a></li>
<li id="contact"><a href="contact.html">CONTACT</a></li>
</ul>
<div class="clear"></div>
</div>
And here's what I have for the CSS so far:
CODE
#wrapNav { font-family: Helvetica, Verdana, Arial, sans-serif; font-weight: 900; }
#wrapNav h1 { background: url("../images/header.jpg") no-repeat; height: 148px; text-indent: -9000px; width: 1005px; }
#wrapNav ul#MainNav { background: url("../images/nav_bg.gif") repeat-x; height: 33px; width: 1005px; }
#wrapNav ul#MainNav li { border-left: #333 1px solid; border-right: #333 1px solid; float: left; height: 33px; width: 1005; }
#wrapNav ul#MainNav li a { color: #000; display: block; height: 23px; padding-top: 10px; text-align: center; text-decoration: none; }
#wrapNav ul li a:hover { background: url("../images/nav_bg_hover.gif") repeat-x; height: 30px; width: 100%; }
#wrapNav ul li#home { border-left: #333 2px solid; width: 100px; }
#wrapNav ul li#features { width: 135px; }
#wrapNav ul li#photographs { width: 165px; }
#wrapNav ul li#floorplans { width: 165px; }
#wrapNav ul li#pricing { width: 100px; }
#wrapNav ul li#location { width: 165px; }
#wrapNav ul li#contact { border-right: #333 2px solid; width: 135px; }
Now the problem I'm having is changing the background image on the a.active state to use the nav_bg_hover state. Everything else seems to work, but for some reason I can't figure this out.
Thanks in advance!
2 Jul, 2008 - 06:12 AM
| 