İE hatalar serisini devam ediyoruz, ben uğraşmaktan ve yazmaktan
bıktım ama ie hata vermekten bıkmadı.
Bu seferki hataya menüde denk geldim. Menüme background-image ile bir
ikon koydum, her şey güzel ama ie6 görmedi. Araştırdım ve sonuç ie
sorunu çıktı tabiki. Sorunun tam tanımı şöyle; listeleri(ul, ol ve dl)
kapsayan elemana eğer float ve position:relative tanımı yaptı iseniz,
ie6 liste background özelliklerini(resim veya renk) görmüyor.
Bu durmu bir örnek ile gösterelim.
Yukarı görülen basit bir listenin ardalanına resim yerleştiriyoruz.
Kapsayıcı elemanada position:relative; ve float:left; tanımları
atanmış olsun. Aktif tarayıcıların tümünde sorunsuz çalışan kodumuz,
ie6’da sorunlu görünecektir. Sorun liste ardalan resminin
görünmemesidir. Sorunu çözerken bayağı bir cebelleşmiştim. Sonunda
çözümü bulunca ve bu çözümde çok basit olunca sevineyim mi üzüleyim mi
şaşırdım.
Çözüm ise çok basit. Ardalan resmi uyguladığımız liste öğesine
postion:relative tanımı yapıyoruz ve bu kadar düzeliyor.
bu kadar bu kod bizim sorunlarımızı gideriyor.
Bir başka çözüm yoluda kapsayıcı bir eleman daha ekleyerek bu elemana
farklı konumlandırma değeri atayıp çözebiliriz, ama bu pek mantıklı
değil, fazladan kod eklememiz gerektiği için. En iyi position:relative
ekleyip sonuca gitmek.
Bir ie6 sorununun daha üstesinden geldik bir başka ie6 sorunu ile daha
karşınızda olana dek hoşça kalın.(Bu ie6 oldukça nasıl hoş kalacağız oda
ayrı bir konu.)
Bu durumla bir kaç defa karşılaştım ve sonuncusunda FirendFeed’de
yazdım, hatta benden önce Burak Dönertaş’da yazmış konuyu. Konuyu
biraz daha ayrıntısı ile burada paylaşmak istedim.
Sorunu başlıkta açıklayıcı bir şekilde anlattım sanırım. Biraz daha
açarsam; css kodlarımızı yazarken çeşitli notlar alırız, örneğin sayfa
yapısını oluşturan alanların isimleri(ustAlan), farklı tarayıcılar için
yaptığımız düzeltmeler için tuttuğumuz notlar(kapsayamamaSorunu) vb.
CSS yorum satırları /* yorum */ işaretleri içinde yazıyoruz ve
tarayıcılar bunları görmezden geliyor.
İnternet Explorer 6 eğer dosyanız UTF-8 ile kaydedilmemiş ise sorun
çıkarıyor. Burada dosyayı utf-8 ve utf-8 BOM’suz kaydetmek arasında bir
fark olmadı. Örnek dosyamı utf-8 ve utf-8 BOM’suz kaydettiğimde bu sorun
düzeldi. Utf-8 ile kaydedince Türkçe karakterler bozuldu ancak tekrar
yazıp kaydedince bir sorun olmadı.
Bir paragraf yazı yazdık. Daha sonra
Css dosyasının içine yukarıdaki kodları yazdım. CSS dosyasını eğer ANSI
formatında kayıtlı ise ie6 css kodlarımı görmüyor.
Firefox ve diğer tarayıcılar ansi olmuş utf-8 olmuş fark etmiyor. Ama
İE6’da ise yukarıdaki gibi Türkçe karakter içeren yorum sonrasındaki
sınıfı görmüyor. Daha sonra css dosyasını utf-8 olarak kaydedince sorun
ortadan kalktı.
Eğer html ve css aynı karakter kodunda ise sorun olmuyor mesela ikiside
iso-8859-9 ise sorun olmuyor. Ama ne zaman html utf-8 css iso-8859-9
olursa sorun oluyor.
Not: Karakter kodu değişiklikleri için NotePad++ kullandım.
Margin özelliği eksi değer alabilir. Eksi değerler bize tasarımsal
olarak farklı uygulamalar geliştirmemize yardımcı olur. Tabi bir çok
özellikte olduğu gibi burada da farklı tarayıcılarda bazı sorunlarla
karşılacağız.
Eksi margin’li değerler bize görsel olarak avantaj sağlar, kodlamamıza
yardımcı olur örneğin esnek yapılı sayfaları düzenlememizde ve bir
elemanın çizgileri dışına taşırma işlemlerinde.
Eksi margin kullanımı bir hile değildir, CSS’in desteklediği normal bir
değerdir.
Eksi margin bir çok yerde kullanıyoruz. Ancak biraz bilinçsiz
kullanıyoruz. Ben burada çizgileri belirleyip ona göre hareket etmeyi
düşündüm ve bu yazı ortaya çıktı. Eksi marginleri yakından tanıyalım.
Eksi Margin’i iki yerde uygularız.
Sabit konumlandırılmış elemanlarda
Float uygulanmış elemanlarda
1- Sabit Elemanlar ve Eksi Margin
1.1. Ard Arda Statik Elemanlar
Herhangi bir konumlandırma ataması yapılmayan tüm elemanlar sabit
konumlandırılmıştır.
Aynı görüntüyü alırız. Burada bu örneği vermemin amacı, eksi değer üst
ve soldan verilirse eleman kendini yukarı veya sola çekecektir. Ancak
elemana sağ ve alt eksi değeri verildiğinde kendi yerinden oynamazken
ilişkili elemanı kendine doğru çekecektir. Yani üst/sol eksi değerlerde
kendi hareket ederken, alt/sağ eksi değerlerde diğer elemanları kendine
çekiyor.
1.2. Başlıklar ve içerikler Arasındaki mesafeyi Ayarlamak İçin Eksi
Margin kullanmak
Başka bir örnek yapalım. Genelde sitelerin içeriklerini girerken başlık
ve içerik şeklinde gireriz. Başlıklar için h1, h2, h3, h4, h5, h6
kullanırız. Bu bize arama motorları içinde avantaj sağlar.
Normal bir içerik ve başlık kullanımına örnek verelim.
Görünüm aşağıdaki gibi olacaktır
Genel kullanımda başlık ile içerik arasındaki boşluk, başlık ile üst
elemanlarda ile olandan daha azdır. Biz bunu sağlamak için h1’e
margin-bottom:0 değeri versek de yeterli gelmez. Paragrafın(p) üst
margin değeri aradaki mesafeyi açık gösterecektir. Bu durumu engellemek
için başlıktan sonra gelen paragraflara bir sınıf atayıp bu
paragrafların margin-top değerini düşürmeliyiz veya sıfırlamalıyız.
Bir başka çözüm yolu ise ki bu daha kolaydır ve genelde tercih edilir.
Başlık etiketinin alt margin değerine eksi değer vererek paragraf
yaklaştırılır.
1.3. Statik elemanlarda bir başka durumda kutuların iç içe olma
durumunda vardır.
HTML;
İçteki kutuya sağdan ve soldan eksi değerler verdiğimizde dış kutunu
genişliğini otomatik olarak alan içerideki kutu sağ ve soldan verilen
eksi kenar dışı boşluk değerleri kadar dışa taşacaktır.
Ancak burada farklı tarayıcılarda farklı sorunlarımız ortaya çıkacaktır.
ie6 da her iki yana taşan kısımlar gözükmezken, ie7’de sadece sağ kısım
görünmemektedir.
ie7’de yukarıdaki gibi görünüyor.
ie6’da ise yukarıdaki gibi görünmektedir.
Bu durumu düzeltmek için düzeltme kodu yazmalıyız. ie7 için min-height:0
tanımı yeterlidir.
Bu kodlama sayesinde tüm tarayıcılarda aynı sonucu elde ederiz. Bu
örnekten şu sonucuda çıkarabiliriz; genişliği verilmeyen elemanlarda
eksi margin eleman genişliğini arttırır, bir bakıma padding görevi
görür.
Birinci kutu ikinci kutuyu kendine doğru çekecektir. Birinci kutu
genişliği ve konumunda herhangi bir değişiklik olmayacaktır.
Farklı durumlarda farklı sonuçlar çıkacaktır. Örneğin,
Birinci float:left ikinci kutu float:right değeri verdiğimizde iki kutu
arasında herhangi bir eksi değer etki etmiyor.
Her ikisine float:right tanımladığımızda ise, soldan eksi margin değeri
yukarıdaki etkiyi yapıyor.
Peki bu bilgi bizim ne işimize yaracak derseniz.
http://www.alistapart.com/articles/negativemargins/ örnekteki gibi esnek
yapılı bir sayfa planında sabit yapılı bir sağ veya sol alanlar
oluşturmak istediğimizde yarar.
Örneğin %100 genişlikteki bir içerik alanımızı sağ yanına 200px lik bir
sağ kolon eklemek istersek, yukarıdaki kodu devam ettirmemiz yeterli
olacaktır.
%100 içeriği sağ kolonun altında kalıyor. Bunu engellemek için
içeriğindeki paragrafa sağ margin değeri atamalıyız.
Normalde 200px yeterli olacaktı ancak içerik ile sağ kolon arasına 20px
lik bir mesafe koyarak birbirine yapışmasınıda engellemiş olduk.
Sağ ve sol kolon diye bir ayrım yapmak içinde soldaki kolonun ardalan
rengini kaldırıp içindeki paragrafa vererek bu sorunu çözebiliriz.
Sonuç olarak eksi margin bir çok uygulamamızda kullanacağımız bir
özellik. Genelde farklılıkları ile ön plana çıkan bir özelliktir. Ben
burada eksi margin’i tanıttım ve genel bilinen uygulamalarını yaptım ve
bir kaçına link verdim. Buradaki bilgiler ışığında daha bir çok
uygulamamızda eksi margin’i kullanmaya devam edeceğiz.