Css İle Siteyi Ortalama

POPÜLER ARAMALAR: reklam, pazarlama, iş,
kod, wordpress, eklenti, web, teknoloji,
programlama, tasarım, ajax, linux, Pardus, blog

21 Haziran 2006

Css İle Siteyi Ortalama

Etiketler: Css, ders, ortalama
Kategori Css | 29 Yorum

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

Öncelikle kendimize bir taşıyıcı belirliyoruz. Taşıyıcı nedir derseniz ,

resimdeki “container” taşıyıcıdır. 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.

Sayfayı ortalamanın ilk yolu kodda göründüğü gibidir.

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

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; }
#container {width: 760px; margin: 0 auto; text-align: left; }

Artık tamamen ortalanmış bir sitemiz var ;)

Not: Bu resmi de iyiki zamanında hazırlamışım. Her makalede işime yarıyor :)

“Css İle Siteyi Ortalama” için 29 Yorum

Sayfalar: « 1 2 3 Hepsini Göster

21 Emre YILMAZ
26 Nisan 2009, 16:41

İyi anlatım başarılar.
Yukardaki işlemin biraz farklısı ise oluşturduğunuz div elementleri için “margin-right” ve “margin-left” özelliklerinin değerlerini “auto” olarak atamaktır.

“Container” iptal edildiği zaman “header” sayfada merkezlemek için ;

.header{
width:800px;
height:200px;
margin-right:auto;
margin-left:auto;
}

bu şekilde bir ortamala sağlanabilir. Tek dikkat edilmesi gereken konu boyutunu ayarlamadan ortalama işlemini denememenizdir. “Container” boyutlandırılmasa da “text-aling” özelliği ile içerisinde bulunan div elementleri merkezlenebilmektedir.
22 yakuter
26 Nisan 2009, 22:52

@Emre, makaledeki margin:0 auto; kodunun anlamı zaten sol ve sağ değerlere auto atamaktır ;)
23 Emre YILMAZ
26 Nisan 2009, 23:04

@yakuter , anlatmak istediğim sağ ve sol değerden ziyade bir konumlayıcı belirlemeden de merkezleme olabileceğini belirtmekti. Seninde bildiğin üzere bazı şeylerde detaya inilirse anlayan kişi daha fazla olmaktadır. Maksatım konuyu biraz daha açmaktı sadece.
Başarılar
24 yakuter
26 Nisan 2009, 23:10

@Emre söylediğinde haklısın fakat yanlış hatırlamıyorsam IE6′da sorun çıkarıyordu bahsettiğin gibi bir CSS ortalaması. Onun üzerine bu yazıyı yazmıştım. Yani tek başına margin: 0 auto; yetmiyordu. Şimdi tüm tarayıcılarda çalışıyorsa dediğin gibi basit bir çözüm işe yarayabilir ;)
25 Emre YILMAZ
26 Nisan 2009, 23:18

ie6 yı artık düşünmeyelim derim :)
http://developer.yahoo.com/yui/reset/
gibi bir css sıfırlama dosyası ile bu tür tarayıcı farkları artık ortadan kalmış durumda bildiğin üzere.
26 yakuter
26 Nisan 2009, 23:23

@Emre, sıfırlama yöntemleri seçicilerin varsayılan değerlerini sıfırlar ama tarayıcıların yorumlama şekillerini değiştirmez. Bu konuda bir yanlış anlaşılma olmasın.

Diğer dediğinde ise haklısın, artık IE6′yı bende umursamıyorum. Bu yazıyı 21 Haziran 2006 tarihinde yazmışım :)
27 Emre YILMAZ
26 Nisan 2009, 23:26

@yakuter , o zaman tamam :)
28 Burak Eray KAYIŞ
14 Haziran 2009, 14:45

#container {.. text-align: left; }

buradaki text-align kısmı left olarak yazıldıktan sonra istediğimiz kısımları sağa yaslamak yine o bölge için sağa yasla diyerek sağa yaslayabiliyoruz dimi
29 yakuter
17 Haziran 2009, 20:34

Evet elbette, o an kullandığınız div seçicisi için istediğiniz konumlandırmayı yapabilirsiniz.

Sayfalar: « 1 2 3 Hepsini Göster

Yorum Yapın

Nasrettin Hoca - Dilenci Fıkrası
Nasreddin Hoca bir gün pazarda dolaşırken yanına bir dilenci yaklaşır;
-Bana sadaka veririsen sana dua ederim! der..

Demesiyle Hoca hemen cebinden beş on kuruş çıkarır, dilenciye verir.
-Aman dua mua etmem istemem! der Hoca.

Dilenci:
-Niye?
Nasreddin Hoca:
-Eğer senin duan kabul olsaydı, sen şimdi dileniyor olmazdın...!

Rastgele Sözler Eklentisi ile oluşturulmuştur.

yakuter.com © 2006-2009 Erhan Yakut. Site tasarım fallendesign. Hosting sponsoru WebGrup.
Site içerisindeki içerikler izinsiz kopyalanamaz, alıntı yapılamaz.