Önemli ekleme : Bu yazı bir süredir taslak olarak durmaktaydı. Şu feed : http://ff.im/OrVGp sayesinde yayınlama kararı aldım :-)
Bağlantı verdiğim gönderi içinde, Bilal Çınarlı'nın çözüm önerisini de ayrıca ekliyorum (çünkü bu çözüm önerisi daha iyi, benim aşağıda anlattığım şekilde ekstra bir iç div gerekiyor)
ALINTI BAŞLANGICI
negatif padding diye bir kullanım yok diye biliyorum. Bu tarz yan yan yazdırmalarda, li lere margin-right: 123px; yerin margin-left: 123px; verip, bu li lerin ul'una da margin-left: -123px; vermek iş görüyor -Bilal Çınarlı
ALINTI SONU
Benim yayınladığım yazı içeriği aşağıdadır:
1. Sorun
Merhaba; semantik kodlama adına, bir ürün, makale ve sair listeleri <ul> veya <ol> ile yapıyoruz. Bu listelerin içindeki elemanları hem sağa hem de sola sıfırlamak istersek, nasıl bir yol izlememiz gerekir?
Bazı kaynaklardan bu problemin çözümünü araştırırken, nth-child isimli css 3 direktifinin kullanıldığı örnekler gördüm. Ancak bana Internet Explorer gibi ilkel tarayıcılarda bile çalışan bir çözüm gerekliydi.
2. Çözüm
Çözüm için, nesnelerin sağdan mesafelerini margin-right olarak ayarlıyoruz. Örneğin 4 adet 100px nesne yan yana gelsin ve sağdaki nesnelerin uzaklığı 10px olsun. Bize 440px gerekecektir. Bu nesneler 430px (nesnelerin toplam genişliğinden, sağdaki marginin birini çıkardığımızı düşünün)
Kapsayıcı nesnenin genişliği 430px olmalıdır. Pekiyi içerdideki <li> elementlerinin taşmasını nasıl önleyeceğiz? Bunu iç kısma yazdığımız 440px genişliğinde bir katman (div) ile çözüyoruz.
Böylece en sağdaki nesnenin sağ margini, içteki sağ margin kadar geniş katman tarafından yutulmuş, doğru yerden satır başı verilmiş ve katmanlar hem sola hem de sağa sıfırlanmış olacaktır.
Subscribe