list nav, hide graphic on rollover

thumbslinger
avatar
rank Regular

Regular


Posts: 32
Joined: 2005-03-23
Location: Austin, TX

Posted: Wed, 2008-05-21 21:49

I'm trying to use a small gif as a 'button.' Upon rollover, the graphic is hidden and in its place is the type about us, etc.

I have this css/html so far:

#navcontainer ul
{
margin: 0;
padding-top: 20px;
list-style-type: none;
text-align: center;
font-family: arial;
font-size: 14px;
height: 82px;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding-top: 25px;
padding-right: 55px;
padding-bottom: 35px;
padding-left: 50px;
color: #000;
width: 146px;
height: 82px;
}

#navcontainer ul li a:hover
{
background-image:url(blush1.gif)
width: 146px;
height: 82px;
}

</style>


<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#"><img src="blush1.gif" border="no" /></a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

I've used the graphic in place for one item, but expected the other items to 'rollover' to a graphic. This isn't happening. Any ideas?

Thanks

Tyssen
Tyssen's picture
rank Moderator

Moderator


Posts: 6509
Joined: 2004-05-01
Location: Brisbane

You'll have to use something

Posted: Wed, 2008-05-21 22:31

You'll have to use something like this method except that on hover you won't change background-position, you'll just turn the bg-image off.

How to get help
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use tags.
My articles | CSS Reference

Katie
Katie's picture
rank Enthusiast

Enthusiast


Posts: 308
Joined: 2006-08-06
Location: Seattle, WA

Also, you've got a typo in

Posted: Wed, 2008-05-21 22:34

Also, you've got a typo in your CSS that, in Firefox, prevented the :hover declaration from working.

background-image:url(blush1.gif)

needs to have the semi-colon at the end of it, like so:

background-image:url(blush1.gif);

Blog: Pew Pew Laser Blog
Free Web Icons: IconBuffet