Obtékání

v HTML a CSS

Obtékáním se řeší

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ý 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í

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:

  1. zastaralý pomocí <br clear="all">, jiné HTML tagy to nemají
  2. 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

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.