Published on: 2007-01-13 - Views: 18118

We're going to see how a CSS based layout can be heavily customized without changing a single line of the HTML code.
In this example we're going to focus on a menu that I've implemented with an unordered list.
I'll never get tired of stressing the importance to use tableless designs and I hope someone will get convinced reading this article/tutorial.
We'll use a single snippet of HTML code that won't be changed at all, used together with 2 different CSS styles.
Let's start with the HTML we'll use:
  <div id="mymenu">
    <ul>
      <li><a href="techno/">Techno</a></li>
      <li><a href="rock/">Rock</a></li>
      <li><a href="ambient/">Ambient</a></li>
      <li><a href="trance/">Trance</a></li>
      <li><a href="lounge/">Lounge</a></li>
    </ul>
  </div>
As you can see this is a simple unordered list with 5 links as list elements. Nothing fancy.
Now we'll see the first CSS code, place this between <head> and </head> in your page. 
<style type="text/css">
  a:active, a:visited, a:link
  {
    color: #93B9EE;
    font-weight: bold;
    text-decoration: none;
  }
  a:hover
  {
    color: #FFFFFF;
    text-decoration: none;
  }
  #mymenu
  {
    width: 400px;
    height: 30px;
    background-color: #000000;
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 11px;
  }
  #mymenu ul
  {
    list-style:none;
    margin: 8px 8px 0px 8px;
  }
  #mymenu ul li
  {
    display:inline;
    margin: 0px 10px;
    float: right;
  }
  </style>
Let's go through this CSS and understand how our menu should look like.
At the very beginning we specify that the text of the links will be bold, with no decoration and its color will be #93B9EE, the color, while our mouse is over the link will be white (#FFFFFF).
Going ahead we see that the menu area will be 400 pixel wide and 30 pixel in height.
We also set the background-color of the menu area to #000000 (black), choose the font and its size.
After that we style the unordred list look: "list-style: none" means that no sign will be displayed at the left of the list elements (you'd usually have a black dot there) and set the margins.
In the following CSS block we style the list items:
"display: inline;" will make the list elements align the one beside the other instead of each one on a new line that is the default behaviour.
"margin: 0px 10px;" gives the links some space between them, a 10px margin will be applied both at the left and right of each link so we'll have 20px between each couple of links.
"float: right;" will make the links show up from the last one to the first one in the HTML code. This because the elements are placed in the page starting from right so imagine: you take the first link and put it at the right border of the page, then the second at the left of the previous one and so on untile all the links have been placed.
This CSS code will produce this output.
Now let's see how we could change the aspect of our menu editing ONLY the CSS file.
This is the second CSS: 
<style type="text/css">
  #mymenu
  {
    width: 110px;
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 11px;
  }
  #mymenu ul
  {
    list-style:none;
    margin: 0;
    padding: 0;
  }
  #mymenu ul li
  {
    height: 20px;
    width: 110px;
  }
  ul li a 
  {
    display: block;
    padding: 6px;
    border-left: 10px solid #B6B6B6;
    background-color: #E4E4E4;
    text-decoration: none;
    color: #575757;
    width: 100%;
  }
  ul li a:hover 
  {
    border-left: 10px solid #575757;
    text-decoration: none;
    letter-spacing: +2px;
  }
  </style>
In this CSS I set the menu width to 110 pixels and the same font family and size I used before.
Again, as before, I set the list-style to none.
I also set the margin and padding to 0 to control where the menu is displayed, getting rid of the default page margins.
Going ahead I chose that each element is 20 pixels in height and 110 in width.
"display: block;" makes the element display as a block element making all the lines consistent and of the same size (try removing it too better understand).
I chose 6px of padding, a light grey background color and a left border of a bit darker grey.
As you can see the border color will be darker when your mouse is over the links. In this case 2 additional pixels will be added between the links chars.

Imagine you used tables to code your menu: you couldn't modify it, you would have several <td> elements in a single table row and you would need to have them inside a table colum.
I hope that with this tutorial I convinced someone of those that still want to code using tables.