HTML/CSS Navigation

This page looks at adding the HTML and CSS for navigation. Here is what we want the navigation to look like:

The first thing is to get the HTML right. It is standard practice to use lists to form our navigation. This is the HTML we have

<div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Me</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Archive</a></li> <li><a href="#">Contact</a> </li> </ul> </div>
Now we add the CSS. One great resource for this is the Listamatic site. They have a number of different navigations with both the HTML and CSS shown that you can take and use in your projects
Go here:
and then look at the horizontal lists (or vertical if you need it) look for a navigation that is close to the one you want and then you can modify the CSS from there.
Here are a few of the basic concepts for using lists for navigation:
  • Change the li elements to display as inline (they are normally block elements
    • display:inline;
  • remove the bullets with list-stye-type set to none
    • list-style-type:none;
  • use the hover pseudo property to add rollover effects
    • a:hover { background-color:#ef4; }
  • set the text decoration to none to remove the underline under the links
    • a{text-decoration:none;}

There is more information on styling lists at this tutorial on the same site as above:

Here is the CSS for our navigation:

/*navigation */

/* to get the nav to sit at the bottom of the header we need to change some of the properties of the header */

 /* the old height was 70px. we want to add 50px of padding above the nav so we have to take 50px out of the height. Remember that the total height according to the box model is border-top + padding-top + height + padding-bottom + border-bottom */

#nav ul
 padding: 0 0 0 250px;
 background-color: #fbee6e;

#nav ul li {
 display: inline;

#nav ul li a
 padding: 0 20px;
 background-color: #fbee6e;
 text-decoration: none;
 border-right: 2px solid #fdc456;

#nav ul li a:hover
 background-color: #fdc456;
 color: #fff;

and here is what it looks like

If we want to get rid of the last orange border after the content then we can give the content li a class and then use that to remove the border


<li class="lastnav"><a href="#">Contact</a></li>


#nav ul li.lastnav a{

and that’s that.

Up next is adding the image for the header. This is part of the Image Slicing page.

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>