DaBrook.orgLearning Resource for
Web Design and IB ITGS

Simple and Easy Horizontal Menu with CSS

Posted: Tue, February 26, 08

The HTML

Start off making sure that you have the proper markup for a 1.0 strict xhtml document:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Horizontal List</title>
  6. </head>
  7. <body>
  8.  
  9. </body>
  10. </html>

Next we are going to enter some divisions for the page.  The first division is for what is called a "wrapper". All of the content on a page will go inside of a main division called the wrapper.  The second division call "header".   Assign "wrapper" and "header" using the id attribute. (This goes inside of the body)

  1. <body>
  2.   <div id="wrapper">
  3.     <div id="header">
  4.     </div>
  5.   </div>
  6. </body>

Now we are going to create an unordered list. Assign the <ul> element an id of "menu" and create three items in the list: Home, About, and Contact.  Make dummy links using the "#" as the value for the href attribute.

  1. <body>
  2. <div id="wrapper">
  3. <div id="header">
  4. <ul id="main-menu">
  5. <li><a href="#">Home</a></li>
  6. <li><a href="#">About</a></li>
  7. <li><a href="#">Contact</a></li>
  8. </ul>
  9. </div>
  10. </div>
  11. </body>

At this point your navigation should look like this example below:

Plain Horizontal Navigation

Applying the CSS

First, we are going to set what is called a global clear. Using the "*" symbol we can apply settings to all html tags.  Inside of the <head> tag type the following:

  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  3. <title>Horizontal List</title>
  4. <style type="text/css">
  5. * {
  6. margin: 0;
  7. padding: 0;
  8. }
  9. </style>
  10. </head>

Now that we have cleared all margins. We can style our body background and wrapper. We want the body to be light grey and the wrapper to be horizontally centered and 600px wide.

  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  3. <title>Horizontal List</title>
  4. <style type="text/css">
  5. * {
  6. margin: 0;
  7. padding: 0;
  8. }
  9. body {
  10. background: #ccc;
  11. }
  12. #wrapper {
  13. width: 600px;
  14. margin: 0 auto;
  15. background: #fff;
  16. }
  17. </style>
  18. </head>

Now your page should look like this example below:

Horizontal Navigation with Body and Wrapper CSS

The next step is to add the css to the main-menu list so that it appears horizontally rather than vertically.

  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  3. <title>Horizontal List</title>
  4. <style type="text/css">
  5. * {
  6. margin: 0;
  7. padding: 0;
  8. }
  9. body {
  10. background: #ccc;
  11. }
  12. #wrapper {
  13. width: 600px;
  14. margin: 0 auto;
  15. background: #fff;
  16. }
  17. ul#main-menu {
  18. list-style: none;
  19. }
  20. ul#main-menu li {
  21. float: left;
  22. clear: none;
  23. }
  24. </style>
  25. </head>

Now your page should look like this:

Plain Horizontal Navigation

Looks good, but in our last move we are going to give some margin and padding to the list.

  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  3. <title>Horizontal List</title>
  4. <style type="text/css">
  5. * {
  6. margin: 0;
  7. padding: 0;
  8. }
  9. body {
  10. background: #ccc;
  11. }
  12. #wrapper {
  13. width: 600px;
  14. margin: 0 auto;
  15. background: #fff;
  16. }
  17. ul#main-menu {
  18. list-style: none;
  19. }
  20. ul#main-menu li {
  21. float: left;
  22. clear: none;
  23. margin-right: 10px;
  24. padding: 5px 0 ;
  25. }
  26. </style>
  27. </head>

Great! There you go, a simple horizontal navigation using an unsorted list and css floats.

Final Step

<< Go Back to Web Design Main Page