Még egy jó ok arra, hogy amíg az IE (és Opera és FireFox és Safari...) nem támogatja a CSS3-at neki se fogjunk webfejlesztésnek. Ki gondolná, hogy a "balról jobbra sorban, amíg van hely, majd a következő sorban folytatva" irányelv a listák (<ul> / <li>) esetében csodaszámba megy.

A CSS3 természetesen erre a problémára is elegáns megoldást ad: a listáknál megadható a renderelni kívánt oszlopok száma, vagy a szélessége, így akár fix szélességű táblázatban, akár szabadon szélesíthető listaként lesznek megjeleníthetőek a listaelemek. (Ezt a viselkedést a firefox korlátozottan már támogatja)

De miből gazdálkodhatunk most? Sok tutorialban olvashatjuk, hogy a float:left megadásával a listaelemek szépen egymás mellé csűsznak majd. Mellette mélyen hallgatnak a float kellemetlen mellékhatásairól. Ha nem akarjuk, hogy a következő elem is befurakodjon a listaelemek közé, akkor vagy az elemnek kell megszüntetnie a lebegést, vagy az utolsó lebegő elem mögé kell tenni egy clear:left tulajdonsággal bíró üres, láthatatlan <div>-et. Utóbbit sajnos nem lehet a CSS :after pszeudo-elemmel elővarázsolni, mert hiába adunk meg content:url(clear_div.html); -t, ezt a böngészők egy része egyáltalán nem, az Opera pedig képnek próbálja értelmezni, nem meglepő módon sikertelenül. A content:"<div></div>"; sem vezet sikerre, ekkor a karakterlánc közvetlenül kerül kiírásra. Egyik megoldás sem kielégítő tehát, mert az módszernél a következő elem stílusába kell belenyúlni - mely elem kiléte változhat fejlesztés közben - , a második módszer használatakor pedig a markup sérül.

De jobb választásunk nem nagyon akad, a lehetőségek közt a lista tördelése, és <div>-be csomagolása, valamint a margókkal való pozícionálás szerepel. Esetleg a elővehetjünk a hanyagolt <table>-t. És közben álmodozhatunk a CSS3-ról, ahol a grid-box layout natívan támogatott. Persze akkor meg sírhatunk majd amiatt, hogy az elemek balról jobbra, majd fentről lefelé lesznek indexelve, és nem választható a fentről lefelé, majd balról jobbra.c

A bejegyzés trackback címe:

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.