Treehouse: 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]

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

    #nav_inner li {

    #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!

    # July 23, 2010 at 4:25 am

    It’s probably better to watch someone do it sooo… … s-sprites/ <– written article :)

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

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

You must be logged in to reply to this topic.