Sevgili arkadaşlar görselde de anlattığım üzere... - Arayüz Geliştiriciler

...ama php kodu eklediğimiz zaman tek bir <li> döngüsü oluşturuyoruz. Sisteme ilk çektiğini bu class'la, son çektiğini de şu class'la yayımla gibi ekstra php kodları vermeden, jquery falan kullanmadan sadece css ile bu soruna bir çözüm bulunabildi mi? - Can PAÇACI

#yay - AlpeerTunga

#onemli - Halit Altunterim

Her browser için destek yok ama : " li:last-of-type " css çözümü var. - İbrahim Nergiz

Aynı şekilde "li:last-child" ile de son <li> tagının özellikleriyle oynayabilirsin. - M.Burak

margin-left'ten ayarlamaya çalışsan - Bülent Sakarya

@Bülent; bu seferde ilk kutu sıfırda olmuyor, soruyu tersten de sorabilirim o zaman :D - Can PAÇACI

@bülent float:left olan bir elemana bir de margin-left değeri verirsen explorerda margin-left değeri x2 şeklinde algılanır. ufak bir bilgi :) - Murat Doğan

@M.Burak; bu kod peki her tarayıcıda çalışmakta mı? - Can PAÇACI

ya ben bi tasarımda kolonlama yaparken margin-left ile aralarında ki mesafeyi vermiştim. o sırada bu durum çözülmüştü :D - Bülent Sakarya

taşıyıcı sütunu 20px daha genişletebilirim. bu kutuları tek dive alıp -20px verebilirim falan ama sahalarda görmek istemediğimiz geçiştirici çözümler bunlar - Can PAÇACI

Her 4. kutuya "son" classını ver.. li.son {margin-right:0;} - Simto Alev

@Simto, html'de durum böyle zaten. kutun kadar <li> var ama php'de tek <li> var. - Can PAÇACI

php'de de döngüye bir sayaç ekleyeceksin sadece. 1 değişken, 1 if ile bitecek - Simto Alev

@Simto, php ile çözümü çok biliyorum. Ben css ile çözmeye niyet ettin bugün :D - Can PAÇACI

@Can, yanlış bilmiyorsam "li:first-child" her tarayıcıda "<!DOCTYPE>" ile çalışıyor olsa gerek. - M.Burak

CSS ile çözümü var zaten last-child ama IE 6-7-8 desteklemiyor :) - Eren Can

xhtml 1.0 ile mümkün değil o zaman abi. IE sorun çıkartıyor. Yani css ile cross browser bir çözüm yok. :first-child'ı ie7 destekliyor aslında. margin-right yerine margin-left kullanıp, :first-child'dan margin atabilirsin - Simto Alev

ie6 çözümü de burada ama gerek yok bence: http://mauzon.com/pseudoc... - Simto Alev

Simto'nun dediği doğru left margin ile first-child'ı IE 7 ve IE8 destekliyor. - Eren Can

overflow:hidden; bu da bir çözüm olabilir... - Arda Cavdar

bir kapsaıyıcıya -20px verek listeyi geri çekerek deneyebilirsin :) yazıldı mı okumadım - Oğuzcan Şahin

hahaha @Arda, overflow:hidden en iyi kaçış yolu. css'te ney uymadıysa bas hidden'ı geç. kendi işim olsa yapardım ama müşteri işinde asla! :D - Can PAÇACI

Burda başka bie IE fix de var. http://www.dynamicsitesolutions.com/css... - Simto Alev

o kadar kötü birşey değil yahu, yapabilirsin :))) - Arda Cavdar

IE7'de ayrıca bir bug var. <ul> sonrası li'den önce comment yazarsan, onu first child sanıyor. http://f6design.com/journal... - Simto Alev

yine kafası iyi explorer'ın - Can PAÇACI

Nihayetinde XHTML 1.0 ile, :first-child aradığın çözüm. IE6 çalışmıyor sadece.. - Simto Alev

ul'nin dışındaki div'e 940px width verip, overflow:hidden yap.. ul ise 960px genişliğinde ve li'nin yüksekliğinde olsun.. sıkıntın çözülecektir.. - Ozan Caglargil

Peki o zaman çok teşekkür ediyorum. IE6 maalesef yaptığım sitenin kullanıcı kesimine göre halen daha kullanılmakta olan bir tarayıcı. Her zamanki gibi php ile devam ediyoruz. Halen çözülememiş olmasına üzüldüm. - Can PAÇACI

IE6 kullanımı Türkiye genelinde 1.3'e kadar düşmüşken.. Öte yandan madem IE6 desteği vereceksin, çözüm araman hata. 10 yıllık tarayıcıya gelecek çözüm de 10 yıl öncesinin teknolojisidir. - Simto Alev

Simto o konuda çok haklısın - Can PAÇACI

CSS ile çözeyim diyorsun ama 10 yıl önce CSS'yi link rengini değiştirip artistlik yapmak için kullanıyorduk biz. - Simto Alev

Bu 10 yıllık süreçte belki birşey kaçırmışımdır diye merak ettim. Bugüne kadar çözemiyordum sormak şuana nasip oldu. - Can PAÇACI

li lerin kapsayıcısı ul a margin-left: -20px; verin bir de gerekirse, width değeri verin - Bilal Çınarlı

Son li'den kalan 20px kısmı taşıyıcı sütuna margin-left:-20px vererek aşabailirsin. ie6-7 çözümü için de yine taşıyıcı divin width değerini 20px artırarak 960px yaparsan sorun çözülecektir. Aynı sebepten ötürü bir çok projede kullandım ve halen kullanırım. Tüm tarayıcılarda çalışıyor. - Ahmet Emin Yüce

negatif padding? - Oğuzcan Şahin

@Oğuzcan Şahin Evet, negatif CSS w3c validator için sorun olabilir. Onun yerine margin-left:-20px de durumu kurtarır. Negatif margin validator için sorun olmuyor. - Ahmet Emin Yüce

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ı

evet Bilal'in dediği gibi negatif padding diye bir şey yok. sadece negatif margin var. ve - değerler ile istenilen sorun çözülür. - Oğuzcan Şahin

Ekleme: Bilal Çınarlı'nın önerisi daha iyi, çünkü ekstra div gerektirmiyor. Yazının başına da not olarak ekledim. Bunun için uyguladığım bir çözüm : http://necatbolpaca.com/post... - Necat Bolpaça

takıldınız şu negatif padding'e...düzeltiyorum. kullanırsanız çalışır sadece validatorde hata verir... Yazdıklarımız @Can PAÇACI 'ya ne kadar yardımcı oldu onla ilgilenelim bence! - Ahmet Emin Yüce

@Ahmet Emin, takılmaktan değil, speclerde olmayan bir kullanımdan dolayı bir de mantıksal yaklaşında ters geldi ilk başta :) Bir de her tarayıcı desteklemiyor olabilir (belki de destekliyorlardır, hiç kullanmadığım için test etmedim) - Bilal Çınarlı

En basit yöntem 235px(940/4) genişliğinde bir taşıyıcı kutu yap içine 220px lik içerik kutucuğunu koy ve ortala. 235 lik item divlerini istediğin kadar çoğalt. En basit ve tarayıcı problemsiz yöntem bu. Float left vermesende işe yarar. - Soner Tümer

Simetriyi bozma Soner.. Sağdan 20px margin yerine 2 yandan 8px margin de işi çözer nihayetinde. - Simto Alev

Benimki tam simetrik olan değil mi ? margin fln yok benimkinde sadece fazladan 1 satır var. bu satır li de olabilir li si 235px olur a sı 220 olur a yı ortalatır. geçer gider.. - Soner Tümer

Ortalayarak 2 yandan boşluk yaratıyorsun. 2 Yana margin vermek gibi - Simto Alev

Hatta sağda boşluk bırakıyorsun Soner. Örneğe göre sağa ve sola bitişik olmalı. - Simto Alev

o açıdan olabilir evet Crossbrowser olayı da cuk oluyor margin veya padding hackleri olmadan. Ayrıca hergün yaptığım şey :D - Soner Tümer

Asimetrik ama Soner. Bir de çözüm salt css ile aranmış. Yeni bir taşıyıcı eklemek, bir class eklemekten daha büyük yük. Mesele hiçbir şey eklemeden yapmaktı. Ama IE6 support işi bozdu. - Simto Alev

PHP ile <li<?=(($key>0)&&($key%4==0))?" class=\"sag\"":""?>><?=$value?></li> şeklinde kolay bir çözüm üretebilirsiniz. - Elvin Şiriyev

Amacımız tüm tarayıcılarda sabitlik değil mi ? işte bu yüzden css3 veya html5 yapmıyoruz halen... Sadece fantazi işlerimizide kullanmaya devam. - Soner Tümer

Can'ın amacı epic'di. ul ve 'li var. PHP döngüsünde. Fazladan kod eklemeden, sadece css ile oynayarak sonuca ulaşmak. IE6 dahil cross browser testini geçecek ve overflow:hidden hilesine başvurulmayacak. Yoksa zaten her 4. li'ye ek bir class eklemek yeterliydi. - Simto Alev

Soner valla css3 ve html5'i gayet kurumsal işlerde kullanıyorum :D 2 yıl önce desen bunu haklısın derdim - Bilal Çınarlı

@Simto, he ya, zaten html ya da php ye müdahele etmeden ie6 dahil ortak uygulanacak çözümü de verdik, Soner hala ne derdinde. Gezegende görüşeceğiz Soner senle :D - Bilal Çınarlı

çözüldümü bilmiyorum ama böyle bi çözümde var http://sudrap.org/paste... - Hakan Beşikçi

böyle uzun yorum listesi olunca tadından yenmiyor..bilmediğimiz veya aklımıza gelmeyen ne varsa sömürüyorum bu yorumlardan.. :) ben genelde sona class ekler geçerim, tabi Can başka türlüsünü istemiş, yorumları okumak güzeldi..arada görselli ayraçlar olduğunda, araya seperate koydugum da olmuştu :) 4 element 3 seperate gibisinden..bu kadar yorumu göz önünde bulundurmak adına #korhanTag :) - Korhan Karagozoglu