I can’t seem to make this css navigation effect. Bassically I want a gradient image to repeat horizontally across a div named navigation and then the links will be centered vertically in the divide and aligned left. Futhermore, I need the li(link) to have a different(darker) gradient repeat across it when it’s active, so I can get that effect of buttons or indentation. So far I got it to repeat across the divide, but when I applied the background for the active mode to the hover mode, the gradient image is cut off or much shortered. I need to align with the background image that’s repeated across the div. If you’re lost on what I’m saying then feel free to take a look at my mock up here:
http://i38.photobucket.com/albums/e120/swaters210/navquestion.jpg
Please keep in mind I’m working with two sliced images. One for normal mode which is set to repeat-x, top left, in the div named navigation and it stretches across my container with a faux column background. The second image, need to repeat-x when a lnk is in active mode.
This is my html:
<div id="navigation">
<ul id ="navlist">
<li id="active"><a href="index.html">home</a></li>
<li><a href="about.html">our story</a></li>
<li><a href="support.html">support</a></li>
<li><a href="treatment.html">treament</a></li>
<li><a href="contact.php">contact</a></li>
</ul>
</div>
and this is the css:
#navigation{
background-image: url('images/navxnorm.png');
background-position: top left;
background-repeat: repeat-x;
height: 53px;
}
#navigation ul{
margin:0;
padding: 0;
height:53px;
position: absolute;
top: 90px;
}
#navigation li{
margin: 0;
padding: 0;
list-style-type: none;
display: inline;
}
#navigation li a{
color: #ffffff;
text-decoration: none;
padding: 0 10px 0 10px;
font: normal 20px Arial, "Lucida Grande", Verdana, Helvetica, sans-serif
}
#navigation li a:hover{
color: #EFE0E0;
}
#navigation li a:active{
background-image: url('images/navxactive.png');
background-position: top left;
background-repeat: repeat-x;
height: 53px;
}
Any help would be greatly appreciated. Thankyou.