Obtékání
v HTML a CSS
Obtékáním se řeší
- lokální úprava textu
- globální layout (uspořádání stránky)
Lokální úpravou myslím jenom příležitostné využití obtékání třeba pro nějaký obrázek, aby dobře seděl v textu. Globální layout je způsob, jak rozmístit celé bloky na stránce bez použití tabulek či pozicování.
Teď bych sem měl napsat kecy o tom, co je obtékání, ale všichni to asi vědí. Jsou tam vždycky:
- obtékaný (plovoucí) objekt
- a obtékající obsah (okolní text).
Obtékaný objekt musí mít nastavenou šířku, protože kdyby ji neměl, tak bude mít šířku 100% a okolní text nemá kudy téci.
Zprava, zleva
V pojmech je trochu zmatek. Float: right umístí objekt doprava, takže ho text zleva obtéká. Float: left dá objekt doleva, takže je obtékaný zprava.
Neexistuje nic jako obtékání na střed (alespoň teda v HTML a CSS ne).
Technologické možnosti obtékání
- v HTML je atribut align s hodnotami right a left u některých tagů (např. u obrázku). Tento způsob je zastaralý.
- v CSS se dá použít vlastnost float: s hodnotami right a left u libovolného prvku
Obtékání v HTML
To je ten zastaralý způsob. Je v tom docela zmatek, protože obtékání v HTML se dělá pomocí atributu align, který ale může znamenat i zarovnání odstavce nebo vertikální zarovnání na řádku. Funguje to u tagů <img> (a dalších nahrazovaných, jako např. embed, iframe) a u tagu table.
Float v CSS
Univerzální styl, který lze přiřadit čemukoliv a udělat tak obtékaný prvek. Jeho podpora je výborná, takže už není důvod používat zastaralý align.
Příklady
Obtékaný obrázek s použitím stylu float
<img style="float: right" src="obrazek.gif" width="50" height="50">Text, který obtéká obrázek
Obtékaný blok textu s použitím stylu float
<div style="float: right; width: 100px; border: 1px solid blue">Text v obtékaném divu</div>Okolní text, který ten div obtéká.
Zastaralý způsob obtékání pomocí align
<img align="right" src="obrazek.gif" width="50" height="50">Text, který obtéká obrázek
Zobrazit tyto příklady na obtékání.
Kdy použít float a kdy align?
Když na tom moc nezáleží a potřeba to mít rychle hotové, hodí se align. Všude jinde zuřivě doporučuji float, protože je modernější.
Jedinou výjimkou může být podmínka, aby obtékání fungovalo na pochybných mobilních zařízeních. Prohlížeč IE na Windows CE totiž neumějí vůbec styly (zjištěno 2002), ale obtékání pomocí align umějí.
Obtékané je v kódu napřed
Mají-li být obtékaný objekt a obtékající objekt ve stejné výšce, musí se ten obtékaný objekt uvést v kódu napřed. Když se obtékaný objekt uvede později, odskočí jakoby o jednu řádku dolů. Vizte příklad umístění obtékaného prvku.
Proč to tak je? Aby prohlížeče mohly spočítat polohu obou prvků. Kdyby dostaly obtékaný prvek jako druhý a měly by ho kreslit přes obtékající text, musely by s obtékajícím textem znovu hýbat.
Někdy je toto chování nepříjemné, protože např. obtékaný obrázek se musí dávat do nadpisu.
Prohodit pořadí jde jenom při rozplavání obojího a nastavení šířek obojímu.
<div style="float: left; width: 70%">Text vlevo je uveden dříve. Nikdy
ale nepodteče pod ten pravý sloupeček.</div>
<div style="float: right; width: 26%">Text jakoby v pravém sloupečku je ve
stejné výšce jako levý text.</div>
Všimněte si, že součet šířek je méně než 100%. Je to trik, který rád používám -- kdybych dal 100%, tak se při nastavení rámečků (nebo občas při zvětšivání písma) ve standardním módu někdy rozpadne design. Raději tam nechávám určitou vůli, abych na to později nemusel myslet.
Clear
Pokud se blízko pod sebou objeví dva obtékané objekty, mají tendenci skládat se vedle sebe (nikoli pod sebe, jak často autor zamýšlí). Příklad kolize obtékaných objektů.
Textu následujícímu po obtékaných objektech ale jde říci, že se nemá cpát vedle obtékaného objektu, ale začít až pod jeho koncem.
Dva způsoby:
- zastaralý pomocí <br clear="all">, jiné HTML tagy to nemají
- pomocí css vlastnosti clear: both
Pak taky existují hodnoty left a right. Objekt, který to má nastavené, čeká na skončení všech levých nebo pravých obtékaných objektů.
Reklama
