Erhan Yakut Software Developer @Binalyze | Founder @Passwall | Golang Enthusiast | Open Sorcerer

CSS Dersi | Css İle Siteyi Ortalama

53 sec read

css ile siteyi ortalama

CSS ile siteyi ortalama günümüz web developerlarının en merak ettiği konulardan birisi. Her ne kadar zor bir konu gibi görünse de aslında oldukça basit bir işlem ile website ortalama konusunu çözebilirsiniz.

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

css ile siteyi ortalama

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.

[css] #container {width: 760px; margin: 0 auto; }[/css]

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.

[css]body {text-align: center; }[/css]

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

[css]body {text-align: center; }
#container {width: 760px; margin: 0 auto; text-align: left; }[/css]

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

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

Erhan Yakut Software Developer @Binalyze | Founder @Passwall | Golang Enthusiast | Open Sorcerer