The ease with which you can design different types of menus in CSS rollovers work has given us is no longer necessary to include code JavaScript , or create different images to make an appealing menu and neat, but so far I have not read any article dealing with the background-position in the creation of rollovers.

In this article - tutorial we will create a menu that changes color when we posed the mouse over it (a: hover) and when pressed (a: visited), with only one image file.

The advantage of this menu is original in its simplicity, because with a few lines of code can create a menu with as many buttons as we wanted.

Create the image for the rollover

First, create the image that scales in css , for this use any image editor, in this case I’m using Fireworks MX 2004 and with only a couple of minutes and this created the image.

Creating the CSS rollover

What is important in the creation of this file is defined alignment of web images and the margin of each other, we must take note of their positions and sizes, this is very important because the css is what we’ll climb this file to display the only image that interests us.

For example, these are the steps:

Canvas width: 200px
Canvas Alto: 108px
Width of each button 196px
Height of each button: 32px
Edge of each button: 1px
Headspace, bottom, left, right and between each button: 2px

Of course this depends on individual taste.

After having designed to export the gif file with transparent background.

first remove the styles, margins and padding of any list xhtml own, then define each item from the list as a block, because only you can determine the position of a background when applied to a block, and finally , apply the background-position a: hover and a: active, because the a: link and we are limiting the height and padding of each item. The rest is just define the text, what really matters, as I said before, is knowing the pixels of the image to scale it.