- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
Check this out
http://nettuts.com/videos/screencasts/e … s-sprites/
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:
#left {
background-position:0 0px;
}
#right {
background-position:-300 -300px;
}
The HTML:
Any ideas?
Here you go:
#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;
}
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 :)