Lekce 10 - Plovoucí obsah v HTML
V předešlém cvičení, Řešené úlohy k 6.-9. lekci HTML a CSS, jsme si procvičili nabyté zkušenosti z předchozích lekcí.
Naposled jsme v HTML/CSS tutoriálu skončili vložením tagu
article
, ve kterém se nacházela hlavička (header
) a
sekce s článkem (section
). Naše stránka vypadá zjednodušeně
asi takto:

Elementy header
a section
jsou blokové (jako
třeba odstavce). Jejich výchozí chování je, že se roztáhnou přes celou
šířku elementu, ve kterém jsou vložené (tedy přes celý
article
) a poskládají se pod sebe.
My ale nyní budeme chtít následující rozložení kvůli hezčímu a nápaditějšímu designu:

Header
a section
budeme chtít vedle sebe, nikoli
pod sebou. Docílíme toho tím, že je označíme jako plovoucí. Plovoucí
elementy se řadí vedle sebe za předpokladu, že jim nastavíme rozměry.
Přesuňme se do souboru styl.css
a nastavme headeru v článku
šířku a že je plovoucí. Dosud bychom to uměli jen tak, že bychom dali
headeru v HTML nějakou třídu a použili třídní selektor. My ale můžeme
použít tento selektor:
article header { }
Selektor vybere všechny hlavičky všech článků na stránce (tedy
elementy header
, vložené v elementu article
).
Jelikož na stránce budeme mít vždy jen jeden článek a v něm jednu
hlavičku, bude to fungovat správně. Ono by vlastně stačilo vybrat jen
header
, ale v budoucnu jich na stránce budeme mít více, proto ta
podmínka s article
.
Daný zápis funguje i v případě, že by byl header
vložen v
článku třeba ještě takto v tagu div
(k čemu je si
vysvětlíme později):
<article> <div> <header> ... </header> </div> ... </article>
Selektoru stačí, že bude někde uvnitř article
. Kdybychom
chtěli, aby selektor vybral jen přímo vnořený element (hovoříme o
dítěti = child
), použijeme >
:
article > header { }
Nyní by se header v příkladu výše nevybral, jelikož není přímo v
article
.
To bylo jen malé odbočení, abychom si rozšířili zásobu selektorů. Jaký použijete je na vás.
Plovoucí obsah
CSS nám umožňuje určité elementy na stránce označit jako plovoucí. Plovoucí elementy se řadí vedle sebe a jsou neplovoucím obsahem obtékány.
Přejděme k vlastnostem. Headeru nastavíme šířku na 250px
a
vlastnost float
na left
. To znamená, že element je
plovoucí a bude se mezi další plovoucí elementy na stránce řadit
zleva.
article header { width: 250px; float: left; }
Stejně vybereme i section
, které opět nastavíme šířku a
že má být plovoucí zleva. Dále ji nastavíme bílé pozadí (je to přeci
jen pro text čitelnější, při návrhu webů se vyhněte textu na jiném
pozadí, než je bílá).
article section { width: 710px; float: left; background: white; }
Webové stránky se většinou dělají široké 960px
, aby
se vešly na většinu monitorů (i když v dnešní době se nemusíte bát i
lehce překročit tisícovku). Když se podíváte na rozměry, tak součet
šířky obou sloupců dává přesně 960
pixelů.
Když se podíváme nyní na naší stránku, čeká nás nepříjemné překvapení:

Elementy s nadpisem a obsahem článku (header
a
section
) jsou sice vedle sebe, ale zmizelo nám pozadí elementu
article
. Jak je to možné?
Pokud vedle sebe skládáme plovoucí elementy, musíme za posledním
elementem v řadě ukončit plovoucí obsah. To se dělá CSS
vlastností clear
(jako vyčistit), do CSS si vložme nový
třídní selektor:
.cistic { clear: both; }
Hodnota both znamená, že chceme zastavit obtékání z obou stran, můžeme
zadat i jen left
nebo right
.
Nyní přejděme do HTML a za </section> vložme element
div
se třídou .cistic
. Tento element obtékání
ukončí:
</section> <div class="cistic"></div>
Výsledek je poté již dle našeho očekávání:

Jen pro zopakování: V article
jsou elementy
header
a section
, oba mají nastavenou šířku a
float
na left
, řadí se tedy vedle sebe. Za
posledním je div
s clear
, který obtékání
zastaví.
Tag div nemá z hlediska HTML vůbec žádný význam a používá se jen ke
stylování. Je to element blokový. Ve starém HTML se divy používaly k
definici hlavičky, patičky, článku a podobně, když ještě neexistovaly
HTML 5 tagy. Existuje ještě element span
, který je také bez
významu a je řádkový. Často se využívá ke stylování textu, např.
takto:
<p>Mám rád <span class="fialovy">fialovou</span> barvu.</p>
Pokud bychom v CSS k ukázce výše nastavili do třídního selektoru
.fialovy
fialovou barvu, bylo by slovo "fialovou" v textu výše
fialové. I když je to asi jasné, pro jistotu zopakuji, že tag
span
je naprosto nevhodný k označování např. tučného textu,
jelikož mu nedodává žádný význam a jen ho ostyluje. Proto se tagz
div
a span
používají co nejméně je to
možné.
Obtékání
Zůstaňme dnes ještě chvíli u vlastnosti float
, kterou jsem
nakousl a která toho označuje ještě trochu více, ať to máme pohromadě v
jednom článku.
Pokud máme okolo plovoucích elementů nějaký neplovoucí obsah, třeba text okolo plovoucího obrázku, bude text obrázek obtékat. Tento termín opět jistě znáte z MS Wordu.
Na naší stránce takový obrázek máme a máme ho v samostatném odstavci. Budeme chtít, aby byl vložen do textu, vložme ho tedy do odstavce s textem:
<p><img src="obrazky/avatar.png" alt="Programátor HoBi" />Jmenuji se Honza Bittner a je mi 16 let...
Výsledkem bude, že se obrázek vloží do řádku:

Definujme si nyní v CSS třídní selektor vlevo, který nastaví elementu float na left:
.vlevo { float: left; }
A našemu obrázku přidejme třídu .vlevo
:
<img src="obrazky/avatar.png" alt="Programátor HoBi" class="vlevo" />
Výsledek:

Vidíme, že neplovoucí obsah (text) obtéká náš plovoucí obrázek,
který je zarovnán vlevo. Zkusme si obtékání opět ukončit divem s třídou
.cistic
, udělejme to někde mezi odstavci:
...sportuju.</p> <div class="cistic"></div> <p>Mým hlavním koníčkem...
Obtékání se ukončí před posledním odstavcem a ten již bude na samostatném řádku:

Již tedy umíme obtékat obrázky a další obsah a také skládat elementy vedle sebe. Můžete si obrázek vrátit do samostatného odstavce, vypadalo to v tomto případě asi lépe, nicméně někdy obtékání určitě využijete. Web je jako vždy níže ke stažení.
V příští lekci, Rámeček, stín a boxmodel v CSS, si vysvětlíme tzv. boxmodel a dokončíme oblast s článkem.
Stáhnout
Staženo 4256x (75.2 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS
Komentáře


Zobrazeno 10 zpráv z 139. Zobrazit vše