Web Sites made Easy

If you have not looked at my CSS image roll over tutorial you should do so now. You can click here to go there, otherwise continue on with this tutorial! I will teach you how to make a navigation bar using one image that contains all your buttons and roll over effects. To start your going to want to create a image file that you will put all your buttons in. If you have 4 buttons and each one is 200px wide by 50 px high, then you would want an image canvas that is 200px wide and200px high (If you had 2 buttons then your canvas would be 100px high). The image I will be working with may be seen below. This image is 260px wide and each button is 75px tall.

First off we can tell we are going to want to hide the image and we will only want to show one button at a time. Before we can style any of these buttons in CSS we need to create our navigation bar.

Our navigation bar would look like so:

This will give us the ability to style our CSS and show our image navigation bar. You will notice that I put text in each one, but when we style our CSS the text will disappear! To create this simple navigation bar we will need a lot of code. I will give you the CSS and then explain what each section does.

First we style the Div of topnav. This is how you move your navigation bar around using either float or margins. Give this div a width and height if you want to float other materials next to it, otherwise it will act as a block level element and other items will appear either above or below it. In the topnav ul class we give it a list-style-typeof none to take away the bullets that an unordered list creates. Always declare your margins and paddings as 0 so your images don’t have any unnecesary padding.

Now comes one of the most important parts to making this work. We must style the topnav ul li a. We give it a display of block to show our images. If we didn’t give it a display: block; then we would not see our images and we would just see the text. We set the background to not repeat to stop the images from repeated themselves accross the screen. The text-indent moves the text that we put in our body off the screen. Finally, the part that hides our image from the viewers, overflow: hidden;. If you do not declare the overflow as hidden your entire image will show.

Now we have to style the classes that we added to each list item. Each class has the same background because it is just one image. Where we show the background is how we change what the button looks like. If we break down my image we see that the second button starts at 75px and the third at 150px. This is very important to take note of when styling your CSS. In my CSS i used left top for the first button because that declares the area as 0 0 (your second button would be 0 -75). For the hover of my first button you will notice that the background-positions is the only thing that changes. It changes to 0px -225px. This is because the button I want displayed for specials appears at 225px down from the first image. In the non-hover area of the CSS is where we declare the size of the button.

With this information you can walk through the rest of my CSS and see how I showed the rest of the buttons. We use a negative px to move down the image. If you used a positive px it would move up the image.

If you want to trouble shoot and walkthrough this you can save the image and create a webpage with the above code that I gave you. Be sure to change your image links so the image appears. You can see my working example below. The bonita club image moves to the left 1px because I was 1px off with my measurement.

Filed under: HTML Tutorials by Zach