www.webdeveloper.com
Results 1 to 8 of 8

Thread: CSS List Image Links

  1. #1
    Join Date
    Nov 2006
    Posts
    250

    CSS List Image Links

    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!

    Code:
    /* 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
    HTML Code:
    <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-->

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    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

  3. #3
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    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..

  4. #4
    Join Date
    Nov 2006
    Posts
    250
    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.

  5. #5
    Join Date
    Nov 2006
    Posts
    250
    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.

  6. #6
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    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.

  7. #7
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Quote Originally Posted by WebJoel
    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!

  8. #8
    Join Date
    Nov 2006
    Posts
    250
    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!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles