Elliot Jay Stocks

CSS Tutorial: better nav image replacement

Written at 1pm on 27.10.07
Filed under Web Design / Tutorials & Resources / ALL CATEGORIES
53 comments (closed)

A few months ago, I wrote a tutorial for Computer Arts magazine (in issue #137) that showed readers how to create a good-looking navigation system with some clean, simple, and semantic code. Most importantly, it only used one image file; a technique often referred to as ‘CSS sprites’. There are many great tutorials out there that deal with this subject, but as several people have asked me to reproduce this article, here’s my take on it (the example site being loosely based around the design I did for trojanrecords.com). By the way, this version also has some extra information there wasn’t room to print into the original article.

Before beginning the tutorial, you’ll need to download this ZIP file, as it contains all of the supporting material. Enjoy!

Introduction

If you’ve laid out a site using CSS, chances are you’ve probably encountered the world of image replacement, using properties such as background-image and text-indent to replace standard text-based elements with interesting images. The aesthetic advantages are obvious, but image replacement is also a great technique because it means you can keep your clean markup intact. It works extremely well with navigation systems, particularly because - when using CSS’ :hover pseudo-class - it completely eliminates the need for those messy Javascript rollovers that litter the web of the past.

However, using a number of images for your navigation items (e.g: buttonOne-up, buttonOne-over, buttonTwo-up, buttonTwo-over, etc.) is still relatively messy and results in a delay (a blank space) in the ‘over’ image being displayed. Another drawback is the amount of work required to slice up each button image: usually the nav would have three different images for each button state, and that’s a lot of images and a lot of hassle.

So in this tutorial, we’ll do things differently: one single image will be used for all of our buttons and all three of their states (up, over, selected), our CSS will handle all the important stuff, and you’ll end up with some very neat, accessible, standards-compliant markup… as well as a great looking nav.

Please click on the thumbnails below to view the full-size screenshots.

Step 1

Open step1.psd. To focus on the navigation only, the document has already been cropped to the correct area. In order to distinguish the ‘hit’ area of each nav item, and to get accurate measurements, we’ll add vertical guides between each button (View > New Guide).

The look and feel of our example site is built around a rough / torn paper kind of look, and with a design a like this, you can see why we might want to use graphics for navigation rather than plain text. Ignore the logo and other elements in the header as we won’t be covering them in this tutorial - this is just to give context to the nav we’re going to build, and to demonstrate why we’re using graphics rather than plain text.

Step 2

Using the ‘Canvas Size’ utility (Image → Canvas Size), expand the height to 3 times the amount of the document. In this case, that’s 123px (or 41px + 41px + 41px). Use the arrows to make sure your canvas extends from the top.

Step 3

Duplicate every layer twice and move the copies down 41px from the top. Repeat, and move the second copies down 82px. Now edit the states: white text for ‘up’, a red background for ‘over’, and orange with a red background for ‘selected’. Add 2 horizontal guides: one at 41px and one at 82px, and your file should resemble step3.psd.

Step 4

Turn on snapping for guides (View → Snap and View → Snap To → Guides), create a selection around the NEWS button, hit command-c (Mac) or ctrl-c (PC) to copy, and then command-n (Mac) or ctrl-n (PC) to create a new document. This process allows you to quickly take measurements, and in the image above, you’ll see that the width and height of the NEWS button is 70px and 41px respectively. Therefore the distance from the left hand side to the SHOP button is 70px.

Note: in order to take measurements, you must have a layer selected that covers the whole area you want to measure. For this purpose, it’s usually best to create a flat colour layer underneath everything else and always select that before you copy.

Step 5

Create a new CSS file and make a note of each Photoshop measurement as a CSS comment. Keep repeating the process until you have a full set, and after you’re done, use the same process to measure the width of each button. Your handy notes should resemble the text in step5.txt.

Step 6

Create a new HTML file and paste in the markup from step6.txt. Each li has its own unique and meaningful ID, which we can then reference in the CSS file. The ul itself also has an ID and we’ll be using that as well.

Step 7

Open your CSS file and insert the code found in step7.txt just above your commented-out ‘notes’ block. A detailed explanation follows:

On the first line, we’re giving the ul the same background image we’re applying to its children li elements in order to prevent an image ‘flicker’ effect in Internet Explorer (6 and below).

On the second line, note the use of descendant selectors (more info at http://www.w3.org/TR/REC-CSS2/selector.html#descendant-selectors): all list items that are the children of ul#nav will float left (so the list displays horizontally rather than vertically), and we are taking away any default styles associated with lists (usually a bullet).

The third line sets the properties for any a element that is a child of the aforementioned list item. Those properties are: the height (41px, which is the measurement we learned earlier), block display (needed for image replacement to work across all browsers), absolute positioning (so we can position each one independently of the document structure), and a text-indent of -9999px (which moves the text 9999px to the left (i.e: off the screen)). This method of image image replacement is usually known as the Phark method. Lastly, we have outline:none, which removes the dotted line in Firefox when the link is clicked.

The fourth, separate line declares that all of the buttons specified should have the same background: navBG.jpg.

On the fourth line, why not just declare that with the other ul#nav li declarations?, I hear you ask! You’re right to suggest that, and it’d be a neater way of doing it, but because of the way the cascade is interpreted, ul#nav li is a descendant selector and thus becomes more ‘powerful’ than just declaring an ID. We could modify our forthcoming code to use descendant selectors as well, but that’d end up being even more messy, so listing the IDs here is a much safer, cleaner method.

Step 8

For the news button, we’ll create three lines of code: one line to set the starting background position and declare the button’s width (and position from the left); a second line to change just the background position on :hover; and a third line to do the same when the button is selected. Use step8.txt as a reference.

Step 9

Referring to the measurements found in your comments block, use the same format for the rest of the buttons (or replace the entire contents of your CSS file with the code found in step9.txt). The background image is shifted over to the left by the exact amount required to ‘fill’ the space of each button.

Step 10

To complete the navigation, each page on the site needs to have a unique ID added to the body tag. Using the IDs specified in your completed CSS above, go through each page on your site, modifying the markup to read <body id="pageNews">, <body id="pageShop">, etc. Your finished navigation should now resemble step10.html.

And that’s it! Did you find it helpful?

53 comments (closed)

Comments are currently closed on this entry, but you can still read those that have already been posted...

• Sean

  27.10.07

  

  #

  Thanks Elliot!

  Thats just what I needed.

• Zinni

  27.10.07

  

  #

  Elliot, do you really code all your sites on a black background like that? very l33t lol. Are there any benefits to this, or just personal preference?

  I guess it does look pretty cool…

• Ritchie

  28.10.07

  

  #

  WOW… Very nice.. Using one image for all navigation. ^_^

• Carly

  29.10.07

  

  #

  I own that copy of CA magazine, I only realised when I saw the image you created for step 3! Wow, I don’t know whether to follow the tutorial on here or read it in my mag! Either way thanks so much I’ve been wondering how to do this for ages…. :-)

• Impulse

  29.10.07

  

  #

  Wow..that’s pretty slick. That is WAY better than using a ton of javascript rollover code.

  Thanks

• Elliot Jay Stocks

  29.10.07

  

  #

  Hey guys - I’m glad you’re finding it useful! Coincidentally, Nick La just posted a very similar tutorial over on Web Designer Wall. It’s worth checking out to hear it being explained in a slightly different way to mine, and it might help solidify any issues you’re unsure of. It’s a beautiful site, too.

• Darren Hoyt

  29.10.07

  

  #

  I’m seeing this solution more and more, and under certain conditions it seems to have as many drawbacks as advantages.

  If you’re building a totally static site that will never grow or change, putting all your nav in one image would work. But sites will inevitably change, and increasingly clients want more control over their pages (via CMS), including the navigation.

  What happens when an extra layout column is needed and the margins between each button need editing - or when new buttons are added. The designer has to redesign and re-export everything with Photoshop until the next time.

  Nick’s example seems somewhat more practical in that the buttons are sliced individually. Adjusting margins with CSS or adding more list-items in HTML is simple, with or without a CMS.

  But with increasing numbers of CMS-driven sites, wouldn’t a more flexible/scalable solution like this one (Sliding Doors/Sprites hybrid) make updates easier in the future?

  I dunno, just another way of looking at it. (And regardless, the Trojan site is fantastic!)

• Elliot Jay Stocks

  29.10.07

  

  #

  @ Darren: You’re not wrong. As with any web design / development technique, this is but one method, and it has both pros and cons. I certainly wouldn’t say this is the be-all-and-end-all of image-based navigation; just one way of getting things done. The example you gave is a great alternative and certainly more scalable, but you pay the price of having browser-rendered text.

  Personally I’ve run into very few problems with the technique above; I would argue that the main navigation of a site should change very little if a site’s structure has been well planned. You could then use less image-dependent methods for more changeable sub-navs.

  But obviously this is in an ideal world! :) Thanks for the kind words, man.

• Twisted Barfly [PING]

  30.10.07

  

  #

  […] looking back in a magazine today (I wanted to look at the CSS navigation tutorial featured on this site) I found an Illustrator tutorial I could look at, concerning masking.  I wouldn’t have […]

• Andrew Ingram

  01.11.07

  

  #

  A very good and thorough overview.

  It’s a quite long and tedious process but it yields very good results. It’s kind of why I wrote a plugin for Adobe Fireworks that does most of the work for you. I would have made it for Photoshop except that I don’t know of any way to get the guide or slice data from a Photoshop document using the scripting API.

• frogx3.com [PING]

  01.11.07

  

  #

  […] Tutoral CSS better nav image replacement | Descargar archivos […]

• Mike Tosetto

  07.11.07

  

  #

  This is a great method for a nav bar. Thanks

• designyoutrust.com [PING]

  07.11.07

  

  #

  […] Most importantly, it only used one image file; a technique often referred to as ‘CSS sprites’. Read full article. (0 hits) Posted by Dmitry  |  November 7, […]

• Killian Tobin

  07.11.07

  

  #

  I love these css sprites even more than I love the tasty soft drink!

• Mykal Cave

  15.11.07

  

  #

  Elliot you are awesome. Works like a charm!

  Check it out: michaelrossback.com

• Steve

  25.11.07

  

  #

  Hi Elliot. Really love this style of building navigation. I have been trying to use the same method to build a vertical navigation but i am having problems making it work. Could you give me any advice. Thanks and keep up the good work.

• RUDE

  02.12.07

  

  #

  Just one little note, removing the outline from the navigation could be a little dangerous if used on institutional sites or similar because you drop keyboard navigation. In fact it could carry legal issues.

  BTW, awesome tutorial, congratulations ;-)

• Paul M.

  03.12.07

  

  #

  Elliot, if you compare your method - one big file, to WebDesigner Wall with every button separate - how would you describe pros/cons? I am just thinking if loading 5 times big image is longer that 5 smaller… Or maybe it does not matter?

• Andrew Ingram

  03.12.07

  

  #

  Paul, using a single image is actually better for two reasons. Firstly, a single image tends to have a smaller filesize than the total filesize of several images. Secondly, having less files means less server requests (a single image is only requested once, regardless of how many times it is used on a page because browsers cache the image after the first download) which is also faster.

  The downside is that having a single image tends to make the css for choosing the right part of the image more complicated.

• Paul M.

  03.12.07

  

  #

  Thanks, Andrew. I wasn’t sure about this, but you clarified my concerns.

• Elliot Jay Stocks

  03.12.07

  

  #

  I’m glad you guys have been finding this useful and thanks for the supportive words. I hope to reprint more of my other magazine tutorials here soon.

  @ Steve: To get it working for a vertical navigation, just do the opposite: make the ‘top’ values change instead of the ‘left’ ones.

  @ Rude: Yeah, you’re right, actually. Well spotted. I’m pretty sure there’s a more accessible technique you can use instead of outline:none, although I can’t remember it right now. Any ideas?

  @ Andrew: Thanks for answering Paul’s question!

• maxdesign.com.au [PING]

  04.12.07

  

  #

  […] CSS Tutorial: better nav image replacement […]

• John Faulds

  04.12.07

  

  #

  Another problem with the image replacement method you’ve used (aside from the outline stretching out towards the left when clicked on in Firefox) is that none of the text is viewable with images off because of the negative text-indent.

  I actually wrote something very similar to this last year but used a different IR technique which leaves the text on screen if images are off (the article also covers how to pair the technique with a Suckerfish dropdown so you can ignore the last half if you’re only interested in the single image/nav part).

• Ali Sattari

  04.12.07

  

  #

  Just wanted to say a wow for nice grided transparent design.

  And mention this old article, as a related one in Persian(farsi) language: http://weblog.corelist.net/archives/1384/05/08/css-rollover/

  ;)

• Stefan Alexandru

  04.12.07

  

  #

  Isn’t exactley what i killed my brains with but it does the trick. Elliot, when i made my css menu i never used text between a tags. Regardin the email i’ve sent you.

  All the best man. Take care.

• fatihhayrioglu.com [PING]

  05.12.07

  

  #

  […] Güzel bir CSS ile yapılmış resimli menü örneği. Bağlantı […]

• teamundead.com [PING]

  10.12.07

  

  #

  […] came across an excellent tutorial for easy image swapping using CSS. I ended up using this technique to do the main nav links for the […]

• Tony Johnson

  12.12.07

  

  #

  Great article!

  I’ve used css sprites on a couple projects but with a single image for each link’s state (off, hover, focus). The benefits of using a single image for the entire nav makes sense to me and I’ll use that technique from here on out.

  As for hiding the HTML link text, I recently started placing a span around the actual text (inside the a tag) that simply hides the text. For example:

  span.linktext {
  visibility:hidden;
  }

  It works fine in all major browsers.

  Thanks again!

• Paul M.

  12.12.07

  

  #

  The question is, Tony, if from Google perspective (spamming), it is better to use -9999p instead of hidden visibility:hidden or display:none.

• Missy

  12.12.07

  

  #

  The problem (forgive me Elliot) is that large sprites take too long to download. I can see your point if the background is complex or if each button is distinct in design (as per your example) but if the nav items all use a similar background then straight up :link and :hover selectors with independent graphics will do just as nicely.

  And I don’t think it would work so well if your Nav is generated dynamically. Forgive the shameless plug but my 10-yr old son’s site is an example (www.car-mad.com). The CSS would need an infinite collection of distinct classes to deal with an ever-changing navigation - hence the decision to KISS.

  The sprite concept is sound, but I would urge anyone out there to weight up the pros and cons first.

• userfirstweb.com [PING]

  14.12.07

  

  #

  […] Elliot Jay Stocks » CSS Tutorial: better nav image replacement Uses css sprites (tags: css sprites design navigation image replacement) […]

• Idetrorce

  15.12.07

  

  #

  very interesting, but I don’t agree with you
  Idetrorce

• Lori

  19.12.07

  

  #

  I enjoyed reading your tutorial and it helped me practice what I read in the book: “The Art & Science of CSS” put out by Sitepoint. The problem I have with the whole method is that it’s not accessible in terms of being able to enlarge the font-size and for the club site I’m trying to redo, there are older folks and some with sight or reading problems who really need to have large fonts. I thought of just making the tabs large, but thought they’d probably look strange if too large and for my “legally” blind friends, I don’t know how big is big enough. I can have him or anyone click a link to increase or decrease all font sizes - when using ems or %. I’m too embarrassed to give the club URI out at the moment. When I update, then I’ll give it out. ; ~)

  Other than that problem, it was a great read and I enjoyed playing with it and then learning my problem before I went too far with it. In the book I mentioned, it told of a whitespace problem in IE6 (of course) and at the bottom IE6 shows a line and then an extra space. To cure it, their remedy to trick it into not putting whitespace around, was on the tag #nav (0r #menu) to add float: left; and then style the tag #nav li {
  margin: 0; padding: 0; float: left; width: 100%; } The float and width removes the whitespace on vertical navigation lists. If anyone was having that problem, hope their solution helps you. It’s a great book!

  Thanks for the terrific read and I’ll be back reading more!

• Jermayn Parker

  20.12.07

  

  #

  Just one question….
  What happens if you enlarge the text, does it get effected??

• paula

  09.01.08

  

  #

  Hi Elliot,

  Just want to say big thanks for the tutorial! the navigation works on firefox but not on the latest version of IE/safari. Is there a method to solve this problem?

  thanks a bunch

• Elliot Jay Stocks

  09.01.08

  

  #

  @ Missy: Actually, one large sprite image is smaller in filesize than several individual images combined, which is one of the benefits of this technique. Please see Andrew Ingram’s comment above. However, you’re right about how people should weigh up the pros and cons before deciding on this approach. It goes without saying that this method is unsuitable for dynamically-generated menus.

  @ Jermayn: No, it won’t get effected if you enlarge the text, as specific, pixel-based heights have been declared. This has a downside in that you might want the text size to increase, but if that’s the case, I would advise against using image replacement.

  @ Paula: I’ve just tested it on Safari 3 and IE7, and it appears to be working fine.

• ali

  17.01.08

  

  #

  Hi Elliot,

  Great Tutorial, got it working well, however, I was wondering how this could be developed to work on a fixed width, centred design?

  Any tips greatfully received!

• benetti.blog.br [PING]

  19.01.08

  

  #

  […] Uma informção é necessária saber: neste tutorial é usado o fast CSS rollover para chamadas simples, claro que também é possível otimizar as imagens posteriormente para alcançar pesos condizentes com uma facilidade de transferência e rápida carga da página, combinando imagens para um resultado final. Neste ponto recomento a leitura de Better Nav Image Replacement. […]

• bob

  10.02.08

  

  #

  52X2Vl hi great site thx http://peace.com

• bob

  20.02.08

  

  #

  mtR26O hi nice site thx http://peace.com

• Mitchell Renton

  27.02.08

  

  #

  Does anybody have any examples of vertical nav? im trying to get one working but have got a bit lost! Numbers aren’t my strong point. iv changed my ‘distance from left’ to distance from top’ and visa versa and iv also changed the width css elements to height and also ‘left’ to ‘top’

  am i missing something else?

• resa joee

  07.03.08

  

  #

  can you make me design for my website? contact me via email.

• Austin

  26.03.08

  

  #

  Thats very cool!

  I thought it looked familiar, I think I read Nicks first…

  Congrats!

• Chat

  21.04.08

  

  #

  Very nice website

• Searchin

  24.04.08

  

  #

  very nice!

• DW

  24.04.08

  

  #

  I’m new to CSS Sprites. It took me a long time to code this out, although the measurements were made easier with Andrew’s Sprite Menu plug-in for Fireworks.

  Very cool, Elliot!! Thanks!!

  I just can’t seem to get the “selected” state to work on any page though. I also tried Andrew’s Sprite Generator…same deal with his version…no “selected” state on any of the pages…either in Firefox or IE7.

  Any ideas?

• Home

  25.04.08

  

  #

  very good information, could certainly use the guidance.

• Sebastian

  06.05.08

  

  #

  Thanks a lot, your tutorial was really helpful. keeping do it.

• Chris

  04.06.08

  

  #

  Hi - Great menu! I am a bit new to CSS and I have having trouble with positioning… In your demo download, the menu will slide with a broswer window resize. (So if I resize my browser from right to left, the menu will slide along with it). How can I make it so the menu sticks in one spot and doesn’t move when I resize the browser window.

  I know it has to do with relative vs. absolute positioning but I can’t figure out where in CSS to edit it. Thx.

• Ben

  16.06.08

  

  #

  Amazingly, this doesn’t seem to work on IE6 on XP. Even the demo code menu is shifted up and out of place.

  Am I missing something?

• legal

  18.06.08

  

  #

  forget about IE

• psula para icat elmas

  15.07.08

  

  #

  css layer examples / properties and layer attributes
  http://css-lessons.ucoz.com/css-layer-properties.htm

• Walter

  19.07.08

  

  #

  I thought I was doing the tutorial wrong because I was getting the flicker effect in IE, but I uploaded the exact files and it was still flickering. Anyone has any suggestions?