Yeni Kayıt
Konudaki Resimler
|
Hızlı 
Bildirim
Div içindeki resimler taşıyor Yardım Lütfen
Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Bu Konudaki Kullanıcılar:
2 Misafir - 2 Masaüstü
Giriş
Mesaj
-
-
CSS ile ortalama
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.
view sourceprint?
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:
view sourceprint?
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:
view sourceprint?
01 body
02 {
03 text-align: center;
04 }
05
06 div#container
07 {
08 margin-left: auto;
09 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:
view sourceprint?
01 body
02 {
03 text-align: center;
04 }
05
06 div#container
07 {
08 margin-left: auto;
09 margin-right: auto;
10 width: 50em;
11 text-align: left;
12 }
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.
Alıntı : weebakademi.com/Forums/
-
CSS ile ortalama
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.
view sourceprint?
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:
view sourceprint?
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:
view sourceprint?
01 body
02 {
03 text-align: center;
04 }
05
06 div#container
07 {
08 margin-left: auto;
09 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:
view sourceprint?
01 body
02 {
03 text-align: center;
04 }
05
06 div#container
07 {
08 margin-left: auto;
09 margin-right: auto;
10 width: 50em;
11 text-align: left;
12 }
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.
Alıntı: Weeb Tasarım
Sayfa:
1
Ip işlemleri
Bu mesaj IP'si ile atılan mesajları ara Bu kullanıcının son IP'si ile atılan mesajları ara Bu mesaj IP'si ile kullanıcı ara Bu kullanıcının son IP'si ile kullanıcı ara
KAPAT X
Bu mesaj IP'si ile atılan mesajları ara Bu kullanıcının son IP'si ile atılan mesajları ara Bu mesaj IP'si ile kullanıcı ara Bu kullanıcının son IP'si ile kullanıcı ara
KAPAT X
