The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Nav bar

  • # March 2, 2010 at 2:09 pm

    Having a hard time trying to figure how what I have to do for my nav bar so I can turn those into links on my page. I also have to take into effect a highlighted version of those same links that will be used as active and hover. There will also be a drop down for Roster, Live Events, Media, Social.

    Web Site:

    Printscreen of photoshop document with layers: … screen.jpg

    # March 2, 2010 at 5:49 pm

    This reply has been reported for inappropriate content.

    I would use a sprite to do the job. Here is a tutorial:

    # March 2, 2010 at 6:39 pm

    Well here’s my nav bars and trying to figure out what I have to do now. I looked at the link but really not sure.

    And the highlighted version

    # March 3, 2010 at 3:14 am

    This reply has been reported for inappropriate content. … s-sprites/

    It’s pretty simple actually. Just put your two images into one image.


    ul li {float: left; height: 50px; width: 100px}
    ul li a {background: url(images/nav-sprite.gif) no-repeat left top; display: block; height: 50px; width: 100px; text-indent: -9999px}

    ul li.home a { } /***you don’t need to specify a background position as it should be in the right position already – top left***/
    ul li.about a { background-position: -100px 0}
    ul. li.summary a { background-position: -200px 0}
    ul a { background-position: -300px 0}

    ul li.home a:hover { background-position: 0 -50px}
    ul li.about a:hover { background-position: -100px -50px}
    ul li.summary a:hover { background-position: -200px -50px}
    ul a:hover { background-position: -300px -50px

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed