Download afbeeldingen

1. bg_cover.gif (218)
2. bar.gif (210)
3. bg_bar.gif (147)

HTML

<dl>
 <dt>Ability to Annoy People</dt>
 <dd>
  <span><em style="left:160px">80%</em></span>
 </dd>
 <dt>Food Shortage Tolerance</dt>
 <dd>
  <span><em style="left:20px">10%</em></span>
 </dd>
 <dt>Karaoke Singing Skills</dt>
 <dd>
  <span><em style="left:100px">50%</em></span>
 </dd>
</dl>
<p class="progressBar">
 <span><em style="left:50px">25%</em></span>
</p>

CSS

/* DEFINITION LIST PROGRESS BAR */

dl, dt, dd{margin:0;padding:0;}

dd{
	width:216px;
	height:41px;
	background:url(bg_bar.gif) no-repeat 0 0;
	position:relative;
}
dd span{
	position:absolute;
	display:block;
	width:200px;
	height:25px;
	background:url(bar.gif) no-repeat 0 0;
	top:8px;
	left:8px;
	overflow:hidden;
	text-indent:-8000px;
}
dd em{
	position:absolute;
	display:block;
	width:200px;
	height:25px;
	background:url(bg_cover.gif) repeat-x;
	top:0;
}
/* SINGLE PROGRESS BAR */

.progressBar{
	width:216px;
	height:41px;
	background:url(bg_bar.gif) no-repeat 0 0;
	position:relative;
}
.progressBar span{
	position:absolute;
	display:block;
	width:200px;
	height:25px;
	background:url(bar.gif) no-repeat 0 0;
	top:8px;
	left:8px;
	overflow:hidden;
	text-indent:-8000px;
}
.progressBar em{
	position:absolute;
	display:block;
	width:200px;
	height:25px;
	background:url(bg_cover.gif) repeat-x 0 0;
	top:0;
}

Download animated gif

HTML

<div id="content">
<ul id="main_nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="post clear">
<h4 class="clear">HEADLINE</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ut dui ut mauris congue bibendum. Vestibulum fringilla purus nec turpis. Nunc ut ante eu purus eleifend convallis. Nulla euismod ornare arcu. Donec enim enim, sodales sit amet, egestas a, suscipit at, lorem. Ut congue consequat lectus. Aliquam porttitor aliquam dui. Donec ipsum. Donec pharetra leo vel ante. Curabitur ac ligula id felis scelerisque imperdiet. Sed ullamcorper lectus at urna. Pellentesque blandit iaculis risus. Donec facilisis neque nec lorem. Aliquam erat volutpat. Morbi a nunc. Aenean feugiat tellus vitae nulla.</p>
<h4 class="clear">HEADLINE 2</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ut dui ut mauris congue bibendum. Vestibulum fringilla purus nec turpis. Nunc ut ante eu purus eleifend convallis. Nulla euismod ornare arcu. Donec enim enim, sodales sit amet, egestas a, suscipit at, lorem. Ut congue consequat lectus. Aliquam porttitor aliquam dui. Donec ipsum. Donec pharetra leo vel ante. Curabitur ac ligula id felis scelerisque imperdiet. Sed ullamcorper lectus at urna. Pellentesque blandit iaculis risus. Donec facilisis neque nec lorem. Aliquam erat volutpat. Morbi a nunc. Aenean feugiat tellus vitae nulla.</p>
</div>
</div>

CSS

body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #fff;
background: #2d2d2d;
}
#content {
width: 600px;
padding: 0 0 0 20px;
}
#main_nav {
list-style: none;
margin: 0;
padding: 0;
}
#main_nav li {
float: left;
}
#main_nav li a {
display: block;
width: 150px;
height: 65px;
padding: 85px 0 0 0px;
color: #fff;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-size: 18px;
letter-spacing: 1px;
background: url(twinkle.gif) no-repeat 0 0;
}
#main_nav li a:hover {
background-position: -150px 0; color: #fff;
}
.post {
padding-top: 18px;
line-height: 18px;
}
h4 {
margin: 8px 0 6px 0;
}
p {
line-height: 18px;
font-size: 12px;
margin: 0 0 18px 0;
}
.clear {
clear: both;
}