Tab bar
<!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></title>
<style type="text/css">
#navsite h5 {
display: none;
}
#navsite ul {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#navsite ul li {
list-style: none;
margin: 0;
display: inline;
}
#navsite ul li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #dde;
text-decoration: none;
}
#navsite ul li a:link {
color: #448;
}
#navsite ul li a:visited {
color: #667;
}
#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
color: #000;
background: #aae;
border-color: #227;
}
#navsite ul li a#current {
background: white;
border-bottom: 1px solid white;
}
</style>
</head>
<body>
<div id="navsite">
<h5>Site navigation:</h5>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/archives/">Archives</a></li>
<li><a href="/writing/">Writing</a></li>
<li><a href="/speaking/" id="current">Speaking</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae ligula ut metus interdum accumsan. Vivamus commodo. Etiam eros massa, hendrerit hendrerit, ultricies facilisis, porttitor eget, magna. Fusce lacus ligula, dapibus sed, mattis id, tristique non, arcu. Vivamus feugiat. Etiam erat pede, posuere placerat, porttitor vitae, sollicitudin ut, tellus. Nunc volutpat velit blandit enim. Nulla luctus. In viverra nibh ac massa. Curabitur vel tellus a velit feugiat tristique. Mauris ultricies cursus diam. Nullam scelerisque blandit pede. Maecenas tellus velit, pellentesque placerat, tincidunt nec, tempus at, tellus. Quisque sapien. Nullam eget ante at mi consequat mattis. Nunc accumsan tincidunt ipsum. Sed adipiscing tincidunt lorem. Mauris arcu. Vestibulum laoreet augue.</p>
</body>
</html>
Related examples in the same category