Grow your CSS skills. Land your dream job.

Help with nav menu and image replacement

  • # July 23, 2010 at 2:33 am

    I have 1 background image made up 4 buttons on a vertical menu. I’m not sure if there is a way to do this but I was trying to use the sprite technique. I dont have any hover or active states, however. My image. [attachment=0]nav.gif[/attachment]

    Code:
    #nav {
    width:34%; /* this width + content width must total 100% */
    height:235px;
    float:left; /* floats on nav and content divs make them sit side by side */
    background: url(nav.gif) no-repeat;
    }

    #nav_inner li {
    padding:0;
    margin:0;
    width:177px;
    height:235px;
    list-style:none;

    }
    #nav_inner li, #nav_inner a {
    height: 235px; text-decoration:none; text-indent:-9999px;
    }

    #nav1 {top:0; height: 45px;}
    #nav2 {top:61px; height: 55px;}
    #nav3 {top: 130px; height: 49px;}
    #nav4 {top: 197px; height: 47px;}

    If someone could steer me in the right direction I would be much appreciated! Thanks!

    Rob
    # July 23, 2010 at 4:25 am

    It’s probably better to watch someone do it sooo…

    http://css-tricks.com/video-screencasts … s-sprites/

    http://css-tricks.com/css-sprites/ <– written article :)

    I can also recommend you watching this nice vid from the guys at obox…

    http://www.from-the-couch.com/post.cfm/ … ss-sprites

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".