CSS ipuçları 17 : 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

01
.kapsayamamaSorunu: after {

02
 content: ".";

03
 display: block;

04
 height: 0;

05
 clear: both;

06
 visibility: hidden;

07
}

08
.kapsayamamaSorunu {display: inline-block;}

09
/*IE-mac de bu bolumu sakla \  */

10
* html .kapsayamamaSorunu {height: 1%;}

11
.kapsayamamaSorunu {display: block;}

12
/* IE-mac bu bolumu saklam  artik */

sorunu çözümü ise .kapsayamamaSorunu ile :after arasındaki boşluğu kapatmak .kapsayamamaSorunu:after

1
.kapsayamamaSorunu:after {

2
 content: ".";

3
 display: block;

4
 height: 0;

5
 clear: both;

6
 visibility: hidden;

7
}

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.

1
.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

2
.kapsayamamaSorunu {display: inline-block;}

3
/*IE-mac de bu bolumu sakla \  */

4
* html .kapsayamamaSorunu {height: 1%;}

5
.kapsayamamaSorunu {display: block;}

6
/* IE-mac bu bolumu saklam  artik */

01
<div id="icerik" class="kapsayamamaSorunu">

02
 <ul>

03
 <li>

04
 <select>

05
 <option value="-1">Seçiniz</option>

06
 <option value="1">Deneme1</option>

07
 <option value="2">Deneme2</option>

08
 </select>

09
 </li>

10
 </ul>

11
</div>

12
<div class="resimAlani  kapsayamamaSorunu">

13
 <img src="images/deneme.jpg" width="150" height="80" />

14
</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.

Kaynak : CSS Dersleri, Fatih HAYRİOĞLU