<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example: Tab-Based Navigation in Six (or Seven) Easy Steps</title>
<style>
body {
margin: 0;
padding: 0 50px;
border-top: 10px solid #075a97;
font: small/1.3em Arial, Helvetica, sans-serif; }
#content {
width: 40em;
margin: 0 auto;
padding: 40px 0; }
</style>
</head>
<body>
<div id="content">
<ul id="nav">
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Our Archives</a></li>
<li><a href="#">Free Stuff</a></li>
</ul>
<h1>Our Website</h1>
<p><a href="/navigation/tab-based-navigation/">Back to the CSSnewbie article.</a></p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis adipiscing vestibulum massa. Suspendisse sed lectus. Cras id mi. Curabitur eget arcu. Sed eros. Morbi ante sapien, varius ac, vulputate quis, suscipit vel, urna. Nunc quam. Vestibulum ac erat. Donec eget augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sed mauris. Praesent elementum fringilla quam. Nam sollicitudin suscipit lacus. Nunc venenatis, ipsum et adipiscing consequat, leo ante laoreet orci, quis sollicitudin pede quam a quam. Nam tempor lacinia libero. Nulla fermentum felis a neque. Cras cursus felis ut libero. Praesent purus. </p>
<p>In mauris. Pellentesque blandit rhoncus erat. Vestibulum ac nunc. Duis nec velit et enim facilisis consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum nec velit vel sem hendrerit pulvinar. Fusce commodo ligula non urna. Maecenas aliquam. Maecenas non lacus non tortor tempus volutpat. Vestibulum egestas leo facilisis urna. </p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean varius hendrerit mi. Proin ante. Curabitur consectetuer cursus ante. Nulla ultricies egestas lectus. Nullam urna lacus, aliquet vel, facilisis nec, lobortis eu, velit. Nulla libero nibh, aliquet sed, tempus vel, tristique eget, lectus. Fusce sit amet massa in justo laoreet ultrices. Sed blandit arcu ac odio. Quisque ac lectus non leo dapibus feugiat. Cras adipiscing purus. </p>
<p>Aenean metus augue, scelerisque at, accumsan at, bibendum eget, lacus. Maecenas tempus, justo sit amet tristique vulputate, ipsum leo ultrices tellus, in vestibulum est turpis bibendum dolor. Donec convallis. Aliquam erat volutpat. Cras enim elit, ultricies vitae, varius nec, dictum non, erat. Suspendisse auctor tempor lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse pellentesque suscipit lacus. Donec sed leo id arcu semper porta. Mauris vulputate. Suspendisse lobortis diam in augue. Proin sit amet urna. </p>
<p>Maecenas eu justo non pede suscipit facilisis. Duis aliquam est ac nisi. Aenean lacus tortor, consequat vitae, venenatis tincidunt, sodales quis, risus. Morbi mauris nunc, bibendum aliquam, condimentum non, vestibulum id, sapien. Donec lacus. Cras lacinia mattis lorem. In mi dolor, nonummy vitae, elementum vitae, congue id, pede. Nam eu sapien. Pellentesque nibh. Ut laoreet pretium lorem. </p>
</div>
</body>
</html>