Yüzde Çubuğu

Yüzde Çubuğu Genellikle Anketlerde İşimize Yarar.
<img src="/images/yuzde_cubugu.png" alt="%45" class="yuzdeCubugu" style="background-position: -50px 0;" />
 CSS Kodumuz;
img.yuzdeCubugu {
background: url(/images/yuzdeCubugu_ard.gif) top left no-repeat;
padding: 0;
margin: 0;
}

Xhtml kodumuzu yazalım
<h1>Galatasaray -Fenerbahçe Skor Tahmini</h1>
<p>Galatasaray (%56)</p>
<img src="yuzde_cubugu.gif" width="104" height="14" alt="%56" class="yuzde1" style="background-position: -42px 0;" />
<p>Fenerbahçe (%44)</p>
<img src="yuzde_cubugu.gif" width="104" height="14" alt="%44" class="yuzde2" style="background-position: -54px 0;" />

 Yüzde çubuğunun genişliğini 100px yaptım ki, ayarlaması kolay olsun. Resim genişliğinin 104px görünmesinin nedeni 2px sağdan ve 2px soldan kenar çizgilerinin olması.
Galatasaray %56 yapmak için ardalan konumunu 100-56= 44 resmin solundaki 2px mesafeyide çıkarınca hesabımız tam olacaktır. Yani ardalan konumu 100 – 56 – 2 = -42px şeklinde hesaplanacak.
Aynı şekilde Fenerbahçe‘nin yüzdesini de hesaplarsak. 100 – 44 – = -54px
CSS kodumuz;
h1{
    font:18px Arial, Helvetica, sans-serif;
    color:#666;
}
p{
    font:bold 12px Arial, Helvetica, sans-serif;
    margin-bottom:5px;
    color:#666;
}
img.yuzde1 {
 background:url(gosteri1.gif) 0 0 no-repeat;
 padding: 0;
 margin: 0;
}
img.yuzde2 {
 background:url(gosteri2.gif) 0 0 no-repeat;
 padding: 0;
 margin: 0;
}

Kaynak: Fatih Hayrioğlu