Grow your CSS skills. Land your dream job.

[Solved] Image Sprite Menu Problem

  • # February 6, 2010 at 12:45 pm

    Hey everyone,

    I’m trying to make a menu using css image sprites, however i’ve encountered a problem.
    Here’s the URL: http://www.avn8.com/222.html

    [img]http://www.avn8.com/superblue.png[/img]

    This is the image for the menu.

    This is what i’ve done so far:

    <html>
    <head>
    <style type="text/css">
    #superblue{position:relative; }
    #superblue li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
    #superblue li, #superblue a{height:100px;display:block;}

    #home{left:0px;width:160px;}
    #home{background:url(‘superblue.png’) 0 0;}
    #home a:hover{background: url(‘superblue.png’) 0 -100px;}

    #folio{left:160px;width:160px;}
    #folio{background:url(‘superblue.png’) -160px 0;}
    #folio a:hover{background: url(‘superblue.png’) -160px -100px;}

    #blog{left:351px;width:160px;}
    #blog{background:url(‘superblue.png’) -351px 0;}
    #blog a:hover{background: url(‘superblue.png’) -351px -100px;}

    #news{left:483px;width:160px;}
    #news{background:url(‘superblue.png’) -483px 0;}
    #news a:hover{background: url(‘superblue.png’) -483px -100px;}

    #contact{left:630px;width:160px;}
    #contact{background:url(‘superblue.png’) -630px 0;}
    #contact a:hover{background: url(‘superblue.png’) -630px -100px;}
    </style>
    </head>

    <body>
    <ul id="superblue">
    <li id="home"><a href="#"></a></li>
    <li id="folio"><a href="#"></a></li>
    <li id="blog"><a href="#"></a></li>
    <li id="news"><a href="#"></a></li>
    <li id="contact"><a href="#"></a></li>
    </ul>
    </body>
    </html>

    Please, can someone tell me, how to solve this issue.

    Thanks a bunch,

    Arjun

    # February 6, 2010 at 1:17 pm

    I’ve found the solution, don’t worry, it was a problem with the widths

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".