Float Uygulanmış Elementleri Tam Kapsayamama Sorunu İpuçları
1- Firefox 3′de form elemenalarının Tıklanamaması Sorunu
Daha önce bir kaç kez bahsettiğim ve web kod yazarlarının birçok zaman karşılaştığı ‘Float uygulanmış elementlerin kapsayamama sorunu’ bugün xpur(Gökhan)’un bir sorusu üzerine bu yazıyı yazma gereği duydum.
Kapsayamama sorunu yaşadığımız katman içinde eğer selectbox var ise Firefox 3′de bu selectbox tıklanabilir olmuyor. Açılmıyor yani
Kodumuz aşağıdaki gibi
.kapsayamamaSorunu: after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.kapsayamamaSorunu {display: inline-block;}
/*IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu {height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */
sorunu çözümü ise .kapsayamamaSorunu ile :after arasındaki boşluğu kapatmak .kapsayamamaSorunu:after
.kapsayamamaSorunu:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Küçük bir nokta olsa da zamanı gelince insanın çok zamanını alıyor.
2- Sorunun Kısayolu
Bu konuda hakkında bir başka ipucuda float’uygulanmış nesnelerde bu sorun ile çok fazla karşılaşıyoruz, ben eskiden her bir sorunlu eleman için bu kodu yazıyordum. Sonra bunu bir sınıfa atayıp gerekli yerlerde bu sınıfı kullanmanın daha avantajlı olacağını düşündüm.
.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.kapsayamamaSorunu {display: inline-block;}
/*IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu {height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */
<div id="icerik" class="kapsayamamaSorunu">
<ul>
<li>
<select>
<option value="-1">Seçiniz</option>
<option value="1">Deneme1</option>
<option value="2">Deneme2</option>
</select>
</li>
</ul>
</div>
<div class="resimAlani kapsayamamaSorunu">
<img src="images/deneme.jpg" width="150" height="80" />
</div>
#icerik ve .resimAlani bu sorun ile karşılaştığımızı düşünelim. Tek tek bu kodu yazmaktansa .kapsayamamaSorunu isimli bir sınıf tanımlayıp sorunumuz ile karşılaştığımız her yerde bu sınıfı tanımlarız. Tek tanımla ile işimizi hallettik.
Güzel yöntem.Teşekkürler.
Kapsayıcı elemana; “height:auto; overflow:hidden veya visible” gibi bir değer versek de çözülmüyor mu ff için?
Evet buda bir yöntem olarak kullanılabilir. Ancak overflow özelliğini hidden yapmak bazı durumlarda sakınca yaratabilir.
[...] CSS İpucu 17: Float Uygulanmış Elementleri Tam Kapsayamama Sorunu İpuçları [...]
:)) Fatih teşekkürler çözüm için.Ben bu sorunun mağduruydum:) Universitenin sitesindeki bir kaç link altif değil diye kapatmıştım siteyi kaç defa.Daha sonra tesadufen exlorerde deneyince tıklanabilir olduğunu farkettim.Firefoxa guvenmiştim.Demek ki onun da kusurları var:)
Bu konuda ben de bir ara soru sormuştum Fatih abiye. Sonra gördüm ki çok basitmiş aslında.
Erhan,
senin dediğin yöntemde anlık bir çözüm sunuyoruz sanırım. Tek bir yer içinse sorun yok ama birden fazla yer içinse clear deyip gitmek çok mantıklı olmuyor Fatih abinin dediği gibi.
Bende böyle düşünmüştüm. Benim ki biraz daha zahmetli. Peki teşekkür ederim tavsiyen için. Kolay gelsin ;)
Peki fatih “clear” komutu da işe yaramaz mı? Yani ben clear:both dediğim zaman tüm tarayıcılar bu sorun düzeliyor. clearfix’i birkaç kez kullanmayı denedim fakat clear:both gibi bir kullanım sorunumu çözdüğü için vazgeçtim. Acaba hata mı yapıyorum, ne dersin?
clear=”both” ile çözmekten kastın sorunun yaşandığı elmanını sonuna bir
Fatih ve süper .clearfix çözümü.
Halen css’ lerimin en altında durur ve her projemde en az 100 kere kullanılmaktadır kendileri. Bunu bana anlatana kadar ne kadar uğraştığını anımsıyorum :)
Teşekkürler Fatih abi.