Michelle's Tabbed Menu Test

#1 Using Lists:


HTML

<ul id="tabnav">
   <li class="selected">Home</li>
   <li><a href="#">News</a></li>
   <li><a href="#">Products</a></li>
   <li><a href="#">About</a></li>
</ul>

CSS

  1. ul#tabnav {
  2.    font: bold 11px Arial, Helvetica, sans-serif;
  3.    list-style: none;
  4.    margin: 0;
  5.    padding: 0 0 30px 0;
  6.    border-bottom: 1px solid #ccc;
  7. }
  8. ul#tabnav li {
  9.    float: left;
  10.    background-color: #fff;
  11.    margin: 5px 3px 0 0;
  12.    border: 1px solid #ccc;
  13. }
  14. ul#tabnav li.selected {
  15.    font-size: 15px;
  16.    font-weight: bold;
  17.    display: block;
  18.    margin-top: 0;
  19.    padding: 6px 10px 5px;
  20.    border-bottom: 1px solid #fff;
  21. }
  22. ul#tabnav a:link, ul#tabnav a:visited {
  23.    display: block;
  24.    padding: 5px 10px 5px;
  25.    background-color: #eee;
  26. }
  27. ul#tabnav a:hover {
  28.    background-color: #eee;
  29. }

#2 Using Tables

Home
        

HTML

<table id="tabnav" cellpadding="0" cellspacing="0" border="0">
   <tr valign="bottom">
      <td nowrap="nowrap"><div class="selected">Home</div></td>
      <td class="underline">&nbsp;</td>
      <td nowrap="nowrap"><div><a href="#">News</a></div></td>
      <td class="underline">&nbsp;</td>
      <td nowrap="nowrap"><div><a href="#">Products</a></div></td>
      <td class="underline">&nbsp;</td>
      <td nowrap="nowrap"><div><a href="#">About</a></div></td>
      <td width="100%" class="underline">&nbsp;</td>
   </tr>
</table>

CSS

  1. table#tabnav div.selected {
  2.    font: bold 15px Arial, Helvetica, sans-serif;
  3.    border: 1px solid #ccc;
  4.    border-width: 1px 1px 0 1px;
  5.    background: #fff;
  6.    padding: 6px 10px;
  7. }
  8. table#tabnav div {
  9.    border: 1px solid #ccc;
  10.    padding: 5px 10px;
  11.    background: #eee;
  12. }
  13. table#tabnav td.underline {
  14.    border-bottom: 1px solid #ccc;
  15. }

return