CSS ile ortalama

Paylaş 29 Eylül 2008 | Kategoriler: bilgisayar | Etiketler:

Bu yazı orijinali Max Design‘da yayınlanmış olan “CSS Centering – fun for all!” isimli yazının Türkçe çevirisidir.

CSS kullanarak bir içerik bloğunu nasıl ortalarsınız? Bunun için hali hazırda iki metot var ve seçiminizi sayfanızın likit (tarayıcı penceresinin boyutlarına göre boyutları değişen tasarım) ya da sabit genişlikli bir tasarım olmasına göre yapmalısınız.

Likit tasarımlarda ortalama

Likit tasarımlarda içerik bloğunu her iki tarafına da marjin koyarak kolayca ortalayabilirsiniz. Marjinler em, piksel ya da yüzde birimi olarak ayarlanabilir.

CSS:

    1. div#container
    2. {
    3. margin-left: 10%;
    4. margin-right: 10%;
    5. }

Sabit genişlikli tasarımlarda ortalama

Teorik olarak içerik bloğunun sağına ve soluna otomatik marjinler verdiğinizde bloğun ortalanması lazım.

W3C görsel biçimlendirme modeli‘ne göre: “EÄŸer ‘margin-left’ ve ‘margin-right’ deÄŸerleri ‘auto’ ise, her ikisi de eÅŸit deÄŸer kullanır. Bu da elemanı içerik bloÄŸunun kenarlarına göre ortalar.”

Yani bir içerik bloğu şu kurallar uygulanarak ortalanabilir:


CSS:

    1. div#container
    2. {
    3. margin-left: auto;
    4. margin-right: auto;
    5. width: 50em;
    6. }

Ne varki bazı tarayıcılar otomatik marjinleri gözardı ettiklerinden bu şekilde içerik bloklarını ortalamazlar. Bahsettimiz tarayıcılar arasında şunlar vardır:

  • NN4 (Mac ve Win)
  • Win/IE4
  • Win/IE5
  • Win/IE5.5
  • Win/IE6 (quirks modda)

Basit iki kural ekleyerek yukarıda saymış olduğumuz tarayıcılardan NN4 haricinde diğerlerinde bu problemi giderebiliriz.

1. body’yi ortala

Her ne kadar bu tarayıcılar otomatik marjinleri göz ardı etseler de “text-align: center” ÅŸeklinde bir kuralı hepsi tanır. Bu kuralı body elemanına uygularsak içerik bloÄŸu doÄŸru bir ÅŸekilde ortalanır. Yani yeni bir kural eklendi:


CSS:

    1. body
    2. {
    3. text-align: center;
    4. }
    6. div#container
    7. {
    8. margin-left: auto;
    9. margin-right: auto;
    10. width: 50em;
    11. }

2. text-align’ı sıfırla

Yeni kural ile ilgili tek problem, artık sayfadaki tüm elemanlar ortalandı. Bu tümünü ortalama probleminin üstesinden gelmek için yeni bir içerik bloÄŸu ekleyerek “text-align: left” kuralını uygulayalım. Sonuç CSS kodu ÅŸu ÅŸekilde:


CSS:

    1. body
      }
      text-align: left;
    2. {
    3. text-align: center;
    4. }
    6. div#container
    7. {
    8. margin-left: auto;
    9. margin-right: auto;
    10. width: 50em;

Sonuçlar

İlk örnek sayfa bir içerik bloğunun otomatik marjinler kullanılarak, body ortalanmadan nasıl ortalanacağını gösteriyor.

“text-align: center” olmadan ortalama, örnek sayfası

Ä°kinci örnek sayfa, bir içerik bloÄŸunun otomatik marjinlerle nasıl sayfa içinde ortalanacağını ve aynı zamanda body elemanının ortalanmasını ve içerik bloÄŸunda “text-align: left” kullanımını gösteriyor.

“text-align: center” ve “text-align: left” ile ortalama, örnek sayfası

bu yazı karalamalar.net adresinden alınmıştır.

Benzer Yazılar:

Bir Yorum Yap | Geri Ä°zlemeler
  1. karalamalar
    29 Eylül 2008 - 09:32
    | Alıntı | #1

    Benim çevirisini yaptığım WordPress Türkçe paketini kullanıyorsun, benim yazdığım yazıları bana kredi bile vermeden sanki kendin yazmışsın gibi kopyalayıp yapıştırıyorsun, çok ayıp ediyorsun. Özgün içerik üreteceksen üret ya da kapat blogu gitsin. Üç beş kuruş için bu kadar alçalmaya değmez!!!

    Thumb up 0 Thumb down 0

  2. guv2000
    18 Ekim 2008 - 16:21
    | Alıntı | #2

    yazının altına “bu yazı karalamalar.net adresinden alınmıştır.” ibaresi eklenmiÅŸtir.

    Thumb up 0 Thumb down 0

Yorumları gönderebilmek için giriş yapmalısınız.
« »
YUKARI