Forums

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:

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

<ul id=\"nav-bar\">
	<li id=\"left\"><a href=\"#\">Left</a></li>
    <li id=\"right\"><a href=\"#\">Right</a></li>
</ul>

Any ideas?

apostrophe

Here you go:

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

treehouse : what would you like to learn today?

Forums

Single Image Navigation Bar