v HTML a CSS
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.
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).
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.
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.
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╛ 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φ.
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.
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:
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∙.
Nenφ to hotovΘ, Yuh∙! ╚φ Sφla a╛ KhakiMutanta s Vßmi Nßramnß⌐vanda.