CSS ile oluşturduğumuz bir site tasarımının ekranın tam ortasında olmasını isteriz. Böylece ziyaratçiye hoş bir tasarımı tam görmek istediği yerde sunarız. Ama tasarımı CSS’e entegre ederken unutulmaması gereken bir şey var! Her ziyaretçinin ekran çöznürlüğü ve ekran boyutları aynı değil! Mesela, 1600X900 ekran çözünürlüğüne sahip bir tasarımcı sitenin tam ortasını manuel olarak yatayda 800, dikeyde ise 450px olarak alırsa siteyi kendi ekranına göre ortalamış olur. Fakat başka çözünürlüklerde görüntülemek istediği zaman bu ayarlar başka ekranlarda taşabilir ya da ekranda hiç gözükmeyebilir.
Bu yüzden, genişlik ve yükseklik değerlerini her ekrana göre 100% olarak tanımlarsak ve CSS ile soldan ve üstten 50% olarak ayarladığımız zaman site otamatik olarak her ekran çöznürlüğü için ortalanmış olacaktır. Örnek bir kod düzeni için aşağıdaki örneğe göz atabilirsiniz:
CSS Kodumuz:
body{
margin:auto;
}
#ortala{
width:400px;
background-color:#00FF00;
position:absolute;
top:50%;
left:50%;
margin-left:-200px;
/*Font Özellikleri*/
text-align:center;
font-family:Myriad pro;
font-size:20px;
}
HTML Kodumuz:
CSS İle Bir Nesneyi KonumlandırmaBu kodları kullanarak yaptığımız işlem; bir sınıfı her türlü ekran çözünürlüğüne göre ortaladık.
Not: Bu anlatımın örneğine yazının sonundaki “Konumlandırma Örneği 1″ butonundan bakabilirsiniz.
Yapılan bazı tasarımlar ise sayfalarının tam ortalarında olmak yerine, üstten şu kadar ve soldan şu kadar olarak tanımlanabilir. Mesela bir nesne yukarıdan 100, soldan ise 750px alındığında ortaya çıkan yeni kod düzenine aşağıdan göz atabilirsiniz:
CSS Kodumuz:
position:absolute;
top:100px;
left:750px;
margin-left:-200px;
Konumlandırma Örneği 1
Konumlandırma Örneği 2
Kaynak: http://ugurdalkiran.com/css-ile-bir-nesneyi-konumlandirma.html
