PDA

Orijinalini görmek için tıklayınız : Css Dikey Ortalama



mhusty
02-01-2012, 18:46
CSS kullanmaya yeni başlayanların ilk sorularından biri, dikey ortalamanın nasıl yapılacağıdır.Aytuğ abinin isteği üzerine kendi bilgilerim ve internetten aldığım bilgileri harmanlayarak bir şeyler hazırlamaya çalıştım.. Gerçekten de, yatay ortalama text-align: center; komutuyla kolayca halledilebilirken, dikey ortalama için böyle bir kolaylık bulunmaz.

Peki sayfaları CSS’de nasıl dikey ortalarız? Bunun bir çok yolu var. Ancak bunlardan bazıları, her tarayıcıyla uyumlu olamıyor; yani her tarayıcıda doğru görüntülenemiyorlar.

Bu yazımızda, dikey ortalamaya yarayan 5 yöntemi inceleyeceğiz. Yöntemlerin kuvvetli ve zayıf yönleri de yazımızda yer alıyor.

1. Yöntem

Bu metod, divlerin tablo şeklinde görünmesini sağlıyor. Böylece table’ın klasik vertical-align özelliğini kullanabiliyoruz:



<!-- CSS -->
#tasiyici {display:table;}
#kapsayici {display:table-cell; vertical-align:middle;}




<!-- DIV -->
<div id="tasiyici">
<div id="kapsayici">
<div class="icerik">
İçerik burada yer alıyor
</div>
</div>
</div>

Olumlu yönleri:

- İcerik div’inin yüksekliği dinamik olarak değişebiliyor. Standart bir yükseklik tanımlamamız gerekmiyor.
-Tasiyici div’inde yeterince boşluk olmasa da, icerik div’i kesilmiyor.

Olumsuz yönleri:

- Internet Explorer’da çalışmıyor (Fazla ümitlenmeyin IE 8 de sözümüze dahil).
- İç içe çok div kullanmak gerekiyor (Bu göreceli bir mahsuru).

2. Yöntem



<!-- CSS -->
#icerik {position:absolute; top:50%; height:240px; margin-top:-120px; /* eksi yüksekliğin yarısı */}





<!-- DIV -->
<div id="icerik">
İçerik burada yer alıyor
</div>

Olumlu yönleri:

- Bütün tarayıcılarda çalışıyor.
- İç içe geçmiş divler kullanmak gerekmiyor.

Olumsuz yönleri:

- Yeterince boşluk olmadığında içerik kayboluyor (Mesela div, body’nin içindeyse ve kullanıcı tarayıcı penceresini yeterince küçültürse, scroolbar çıkmıyor).

3. Yöntem

Bu yöntemde, icerik div’inin yukarısına bir div yerleştiriyoruz. Yüksekliği “50%;” ve alt mesafeyi (margin-bottom) içerik yüksekliğinin negatifi olarak belirliyoruz.


<!-- CSS -->
#yaslama {float:left; height:50%; margin-bottom:-120px;}
#icerik {clear:both; height:240px; position:relative;}




<!-- DIV -->
<div id="yaslama">
<div id="icerik">
İçerik burada yer alıyor
</div>
</div>

Olumlu yönleri:

- Bütün tarayıcılarda çalışıyor.
- Yeterince boşluk olmadığında bile içerik kaybolmuyor, scroolbar çıkıyor.

Olumsuz yönleri:

- İç içe çok div kullanmak gerekiyor (Göreceli).

4. Yöntem

Bu yöntem “position:absolute;” ile pozisyonlanmış, sabit yüksekliğe ve sabit genişliğe sahip bir div’den yararlanıyor. Daha sonra div, “top:0; bottom:0;”a geriliyor. Sabit bir yükseklik verdiğimiz için yüksekliği değişmiyor ve böylece margin:auto; ile ortalanabiliyor. Bu tarz, block elemanlarını yatay olarak ortalamak için margin:0 auto; kullanılmaya benziyor.


<!-- CSS -->
#icerik {position:absolute; top:0; bottom:0; left:0; right:0;
margin:auto; height:240px; width:70%;}


<!-- DIV -->
<div id="icerik">
İçerik buraya gelecek
</div>

Olumlu yönleri:

- Uygulaması kolay.

Olumsuz yönleri:

- Internet Explorer’da çalışmıyor (Evet IE 8′de de).
- Yeterince boşluk olmadığında, scroolbar çıkmıyor ve içerik kesiliyor.

5. Yöntem

Bu yöntem ile, yalnızca tek satırlık yazılar ortalanabiliyor. Satır yüksekliği (line-height), div’in yüksekliğine eşitleniyor ve yazı ortalanmış oluyor.


<!-- CSS -->
#icerik {height:100px; line-height:100px;}


<!-- DIV -->
<div id="icerik">
İçerik buraya gelecek
</div>

Olumlu yönleri:

- Bütün tarayıcılarda çalışıyor.
- Yeterince boşluk olmasa da, içerik kesilmiyor.

Olumsuz yönleri:

- Yalnızca text (yazı) için işe yarıyor. Block elemanlarında kullanılamıyor.
- Yazı bir satırdan uzun olduğunda, ortalık karışıyor.

Bu yöntem, sayfadaki küçük elemanlar için (Butonların üzerine yazılacak başlıklar vs.) oldukça kullanışlı.


Bir sürü Yöntem mevcuttur eğer bir yerde yanlışım var ise düzeltin ..

İyi Günler

Akar
02-01-2012, 20:07
Helal olsun Mustafa, işte anlatım böyle olur. Ham CSS ile olabilecek tüm olasılıklara değinmişsin. Tabrik ediyorum. Bundan çok kimse faydalanacak. CSS konusunda çalışmalarına devam edersen memnun olurum.

mhusty
02-01-2012, 20:12
Helal olsun Mustafa, işte anlatım böyle olur. Ham CSS ile olabilecek tüm olasılıklara değinmişsin. Tabrik ediyorum. Bundan çok kimse faydalanacak. CSS konusunda çalışmalarına devam edersen memnun olurum.

Teşekkürler aytuğ abi.. Joomla!'da tema yapmaya bir ara kafayı takmıştım o aralar CSS ile biraz haşır neşir oldum iyikide olmuşum.. Daha derslere devam edeceğim...

Not: Hala Joomla!'da tema yapamıyorum :D