Making a navigation

I have no clue how to make a navigation out of this, can anyone help me assist making it?

I wanna learn how to make it in valid css.

The blue one is the active and hover.

Here is an example of how to do something like that:

Untitled Document

How would I create those splitters after each button?

Also that shows how to do it with images that are done, I want it to be editable with text simply in html.


Here’s an example using the image you posted.

It uses this sprite image to make the rollover states and the divider.

The top pat of the image is repeated on the ul element.

ul#nav {
    margin:0 auto;
    border-left:2px solid #ddd;
    border-right:2px solid #ddd;
   [B] background:url(images/navbgsprite.gif) repeat-x 0 0;[/B]

The hover part is applied to the anchor on hover by changing the sprite background position.

ul#nav li a:hover {
    background:url(images/navbgsprite.gif) repeat-x 0 -28px;

The divider is added to the list element.

ul#nav li {
    [B]background:url(images/navbgsprite.gif) no-repeat 100% -56px;[/B]
    padding:0 5px 0 0;

The background -position is changed again to show the relevant part.

If you wanted a divider on both sides of the text then you wuld need to nest another element such as a span so that you can apply the extra image to it in the same way that we have for the list. The spabe would need to wrap the anchor and be floated using the same dimensions as we have for the others.

Just view source to grab the full code. If the image you posted wasn’t the full size image then adjust the dimensions accordingly. Don’t put too many nav items in the menu otherwise they may wrap and break to the next line. If it needs to be an exact fit then you would need to class each menu item and give it an exact width to fit.