Single Image Navigation Bar

[tomwalters5678]

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

[Soh Tanaka]

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

[tomwalters5678]

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:

• Left
• Right

Any ideas?

[apostrophe]

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;
}

[tomwalters5678]

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 :)

[Author]

Posts