In this tutorial I will explain how to code a navigation in XHTML and CSS.

Finished product: Navigation Preview

Navigation Files: Background Image (save as nav_bg.jpg and put it in a new folder named “i”)

First thing is to tell the CSS what type of font you are using and what size it is. Below is an example of how.

body {

font: 12px Arial, Helvetica, sans-serif;

}

Next you need to define the <ul> or unordered list in the CSS. That will look something like this.

ul {

background: url(i/nav_bg.jpg) repeat-x;

width: 829px;

height: 28px;

padding: 0;

}

  • Background: url(i/nav_bg.jpg) repeat-x; – the background of the nav and the image repeats horizontally.
  • Width: 829px; – navigation is 829px wide.
  • Height: 28px; – navigation is 28px;
  • Padding: 0; – navigation is not padded in at all.

Next we define the <li> or list item in the CSS. Look below for an example of this.

li {

display: inline;

font-weight: bold;

width: 91px;

height: 21px;

padding: 7px 0 0 0;

float: left;

text-align: center;

}

  • Display: inline; – the navigation links will display in a horizontal line.
  • Font-weight: bold; – the text is bold.
  • Width: 91px; – each link is 91px wide.
  • Height: 21px; – each link is 21px high.
  • Padding: 7px 0 0 0; – the links are padded down 7px.
  • Float: left; – each link floats to the left.
  • Text-align: center; – the text is centered in the button.

The last step of the CSS is defining the <a> tag or the link. View below for the code.

li a {

color: #fff;

text-decoration: none;

}

  • Color: #fff; – the color of the link is white.
  • Text-decoration: none; – no underline.

Now for the XHTML part. Just add this simple code into the <body> of your XHTML document.

<ul>

<li><a href=”">Link</a></li>

<li><a href=”">Link</a></li>

<li><a href=”">Link</a></li>

<li><a href=”">Link</a></li>

<li><a href=”">Link</a></li>

<li><a href=”">Link</a></li>

<li><a href=”">Link</a></li>

<li><a href=”">Link</a></li>

<li><a href=”">Link</a></li>

</ul>

Now your navigation should look like http://valid.xhtmlpros.com/tuts/navigation/. I hope you all found this tutorial helpful!