Probably the most common way to use lists for navigation purposes is a Vertical Navigation Bar and in a previous article I took you through How To Create A Vertical Navigation Bar In Dreamweaver Using CSS. In this article I will take you through how to Create a Horizontal Navigation Bar.

1. Let’s Start with a simple, unordered list.

2. Next Let’s Zero out the padding and margins and remove the default bullets. I have also set the width of the nav bar to 720px and have a repeating blue gradient image as a background.

3. At this point the list is still displaying vertically. To make it display horizontally simply add this to your css style sheet.

I tend to use this method as it is a bit less buggy than the other methods.

4. We now need to set the display: property to block as we want the list items to act as buttons. Now I want the width of the buttons to be determined by the anchor text so rather than setting a width on each element I have applied 2ems of padding to the left and right sides. To vertically align the text I have set the line-height to 2.1ems.

Next I want to create a divider in between each link. To achieve this I have applied a divider background image to each of the anchor links.

5. Last thing is to change the color of the text on rollover.

There we have it, a Horizontal Navigation Bar designed using CSS and Dreamweaver CS3.

If you would like more of these great tips then Sign Up for our Web Design Tips Newsletter.

Social Media:

You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.