Back to CSS Tips
Preview: what the working site looks like.
The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>       
    <div id="container">
        <div id="menu">
            <div class="tab"><a href="#"><span>one</span></a></div>
            <div class="tab"><a href="#"><span>two</span></a></div>
            <div class="tab"><a href="#"><span>three</span></a></div>
        </div> 
    <!--container--></div>  
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 800px;
	margin: 50px auto;
	background: #999;
	overflow: auto;
}	
#menu {
	height: 25px;
	margin: 10px 0 0; 
	padding:0 10px;
	border-bottom: 1px solid black;
} 
.tab {
	height: 25px;
	width: 120px; 
	margin: 0 3px 0;
	float: left;
	background: url(bars.gif) 0 -50px no-repeat;
}
	.tab a {
		height:100%;
		width:100%; 
		display: block;
		overflow: hidden;
		background: url(bars.gif) top left no-repeat;
		font: bold 13px/1 Georgia, serif;
		color: #039;
		text-decoration: none;
	}
		.tab span {
			padding: 7px 0 0 13px;
			display: block;
		}
			.tab a:hover {
				background-image: none;
				color: #ff0;
			}
			.tab a:active {color: #000;}