CSS tab

CSS tab : tab : CSS Controls HTML CSS TUTORIALS

HTML CSS TUTORIALS » CSS Controls » tab »


 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title></title>

<style type="text/css">
#navsite {
  border: 1px dashed white;
}
body {
  margin: 0 15% 0 15%;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 10px solid black;
  padding: 0 0 5em 0;
}

#header {
  background-color: white;
  border-top: 10px solid #333;

}
#navsite {
  background-color: white;
}

#navsite ul {
  background-color: white;
  padding: 0 0 3px 0;
  margin-left: 0;
  margin-top: 0;
  border-bottom: 1px solid #669;
}

#navsite ul li {
  list-style: none;
  margin: 0;
  display: inline;
}

#navsite ul li a {
  padding: 3px 0.5em;
  margin-left: 3px;
  border: 1px solid #669;
  border-bottom: none;
  background-color: #ccf;
  text-decoration: none;
}

#navsite ul li a:link {
  color: #339;
}

#navsite ul li a:visited {
  color: #666;
}

#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
  color: #000;
  background: #AAE;
  border-color: #336;
}

#navsite ul li a#current {
  background: white;
  border-bottom: 1px solid white;
}

#header, #content {
 padding: 0 2% 0 2%;

}

#content {
 background-color: white;
}

#contentMain {
  background-color: white;
}

</style>

</head>
<body>
<div id="navsite">
<ul>
    <li><a href="http://www.navioo.com" id="current">Home</a></li>
    <li><a href="http://www.navioo.com">Products</a></li>
    <li><a href="http://www.navioo.com">Services</a></li>
    <li><a href="http://www.navioo.com">About Us</a></li>
    <li><a href="http://www.navioo.com">Contact</a></li>
</ul>
</div>
<div id="content">
<div id="contentMain">
<h2><a href="http://www.navioo.com">link</a></h2>
<p>Text <a href="http://www.navioo.com">Link</a></p>
<p>Text.</p>
<p>Text <a href="http://www.navioo.com">Link</a></p>
</div>
</div>

<div id="footer">

<p>Copyright 2003 .</p>

</div>

</body>
</html>