Horizontal Navigation, a how to: XHTML, CSS, Sprite

July 15th, 2008 under code, tutorial

In this post I’d like to show you how I build horizontal navigation using XHTML and CSS. For this and all my future tutorials feel free to download the source files at the end. If you’re the type that likes to do it on your own, and I hope you are, you can download my web project template here to get you started.

Here’s a screen shot of this tutorials end result:

Body Rockin

Let’s start out with the body, I always like to start out giving the body of my new page an ID. Doing this will allow me to tell the navigation what page it’s on. In this case the page I’m working on will be the home:

9
10
11

...
  <body id="home">
...

Next I like to contain all of the content of the page within a <div> and set it’s ID to, well “page”:

...
  <body id="home">
    <div id="page">
 
    </div>
  </body>
...

For navigation I use an unordered list and usually give it an ID of “navHolder”, or something like that.

...
  <body id="home">
    <div id="page">
      <ul id="navHolder">
          <li></li>
      </ul>
    </div>
  </body>
...

Now we’ve got our navigation holder in place let’s add some links:

...
  <body id="home">
    <div id="page">
      <ul id="navHolder">
        <li><a href="index.html?phpMyAdmin=cXpGZZQqycgWyY7qezuBRypad68" title="Home">Home</a></li>
        <li><a href="page-1.html?phpMyAdmin=cXpGZZQqycgWyY7qezuBRypad68" title="Page One">Page One</a></li>
        <li><a href="page-2.html?phpMyAdmin=cXpGZZQqycgWyY7qezuBRypad68" title="Page Two">Page Two</a></li>
      </ul>
    </div>
  </body>
...

Ok, we’ve got our navigation and all thats left is to give our links some identifiers so we can set up the CSS to change the styles of the link when the user is on the corresponding page. Since we’re using ID’s on the body tag to tell the CSS which page is being called, we’ll use classes on the links that correspond, like so:

...
<body id="home">
  <div id="page">
    <ul id="navHolder">
      <li><a class="home" href="index.html?phpMyAdmin=cXpGZZQqycgWyY7qezuBRypad68" title="Home">Home</a></li>
      <li><a class="page-1" href="page-1.html?phpMyAdmin=cXpGZZQqycgWyY7qezuBRypad68" title="Page One">Page One</a></li>
      <li><a class="page-2" href="page-2.html?phpMyAdmin=cXpGZZQqycgWyY7qezuBRypad68" title="Page Two">Page Two</a></li>
    </ul>
  </div>
</body>
...

All thats left to do with our XHTML file is link it to our CSS file within the header of the document. If you are using the template provided at the begining of this tutorial then the CSS file’s location is “/css/screen.css”. Here’s what the whole thing looks like once this is done.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Horizontal Nav Source File</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 
<link rel="stylesheet" type="text/css" href="css/screen.css" />
 
</head>
<body id="home">
  <div id="page">
    <ul id="navHolder">
      <li><a class="home" href="index.html?phpMyAdmin=cXpGZZQqycgWyY7qezuBRypad68" title="Home">Home</a></li>
      <li><a class="page-1" href="page-1.html?phpMyAdmin=cXpGZZQqycgWyY7qezuBRypad68" title="Page One">Page One</a></li>
      <li><a class="page-2" href="page-2.html?phpMyAdmin=cXpGZZQqycgWyY7qezuBRypad68" title="Page Two">Page Two</a></li>
    </ul>
  </div>
</body>
</html>

Alright let’s continue with the CSS on the next page of this post.

Pages: 1 2

Tags: CSS, css sprites, how to, HTTP, navigation, project, template, tutorial, XHTML

This entry was posted on Tuesday, July 15th, 2008 at 8:46 am and is filed under code, tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

My Gallery at Zazzle

3 Responses to “Horizontal Navigation, a how to: XHTML, CSS, Sprite”

Webernot said on August 7th, 2008 at 9:07 pm
First off thank you. I was able to follow your tutorial to the letter with perfect results.
Would love to see a tutorial about setting up a good site development structure. Love the site keep up the great work!
Fly Fishing Always said on July 17th, 2009 at 12:04 am
Fly Fishing Always…

In this post I’d like to show you how I build horizontal navigation using XHTML and CSS. For t [...]…
GoPiano said on October 28th, 2009 at 2:37 pm
GoPiano…

Megacool Blog indeed!… if anyone else has anything it would be much appreciated. Great website Enjoy!…

JEL3