PDA

Orijinalini görmek için tıklayınız : CSS ile Siteyi Ortalama



mhusty
02-01-2012, 17:58
HTML ile başlayanların en büyük sıkıntılarından biride siteyi ortalamaktır.. Bende ilk başlarda bu sorun ile karşılaştım ve çözümünü deneme yanılma yöntemi ile buldum sizlerlede paylaşmak istedim...

Yapacağınız bir sitenin, sayfanın tam ortasında görünmesini istiyorsunuz diyelim. Bunu çok basit ve pratik bir işlemle çözebiliriz.

Sitemize Bir taşıyıcı seçiyoruz... Taşıyıcıyı body olarak düşünebiliriz..
Taşıyıcı bütün öğeleri içine alır. Yazacağımız her şey bunun içinde yer alır ve sayfayı hizalarken bunu kullanırız.

Yapmamız gereken stil dosyamıza " #tasiyici " adlı bir id oluşturalım ve html dosyamız içine body'den hemen sonra
<div id="tasiyici"> tagını açalım ve </body> hemen önce </div> şeklinde tagı kapatalım Sitemizin Hepsi bu taglar arasında olacaktır...

Şimdi yapmamız gereken stil dosyasında oluşturduğumuz #tasiyici id'sine stil vermemiz.. Aşşağıda ki örneğe bakabilirsiniz..



#tasiyici {width: 760px; margin: 0 auto; }

Bu stillerde width stilinin genişliğini sitemizin normal genişliği ne kadar ise onu yazıyoruz ben burda 760px yaptım ama siz sitenizin genişliğini yazınız... Margin stil'i ise bu şekilde olacaktır değiştirmeye gerek yok...

Css dosyanızda bu şekilde bir kullanım opera ve firefox gibi tarayıcılarda sorunsuz görünse de internet explorer‘da sorun çıkartacaktır. Bütün tarayıcılarda ortalanmış sorunsuz bir görüntü elde etmek istiyorsak yapmamız gereken css dosyamızdaki body seçicisini şu şekilde düzenlemek.


body {text-align: center; }

Böylece sayfadaki her şey ortalanacaktır. Fakat bizim istediğimiz sadece taşıyıcının (container) ortalanması ve diğerleri nesnelerin(yazır, resim…) taşıyıcının içinde sola yaslanması. Kodumuza son halini verip bütünleştirirsek css dosyamız şöyle olmalıdır...


body {text-align: center; }
#tasiyici {width: 760px; margin: 0 auto; text-align: left; }

Sitemiz ortalanmış Olacaktır...

İyi günler dilerim...

Akar
02-01-2012, 18:16
İşin püf noktası neymiş; genişlik değeri verilecek. Öyle değil mi? Ona dikkat çekmiş olalım. Bu yatay hizalama. Bir de dikey hizalama var ki çok büyük bir sorun gerçekten. 3-5 farklı yöntemi var. Varsa bildiğini yaz ayrı bir konu olarak, dikey hizalama diye...orada bakalım.

mhusty
02-01-2012, 18:48
İşin püf noktası neymiş; genişlik değeri verilecek. Öyle değil mi? Ona dikkat çekmiş olalım. Bu yatay hizalama. Bir de dikey hizalama var ki çok büyük bir sorun gerçekten. 3-5 farklı yöntemi var. Varsa bildiğini yaz ayrı bir konu olarak, dikey hizalama diye...orada bakalım.

Dikey hizalama ile ilgili bildiklerimi yazdım farklı bir konuda aytuğ abi :D