Grow your CSS skills. Land your dream job.

Single Image Navigation Bar

  • # April 15, 2009 at 12:24 pm

    Hi, I was wondering how I would go about creating a navigational bar like the one on this site – http://www.tutorial9.net/

    The single image used is at – http://www.tutorial9.net/wp-content/the … prites.jpg

    I understand this effect is achieved by using the ‘background-position’ element in CSS, but after having played around for an hour, I have found myself unable to recreate the effect. How would I go about doing such a thing?

    Thanks in advanced

    -Tom

    # April 15, 2009 at 12:32 pm

    Check this out
    http://nettuts.com/videos/screencasts/e … s-sprites/

    # April 15, 2009 at 12:56 pm

    Thank you very much, but I am struggling to understand why my code isn’t working on this page – http://tomsbigbox.com/coffeebeans/oneImage

    The CSS:

    Code:
    #nav-bar li {
    background-image:url(tabs.png);
    height:57px;
    width:300px;
    background-repeat:no-repeat;
    }

    #left {
    background-position:0 0px;
    }

    #right {
    background-position:-300 -300px;
    }

    The HTML:

    Code:

    Any ideas?

    # April 15, 2009 at 1:27 pm

    Here you go:

    Code:
    #nav-bar {
    list-style: none;
    }

    #nav-bar li {
    display: inline-block;
    }

    #nav-bar li a {
    background: url(tabs.png) no-repeat left center;
    display:block;
    height: 57px;
    width: 300px;
    text-indent: -9999px;
    }

    #nav-bar li a:hover {
    background-position: right center;
    }

    # April 15, 2009 at 1:59 pm

    Thanks very much guys for the lightning fast replies, I have solved the issue.

    Soh Tanaka – thank you for the link, I found the tutorial informative and very useful.
    apostrophe – thank you for the code, this is what fixed it for me.

    Thanks again – and have a nice day :)

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

You must be logged in to reply to this topic.

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