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.

First you need to create a white box to paint/color in. I am using Photoshop, but you can use paint if you do not have an image creating software. Watch out while using paint because if your text does not line up it will seem like the text is jumping up and down on mouse roll overs. If your text does not stay static this means you are off in your measurements. An example of my box may be seen to the right. I put my measurement in for the center of my box.

Next we will put in a background and put in the top half of the text. The second step in this task can be seen on the right. I gave the image a red background and black text that says hover here.

We just have one more task to complete with the image and then we are ready to start putting the CSS in for our roll over image. We need to put whatever we want the roll over to be on the bottom half. If you are doing text roll over images you must be careful in your placement. If you are 1px off you will be able to tell when you hover your mouse over the picture.

This roll over technique is useful for any roll over image that you would normally use javascript for. Now lets implement this last stage in our picture. My example may be seen on the right again.

Now we need the CSS for our rollover image. You need to make your image a background-image inside a div. You need to give the div a class, set the background-image to the picture, set the size to the width of the image and set the height to half of the image. You set the height to half because you only want to display one part at a time. You will want to set a background-position of left top;. You will then want to make another CSS that is yourclassname:hover and set that to a background-position of left bottom. Example code of the CSS:

The HTML Body cody would look like this:

The CSS makes it so only the top half of your image is shown. Then when the users mouse hovers over your image it shows the bottom half of your image.

The CSS for the code would look like this:

This gives you the bare minimums for a simple horizontal list. The inline display makes the list items appear on one line and the style type of none removes the bullets that an unstyled list would have. Place the HTML code in the div named ‘nav’. If you refresh your webpage it should now look similar to the image below.

If you copy and paste this code you will have to replace the quotations or else it will not work. This is the begining code to every webpage. The style tags can be replaced later with a css style sheet, but for coding purposes it is easier to edit one document rather then two.

Next we have to make our background black. To do this we have to add some css to our style tag. You reference the body by just typing body. You do not need a ‘#’ or ‘.’. You may see an example of the code below. It goes inbetween the style tags. We also delcare our font type and how we want to align the text in this area.

If done correctly your browser should now look like the screen shot on the right.

Next we need to create a div that contains our entire website. This will be the white background that the WOS-LA website has. To do this we need to create a div in the body of our website. Once we have this div created we need to style it in our css to give it a white background. If you do not know how to create a div you can reference the code below. I will also supply the CSS code for you. The height of this div is 891px and the width is 756px.

The CSS code would look like this:

Yours should look similiar to the one on the right.

Now, if you looked at their website you will notice their content is centered in the browser and pushed down. To center ours we need to add a margin into our main CSS style. When doing margins remember that it styles TOP, RIGHT, LEFT, BOTTOM. This means that if you type in margin: 0 auto 0 auto; then the browser will not move the page vertically, but will center the main div horizontally. If you have the same top and bottom tags and the same right and left tags, then you would only have to type margin: 0 auto;.

Therefore the CSS you need to add to your #main to center the page is:

Your website should now look like the one on the left.

Now we will create the flash box in the website. From here on we will assign random colors to our divs just so we can tell them apart. We will create this div just how we created our main div. The difference is this will be place inbetween the opening and closing of your content div. The flash width is 144px and the height is 143px. Example code is below as well as an image on the right to compare your new div.

The CSS would look like:

Well, if you decided to make image bars then you only need a few lines of code!

An example of this can be seen here.

If your like me, you don’t like that blue line going around your nice box! To remove this blue line we have to add the style code ‘text-decoration: none;’ and add a ‘border: none;’ to the img code.

If you are not doing a special button then you can create your navigation bar with html/css. There is no point in re-inventing the wheel so take a visit to listamatic. This is a site with numerous navigation bars that you may use. Once you have found the one you wish to use, paste the HTML code inside your body tags. The code should be pasted where you want your nav bar to be located. Next copy and paste the CSS code into your style sheet. Voila! You now have a nice looking navigation bar.

To change the colors, size, and style of the bar you must change the CSS code. To see an example of one of these navigation bars you may look at my vertical bar I use in this site. I got this bar from the website and re-styled the CSS to my liking.