Okay so I am trying to understand how to make tabbed navigation. I have searched a few sites and tried to follow along but I really don’t understand it. I was wondering if someone knew a site where they explain how to make tabbed navigation with CSS for dummies like me that can’t understand? Please help me!! This is bugging me so much, I have spent hours trying to figure it out… Thanks!!! 
If you mean horizontal navigation menus? I’m assuming you don’t mean dropdowns since you didn’t say you wanted one.
You basically just create a <ul> and then the children are standardly <li></li> with anchors inside that, So a 3 item list would be
<ul>
<li><a href="#">One</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
Then to get them on the same line, just float the <li> (float:left) and then assign a width if you please. Style aesthetically as you want
The way I learned to do them is to Google “css tab navigation menu” or something similar, find one I liked, and deconstruct it to see if I could figure out how they did it.
Hi,
Here is one I put together a while back for javascript tab nav divs.
The concept would be the same without the js. The tabs would just link to another page and the .current class would be set respectively on the anchor of that page.
Here is a reduced example of the link above without the js or side columns. By the way, the side columns were the reason I had centered the tabs. Inline-block was used on the li in order to float the anchors which killed some IE bugs.
If you don’t need the tabs centered you can just float the li.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Centered Tabbed Nav Menu</title>
<style type="text/css">
body {
font-size:100%;
background:#CCC;
margin:0;
padding:0 0 20px;/*IE6/7 need this in place of #wrapper bottom margin*/
}
/*==== Begin Main Layout ====*/
#wrapper {
width:900px;
margin:20px auto 0;
background:#DDD;
border:1px solid #000;
}
#header {
height:5em;
background:#565656;
text-align:center;
color:#FFF;
}
/*=== Tabbed Nav Styles ===*/
.tabs {
width:100%;/*haslayout*/
margin:0;
padding:0;
text-align:center;
background:#333;
border-bottom:1px solid #000;
}
.tabs li {
display: -moz-inline-box;/* for FF2 (inline-box used for shrink wrapping)*/
display:inline-block;/* for modern browsers */
vertical-align:bottom;/* important */
list-style:none;
border:1px solid #000;
border-bottom:none;
}
* html .tabs li {display:inline;margin:0 2px;}/* inline-block trip for IE6 */
*+html .tabs li {display:inline;margin:0 2px;}/* inline-block trip for IE7 */
.tabs a {
float:left;/* IE6/7 haslayout*/
text-decoration: none;
padding:2px 10px;
background:#99C;
font-weight:bold;
font-size:.8em;
color:#000;
}
.tabs a:hover {
background:#CDF;
color:#000;
}
.tabs a.current {
position:relative;/*IE6*/
margin-bottom:-1px;/*the trick*/
background:#FFF !important;
border-bottom:1px solid #FFF;/*the trick*/
color:#000;
}
/*=== Begin Content ===*/
#content {
width:100%;/*haslayout*/
padding-top:.5em;
border-bottom:1px solid #000;
background:#FFF;
}
#footer {
clear:both;
height:1.75em;
line-height:1.75em;
background:#333;
color:#FFF;
}
/*=== Demo Typography ===*/
h1,h2,h3,p{margin:0 .5em .5em; font-size:1.5em;}
h1{padding-top:.3em; margin-bottom:.15em}
h2{font-size:1.2em;}
h3{font-size:1.1em;}
p{font-size:1em;}
#footer p{
margin:0;
font-size:.8em;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Centered Tabbed Nav Menu</h1>
</div>
<ul class="tabs">
<li><a class="current" href="#">Welcome</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Recent News</a></li>
</ul>
<div id="content">
<p>Lorem ipsum dolor sit amet consectetuer velit dui Nam et aliquet. Dignissim felis est Sed ut id Vestibulum Nulla dapibus tellus ut. Justo Curabitur eget eros id Curabitur malesuada Curabitur Morbi convallis et. Vitae Nunc nascetur vitae nunc dui lacus netus interdum nibh scelerisque. Nam Curabitur est magnis et id.</p>
<p>Netus non turpis at nunc pretium Donec justo vitae porttitor et. Metus Pellentesque pellentesque et nunc eros laoreet senectus lacinia pede dui. Egestas lacus et Duis gravida urna tempor diam Curabitur nisl risus. Lobortis nec eget lacus adipiscing rutrum lacus ac Duis Morbi tincidunt. Libero adipiscing Quisque dui pulvinar egestas Suspendisse turpis Vestibulum Nulla amet. Malesuada justo elit Aliquam Nullam sodales tincidunt.</p>
<p>Non eget facilisi nec tellus non quis justo ante rhoncus pede. Vitae vitae wisi lobortis Nulla amet wisi iaculis dui ac convallis. Pede pretium eleifend augue vel vitae ut turpis tempus facilisis Curabitur. At netus ac fringilla est elit eget urna Vivamus Curabitur In. Auctor vel a pellentesque risus tortor at sit Vivamus interdum sem. Tortor mi quam.</p>
</div>
<div id="footer">
<p>your copyright © 2006-2010, & other footer stuff here</p>
</div>
</div><!--end wrapper-->
</body>
</html>
“Tabbed navigation” is one of those terms that mean many things… kinda like, “javascript slider” seems to refer to a lot of different things.
This HTMLdog tutorial seems to mention “tabs” in various contexts… the bottom example, the Sliding Doors one, seems to show what I think of when people say “tabs”. I think of those manilla folders with the little tabs sticking out.