Haszprus

CSS trükkök: sortörés

©   Haszprus   |   css fejlesztés howto

Adott egy csomó float left-es elemünk, pl. thumbnailek egymás után. Szeretnénk, ha a float left ellenére az ezek után következő szöveg (vagy akármi) nem folyna rá a thumbnailjeinkre.

Többféle hagyományos megoldás létezik, ezek közül néhány:

<br clear='all' /> <br style='clear: both' /> <div style='clear: both'></div>

Fontos látni, hogy mindegyiknél arra van szükség, hogy a szöveg írásakor tudatában legyen az író, hogy az előtte levő izére rá fog folyni az ő szövege, és ezért beszúrja a fenti kódok vmelyikét. Ez elég szopó, hiszen a formázást minél inkább szeretnénk a tartalomtól elszeparálni.

Van egy másik megoldás is. Ha a float leftes elemeink pl. egy 'keprendezo' classú divben vannak, akkor a következő stílus segítségével a keprendezo után automatikusan sortörés lesz:

.keprendezo:after { display: block; clear: both; content: ''; }

Ekkor a képrendezőt követő paragrafusnak nem kell tudnia róla, hogy ráfolyna a képrendezőre, a képrendező ugyanis beszúr maga után egy sortörő blokkot. Is nice. I like.

Egy másik alternatív megoldás ugyanezen problémára CSS attribútum selectorok bejegyzésben.

RSS: hozzászólások ehhez a bejegyzéshez 15 hozzászólás

Szólj hozzá Te is!

De az :after-t nem támogatja az IE, vagy igen? Hát még a content:-et.



Nálam nem működik a bejegyzés-link.

Mefi mert egy jövőbeli bejegyzésre mutat, ami még nem jelent meg
Isti akit zavar hogy nem kompatibilis mindennel, az ne használja. Amúgy nem az ie7 lesz az utolsó ie, és ugyanakkor azt is láttuk hogy, ha az ms-re nem nehezedik a konkurencia nyomása akkor biza le fogja magasról hogy vajon lehetne-e valamit fejleszteni. Nagyobb ie-inkompatibilitás = több firefox user = nagyobb nyomás az ms-re = gyorsabb fejlődés. (vigyázat a cél nem az inkompatibilitás, hanem a fejlődés.)

Haszprus Nagyobb inkompatibilitás -> több anyázás a user részéről -> Windowsokban ugyanúgy IE lesz, a sima user azt használja -> még több anyázás.
Vagy pedig az, amit te mondtál.

Persze nyilván most egy kis dologról van szó, de adott esetben az inkomp. bug az oldal használhatatlanságát is eredményezheti (példát most ne várj), erre gondoltam anyázás alatt.

7) remute (nem regisztrált)
Isibe, házi feladatnak nem kell, hogy IE-ben jó legyen nyilván.

Milyen házi feladatnak? Ennek most semmi köze a laborhoz, ott css-t se várunk el.

Na ja, de ha az ember a nagypublikumnak készít weblapot, akkor sajnos az a 90% befigyel…

Akkor még1x

Nem, ezt nem ismeri minden böngésző
Nem, nem kötelező használni
Igen, van rá lehetőséged hogy használd
Igen, ezer éve használnak csomóan olyan megoldásokat, ami az ie-nek vagy a firefoxnak megfekszi a gyomrát, mert a web egy ilyen dolog. Persze nagylátogatottságú lapnál inkább legyetek kompatibilisek, de amikor a saját kis blogotokat designoljátok akkor nem feltétlen muszáj.

11) remute (nem regisztrált)
Igen, játéknak jó.

Marha vicces hogy hirtelen mindenkit hogy érdekel a kompatibilitás, akkor a firefox kampány mire megy ki, ha mindenki a piacon levő legrosszabb böngészőre fejleszt?

Az egy dolog, hogy szeretünk nem IE-t használni (ki-ki a magáét), de az meg egy másik dolog, hogy ha tömegterméket akarsz, sajnos nem hagyhatod figyelmen kívül a legnagyobbat, szar-e vagy sem.

De asszem a probléma csak annyi volt, hogy nem volt teljesen tiszta, milyen scope-ban is említetted a hacket. Azzal szerintem mindenki egyetért, hogy ha nem szempont az IE kompatibilitás – mint ahogy pl. exmunkahelyemen a belső adminisztrációs webfelület –, akkor magasról tojni kell rá, ha meg igen, akkor sajnos olyan mozzanatokat kell használni, hogy a nagypublikum ne anyázzon. Mert fog. Sajnos. Ez van. (Ja és a munkáltatót általában kurvára nem érdekli, hogy a firefox mennyire jobb, azt szeretné, hogy ne anyázza le a pórnép.)

Használjátok belső weboldalakhoz,
Használjátok firefox tech demókhoz,
Használjátok két év múlva akármelyik böngészőhöz (incl. Ie8),
Használjátok olyan helyeken, ahol nem baj, ha esetleg kimarad a sortörés.

Ie8 jön 2008 vége felé. Utána 1-2 évente jön új ie az ms szerint.
Hozzászólásod:


Nem vagy bejelentkezve, de...

A)
hozzászólhatsz regisztrálatlanul...

B)
ha regisztrálva vagy, bejelentkezhetsz...