Hello, All!
I am having an issue with my navigation bar. I have created it using
the sprite technique (I am a newbie, can you tell?) and everything
seemed to be working perfectly until I played around with the order of
some of my surrounding divs (In order to get the perfect positioning).
Now, the up image shows up, but never goes to the hover state.
Where am I going wrong?
XHTML Code:
HTML Code:
<div id="logo">
<div id="header"><img src="images/Header/cliffs_header.jpg" width="800" height="90" />
<div id="nav">
<ul id="navigation">
<li id="nav_services"><a href="services.html">Services</a></li>
<li id="nav_methods"><a href="methods.html">Methods</a></li>
<li id="nav_experience"><a href="Experience.html">Experience</a></li>
<li id="nav_personnel"><a href="personnel.html">Personnel</a></li>
<li id="nav_media"><a href="media.html">Media</a></li>
<li id="nav_about"><a href="about.html">About Us</a></li>
<li id="nav_contact"><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
</div>
CSS Code:
Code:
div#logo {
background:url(../images/Header/header-bg.png) repeat-x;
margin-top:0;
margin-right:auto;
margin-bottom: 0;
margin-left: auto;
width:100%;
text-align:center;
position:relative;
height:126px;
border-bottom:2px groove #f4f4f4;
z-index:-1;
}
div#header {
width:100%;
margin-top:0;
margin-bottom:0;
position:absolute;
width:801px;
top:0;
left:50%;
margin-left:-400px;
height: 89px;
}
div#nav {
width:100%;
height:36px;
text-align:center;
z-index:1;
}
#navigation {
width: 800px;
height: 36px;
position: relative;
background:url(../images/Navigation/nav_main.png);
margin: 0;
padding: 0;
top:-1px;
left:50%;
margin-left:-400px;
z-index:100;[/INDENT]}
#navigation li {
float:left
}
#navigation li a {
position: absolute;
top: 0;
margin: 0;
padding: 0;
display: block;
height: 36px;
background: url(../images/Navigation/nav_main.png) no-repeat;
text-indent: -9999px;
z-index: 1;
}
/*up state*/
li#nav_services a {
left: 0px;
width: 114px;
background-position: 0 0;
}
li#nav_methods a {
left: 114px;
width: 114px;
background-position: -114px 0;
}
li#nav_experience a {
left: 228px;
width: 114px;
background-position: -228px 0;
}
li#nav_personnel a {
left: 342px;
width: 114px;
background-position: -342px 0;
}
li#nav_media a {
left: 456px;
width: 114px;
background-position: -456px 0;
}
li#nav_about a {
left: 570px;
width: 114px;
background-position: -570px 0;
}
li#nav_contact a {
left: 684px;
width: 114px;
background-position: -684px 0;
}
/*hover state*/
li#nav_services a:hover {
background-position: 0 -36px;
}
li#nav_methods a:hover {
background-position: -114px -36px;
}
li#nav_experience a:hover {
background-position: -228px -36px;
}
li#nav_personnel a:hover {
background-position: -342px -36px;
}
li#nav_media a:hover {
background-position: -456px -36px;
}
li#nav_about a:hover {
background-position: -570px -36px;
}
li#nav_contact a:hover {
background-position: -684px -36px;
}
/*active state*/
li#nav_services a:active {
background-position: 0 -72px;
}
li#nav_methods a:active {
background-position: -114px -72px;
}
li#nav_experience a:active {
background-position: -228px -72px;
}
li#nav_personnel a:active {
background-position: -342px -72px;
}
li#nav_media a:active {
background-position: -456px -72px;
}
li#nav_about a:active {
background-position: -570px -72px;
}
li#nav_about a:active {
background-position: -684px -72px;
}
/*current state*/
#body_services li#nav_services a {
background-position: 0 -108px;
}
#body_methods li#nav_methods a {
background-position: -114px -108px;
}
#body_experience li#nav_experience a {
background-position: -228px -108px;
}
#body_personnel li#nav_personnel a {
background-position: -342px -108px;
}
#body_media li#nav_media a {
background-position: -456px -108px;
}
#body_about li#nav_about a {
background-position: -570px -108px;
}
#body_contact li#nav_contact a {
background-position: -684px -108px;
}
Can you guys see where I am going wrong? I am totally at a loss!
Any help would be much appreciated!