Hey all, I've run into a bit of a problem.
I'm designing a website for a customer, and I'm trying to make a rollover effect using only CSS. No DHTML or JS plz
I learned this was possible using an image thats twice as high as you specify in the stylesheet, so this way only half the image is showing and by editing the CSS for anchor links (a:link and a:hover) in the following manner you can change which half of the image shows while its active and while its in its normal state (hope this makes sense...):
css
li {
display: block;
width: 100px;
height: 50px;
text-indent: -9999px;
}
li a {
background: url(button.png) no-repeat bottom center;
}
li a:hover, li a:active {
background: url(button.png) no-repeat top center;
}HTML
<li><a href="#">gibberish</a></li>
So anyways, thats supposed to work in theory...and it does. Its just not working for me
Here is my code, does anyone see anything wrong with it? I've been hacking away at it for hours all to no avail....
HTML
<ul id="nav">
<li id="home"><a href="#">home</a></li>
<li id="our_work"><a href="our_work.html">our work</a></li>
<li id="about"><a href="about.html">about</a></li>
<li id="contact"><a href="contact.html">contact</a></li>
</ul>
css
ul#nav {
width: 760px;
height: 165px;
background: url(images/nav-bg.png) no-repeat bottom right; /*THIS IS JUST A BACKGROUND TO MY NAV MENU, IGNORE THIS */
}
ul#nav li {
display: inline;
}
ul#nav li a {
display: block;
margin-top: 114px;
height: 51px;
text-indent: -9999px;
float: left;
}
ul#nav li#home a {
width: 104px;
background: url(images/nav-home.png) no-repeat bottom center;
}
ul#nav li#our_work a {
width: 134px;
background: url(images/nav-our_work.png) no-repeat bottom center;
}
ul#nav li#about a {
width: 107px;
background: url(images/nav-about.png) no-repeat bottom center;
}
ul#nav li#contact a {
width: 185px;
background: url(images/nav-contact.png) no-repeat bottom center;
}
ul#nav li a:hover {
background-position: top center;
}Note: The buttons are of varying horizontal sizes (thus the different width's specified for each button) but they are all exactly 102px tall. The "off" or normal state is at the bottom of the image, and the "on" or mouseover state is at the top of the image.
Much thanks to who ever can help me out
This post has been edited by VIonescu: 20 Jul, 2008 - 04:59 PM
| 