DOCTYPE belirtme ya da belirtmeme :)
Merhaba arkadaşlar
Bugün üst üste karşılaştığım 2 ilginç DOCTYPE belirlenerek yapılamayan işlemi anlatacağım.
1-) Scroll renklendirme
2-) Sayfayı dikleme ortalama(vertical align center)
Öncelikle scroll. Bazı sitelerde görebilirsiniz sağda çıkan scrollun rengini değiştirebiliyoruz.
Bu kod sadece HTML dosya tipinde ve Internet Explorer'da çalışmakta Chrome ve Firefox gösteremiyor.
Eğer tasarım içinde klasik scroll kötü gözüküyorsa bu yapılabiliniyor ancak bazı şeylerden vazgeçerek.
Örnek olarak çalıştığım şirketin websitesindeki içerdeki scrollar ve bir öğrenicim sitesi :
http://www.bilgeadam.com/Bireysel/Haberler/HaberListe.aspx
http://www.ozkanbilisim.com
gibi. Gerekli olan ko altta arrow color ile okun rengine,track ile takip edilecek yolun rengine,gölgelerine hepsine karar veriyorsunuz.
Ancak tek şartla dosyanızın HTML olması şart.
<style type="text/css">
body {
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-face-color:#999999;
scrollbar-highlight-color:#000000;
scrollbar-darkshadow-color:#00000;
scrollbar-3dlight-color:#000000;
}
</style>
O nedemek derseniz.Dreamweaver,Expression Web veya Visual Studio ile başladığınız bir web projesinde DOCTYPE olarak
aşağıdaki ilk satır otomatik olarak gelir , o satırı silerek DOCTYPE belirtmemesini 2.satırdan itibaren başlamısını belirtirseniz
scroll çalışacaktır.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
.....
Aynı şekilde eğitimlerde de çok doğal bir istek olan " hocam ben ufak bir flash yaptım enlemesine ve boylamasına ortalansın istiyorum"
ah oğlum ah yanlama ortalama bir div kadar basit hadi onu anlarsında nası anlatım ben sana CSS ile ortamanın
" bir absoulte div içerisine konumu piksel değil yüzdeyle verilmiş bir releative posititing div ile mümkün olacağını "
O yüzden daha mantıklı ve basit olan çözüm yine DOCTYPE uçuruyoruz , bir tablo ekliyoruz ve tablonun width ve height değerlerini %100 giriyoruz.
Onun içerisinde div ekleyip ortaladığımızda sorun olmayacaktır yeterki sarı-kırmızı gösterdiğim (zaten hiç sevmem ) atın o satırı :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<table width="100%" height="100%">
<tr>
<td><div align="center">
bu yazı üstten ve yandan ortalanmıştır. </div>
</td>
</tr>
</table>
</body>
</html>
Hmmm bu noktada eklemem gereken 2 nokta var. Öncelikle olanı ilk satır boşuna eklenmiyor aslında google'un cashlemesinden tutunda
w3 geçerliliği , XHTML ile iphone,kiosk gibi platform bağımsızlık olaylarından kopmuş oluyorsunuz.
Kurumsal projelerde pek istenecek birşey değildir ancak basit websitelerde kesinlikle birebir çözümdür ;)
En son konu ise eğer arayüzü tablo ile değil CSS ile tasarlıyorsanız (ki öyle yapın) o zaman enleme ortalama
yanlama ortalamadaki right,lef margin auto ver gitsin değil. Güzel bir yazı var okumanızı dilerim.
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Ayrıca neden DOCTYPE kullanmalıyız'a cevap olabilecek güzel birkaç yazı :
http://www.dw.gen.tr/makale/detay/doctype/
http://blogs.msdn.com/petel/archive/2006/05/18/601147.aspx
Faydalı olması dileğiyle....
