Az overflow css beállítást viszonylag sok helyen lehet alkalmazni, különböző korrekciós hibák kijavítására, problémák megoldására. Az alábbiakban azt fogjuk megvizsgálni, hogy a fattyúsorokat miként tudjuk kezelni a segítségével.
Cikkünk a hirdetés után folytatódik!
Fattyúsorok
A fattyúsor a tipográfiában a tördelés súlyos hibájának számít. Két előfordulási lehetősége van az özvegy sor és a súlyosabb árvasor.
- Ha egy oldal legutolsó sorában kezdődik egy bekezdés, azt özvegy sornak nevezik.
- Ha egy oldal egy bekezdés utolsó sorával kezdődik, azt árvasornak nevezik.
Árva és özvegysorok
A hatás szempontjából csúnya, ha törés van egy bekezdés elején vagy végén.
A probléma
Tulajdonképpen mi, a kép alatt lévő fattyúsorokat fogjuk eltüntetni úgy, hogy azok a kép mellett folytatódjanak.
De lássunk is egy példát. Az alább látható képen jól megfigyelhető, hogy ha egy képet balra rendezünk, a szöveg a kép magasságát elérve “befolyik” alá, ami rendben is van.
overflow nélkül
Mi viszont azt szeretnénk, hogy a szöveg a képünk mellett fusson tovább. Itt jön a képbe az overflow beállítás. Adjuk meg a bekezdésnek az overflow:hidden; paramétert, vagy tegyük egy konténerbe és arra alkalmazzuk. A végeredmény pedig a következő.
overflow:hidden;
Mint látható, a bekezdésünk tovább fut a kép mellett, pont ahogy szerettük volna. Most vessünk egy pillantást a HTML és CSS kódra.
HTML
1 2 3 4 5 | <div class="entry"> <img src="thumb.jpg" class="thumb" /> <h3>Címsor 1</h3> <p>Tartalom...</p> </div> |
CSS
1 2 3 4 5 6 7 8 | .entry p { overflow: hidden; } .thumb { float:left; margin:0 20px 10px 0; } |
Az overflow paraméter hozzáadásával fölösleges kódok nélkül oldottuk meg a problémát. Egyszerű és tiszta, ahogyan szeretjük.
Kapcsolódó linkek
Szeretnék ajánlani pár igen jó linket, amik szemléltetik miként használható az overflow beállítás más jellegű problémák kiküszöbölésére.
Zárszó
Ez a CSS beállítás természetesen más területeken és problémáknál is alkalmazható, de erről később biztosan születnek még bejegyzések. Addig is ha van velemi ügyes kis CSS trükk a tarsolyotokban ne habozzatok megosztani egy kommentben, vagy elküldeni nekem és ha tényleg megéri akár egy cikkben is viszont láthatjátok.
Szólj hozzá!