Ayberk Atasay

ASP, CSS, Internet konuları üzerine paylaşımlar

CSS ile Ortalama

Kendime ilk kez bir blog kurma fikri geldiğinde bunu kuralına göre oynayarak hem yeni teknolojilere ayak uydurmak, hem kullanımının avantajlarından yararlanmak, hem de daha sonra uygulanabilecek temalar için daha kolay bir hazırlama süreci sağlamaktı.

İlk hazırladığım CSS temasını Design Disease temasının stillerini birazda kendime göre değiştirerek kullanmıştım. Fakat daha sonra kendime daha kişisel daha güzel bir tema hazırlama isteği doğdu. Bu sırada beni en çok oyalayan aslında çok basit bir çözümü olan siteyi ekran çözünürlüğüne göre ortalamaktı.

Bunun için kullanacağımız kod margin: 0 auto;

Genel Kod Kullanımı

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

<head>

<title>CSS Ortalama</title>

<style>

#Cerceve{margin: 0px auto;background: #ccc;width:300px;}

</style>

</head>

<body>

<div id="Cerceve">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>

</body>

</html>

Örneği görmek için tıklayınız.

CSSAyberk Atasay13 Aralık 2008, CumartesiEkle Bunu

Önceki Kayıt

Sonraki Kayıt

Yorumlar

Ayberk Atasay
17 Haziran 2009, Çarşamba

Bir yerde hata yapıyor olabilirsin. Çünkü bu basit bir css kodu ve her tarayıcıda uyumlu.

margin: 0px auto;

yazdığından emin olman yeter.. yada örnek gösterirsen sevinirim.

Yusuf
17 Haziran 2009, Çarşamba

hocam ie7 de bu özellik çalışmıyor buna eşdeğer ama ie7 de çalışan başka bir ortalama kodu var mı ?

mcakir
29 Aralık 2008, Pazartesi

@ Ayberk : açıklamanız için teşekkür ederim.. Yazılarınızı bekliyorum, bu CSS yi öğrenmeyi çok istiyorum, Fatih Hayrioğlu'nun kitabıyla da sadece olmuyor illaki biirlerinin anlatımına ihtiyaç duyuluyor, ne de olsa sıfır temel atmaya çalışıyoruz....Başlık(RSS)'nize üye oluyorum....

Ayberk Atasay
29 Aralık 2008, Pazartesi

@mcakir;
Seninde dediğin gibi bizim div elemanımızın ortalanmasını sağlayan kullanılan margin etiketi.

Burdaki durumu kısaca şöyle açıklayayım (daha sonra margin ve padding ile iligli geniş bir konu yazıcam) margin dediğin gibi elemanların dış objelerle olan birbirine olan özelliklerini gösterir. Burda 0 olan üst ve alt, auto olan sağ ve soldan uzaklıkları gösterir.

Auto is bulunduğu alana göre kendisi otomatik bir ortalama sağlar. Örneğin; genişlik 500 ve çerçevemiz 300 ise sağ ve soldan 75 er pixellik boş olan bırakır ve kendini ortalar.

Umarım anlatabilmişimdir. Dediğim gibi daha soınra daha ayrıntılı bu özellik kullanımı ile ilgili bir yazı ekleyeceğim.

mcakir
28 Aralık 2008, Pazar

birşey sormak istiyorum, burda verilen CSS'miz daha doğrusu bizi etkileyen kod şurası;

#Cerceve{margin: 0 auto;background: #ccc;width:300px;}

benim anlamadığım nokta(af buyrun bilmiyorum) bölümün(div'in) ortalanmasını sağlayan hangi kod...
yani #ccc kodu renk kodu width'i zaten biliyoruz benim tek tahmin edebildiğim margin kodu kalıyor...margin'de dış kenar boşluğu manasında olduğundan bunun can alıcı noktası margin'e biçilen 0 ve auto değerleri mi olacaktır...cevaplarsanız sevnrm...

scorpion
14 Aralık 2008, Pazar

paylasım için teşekkürler

İbrahim ÇAKICI
13 Aralık 2008, Cumartesi

CSS ile tasarım yaparken bu özellik çok hemde çok işinize yarayacak, bilmenizde kesinlikle fayda var. Ben bile ayberk abi sayesinde sorarak yeni öğrendim. Teşekkür ederim bu güzel yazı için. :)