CSS List Image Links

[novemberGrey]

Hey im using a CSS List for a horizontal navigation, which uses images for the links. I have the images positioned exactly how I need them but I cant figure out how to make them actual links. Here is my CSS!

/* Navigation */

#navigation {width: 711px; height: 37px; margin-top: 10px; margin-left: 3px; background-image: url('images/layout/navBg.jpg'); background-repeat: no-repeat;}#navigation ul {display: inline; list-style-type: none;}
#navigation li {display: inline; float: left; text-indent: -1000px;}
#home {width: 118px; height: 31px; background-image: url('images/navigation/home.jpg'); background-repeat: no-repeat;}
#about {width: 118px; height: 31px; background-image: url('images/navigation/about.jpg'); background-repeat: no-repeat;}
#media {width: 118px; height: 31px; background-image: url('images/navigation/media.jpg'); background-repeat: no-repeat;}
#ministries {width: 118px; height: 31px; background-image: url('images/navigation/ministries.jpg'); background-repeat: no-repeat;}
#events {width: 118px; height: 31px; background-image: url('images/navigation/events.jpg'); background-repeat: no-repeat;}
#contact {width: 118px; height: 31px; background-image: url('images/navigation/contact.jpg'); background-repeat: no-repeat;}

Also heres my HTML just in case you need it
<div id="navigation"><!--Start: Navigation-->
<ul>
<li id="home"><a href="index.html" title="Home page">Home page</a></li>
<li id="about"><a href="about.html" title="What is Calvary all about?">About us</a></li>
<li id="media"><a href="media.html" title="Pictures, Video, and Audio">Media</a></li>
<li id="ministries"><a href="ministries.html" title="Information about the many ministries at Calvary">Ministries</a></li>
<li id="events"><a href="events.html" title="Whatever is going on!">Events</a></li>
<li id="contact"><a href="contact.html" title="Need to contact us?">Contact us</a></li>
</ul>
</div><!--End: Navigation-->

[KDLA]

You'll probably pull your hair out at this suggestion, but you might try applying the background to the link, rather than the list item. When I first suggested you use this method, I was unaware that you wanted the image to be part of a link. ;)

Try placing the IDs in the link tags. Simply moving them may do it for you. Else, you might have to mess with the positioning a little.

KDLA

[WebJoel]

What you have here, the images not being the links, is because they are the background-image of each respective <li>. The hyperlink ("<a href="#">TEXT</a>" is the actual link. If you want the image to be the link, the <img src="#" /> need to be included within the <a href="#"><img src="#" /></a>. If you intend to have "TEXT" overtop of the hyperlink image, that can be done too, with CSS. But let's see first if I am understanding you correctly so far..

[novemberGrey]

Im just wanting the image to be the link, no text, The image already has the text on it, Im doing that because its a font that I cannot use over the web.

[novemberGrey]

I wanted to try to make the link image a background so that way I could easily make it change with the hover, and visited link states.

[WebJoel]

A way to so this is with CSS sprites. Here is a URL.

http://alistapart.com/articles/sprites

It looks complicated, but once you get used to it, it becomes a bit simpler. I have done a number of these. They are just one image that, on-hover, shifts negatively (and virtually instantaineously) to a counterpart-image, giving the effect of a javascript 'onMouseOver' event. You can place your text 'in' the image since as you stated, the text is not a widely-supported one. Using this technique you can also make your text be 'off the image', so you can re-name the links and have it not affect the image itself (so, changing the first image-link's name from "Page #1" to "Home Page" for instance, can occur without damage to the image).
If you need help getting this started, let me know. I could write up an example with footnotes for you.

[KDLA]

If you need help getting this started, let me know. I could write up an example with footnotes for you.
Wow! With footnotes!

Joel -- You're making the rest of us look like slackers! :D

[novemberGrey]

Thankyou WebJoel, I read through that article and Im pretty sure I understand how to do it. If I have any questions I'll post back. THANKYOU VERY MUCH!!