I am testing Navigation Using Sprites

This is the Sprite Page I made with all my link images

This is the test nav bar

These are my navigation links that use the same single png image that shows up above. Pretty Cool!


Be sure to view the page source. The sprites image is placed as a background image in the #nav ul a styles. Each LI or list item is given an id. The background-image is styled using background-position to move it around. You can measure where the position is by going back to photoshop and selecting the area that you need to use for the link to get the width and then select the space before it to figure out how much negative pixels you need to use to move the correct image into view.

Use this for your Restaurant website navigation if you want. So many answers/design solutions to create unique websites. All part of the fun

Go Back to Examples Page