x

CSS Template Tutorial – CSS Horizontal Navigation


Welcome to the horizontal navigation tutorial. So far you should understand CSS and the way it works and you should have a header with a logo. In this part you will be coding and slicing the horizontal navigation as you can see in the preview of the design. The tutorial is to create a "sliding door" technique navigation since it has rounded edges.

If there was not rounded corners we could simple repeat an image in the horizontal direction. Since it has rounded corners we cannot do this.

Slicing the navigation background

First we need the light background to repeat the full way across the wrapper and to hold each navigation item. To do this you first need to slice the background image like in the diagram. This will be repeated in the x-axis:

css navigation tab

Usually I would make the selection 1px wide but since there is a pattern it must flow just like the header background had to flow together.

Coding the navigation background

This is going to be very simple. Just a div container with the full width of wrapper and of the height of the image which will be repeated on the x-axis.

.nav{
  width:800px;
  height:37px;
  background:url(images/navbg_12.gif) repeat-x top;
  } 

That should be the CSS of the nav container which will hold each navigation item. We may need to adjust it with some padding but we can do that later. You then need to add the XHTML for the nav div container after the closing tag for the header:

<body>
  <div class="wrapper">
<div class="header">
<h1><a href="#">Free CSS </a></h1>
</div>
<div class="nav"></div>
</div>
</body> 

Slicing the images for the navigation tabs

This part is the simple part. Things you need to keep in mind. The left image is as thin as possible and the right is to be bigger than you should ever need as it will vary how much of that image is displayed. It doesn’t repeat, just more of it is revealed.

The first image is the left side. To slice that image you will use the slice tool as always in image ready:

navigation item

Make sure you have no text on the tab and that the right side is going to be wider than you should ever require (wider than any link will be):

rounder corners

Coding a navigation as a list

When coding a navigation using CSS we use the <ul> and <li> tags. This stands for unordered list and list item. Each link is a list item which is part of an unordered list. This means the unordered list will be held inside the nav div container we just created.

The coding for the navigation is quite complicated. I will paste the code first then go through each part so you can understand what we are doing:

.nav ul {
  margin:0;
  font-size:11px;
  font-weight:bold;
  padding-left:50px;
  padding-top:7px;
  list-style:none;
  }
  .nav li {
  float:left;
  background:url(images/navleft_15.gif) no-repeat left top;
  margin-right:10px;
  padding:0 0 0 15px;
  border-bottom:1px solid #ccc;
  }
  .nav a {
  float:left;
  display:block;
  background:url(images/navright_16.gif) no-repeat right top;
  padding-top:5px;
  padding-right:20px;
  padding-bottom:7px;
  padding-left:6px;
  text-decoration:none;
  color:#FFFFFF;
  }
  /* Commented Backslash Hack
  hides rule from IE5-Mac \*/
  .nav a {float:none;}
  /* End IE5-Mac hack */
  .nav a:hover {
  color:#FFF;
  text-decoration:underline;
  }
  .clear{
  clear:both;
  }

The XHTML is very simple in comparison:

 <ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Contact</a></li>
</ul> 

The whole extract should go between the opening and closing tags for the nav container. Each li is a link.

CSS explained

The coding for the CSS looks huge and overwhelming? Don’t worry, in reality its not too complicated. You don’t even have to understand it to use it. This is one of the more complex types off navigations because each item consists of two images and must be able to expand.

list-style:none – This removes the bullets for each item. This is a standard with unordered lists.

Something else which you should note when using the sliding door technique. The padding on the left side (in this case 15px) must equal the width of the left image. You can see this in the second set of coding. Instead of writing it out I wrote it in one padding. The order goes top, right, bottom and then left.

In the third set of coding the right padding 20px needs to be equal to the left padding on the previous set plus the padding on the left defined in that one. In this example that means 15px plus 5px. That ensures the text is displayed in the exact center of the tab background.

The use of css hacks

You will also notice in the CSS coding a hack. This is something which is used to fix any cross browser differences. Firefox may display the code correctly but IE6 may show it incorrectly. This is a problem with some code and the hack is needed here. I don’t often use hacks and tend to just copy it from other code. This is actually a really good way to learn.

Whats up with the .clear css?

The class called clear is used to clear the floats which we use in the navigation. Floats are pretty self explanatory. It floats an object either to the left or right. This allows multiple objects on the one line whereas without the float it would just appear on the left and one underneath the other. A problem with floats however is that it can break the look of your design. It can cause other div containers not to expand to hold them. So in this case the wrapper div would not expand.

To fix div containers which don’t expand due to floats held inside them you simply add the clear:both attribute to the css class for clear. You can then insert a short line underneath your floats to clears them and make the wrapper or containing div expand. For this example place the following XHTML under the closing tag for the nav container not ul .

<div class="clear"></div>

You should now have a functioning and great looking css navigation. No? If you have some problems post a comment here and I will try to help you.

css template

You should have something like the above. Also just to say to people who are familiar with CSS. I am currently keeping the css in the head section of the page instead of in an external stylesheet purely to make things easier while coding. I will switch it to an external sheet at the end and show how to link to it properly.

Step 5- Floating the columns

Like this post?

If you liked this post and want to keep up-to-date with the website, please consider subscribing to our rss feed or following us on twitter.

Want to learn CSS fast?

Sick of reading tutorial after tutorial? Just want to learn CSS quickly and simply? Why not try lynda css screencast tutorials. You can learn everything you need to know about CSS in one place. The website is a great learning resource for all languages, CSS included. Why not check the website out for more details.

x

Related CSS Tutorials

  • CSS Template Tutorials – Coding the Basics

    July 20, 2008 / 8 Comments

    The part of the tutorial will code the very basic things. It will use CSS to define the main holding div and style the text and links for the template

    Read
  • CSS Template Tutorial – Finishing Off

    September 16, 2007 / 34 Comments

    I will show you in this part how to finish the template off with a footer and just make our coding a little neater.

    Read
  • CSS Template Tutorial – Right column links

    September 16, 2007 / 3 Comments

    The tutorial is almost over and the template is almost finished. In this part I will show you how to create the simple navigation which is on the right column in the design preview.

    Read

Comments

  1. Damien says:

    Going through this tutorial at the minute – having a problem at this step.
    The second image(I’ll call it image_16) is not appearing when previewed in FF, so the sliding effect is not happening.
    Image location is correct. Any idea what problem might be?

    • byron says:

      in the code section
      .nav a {
      float:left;
      display:block;
      background:url(images/navright_16.gif) no-repeat rightright top;
      padding-top:5px;

      Correct the error “rightright” and replace it with “right”

      That should fix it for you.

  2. Ravinder Singh says:

    i cant understand the navigation a{ } code .. please explain it.. how you give padding..

Leave a Comment

Awake is an amazing wordpress theme with over 30 unique style variations. Its our star buy at only $42!

Wordpress Themes

Other Websites

CSS Books