topical media & game development

talk show tell print

professional-web-02-css-tabs.htm / htm



  <?xml version="1.0" encoding="ISO-8859-1"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <title>Tabs</title>
          <style type="text/css">
              body {
                  font-family: verdana, sans-serif;
                  font-size: 12px;
              }
  
              #tabnav {
                  height: 20px;
                  margin: 0;
                  padding-left: 10px;
                  background: url(css-tabs.gif) repeat-x bottom;
              }
  
              #tabnav li {
                  margin: 0;
                  padding: 0;
                  display: inline;
                  list-style-type: none;
              }
  
              #tabnav a:link, #tabnav a:visited {
                  float: left;
                  background: #f3f3f3;
                  line-height: 14px;
                  padding: 2px 10px 2px 10px;
                  margin-right: 4px;
                  border: 1px solid #ccc;
                  text-decoration: none;
                  color: #666;
              }
  
              #tabnav a:link.active, #tabnav a:visited.active {
                  border-bottom: 1px solid #fff;
                  background: #fff;
                  color: #000;
              }
  
              #tabnav a:hover {
                  background: #fff;
              }
          </style>
      </head>
  
      <body>
  <ul id="tabnav">
      <li><a href="#" class="active">Lorem</a></li>
      <li><a href="#">Ipsum</a></li>
      <li><a href="#">Dolor</a></li>
      <li><a href="#">Sit</a></li>
  </ul>
      </body>
  </html>
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.