To make use of this tutorial, you must have some prior knowledge of common html markup and basic css rules.

Click here to see the final result

Firstly we will deal with sorting out our links

Step 1

You do not have to use a div, you can also use it within a table cell. The above code just sets out your links using bullet points.

Apply border to div or td tag

Step 2

I am using an ID (note the #), you could also use a class (which would use a . instead) if you are using multiple duplicated navigation bar use the class so you won't have any problems with W3C validation.

Now we will apply some CSS to format the layout to our ul tag

Step 3

This keeps the navigation bar to the left with the float tag. It also stretches the whole page/table cell. The margins and padding allow the lists to lose their default formatting.

Now we need to format each li tag.

Step 4

This will make all the items in the li tags lined up next to each other rather than on seperate lines.

Now we need to apply some CSS for our links within the li tags

Step 5

This applies padding to each link to make it look more like a button rather than a short link. With the padding, the first figure is the top padding, followed by the right padding, followed by the bottom then the left padding. The border-right seperates each link with a small border which uses the full height of the navigation bar which makes the links look more like buttons.

Add a rollover

Step 6

This will change the background colour to a dark blue.

Choose Your Rating:
5 4 3 2 1

Name:


Email Address:


Web Site URL:


Title:


Comment: