Horizontal tab bar : tab : CSS Controls HTML CSS TUTORIALS


HTML CSS TUTORIALS » CSS Controls » tab »

 

Horizontal tab bar


 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
     <head>
      <meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
      <meta http-equiv="content-language" content="en-us" />
        <style type="text/css">
            ul#navigation {
                list-style: none;
                background: gray;
                margin: 0.1em;
                padding: 0;
            }
            ul#navigation li {
                float: left;
                margin: 0.4em;
            }
            ul#navigation li a {
                padding: 0.3em;
            }
            ul#navigation li a:link {
                background: gray;
            }
            ul#navigation li a:active {
                background: orange;
            }
            ul#navigation li a:visited {
                background: black;
            }
            ul#navigation li a:hover, li a:focus {
                background: white;
                color: black;
            }

        </style>
    </head>
    <body>
        <ul id='navigation'>
            <li><a href=''>home</a></li>
            <li><a href=''>contact us</a></li>
            <li><a href=''>products</a></li>
            <li><a href=''>services</a></li>
            <li><a href=''>faq</a></li>
        </ul>

    </body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo CSS Controls
» tab