Web development, coding & SEO

Tabs HTML

As it works for FF and IE6, it works probably everywhere.

Markup

<div class="tabs">
	<ul class="tabs-ul">
		<li class="tabs-li"><a class="tabs-link" href="#">Tab</a></li>
		<li class="tabs-li"><a class="tabs-link tabs-current" href="#">Tab Tab</a></li>
		<li class="tabs-li"><a class="tabs-link" href="#">Tab Tab Tab</a></li>
	</ul>
</div>

CSS

*{
	margin:0;
	padding:0;
}
.tabs{
	border-bottom:1px solid #e1ddde;
	float:left;
	font-size:13px;
	margin-top:28px;/*compensates top neg position of ul*/
	position:relative;/*to position ul inside absolutely*/
	width:100%;
}
.tabs-ul{
	float:left;
	list-style:none;
	padding-left:22px;
	position:absolute;/*to shift tabs down to cover div's bottom line*/
	top:-33px;
	width:auto;
}
.tabs-li{
	list-style:none;
	float:left;
	margin-left:5px;
	width:auto;
}
.tabs-link:link,
.tabs-link:visited{
	background:#fff url(bg-tab-noncurrent.png) center bottom repeat-x;
	border-left:1px solid #ddd;
	border-right:1px solid #ddd;
	border-top:1px solid #ddd;
	color:#aaa;
	cursor:pointer;
	display:block;
	padding:6px 9px;
	text-decoration:none;
}
.tabs-link:active,
.tabs-link:hover{
	background:#fff;
}
.tabs-current:link,
.tabs-current:visited,
.tabs-current:active,
.tabs-current:hover{
	background:#fff;
	color:#666;
}

2009