Image Sprite Navigation With CSS
Why slice a new image for each item in a navigation when you can use the same image for all of them? If you’re thinking you can’t do that without sacrificing rollovers, think again. By creating a navigation using an image sprite, you can have a complete navigation, rollovers and all, by only using one image.
What is an image sprite?
Image sprite originated from old nintendo games – what developers had to do to keep the game from having to load a new image each time a different character entered the screen was store all of the images into a grid – once they had this grid they could call different sections of it and tell it to display it on the screen. The same big image was loaded one time, from then on different sections were called and displayed on the page.
How to use image sprites to create a CSS navigation
What we are going to do is copy the old image sprite technique used in video games, and apply it to our CSS. How you ask? We can do this in by off-setting the background position of each list item in our nav. Let me break this down step by step to help understand this concept.
1. First thing I did was create a very simple image for my nav bar, you can make one the same as mine if you are following along or if you’d like, it should be clear enough to make your own.
2. Once I was satisfied with my image, I exported it as nav.jpg. Once you have that image exported, change something on your navigation, you can change the color of the background, underline it, drop shadow or anything you want as long as the text for the titles don’t get too close to each other where they are interfering. Once you have made these changes, export the image again but call it: nav-over.jpg.
3. Now that we have two images, we need to combine them together into one image. Open both of the images, with nav.jpg selected, go to the Image > Canvas Size… option. Select the top of the image as the anchor point and change the units of measure to percent. Now make the height 200% and click ok.
Now our nav.jpg is in the top of its window, with blank space beneath it.
4. With Snap turned on, drag nav-over.jpg into the same window as nav.jpg. Place it exactly below it so it fits perfectly into the newly created space. Our new image should look something like this.
5. Now resave nav.jpg with both of the images combined, this is going to be the image we use for our navigation.
Once you have the image saved, we can start applying HTML and CSS to get this sucker working.
6. First we need the HTML, here we can make a simple unordered list that includes a different li for each of the buttons we created in photoshop (in this case 4.)
<ul id="nav-example">
<li id="nav-example-01"><a href="#">Blog</a></li>
<li id="nav-example-02"><a href="#">Portfolio</a></li>
<li id="nav-example-03"><a href="#">Resume</a></li>
<li id="nav-example-04"><a href="#">Contact</a></li>
</ul>
7. What we have now is an unordered list with 4 different button list items that each match a certain button on the navigation. The reason there is a span tag with the text inside it is because this way search engines see the text, not just an image. We will end up turning the span to display:none so the text doesn’t show.
This is still viewed as white hat SEO because the text matches the same as the text in the images. Be careful because you can get flagged for putting different content in the hidden fields if it doesn’t match the text on the background image.
8. Here is the final CSS of the image sprite navigation, the final example is at the bottom of the post, I’ll break each section of the CSS down piece by piece:
#nav-example {
background:url("/images/nav-final.jpg") no-repeat;
width: 490px;
height: 40px;
margin: 0;
padding: 0;
}
#nav-example li, #nav-example a {
height: 40px;
display: block;
}
#nav-example li {
float: left;
list-style: none;
display: inline;
text-indent: -9999em;
}
#nav-example-01 { width: 98px; }
#nav-example-02 { width: 131px; }
#nav-example-03 { width: 123px; }
#nav-example-04 { width: 138px; }
#nav-example-01 a:hover { background:url("/images/nav-final.jpg") 0px -40px no-repeat; }
#nav-example-02 a:hover { background:url("/images/nav-final.jpg") -98px -40px no-repeat; }
#nav-example-03 a:hover { background:url("/images/nav-final.jpg") -229px -40px no-repeat; }
#nav-example-04 a:hover { background:url("/images/nav-final.jpg") -352px -40px no-repeat; }
9. The first part is the sizing and background image of the nav bar, the reason we set the height to 40px is because that is how big my original nav.jpg was before I combined it with the nav-over.jpg. This way only the top half of the image displays.
10. #nav-example li, #nav-example a { height:40px; display:block; } – What this line is doing is displaying each list item and link to display block with a height of 40px. This makes sure that each link on the navigation is the same size. The reason it is displayed as block is so we can change the size of it, if it wasn’t we couldn’t change the width and height of each link.
11. #nav-example li { float:left; list-style:none; display:inline; text-indent: -9999em; } – The float:left is making it so each list item moves to the left side of each li below it, display inline makes sure they display in a horizontal line. List-style: none changes the li’s to not have a bullet next to them, sweetness. The text-indent is what will hide the text off the page so all you see is the image. Make sure you don’t try to sneak keywords in here, if the almighty Google finds out you could get penalized.
12. #nav-example-01 { width: 98px; } – This is setting the width of the first button “Blog,” if I wanted to start this button 10px off the left side of the #nav-example I could do it by setting margin-left: 10px. The next couple lines are setting the width of each individual link, this way the 4 link widths add up to the total width of my main navigation(you can measure each link by either making guides or selections). Now comes the cool part.
13. What we have to do is set the a:hover state, the way the background is offset on each hover is (horizontal number of pixels) (vertical number of pixels.) Since we have a horizontal nav bar, the vertical number of pixels to be offset is going to be the same for all of them. For the first one it is going to be 0px -40px, 0px because the background image only needs to come straight up to the top left of the nav, so what we do is tell it to go 0px left or right and -40px vertical, a negative integer brings the background UP. This shows the bottom part of the sprite nav, and since we set the width of the li’s it only shows on the particular li we are hovering over.
14. To get the next number we take the width of the nav-example-01 and subtract if from the previous horizontal offset number(which was 0 in this case.) 0-98 = -98px, I’m a math genius. Now we can put this in for the next li, nav-example-02 a:hover will be -98px -40px no-repeat.
15. We do the same for the next one now, -98-131=-229px. Now the offset for the a:hover on nav-example-02 is -229px -40px. This is moving the top left corner of the li background image to the correct position.
16. Normally if you were to put the a:hover’s background image to nav-final.jpg, whichever li you were in it would show the new background image in the top left corner of it, this is why you have to offset the horizontal value to get the correct section where you want it.
17. Now if you do the same process for calculating each button you’ll end up with the same numbers I do, unless you have your own nav with more buttons or different width, then you’re on your own at this point.
It’s also important to point out that this way of doing an image-navigator through CSS, concedes with the lines of accessibility through W3′s WCAG.
…as long as you remember to have a good contrast on the background and the text-color
i learned alot about working with sprites reading this great tutorial , thanks
That was absolutely pukka!
The Bloc Party website was designed like this and I was really impressed with the concept as it is a low resource way of using Custom typography.
What happens if you float the element in your design though? will the internal co-ords still be absolute??
It will still work if you float it, the reason is that the coordinates are only changing the background position, not the position of the actual nav. It should be fine, if you try it and run into problems let me know and I can figure it out for ya
Very nice. Css is amazing. I love what you can accomplish with it.
Thank you for posting this. This is an awesome technique. I use it on all my sites.
Thank you, I just wanted to give a greeting and tell you I like your website very much.
What happens when the client comes back next year and asks for three more links in the navigation, then asks for padding to be reduced between each link? You’d need Photoshop each time the positioning needed editing. Wouldn’t the nav be better served by slicing each link individually and using CSS to pad them, rather than all in one piece? Otherwise this seems like a really un-scalable solution.
Maybe I’m alone but using photoshop one time a year doesn’t sound like too much work to me. You are going to have to make new slices any way you put it, in your case, you’ll be making a lot more slices which also turns into more code. The amount of time it takes me to add links, reslice and code the nav would take me a lot less time than slicing 3 more images and coding each one of them.
Definitely true – there are many ways to skin a cat. Before reading yours, I was more familiar with the Sprite/Sliding Doors method where the text is ascii and the images are scalable, thus no Photoshop required.
Thanks for example! I will use it!
@Darren
There are many ways and that is the best part about it! I have seen that sliding doors example before but one of the advantages of this way is that you don’t have to use a default font. You can use any font you want and add text effects to it. If all I wanted was a background or color change that is definitely one of the ways to go about it though. Thanks for the comments-
Someday I will switch to CSS. But tables are so much easier to work with.
Pingback: links for 2007-10-28 | SOJo: Student of Online Journalism
I should point out that it’s slightly less code if you leave off the full background declaration in the :hover portions and just set background-position appropriately. That way you only specify the image in one place and thusly make your life better.
Your implementation is a little strange, because you actually seem to mask a general background with a more specific one per-element, whereas the approach I would probably have used would have had each element having its own background to begin with, and then moving it.
Anyway, sprites rock
I would argue this is not the most accessible way of doing things. As Roger Johansson recently pointed out (http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/), display: none; is not always read by screen readers. In this case, I would recommend removing the spans as they are not necessary and using the text-indent: -9999px; command to move the link text off the page and keep it accessible to screen readers.
Otherwise, the rest is well formed. Keep up the good work.
Best,
Daniel
You show us very important matters. most of your guideline is unknown to me. I was very much needy. I was searching since long time. I am really lucky at least I found your blog. Thank you for your kind consideration.
Here is good tutorial about CSS : CSS Tutorial
Here is good tutorial about AJAX : AJAX Tutorial
Hi! Thanks for the tutorial, but somehow I can’t make it work.
Maybe I did something wrong and just can’t figure out what. Anyways! KUDOS to the tutorial! Hoping that I can use it correctly! 
okay… sorry for triple posting. it worked fine now!
the only problem was the ” sign… it showed a different one in my control panel. anyways! THANKS SOOOOO MUCH!!!
I had problems but now it’s working!
Thanks!!!, You are sooo helpful!
Hi, this tutorial is amazing. I just finished implementing something similar based on this tutorial. Kool!
Thank you, this is exactly what I was looking for. This Rocks!
I like the tutorial,and was able to make it work for my own images the first try! Thanks. However, I was trying to create a dropdown navigation for two of the links, and just can’t seem to make it work. I have reviewed suckerfish, and all the others out there to be googled, but am having no luck modifying or understanding the code to work in my instance. I’m creating this for my company’s intranet which uses IE6, and am an intermediate developer. Thanks in advance for any help.
Is this where you are referencing from? http://www.htmldog.com/articles/suckerfish/dropdowns/
That is the method I usually use but I’ve never had a problem in IE6, just IE7, in that case I use the swfobject javascript.
If you still can’t get it maybe you can send me your code for the nav and I can take a look at it. The easiest way to do that is probably using the contact form. If you do this I can try to get to it as soon as I can
Jose check your email, I sent you a request for the jpg image. Also, try not to post your code here, use the contact form on the Contact page. Thx
I need it too! my e-mail: zepp@enfootwear.com! Thanks!
I finally got it to work, after hours of hair pulling. I would like you to look at my code if you don’t mind to give me pointers as to where it can be cleaned up, etc. Sorry about the mess I made before, I am new to the posting and blogging stuff. I will send it the ‘right’ way later. Thanks for your help.
CSS is so much more difficult for me to do everything. I find it such a waste of time. But your post actually makes some sense. So i might give it a go again. Thanks
Awesome stuff! Thank you for letting me know about this! it seems very helpful. this tutorial is amazing. thank u again for sharing.
so what happens when a user with images on but css off ? can this be made to degrade back to something usefull to the handicaped browsers
Nice
Thanks for post! It’s really interesting for me
Excellent stuff. Thanks for the tutorial. I find CSS more difficult to work with. But after reading your article I will certainly try it.
Thanks.
I’m totally confused and sad because I just can’t get a background. The list is order properly :S
I don’t understand what I’m doing wrong and it’s really frustrating.
can someone please help me?
great tutorial.
how ever the menu i’m making is vertical. So i tryed to aply this tutorial to that… i seem to have got it to work … but the images wont show.
Nvm … included a pngfix script and it works like a charm.
Thanks for the tut. Works great on my site.
Cool. It works great on my site. I’m share this to my friends
Pingback: CSS Sprite Technique Samples | DESIGNwalker max
Very very cool. its also looks on my site
awesome, i’m so glad i found your website.
Great tutorial. Thank you!!
Could you please explain how you would maintain an active state on the button which relates to the page that is being viewed.
Is it possible?
cool
@Michael
The easiest way for me to get the current page to show the active state is to use a body id. So if its the index file I’d have in the actual HTML.
This way in the CSS you can write a specific rule for it like so,
body#index #nav-example-01 {background:url(”/images/nav-final.jpg”) 0px -40px no-repeat; }
Awesome and clever technique! Can you give an actual working example of your sprites menu keeping the active state showing? I’m not sure how to apply what you’ve said above about it. I made my graphic with a 3rd extra darker button row for the active page link and added a section with lines like #sprite-nav-01 a:active {background:url(“images/my-nav.gif”) 0px -60px no-repeat; } etc. The active button shows when I click a page link but it won’t stay to show its the current page. Each button in my 600×90 graphic is 100×30 each for a 6 button nav bar. Thanks!
Sorry, I forgot to post my test page link to my name.
I got the active page buttons to stick after I figured out to modify the html body tag to etc. for each of my test layout pages,(matching the menu link names and css code references. Thanks so much for your sprites code!
Great tutorial man. Glad to see a lot of people are figuring this technique out. Good job spreading the word!
Pingback: 45 Photoshop Tutorials for Better Navigation | Vandelay Website Design
Cool Steve glad to see you got it working
Pingback: DeDestruct And Other Kinds of Awesomeness
Pingback: 45 Tutoriais Photoshop para Itens de Navegação | RuanWeb
Woow. interesting post.
thanks for all.
Great tutorial! I’m trying to implement this with sub level drop downs. Everything works great except…when I mouse onto the drop down sub level I lose the mouseover state of the main level. Any suggestions??
@josh – Ive never been able to/tried to get the rollover to stay in the hover state when going to the sub navigation, I’ll see if I can figure something out
Wow great! I did see this:
http://www.tyssendesign.com.au/examples/IR-navbar.html
The hover state stays intact on this example but I still can’t figure out how to integrate it into your example.
I’m doing something wrong. I have no idea what. My hover state doesn’t display. Would someone be willing to look at my code? I followed step by step too!
Please, Please, Please. I want to learn how to do this!
very nice…thanks..that helped a lot!
=P
Good my comment is 59 !!! Its a cool blog I ve got to tell ya, Info help me a lot, just like for you Ben Wagner
I never understood how they did any of this. Wow, CSS has so much involved. I’m intrigued though now. Interesting blog, great tutorial for those that have no clue how to do this stuff… thanks for posting!
Pingback: CSS Sprite?????? | DesignWalker
Pingback: Using CSS to Do Anything: 50+ Creative Examples and Tutorials
Pingback: 50???????CSS????? | ????
Pingback: KMC | Web & Internet Teknolojileri Günlü?ü » CSS ile 50′den Fazla Yarat?c? Örnek ve Makale
Pingback: Image Sprite Navigation Using CSS | White Sands Digital
Can you tell me why my image only shows on hover:
http://www.sandleraia.com/28a.php
Same thing on that page when I used your image and related code.
Thank you.
Hey Dave -
Try adding background: none; to the line #nav-example a. Should looking something like:
#nav-example li, #nav-example a {
height:31px;
display:block;
background: none;
}
Pingback: Using CSS: Tutorials And Examples | Belive Blog
Thank you Alex, that worked!
OOPS – it works in FF but not IE, any further ideas???
Dave – Sorry about that, looks like you need a space between your background url and no-repeat on #nav-example. Should look like this (so there is a space between .png) no-repeat)
#nav-example {
background:url(/images/nav-bar.png) no-repeat;
width:776px;
height:31px;
margin:0;
padding:0;
}
Thats why we love IE6
That did it, Alex – sorry for my carelessness, and thanks again.
alright fools, spent all day figuring this one out. I had a sprite sliding png menu that had to work in IE6.
The only way to accomplish this is to put a link with the background png inside of a div that has overflow:hidden, and then on a:hover change the relative position of the anchor tag within the div.
THE CSS:
#header_tab{
position:relative;
overflow:hidden;
float:left;
height:35px;
width:72px;
}
#home_link {
display:block;
position:relative;
top:0px;
bottom:0px;
height:70px;
width:72px;
cursor:pointer;
background:url(../images/header/tab_home.png);
behavior: url(iepngfix.htc);
}
#home_link:hover {
top:-35px;
left:0px;
}
THE HTML:
Hope this helps anyone trying to pull this off. There’s also a version of the twinhelix htc file that supposedly does some background positioning automatically, but i couldn’t get it to work right (it’s in beta I think).
any questions: dan[at]kickascii[dot]com
the HTML was stripped from my above post…
{div id=”header_tab_left”}
{a id=”home_link” href=”#”}{/a}
{/div}
crap..I forgot to change the id on the header tab..here it is in the correct form.
{div id=”header_tab”}
{a id=”home_link” href=”#”}{/a}
{/div}
If you add this to the CSS:
#nav-example-01 a {background:url(”/images/nav-final.jpg”) 0px -40px no-repeat; }
#nav-example-02 a {background:url(”/images/nav-final.jpg”) -98px -40px no-repeat; }
#nav-example-03 a {background:url(”/images/nav-final.jpg”) -229px -40px no-repeat; }
#nav-example-04 a {background:url(”/images/nav-final.jpg”) -352px -40px no-repeat; }
and remove the:
background:url(”/images/nav-final.jpg”) no-repeat;
from #nav-example, you can use padding a margin attributes in the #nav-example and still have the desired effect.
LOL if you add this sorry.
#nav-example-01 a {background:url(”/images/nav-final.jpg”) 0px 0px no-repeat; }
#nav-example-02 a {background:url(”/images/nav-final.jpg”) -98px 0px no-repeat; }
#nav-example-03 a {background:url(”/images/nav-final.jpg”) -229px 0px no-repeat; }
#nav-example-04 a {background:url(”/images/nav-final.jpg”) -352px 0px no-repeat; }
Pingback: Using CSS to Do Anything: 50+ Creative Examples and Tutorials | SEO & Web Design
Pingback: Using CSS to Do Anything: 50+ Creative Examples and Tutorials | SEO & Web Design
Pingback: Sélection de sites pour ressources CSS | blog de calii.fr
Good post! Will be one to bookmark and look over!
Another good thing about CSS sprites is that you can do columns easy as well
Thanks a lot for this tutorial,
but it would be very kind enough to you if you can suggest what should I do if I want to show the hover image after clicking on a link.
I mean to say suppose I click on the blog link I want to show the blog link selected.How will I do that?
Thanks & Regards,
Sharmily
Could someone please explain how to get a drop down working off this type of nav bar. Or direct me to somewhere that shows me how.
Thanks
Ross
I’m with Ross, could we please have the code to get a drop down working and also have the active page showing a different image.
Great blog, well done Alex
just read the comments and you will get part of what your asking for.
Just what I wanted!
Thanks for the guide!
Nice tutorial.
I made a tutorial similar to this, but it shows you how to incorporate it into WordPress.
It might be helpful to some of the readers here:
That code seems a little long to accomplish such a simple task. I made a quick tutorial on how to incorporate images into your navigation menu. It also shows you how to use active and hover effects on your links. Let me know if this helps:
http://thedailytut.com/wordpress/an-image-wordpress-navigation-with-hover-and-active-links
Nice nav! I’m using it for my new website, soon to be online.
Thanks for the tutorial!
Grtz, Laurens
LaurensHonselaar.com
The Netherlands
Is there additional code I need for this that is not on here? I copied & pasted the HTML into an HTML file, then attached a style sheet with the pasted CSS code just to see if it would work, and it doesn’t work.
Pingback: Una única imagen (sprite) para todo un menú interactivo en CSS - elWebmaster.com
I just wanted to say thank you for posting this! I am a complete newb and was able to follow this and implement it for my vertical navigation design. (I am hacking a css template) I couldn’t get it to show in IE7 and reading the comments showed me where I had gone wrong…
Thanks again Alex!
Hi
I’m trying to implement this method for one button only! and i still can’t get it to work! i’m a little lost in the css part of it. The button i’m using has the text embedded so i don’t need to do anything with the font part of it. Its not a menu its just a button! aghhhh could you kindly let me know how i would do this for 1 button and not a menu pls. much appreciated thank-you.
Cheers Antz
Now after read this good tutorial, i much learn about images sprite. I will try for my Joomla css templates.
Very thanks for this greate tutorial
Pingback: Indiscripts » Blog Archive » FF: Minimizing HTTP Requests
Pingback: Image Sprite Navigation With CSS - Blue Box Sols
Thanks for share ! It’s great
I would recommend removing the spans as they are not necessary and using the text-indent: -9999px; command to move the link text off the page and keep it accessible to screen readers.
first very thank for this great tutorial.
Any body can help me how to put in php template for joomla menu posision module(change No.6 above),
any help very thanks full
Thanx for the very helpful info!
Pingback: Edge Design » Blog Archive » How larger images can speed up your website
First of all I can’t believe there are still 2 people as of late 2007 who say things like “Tables are much easier” and “Some day I’ll use CSS” whoever they are, hopefuly they’ve seen the error of their ways by now.
Second for Antz: for your one button solution just use a background image on your anchor tag, then on hover reposition the image as above:
a.myButton { background (image.gif) 0 0};
a.myButton:hover {background (image.gif) 0 -40px};
you’ll have to replace your coordinates and this is over simplified but that’s the gist.
Cool idea, Will proberly use this sometime, Have bookmarked the page
This was amazing…finally i found what i was looking for….thanks for the tut…
Help! I am doing something wrong and I have no idea what. All I get to show up is a list of my links. I can’t see my image at all.
Pingback: Jade Nellans’ Illustration Blog » Blog Archive » Reworking Site in CSS
Hi,
I am still looking for some help on figuring out my problem. If anyone feels like helping me I would appreciate it.
Thank!
How difficult would it be to add one dropdown menu to this code with new links set up horizontally with one background image behind all 3 of the new links?
Pingback: Optimize Loading of Hover Images with CSS / Photoshop Techniques
I enjoyed your page. Keep up the good work! Feel free to visit my page. It\’s cool too.e
Really I would like to appreciate for collecting all the steps about CSS and presenting at once in good manner.Really nice..
Very cool!
Thank you very much.
Best,
Lautus Design
Very useful, thanks.
Thanks dude.. i was searching for it…
thanks
Thanks dude.. i was searching for it…
thanks..
Is there any special trick to creating this as a VERTICAL nav bar? I’ve gone through the steps and made the changes that a VERTICAL nav would require, using width instead of height, etc. and I haven’t been able to get the rollover to work.
Hey,
Thanks for this wonderful CSS Menu Tips…
Regards
Surat web Design Studio
Synergy Informatics
hi Alex. Thanks alot for your tutorial! It is really useful, however I encountered a serious problem.. It is ok in IE but not in Firefox. It is working for the bottom navigation bar but not the top. Could you advise what gone wrong?
Would be really grateful if any css fellow could point out my error.
Pingback: CSS Sprite - maakt je leven (en site) gemakkelijker!
Interesting technique, but how do you combine this with a dropdown? I need that functionality for a website I am converting from tables.
Hi cool tutorial I am looking for something like this am just wondering if it works on IE and Firefox??
Great tutorial… am wondering if there is anyway to get rid of the link box around the image which comes up when you click in firefox??
CSS provides tons of useful functionality that we used to rely on Javascript to do. Image rollovers with CSS, as said, definitely provide a better UI than relying on javascript to do an image swap. Good article.
So this is great. But it doesn’t solve one sometimes important issue:
What if a user has images turned off? How do you account for that?
Thanks for sharing this.. very nice.. I can used this kind off css on my website projects. thanks again! keep it up!
I still prefer tables because it works on All browsers without hacking it. CSS will never work properly unless all browsers follow one rule to make it universal. Either that or everyone use Firefox instead of the very buggy Internet Explorer.
Hi,
i am new to css, and am a java developer. I integrated the CSS with HTML in a single .html file. But I am not able to get the images. here is the final single file: where I misses.
sample.html
#nav-example {
background:url(“http://localhost:8080/sample/html/nav-final.jpg”) no-repeat;
width:490px;
height:40px;
margin:0;
padding:0;
}
#nav-example span {
display: none;
}
#nav-example li, #nav-example a {
height:40px;
display:block;
}
#nav-example li {
float:left;
list-style:none;
display:inline;
}
#nav-example-01 {
width: 98px;
}
#nav-example-02 {width: 131px;}
#nav-example-03 {width: 123px;}
#nav-example-04 {width: 138px;}
#nav-example-01 a:hover {background:url(“http://localhost:8080/sample/html/nav-final.jpg”) 0px -40px no-repeat; }
#nav-example-02 a:hover {background:url(“http://localhost:8080/sample/html/nav-final.jpg”) -98px -40px no-repeat; }
#nav-example-03 a:hover {background:url(“http://localhost:8080/sample/html/nav-final.jpg”) -229px -40px no-repeat; }
#nav-example-04 a:hover {background:url(“http://localhost:8080/sample/html/nav-final.jpg”) -352px -40px no-repeat; }
Blog
Portfolio
Resume
Contact
hi. like jen
i have followed this tutorial but i cant get it to work. the images dont display.
can anyone help. thanks
peter. just check image width.
For the Current State navigation use :
#nav-example-01.current {background:url(”/images/nav-final.jpg”) 0px -160px no-repeat; }
and also remove from navigtaion …
For the Current State navigation use :
#nav-example-01.current {background:url(”/images/nav-final.jpg”) 0px -160px no-repeat; }
and also remove link from navigtaion …
Pingback: Tools - CSS Image Sprites — phpgamespace.com
Pingback: First Grunge Design « Michael’s Blog
Pingback: Image Sprite CSS Navigation - Same Image Hover State - Tutorial | CSS Tutorials - CSSHelper.net
Really nice effect. I will definitely use it on a new site I’m working on. Thanks a bucket and good work.
Pingback: CSS-Sprites Quellensammlung
Pingback: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials | CSS | Smashing Magazine
Pingback: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials ??
Pingback: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
Pingback: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials « LocalLab : Foire aux Infos
Pingback: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials | Designurimagination Blog - Let Your Imagination Fly
Pingback: ??CSS Sprites?????????| ????????????????????????| ??de??
Pingback: ??CSS Sprites????????? | 1px left|?1??
Pingback: 45 Photoshop Tutorials for Better Navigation « Online Free Application Software Tips Tools Wallpapers
Very nice tutorial!
I only ever use to use the “Sliding doors” method as I thought using one larger image would cause problems if the clients image server was under a large amount of load..turns out, that’s not the case xD
Thanks again =]
Pingback: 40+ Better Navigation Tutorials | Free Tools And Wallpapers
Pingback: PureCSS » Blog Archive » ??CSS Sprites?????????
Pingback: Creating an Image Sprite Navigation with CSS - Tutorial Collection
Pingback: » 50???????CSS????? | ???
This is great & finally something which can be put to practice … u rock … cheers !!!!
Pingback: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials « Ramesh
Pingback: 50???????CSS????? | ????
Pingback: FF: Minimizing HTTP Requests « Whimsical.Nu
Pingback: CSS Sprites: CSS???????? | ????
Hi! I was surfing and found your blog post… nice! I love your blog.
Cheers! Sandra. R.
Thanks ..its very helpful for me
props
Pingback: JIRA: Zend Framework
oye pendejo tus porquerias de tutoriales no sirven te lo digo en español por que yo me tube que chingar leyendo tu mierda de tutorial en Ingles.
ah, hijo de puta antes de publicar cualquier tipo de post primero verifica que salga bien, y no hagas perder el tiempo engañando a la gente.
Pingback: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials | 9Tricks.Com - Tips - Tricks - Tutorials
Pingback: 45 Photoshop Tutorials Of Better Navigation | Cosmos Blog -- Internet News,Life,Culture,Polices,Resource,Make Money
Pingback: 45 Photoshop Tutorials for Better Navigation | Cosmos Blog -- Internet News,Life,Culture,Polices,Resource,Make Money
Im still pretty lost on how to get the active page to show in the menu….
I need to see an example of code…anyone?
This is great, thanks! Very thorough and easy-to-understand. I’ll be bookmarking it for future use
Thanks so much for the tutorial! I am really excited to find this. I was wondering (hope this isn’t a silly question) if the same technique would apply if the navigation was vertical and the image slide right to left, rather than top to bottom? I was thinking this would just be a matter of defining the measurements differently and changing the display to list? I wanted to see if anyone had any opinions?
Hi Christa,
Yes it will work the same, like you said, just a matter of defining the measurements. Here is a link to an example http://www.lightpostcreative.com/image-sprites-tutorial/
this is a lovely solution, works like a charm. exactly what i needed! bookmarked immediately! kudos!
This works like a charm – I use it for all my websites now.
Thanks a lot!
Pingback: ??CSS Sprites?????????
I love this sprites – but as the comments before mentioned, I can’t get the active state working – so if I have a 3 state button it works mouse over – but the li.active or so does not work and can’t find a good tutorial yet.
thx
Heiko
Hi, Your tutorial is simple and cool, thanks. I’m having a similar problem as someone above in that my image only shows on rollover. I tried adding “background:none;” where you suggested. I swear I have this set up right. Any ideas?
Hi. Nevermind. Hadn’t put the UL in it’s own div during testing. Once I did that, it works. Thanks!
Thank you, your article is very helpful.
Many thanks Alex, excellently written tutorial. Concise, to the point and very elegant code.
Pingback: ??-IT Player » Blog Archive » ??CSS Sprites?????????
very elegant code.
Pingback: Designprocess – Navigation « disastrous disaia
Pingback: HTTP zahtevi za slikama iz CSS fajla
Pingback: ??Sprite????? - Flash??
I don’t understand the CSS lines:
#nav-example {
background:url(“/images/nav-final.jpg”) no-repeat;
…
…
What is the ‘nav-final.jpg’? This is the only reference to it.
That is what I named my final image, it’s back now, had some strange CSS issues
Thanks tutorial added
Really fabulous tutorial.
One question you have:
#nav-example li, #nav-example a {
height:40px;
display:block;
and then you have:
#nav-example li {
float:left;
list-style:none;
display:inline
for #nav-example li both display inline and block?
Pingback: CSS Sprite ??? | WebLab
I studied the css tutorial and I really learned a lot. I think my next homepage will be a lot better than my first one.
Pingback: 45 Photoshop Tutorials for Better Navigation « HUE Designer
Thanks, I’ve just spend 2 days looking for this
Pingback: CSS Sprites(CSS??????)??????? | ????WP3test
awesome nav… has been a part of one of our clients’ sites for some time now and works beautifully in every browser EXCEPT internet explorer. any way to correct these bugs?
Pingback: ?Go?CSS Sprites???????|????
Pingback: Create an apple style menu and improve it via jQuery
Pingback: Create an apple style menu and improve it via jQuery | Kriesi.at - Wordpress Themes and HTML Templates
Alex,
Thank you for taking the time to explain this. I have “struggled” through this on two sites and finally understand why and how this works.
Well done!
Thank you for the ONLY example that this css newbie could understand and replicate. I am eternally grateful for your play-by-play explanation!
How would you make one of this activate a dropdown? Like an “OnMouseOver” or something like that…?
The css information is great thank you!
Alex,
Thank you for taking the time to explain this. I have “struggled”
QUESTION…Everything looks prefect and works perfectly in my dreamweaver live view but when i go to a preview in FF and Safari the menu is not visible. It is there though because when i hover over where the menu should be the mouse arrow turns to a hand and is clickable.
does anyone know whats going on?
thanks for the tutorial i love this menu option!
Got it nevermind. It had to be uploaded to work correctly. THANKS for this!!!
Hi thanks for this tuto.
Someone knows why my image is not dysplays as link, when a pass my mouse over the imange nothin happen?
thanks
Thanks!! You did a great job of explaining this technique.
Finally a CSS sprites tutorial that is done correctly! Thank you!
Pingback: my website needed columns…and rollovers… so that’ s what i did… well, tried to do. « When I grow up I wanna be…
Thank you for the example that this css newbie could understand and replicate. I am eternally grateful for your play-by-play explanation!
Pingback: ?Go?CSS Sprites???????
Pingback: ??CSS Sprites????????? | YAOHAIXIAO.COM
Pingback: 21 Must See CSS Sprites Tutorials | stylishwebdesigner
Pingback: ??CSS Sprites????????? (??) | blog.moocss.com
Pingback: Sprite Navigation Exercise | Web Campaign 300
Pingback: ??CSS Sprites????????? - Dream step
Pingback: Using css to do anything 50 creative examples and tutorials - NAGPUR CITY
Pingback: 50+ Creative Examples and Tutorials Using CSS | Webwibe
Thanks for sharing this Alex, keep returning to this page every so often for the example. Sprites are so much quicker than JavaScript on hover commands
Thank you so much for this
I tried this and it ALMOST worked. I fixed the problem there and now the image will not display at all! I am using an image of my own and have all of the correct information in. I cannot figure out what is wrong.
Please Help!
#nav-example {
background:url(“http://backyardsocial.biz/images/BYS_Web_Header_Final.jpg”) no-repeat;
width:600px;
height:40px;
margin:0;
padding:0;
float: center;
}
#nav-example span {
display: none;
}
#nav-example li, #nav-example a {
height:40px;
display:block;
}
#nav-example li {
float:left;
list-style:none;
display:inline;
}
#nav-example-01 {width: 70px; margin: 90px;}
#nav-example-02 {width: 70px;}
#nav-example-03 {width: 90px;}
#nav-example-04 {width: 70px;}
#nav-example-05 {width: 110px;}
#nav-example-01 a:hover {background:url(“http://backyardsocial.biz/images/BYS_Web_Header_Final.jpg”) -90px -40px no-repeat; }
#nav-example-02 a:hover {background:url(“http://backyardsocial.biz/images/BYS_Web_Header_Final.jpg”) -160px -40px no-repeat; }
#nav-example-03 a:hover {background:url(“http://backyardsocial.biz/images/BYS_Web_Header_Final.jpg”) -230px -40px no-repeat; }
#nav-example-04 a:hover {background:url(“http://backyardsocial.biz/images/BYS_Web_Header_Final.jpg”) -320px -40px no-repeat; }
#nav-example-05 a:hover {background:url(“http://backyardsocial.biz/images/BYS_Web_Header_Final.jpg”) -390px -40px no-repeat; }
Just finished this tutorial, it works, but only in chrome. Can somebody tell me how to make it work in ie9 ?
yeah!!!it is so good
I don’t think it works in IE. It does work in Firefox though…
Wonderful, thanks for sharing!
I would think this would be obvious. That is why the world has virtually thrown away the AGW conclusion–how much is made up? Who knows, so it’s all suspect.
By far the most precise and new information I located on this issue. Really delighted that I navigated to your web site by luck. I’ll be subscribing to your blog so that I can acquire the up to the minute news. Appreciate all the knowledge here.
Pingback: Create an apple style menu and improve it via jQuery | WPsharing
Pingback: jane-vision?????|???????
It was good and I got to know few good things.
I have also created a CSS sprite for my site at: http://kunals.com. Here, you can see an image on top left..here I have used this CSS sprite as painting.
One can move cursor over this image and it will turn into colored picture.
Get Free Web Hostings at http://atw3.com/
NEED FREE WEB HOSTING…?
Get Free Web Hostings at http://atw3.com/
Really awesome… helped a lot..thanx man!!!
Now i can say what is CSS sprite and how to use it…thanks for sharing
Can someone share a link with more details to integrate it with WordPress?
I am having a little trouble getting this to work… I am doing a variation of the tutorial using four smal images that change positions only on the y axis.
Here’s my HTML:
ABOUT
RESOURCES
AREAS OF PRACTICE
CONTACT
and Heres my css:
@charset “UTF-8″;
/* CSS Document */
#navigation {
margin: 0px;
padding: 0px;
height: 40px;
width: 1024px;
list-style-type: none;
}
#navigationli, #about {
height: 40px;
width:256px;
display: inline;
background-image:url(../images/spritenavigation_01.gif);
}
#navigationli, #resources {
height: 40px;
width:256px;
display: inline;
background-image:url(../images/spritenavigation_02.gif);
}
#navigationli, #areasofpractice {
height: 40px;
width:256px;
display: inline;
background-image:url(../images/spritenavigation_03.gif);
}
#navigationli, #contact {
height: 40px;
width:256px;
display: inline;
background-image:url(../images/spritenavigation_04.gif)
}
#navigation li {
float: left;
list-style: none;
display: inline;
text-indent: -9999em;
}
#contact li a:hover {
background-image: url(../images/spritenavigation_04.gif);
background-position: 0px +40px;
}
It was good and I got to know few good things.
Great , just great !!!
Thanks for this tutorial. Works like a charm in Firefox.
This tutorial was posted back in 2007 and it is still applicable to this day. Thank you Mr. Mr. Alex Hackbart your tutorial is so awesome that I was able to use it on my Footer Navigation thereby saving me some Javascript on my website. Your method wasn’t even mentioned in my book “Web Design All in One for Dummies. Long live to you sir.
Great tutorial Alex! I was able to implement CSS Sprites for my menu bar following your tutorial and modifying it a bit – I created a widget box for the menu bar. However, I have a small issue- there is a small sliver of the hover image appearing at the top of my sprite menu bar and I can’t get rid of it. I have tried messing with margins, padding, and display block heights but it is still there. Would you mind cruising over to my site and giving me ideas on how to fix it? I have been at it for a while and just cant figure it out/ I kept the sprite names nav-example and the widget is HTML5. Any help is appreciated!
Great tutorial. Now, I can use image spirit in my website.
Thanks
Hey, thanks for this awesome little tutorial. Now, I am running into a bit of a problem when I want it to automatically scale to the web browser window size: I can’t get it to work! Does anyone have any idea on how this could be solved in a good way? Code below:
@charset “UTF-8″;
img {
max-width:100%;
}
#nav {
background:url(“images/navbar.png”) no-repeat;
/*background-size: 100%;*/
max-width:100%;
height:100px;
margin:0;
padding:0;
}
#nav span {
display:none;
}
#nav li, #nav a {
height:87px;
display:block;
}
#nav li {
float:left;
list-style:none;
display:inline;
}
/*#nav-01 {width:16%;}
#nav-02 {width:17%;}
#nav-03 {width:18%;}
#nav-04 {width:18%;}
#nav-05 {width:17%;}
#nav-06 {width:14%;}*/
#nav-01 {width:306px;}
#nav-02 {width:322px;}
#nav-03 {width:343px;}
#nav-04 {width:343px;}
#nav-05 {width:318px;}
#nav-06 {width:267px;}
#nav-01 a:hover {background:url(“images/navbar.png”) 0px -97px no-repeat;}
#nav-02 a:hover {background:url(“images/navbar.png”) -306px -97px no-repeat;}
#nav-03 a:hover {background:url(“images/navbar.png”) -628px -97px no-repeat;}
#nav-04 a:hover {background:url(“images/navbar.png”) -971px -97px no-repeat;}
#nav-05 a:hover {background:url(“images/navbar.png”) -1314px -97px no-repeat;}
#nav-06 a:hover {background:url(“images/navbar.png”) -1632px -97px no-repeat;}
/*#nav-01 a:hover {background:url(“images/navbar.png”) 0px -97px no-repeat;}
#nav-02 a:hover {background:url(“images/navbar.png”) -16% -97px no-repeat;}
#nav-03 a:hover {background:url(“images/navbar.png”) -33% -97px no-repeat;}
#nav-04 a:hover {background:url(“images/navbar.png”) -51% -97px no-repeat;}
#nav-05 a:hover {background:url(“images/navbar.png”) -69% -97px no-repeat;}
#nav-06 a:hover {background:url(“images/navbar.png”) -86% -97px no-repeat;}*/
#banner {
max-width:100%;
}
#wrapper {
max-width:100%;
}
Pingback: lies, damn lies, and (sorta) statistics « adventures in cubing
Wat next? h0w d0 i link it? ‘pt.2 plz
{Good|Excellent|Nice|Cool|Great} {post|blog|site}website|piece|comment}{!|.|;-)} {Thanks|Thank you|Thankyou}{!|.|;-)}
I tried this, and I cannot get the hover to work. In Dreamweaver it works, but when I open the html file in a browser, I don’t get the hover effect. Anyone have any idea why this is happening? I’m completely stumped.
thanks dear.
This is very informative, thank you for sharing.
great tutorial to learn sprites! thanks mate!
Is there a way to make the image stay (on the color reserved for ‘active’) active until another navigation link is selected? I want the selected image link to stay a different color that the other navigation images, so users know which page they are on. Online tutorials I’ve seen only show two states ‘active’ and ‘hover’.
Great tutorial!
Great Read. Thanks for sharing…………..
Really awesome Article, Started my work it really helped me a lot .
I am still a novice at web design, but this tutorial was epic. Thanks so much
super tutorial ,,,,,,, tku verymuch ,,,,,
Thank you, this is exactly what I was looking for. This Rocks!
Very well reviewed. This is very helpful. I find it difficult editing this stuffs. Thanks to you, it made easier. You might also be interested in this site I recently visited. Have a good one! http://zadooland.com/
For most up-to-date news you have to visit the web and on world-wide-web I
found this web page as a finest site for newest updates.
Awesome little tutorial. Thanx
Pingback: CSS????? | web?????????????
Nevermind..got it…forgot to add my ..silly me!!
Generally I don’t learn article on blogs, however I would like to say that this write-up very pressured me to take a look at and do so! Your writing style has been surprised me. Thanks, quite great post.
Great and useful article, google and other famous sites uses this strategies with all icons, it is really great method to use one image several times no need to load every icon.
I am trying to make a drop down menu that uses a sprite for the main navigation bar, but not for the sub-menus. When I try to get mine to work it will show the “hovered” version of the sprite for each item as I hover over them. Any help?
I’ve always wanted to more learn about Css. this post is very, very helpful. I’ve got lots of ideas and style