Tutorial: Styling the navigation

This tutorial is a continuation of the last one I wrote. And in this one, we will be styling our navigation.

Lets get started. We left off with this for our html

System Message: ERROR/3 (<string>, line 16)

Unknown directive type "sourcecode".

.. sourcecode:: xml
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <html>
   <head>
       <title>My cool XHTML 1.0 website</title>
       <style type="text/css" media="screen">
           @import url("style.css");
       </style>
   </head>
   <body>
       <div id="header">
           My header
       </div>
       <div id="sidebar">
           <ul>
               <li><a href="#">link 1</a></li>
               <li><a href="#">link 2</a></li>
               <li><a href="#">link 3</a></li>
               <li><a href="#">link 4</a></li>
           </ul>
       </div>
       <div id="body">
           <p>This is the body of my cool website.</p>
           <p>Yes, it's very cool!</p>
       </div>
       <div id="footer">
           © 2006 by me
       </div>
   </body>
   </html>

Except I added two more links to the navigation (so that we can better see how our styling looks).

And this for our CSS

System Message: ERROR/3 (<string>, line 55)

Unknown directive type "sourcecode".

.. sourcecode:: css
  #header
  {
      border:1px solid black;
      background-color:gray;
      color:white;
      padding:5px;
      font-size:130%;
  }
  #sidebar
  {
      float:left;
      width:300px;
      border-left:1px solid black;
      border-bottom:1px solid black;
  }
  #sidebar ul
  {
      list-style-type:none;
  }
  #body
  {
      margin-left:300px;
      border:1px solid black;
      border-top-width:0px;
      padding:10px;
  }
  #footer
  {
      clear:both;
      font-size:80%;
      color:gray;
      text-align:right;
      padding:3px;
      border-bottom:1px solid black;
  }

So lets get right to making our navigation look better! First, we need to set the padding and margin for our <ul> to 0px. So lets edit our css to look like this

System Message: ERROR/3 (<string>, line 97)

Unknown directive type "sourcecode".
.. sourcecode:: css
  #sidebar ul
  {
      list-style-type:none;
      padding:0px;
      margin:0px;
  }

There we go. If you load your page you'll see your navigation links all crammed into each other. Now lets style the the navigation items. Some peoples first guess to go about that would be to edit the css for the <li>. BUT, because of Internet Explorer, we have to apply the styling to the <a> tag. IE only supports the hover attribute on <a> tags... while all other browser support it on any html element.

So lets start with something simple.

System Message: ERROR/3 (<string>, line 111)

Unknown directive type "sourcecode".

.. sourcecode:: css
  #sidebar li a
  {
      display:block;
      padding:5px;
      border-left:7px solid #a88;
      text-decoration:none;
      color:blue;
  }
  #sidebar li a:hover
  {
      border-color:#d44;
  }

Here we are applying our css to all <a> tags that are in a <li> element that is in the sidebar element. We do this so that we can have other links in our side bar that we don't want to be in the navigation.

I want you to look at the first property we are applying to our navigation. We have display:block;. <li> elements are inline by default (like a <span> tag), but we want to to behave like a block level element (like a <div> tag). That way, they won't overlap each other.

In our second block, we have #sidebar li a:hover. That just applies that block of css to the <a> tag when it is hovered over. Yup, we can do it without javascript! :)

So load your page now. Pretty basic... but that's easy to change. The import thing is that we now have a navigation based on an unordered list. Now, if we want to add, change, or remove links from our navigation, it's dead simple to do!

Let's make a better looking navigation now. Replace that bit of css for your navigation with this

System Message: ERROR/3 (<string>, line 138)

Unknown directive type "sourcecode".

.. sourcecode:: css
  #sidebar li a
  {
      display:block;
      padding:6px;
      padding-left:50px;
      text-decoration:none;
      color:white;
      font-weight:bold;
      background:url('nav_bg.png') center left;
      border-bottom:1px solid #5c5c5c;
      border-right:1px solid #5c5c5c;
      border-top:1px solid #909090;
  }
  #sidebar li a:hover
  {
      background:#7a7a79;
  }

In this CSS, I am using an image for the background (background:url('nav_bg.png') center left;). I am using this image:

Go a head and download it to use (right click on it and go to save image as). Just download it to your directory where you have your css file. Load your page and see a very cool looking navigation! Pretty cool!

That's it for this tutorial. I hope you learned lots! Be sure to play around with the css for the navigation and see what you can come up with on your own!

Joey

Oh BTW, if you weren't following along with the tutorial, you can see the final product by going here.