Creating a simple CSS rounded-corners navigation bar.

This tutorial will provide complete instructions on how to build a simple, clean navigation bar. We will use HTML and CSS alone to create the bar. However, to get the rounded-corner effect we will need to use a couple of images. We will use Photoshop to create these.

The navigation should be compatible over multiple browsers, if you spot any errors please drop us an email.

To complete this tutorial you will need a text editor. We will be using Scite.

You will also need some sort of image editor/manipulation program, We will be using Photoshop.

The end product:

HTML navigation structure.

The first step to creating our navigation bar is to create a folder. The folder is required to store our code files.

Now we need to write the HTML. Using your preferred text editor create a HTML list. We will be using an unordered list, please keep in mind that the list needs to be inside a DIV.

The reason for this is, in this example, we will be using the DIV element to give the navigation a background color. So, for this step we should have a DIV,labelled with an ID;inside this DIV should be an unordered list. Take a look at the image to your left for an example of this.

Save the file as 'index.html'. Now, create a CSS document and in your HTML code, link to this CSS document. Again, an example of this is available in the image.

Creating the images.

We will be using Photoshop to create the images. If you do not have photoshop it should still be possible to get the same effect using an alternative image manipulation application.

Create a new image using a width of 450px, and a height of 50px. Set the resolution to 300px/inch. This gives us a higher quality image.

The image to the left shows an example of the settings you should be using.

Please note that the resolution doesn't need to be precisely 300, in-fact you could probably get away with using a lot less. I just found this to produce a reasonable finish.

Dynamic width navigation

Within our new photoshop file we are going to create a rounded rectangle. However this will not be the end product, we want dynamic width tabs for this navigation.

The problem with using an image to style each navigation tab(list item) is that each individual tab is most likely going to be a different width. This is obvious as each word can be a different length e.g. Home and About us.

To save us having to create multiple images with different widths we are going to do the following:

Once we are happy with our rectangle we will be slicing it into two separate images. The reason for this is that we want the tabs of our navigation bar to contract and expand with the text of each tab. In other words, we want dynamic width tabs.

The way we do this is, for each tab we use two separate images. One applied to the left side of the tab, the other applied to the right. The images will then slide apart where necessary, or slide together where necessary. This is known as the sliding doors technique.

A couple of things to note... Because the images are going to overlap we want image in front to be as narrow as possible so that it doesn't cover any important parts of the image behind. The best way to achieve this is to slice the image at a point just along from the curve of the rectangle.

It is also wise to give the larger image a bit of extra width than necessary. This way we are assured that any long-winded tabs are safely covered.

Creating navigation images

Open the empty Photoshop file you created before and select the rounded rectangle tool. To do this press 'P' to select the pen tool, and then select the tool from the top tool bar.

Check the image to the left for an example of this.

In the same tool bar which you can find the rectangle tool you should see a radius section. Set this to 15px, this is used to set the radius of the corners.

Now, with the rounded rectangle tool selected left click and drag your mouse to draw a rectangle.

Try and replicate the image to your left. .

CSS Tutorials/Articles:

Advertise: If you would like to advertise on our site please click the “Advertise here” banner at the top of the page.; As we are still only a new site we are offering our advertising slots at a more than competitive price of $2 per day.; For more information click here