SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Sprite Menu - can't get hover to work

    http://tinyurl.com/2uajtqq

    I have this menu that I'm trying to code as a sprite menu and I'm having trouble getting the hover state to show. I can't figure out what I've done wrong here. Can someone take a look?

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    The problem seems to be the sprite image set as a BG on the UL to preload the hover states. The hover states are transparent and allowing the normal state to show through. That makes it look as if nothing is changing.

    I really prefer the sprite image to be applied to an AP'd span for text replacement. That way your menu is still functional with images off. In this case though with the transparent hover state it allows the text to show through. In the code below I had to use a 27px top padding on the anchor to push the live text out of sight, it kinda defeats the purpose but it is about all you can do with transparent images (other than display:none as you had it).

    Another advantage to hooking the image to the span is that you can reduce your BG positions by just moving the entire span up on a:hover with a neg margin.

    Working from This Example I got your menu working below:

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     
    <title>Tab Menu</title>
    <style type="text/css">
     
    #nav {
        width: 561px;
        height: 27px;
        padding: 0;
        margin: 20px auto;
        list-style: none;
    }
    #nav li {
        float: left;
        width: 111px;
        height: 27px;
        position:relative;
        overflow:hidden;/*hide the 54px tall span*/
    }
    #nav a {
        float: left;
        width: 111px;
        padding: 27px 0 0;/*hide live text*/
    }
    #nav a span {
        position:absolute;
        top:0;
        left:0;
        width:111px;
        height:54px;/*image height*/
        font-size:0;
    }
    #nav a:active span,
    #nav a:focus span,
    #nav a:hover span {
        margin-top:-27px; /*position the span on hover to reduce CSS BG positions*/
    }
     
    #home a span {
        background: url(images/navtabs.png) no-repeat 0 0;
    }
    #about-us a span {
        background: url(images/navtabs.png) no-repeat -111px 0;
    }
    #contact-us a span {
        background: url(images/navtabs.png) no-repeat -222px 0;
    }
    #client-care a span {
        background: url(images/navtabs.png) no-repeat -333px 0;
    }
    #our-blog a span {
        background: url(images/navtabs.png) no-repeat -444px 0;
    }    
    </style>
     
    </head>
    <body>
     
    <ul id="nav">
        <li id="home"><a href="/">Home<span></span></a></li>
        <li id="about-us"><a href="about-us">About Us<span></span></a></li>
        <li id="contact-us"><a href="contact-us">Contact Us<span></span></a></li>
        <li id="client-care"><a href="client-care">Client Care<span></span></a></li>
        <li id="our-blog"><a href="our-blog">Our Blog<span></span></a></li>
    </ul>
     
    </body>
    </html>

  3. #3
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much, Ray. I really appreciate your help.

    I really prefer the sprite image to be applied to an AP'd span for text replacement. That way your menu is still functional with images off.
    I'd like to learn how to do this. Do you know of a tutorial where I can find out more about that?

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Ray's code pretty much shows you how to do it: view his HTML to see where the spans are.

    In the CSS, the anchors are positioned relatively (only to make them positioned ancestors, so the spans know who to take orders from), and the spans are children of the anchors and absolutely positioned over the anchors (using their background image to cover the anchor text).

    I don't know of a tutorial but I do know of a historical document explaining the basic image replacement techniques... the one Ray has is called Gilder-Levin.
    http://www.mezzoblue.com/tests/revis...e-replacement/


Bookmarks

Posting Permissions

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