Css İle Siteyi Ortalama

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 :)

Benzer Yazılar

yakuter

Erhan Yakut

www.yakuter.com

Genç yaşlarda programlama ile tanıştı ve Delphi ile başladığı programlama macerasına şuanda PHP, SQL, Javascript, AJAX, CSS, XHTML teknolojileri ile devam etmektedir. Elektrik - Elektronik bölümü mezunu olan "yakuter" 2006 yılından itibaren yakuter.com'un yazarlığını yapmaya başlamıştır.

Bu Yazıya Ait Yorumlar

mamcellat

mamcellat
18 Ağustos 2007

ya anlamadığım şey şu tam kodu varmı bunun

mirc

mirc
28 Kasım 2007

eline saglık valla işime yaradı

Serhat

Serhat
22 Aralık 2007

evet evet :) benimde işime yaradı gerçekten..teşekkür ederim

fatih

fatih
22 Ocak 2008

hocam konu anlatımı için tşk. yalnız benim bir sorunum var.
700e500 ölçüsünde kutu şeklinde bi tasarımım var, yatayda ortalanmıyor. kendi bilgisayarımda gayer güzel sonuç veriyor ama geniş bir monitörde sayfa sola yakın çıkıyor.
söylediğiniz yöntem de dahil hemen hemen tüm teknikleri denememe rağmen sayfayı ortalayamadım. tablo ekleyip, div ekleyipte ortalayamadım. yardımlarınızı bekliyorum.

yakuter

yakuter
22 Ocak 2008

>fatih bu makale işine yaramadıysa başka yöntemler denemen lazım ki şuan aklıma bir şey gelmiyor. Destek forumlarında sorununu dile getirebilirsin.

ihya

ihya
03 Şubat 2008

tesekkürler kardes :)

aşk

aşk
25 Mart 2008

benımde 4 tane css sitem var bu sorunu yaşıyordum iş yerınde yapıyordum ortalı eve gittiğimde laptopdan bakınca kaydıgını felan gördüm.. ama bu şekilde düzelttim şuanda sorunsuz çallışıyor teşekkürler yakuter

salih

salih
06 Mayıs 2008

firefox ta ortalanmıyor bu şekildeNe yapabilirim acaba?

yakuter

yakuter
06 Mayıs 2008

@salih,firefox’ta da ortalanıyor. Bir yerlerde hata yapıyorsundur. Kodlarını tekrar gözden geçir derim.

salih

salih
06 Mayıs 2008

şimdi fark ettim margini sadece 0px yapmışım yanına auto yazınca düzeldi.kodlar düzgün çalışıyor dostum tekrardan sağol kusura bakma

Mutllu

Mutllu
20 Mayıs 2008

teşekkür ederim.

teknoim

teknoim
26 Haziran 2008

tesekkurler gercekten cok ısıme yaradı

Arif

Arif
30 Haziran 2008

“Css İle Siteyi Ortalama” derken “İle”, “ile” olarak yazılır. Sanıyorum gözden kaçmış. Teşekkürler.

komik

komik
18 Temmuz 2008

teşekkürler kullanışlı işime yaradı

Murat

Murat
26 Temmuz 2008

Arif, -“Css İle Siteyi Ortalama” derken- değil -“Css İle Siteyi Ortalama” yazarken- diye yazılır. Sonuçta bişey denilmiyor bişey yazılıyor.

Mekaleniz için Teşekkür Ederim. Faydalı bi bilgi..

alper

alper
25 Aralık 2008

arkadaşım bilgiler çok güzel ortalarken temayı konular kısmı ortalanmış sidebar kısmı alt tarafta gözüküyor…bunu çözemedim konuların olduğu yeri yanına sidebarı getiremiyorum…yardımınız için şimdiden teşekkür ederim…

emrah yılmaz

emrah yılmaz
30 Aralık 2008

Teşekkürler, kendi sorunum için denedim ve çok güzel sorunsuz çalıştı.

ömer

ömer
18 Ocak 2009

biz bu sitemizdeki yazıları piksel piksel nasıl soldan sağa doğru kaydırabiliriz .

özkan

özkan
16 Nisan 2009

ben şunu sormak istiyorum. bu css kodunu nereye nasıl yazılacak html içindeki nin içinemi yoksa ondan önçe css in kendi içinde var da orayamı yazılacak tam yazılmış halini bildirirseniz çok memnun olurum.teşekkürler

yakuter

yakuter
17 Nisan 2009

CSS kodu html dosyasının içine veya harici bir dosyaya yazılarak çağırılabilir. Google’da bu konuyu araştırısanız oldukça tatmin edici makaleler bulabilirsiniz.

Emre YILMAZ

Emre YILMAZ
26 Nisan 2009

İ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.

yakuter

yakuter
26 Nisan 2009

@Emre, makaledeki margin:0 auto; kodunun anlamı zaten sol ve sağ değerlere auto atamaktır ;)

Emre YILMAZ

Emre YILMAZ
26 Nisan 2009

@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

yakuter

yakuter
26 Nisan 2009

@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 ;)

Emre YILMAZ

Emre YILMAZ
26 Nisan 2009

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.

yakuter

yakuter
26 Nisan 2009

@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 :)

Emre YILMAZ

Emre YILMAZ
26 Nisan 2009

@yakuter , o zaman tamam :)

Burak Eray KAYIŞ

Burak Eray KAYIŞ
14 Haziran 2009

#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

yakuter

yakuter
17 Haziran 2009

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

Erhan Emin

Erhan Emin
05 Şubat 2010

verdiğiniz bilgiler için teşekkürler artık sıkı bir takipçiniz olacağım…

yakuter

yakuter
05 Şubat 2010

Rica ederim ;)

Fatih

Fatih
13 Haziran 2010

teşekkürler

SpyboT

SpyboT
26 Haziran 2010

eline sağlık

fatih

fatih
03 Temmuz 2010

“center” tagı kullandığım günlerde W3.Org’un mobil doğrulamasından düşük not alıyordum, bu tagları kullanmaz olduktan sonra 1 puan yükselip %92 olmuştu. Sanırım “marquee” tagından da geçeceğim. Onu da attım mı epey yükselecek gibi :)

cafgazhar

cafgazhar
15 Temmuz 2010

ellerine sağlık…
Siteyi ortaladık, peki sağ veya sol veya da hem sağ hem sol boşluklara dikey reklam alanları v.b nasıl ekleyebiliriz bunu da açıklayabilir misiniz lütfen…

Mahmut Tan

Mahmut Tan
13 Ağustos 2010

@cafgazhar aynı sorunun cevabını bende arıyorum :D gerçi benim sorunum biraz farklı, ben phpbb temalı bir forum sitesinde div ile rahatlıkla istediğim yerine reklam alanını ekliyorum, 1024px genişliğe göre ayarlıyorum, doğal olarak daha yüksek çözünürlüklerde reklam alanı sitenin üzerine kayıyor, bunu bir türlü çözemedim, bb nin yapısı tablo olduğu için div in sağına soluna float ta edemedim, yardım bulabilsek iyi olacak.

Peki ya sizin düşünceleriniz?

Facebook Grubumuz Twitter Wordpress Linked in Google Friendfeed RSS Beslemesi Feedburner RSS

Abonelik

Yazılan yazılardan ilk siz haberdar olun, yeni yazılar e-postanıza gönderilsin.

yakuter.com © 2006-2010 Erhan Yakut. Site tasarım Cenk Akyıldız - (Tema Bilgisi). Hosting sponsoru WebGrup.
Site içerisindeki içerikler izinsiz kopyalanamaz, alıntı yapılamaz.

WordPressValid XHTML 1.0 TransitionalBu web sitesi ne kadar popüler?php