DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

Tabs Based On Definition List

06.07.2007
| 9012 views |
  • submit to reddit
        // description of your code here

<!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>
<style type="text/css">
dl.tabstrip {
float:left;
width:60em;
font-size:120%;
line-height:normal;
background: url("images/tabstripbottom.png") repeat-x bottom;
margin:0;
padding:8px 8px 0;
}

dl.tabstrip dt {
float:left;
padding:0;
margin:0 2px 0 0;
}

dl.tabstrip a {
display:block;
padding: 4px 12px 4px;
color:black;
font-family:verdana, sans-serif;
text-decoration:none;
}

dt.selected {
background: url("images/tabright.png") top right no-repeat;
}

dt.selected a {
background: url("images/tableft.png") top left no-repeat;
padding-bottom:5px;
}


dt.unselected {
background: url("images/unselectedtabright.png") top right no-repeat;
}

dt.unselected a {
background: url("images/unselectedtableft.png") top left no-repeat;
}

.tabstrip dd {
position:fixed;
left:8px;
top: 2.5em;
border: 1px solid #6290d2;
border-top:none;
background:#fff;
margin:0;
height:10em;
width: 60em;
padding:8px 8px 8px 6px;
}

dd.selected {
display:block;
}

dd.unselected {
display:none;
}
</style>
</head>

<body>
<dl class="tabstrip">
	<dt class="unselected"><a href="#">Tracy</a></dt>
	<dd class="unselected">
		<p>Position: President</p>
	</dd>

	<dt class="selected"><a href="#">Andy</a></dt>
	<dd class="selected">
		<p>Position: Architect</p>
	</dd>

	<dt class="unselected"><a href="#">Ron</a></dt>
	<dd class="unselected">
		<p>Position: Operations Manager</p>
	</dd>
</dl>
</body>
</html>