HTML and CSS Reference
In-Depth Information
Figure 8.5
Applying a sprite-based background image.
.tabs .tab {
float: left;
width: 177px;
height: 26px;
margin: 0;
padding: 4px 0 0;
list-style: none;
text-align: center;
background: url(images/tabs.png) 0 -31px no-repeat;
}
.tabs .tab.active {
background-position: 0 -62px;
}
.tabs .tab.special {
background-position: 0 -93px;
}
.tabs .tab.disabled {
color: #ccc;
background-position: 0 0;
}
[...]
<ul class="tabs">
<li class="tab">tab one</li>
<li class="tab active">tab two</li>
<li class="tab special">tab three</li>
<li class="tab disabled">tab four</li>
</ul>
