Altuğ Orgun Kişisel Blog

Webtela | AoRGuN’un web günlüğü…

CSS’in ne olduğunu daha önce kısaca anlatmıştım. Aslında CSS öğrenebilmeniz için yazı okumanız yetmez, çalışmanız gerekir. Şimdiden söyleyeyim, CSS dersleri değil “CSS teknikleri ve CSS ile yapılabilecekler”i paylaşmayı daha uygun görüyorum. Bu teknikleri anlayıp geliştirebilmek için CSS öğrenmeniz şart, bu konuda size Fatih Hayrioğlu‘nun e-kitabını önerebilirim; buradan…

Şimdi ise CSS ile bar yapımıyla ilgili 2 kod vereceğim.  Aslında 3 tane var fakat ilk 2’si daha kullanışlı.  3.ye kaynağımdan ulaşabilirsiniz.

1 – Basit CSS Barı:

Sitenizi bakıma aldınız ve diyelim ki hızlandırma çalışması yapıyorsunuz, bu durumda bu barı çalışmanın ne kadarının bittiğini göstermek için kullanabilirsiniz. Eh, bu da veritabanından bilgi alan bir kod olmadığı için doğal olarak elle düzenlemeniz(manuel) gerekiyor.

CSS Kodları:

.graph {
position: relative; /* IE is dumb */
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
}
.graph .bar {
display: block;
position: relative;
background: #B1D632;
text-align: center;
color: #333;
height: 2em;
line-height: 2em;
}
.graph .bar span { position: absolute; left: 1em; }

Burda grafik pozisyonu, boyutu, çerçevesi dışında barın pozisyonunu, arkaplan ve yazı rengini, yazı biçimini, boyutunu ayarladık. Yani fiziksel özelliklerini, stilini. Şimdi bir de bu stilleri üzerine uyguladığımız bir tablo lazım. graph ve bar değerlerini ekleyelim ve barı tamamlayalım.

HTML Kodları:

<div class=”graph”>
<strong class=”bar” style=”width: 42%;”>42%</strong>
</div>

Bu ilk barımızdı, şimdi 2.ye geçelim

2 – Karmaşık CSS Barı:

‘Kötü’den ‘iyi’ye giden bir grafik, farklı projelerde kullanılabilir. En basitinden ankette, en detaylısından bir MMORPG oyunda kullanılabilir. Ki yukardaki görüntüden ve kodlardan da gördüğünüz gibi oyunlar için düzenledim.

CSS Kodları:

dl {
margin: 0;
padding: 0;
}
dt {
position: relative; /* IE is dumb */
clear: both;
display: block;
float: left;
width: 104px;
height: 20px;
line-height: 20px;
margin-right: 17px;
font-size: .75em;
text-align: right;
}
dd {
position: relative; /* IE is dumb */
display: block;
float: left;
width: 197px;
height: 20px;
margin: 0 0 15px;
background: url(”http://topfunky.net/svn/plugins/css_graphs/generators/css_graphs/templates/g_colorbar.jpg”);
}
* html dd { float: none; }
/* IE is dumb; Quick IE hack, apply favorite filter methods for
wider browser compatibility */

dd div {
position: relative;
background: url(”http://topfunky.net/svn/plugins/css_graphs/generators/css_graphs/templates/g_colorbar2.jpg”);
height: 20px;
width: 75%;
text-align:right;
}
dd div strong {
position: absolute;
right: -5px;
top: -2px;
display: block;
background: url(”http://topfunky.net/svn/plugins/css_graphs/generators/css_graphs/templates/g_marker.gif”);
height: 24px;
width: 9px;
text-align: left;
text-indent: -9999px;
overflow: hidden;
}

CSS ile hep yaptığımız gibi, yine fiziksel düzenleme yaptık . Yani; yazıları sabitledik, arkaplanları ayarlayıp yerlerini belirledik, boyutlarını ayarladık vs. Still özellikleri

HTML Kodları:

<dl>
<dt>HP</dt>
<dd>
<div style=”width:65%;”><strong>65%</strong></div>
</dd>
<dt>SP</dt>
<dd>
<div style=”width:85%;”><strong>85%</strong></div>
</dd>
<dt>EXP</dt>
<dd>
<div style=”width:35%;”><strong>35%</strong></div>
</dd>
</dl>

Gerekli yerleri kendinize göre düzenlersiniz …