<style type="text/css" media="screen">

/* SETUP */

* { 

margin: 0; 

padding: 0; 

list-style-type: none;

}

body { 

font-family: Helvetica, Arial, sans-serif; 

color: #333; 

}

a { 

color: #2D7BB2; 

text-decoration: none; 

font-weight: bold; 

}

a:hover { 

color: #333; 

}

h2, h3, h4 { 

clear: both; 

margin: 0 0 0.6em 0;

}

h3 { 

color: #666; 

}

.section { 

float: left;

clear: left;

padding: 1em 2em;

}

 
/* CHART LISTS */

.chartlist { 

float: left; 

border-top: 1px solid #EEE; 

width: 15em;

}

.chartlist li { 

position: relative;

display: block; 

border-bottom: 1px solid #EEE; 

_zoom: 1;

}

.chartlist li a { 

display: block; 

padding: 0.4em 4.5em 0.4em 0.5em;

position: relative; 

z-index: 2; 

}

.chartlist .count { 

display: block; 

position: absolute; 

top: 0; 

right: 0; 

margin: 0 0.3em; 

text-align: right; 

color: #999; 

font-weight: bold; 

font-size: 0.875em; 

line-height: 2em; 

}

.chartlist .index { 

display: block; 

position: absolute; 

top: 0; 

left: 0; 

height: 100%; 

background: #B8E4F5; 

text-indent: -9999px; 

overflow: hidden; 

line-height: 2em;

}

.chartlist li:hover { 

background: #EFEFEF; 

}

</style>

 
 
<div class="section">

<h2>Horizontal bar chart</h2>

 
<h3>Popular fruits by quantity</h3>

 
<ul class="chartlist">

<li>

<a href="
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
style="color: #007700">>Apples</a> 

<span class="count">420</span>

<span class="index" style="width: 42%">(42%)</span>

 
</li>

<li>

<a href="
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
style="color: #007700">>Bananas</a> 

<span class="count">280</span>

<span class="index" style="width: 28%">(28%)</span>

</li>

<li>

<a href="
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
style="color: #007700">>Cherries</a> 

<span class="count">200</span>

 
<span class="index" style="width: 20%">(20%)</span>

</li>

<li>

<a href="
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
style="color: #007700">>Dates</a> 

<span class="count">100</span>

<span class="index" style="width: 10%">(10%)</span>

</li>

 
</ul>

</div>