Další šance dokončit svůj projekt a získat ceny v hodnotě 10.000 Kč! Pokračování úspěšné letní soutěže - ITnetwork winter

Lekce 10 - Plovoucí obsah v HTML

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Layout a pozadí v HTML, jsme započali tvorbu layoutu. V ní budeme nyní v HTML/CSS tutoriálu pokračovat.

Skončili jsme vložením tagu article, ve kterém se nacházela hlavička (header) a sekce s článkem (section). Náše stránka vypadá zjednodušeně asi takto:

Article s header a section v HTML

Elementy header a section jsou blokové (jako třeba odstavce). Jejich výchozí chování je, že se roztahnou 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:

Article s header a section v HTML s float

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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 250 pixelů 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 jimé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í:

Float left v HTML a CSS

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

Float left v HTML a CSS

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 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 divy a spany 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:

Float left v HTML a CSS

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:

Float left v HTML a CSS

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:

Float left v HTML a CSS

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 3799x (75.2 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
77 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Předchozí článek
Layout a pozadí v HTML
Všechny články v sekci
Webové stránky krok za krokem
Miniatura
Následující článek
Rámeček, stín a boxmodel v CSS
Aktivity (3)

 

 

Komentáře
Zobrazit starší komentáře (117)

Avatar
Jan Hlavatý
Člen
Avatar
Jan Hlavatý:21. dubna 14:23

Tentokrát jsem se zasek na tom, že není vyloženě uvedeno, že se připisuje stále do jednoho .css souboru. Já to začal psát do nového a pak si tu pořád lámu hlavu nad tím, proč mi to modře neobtéká :-) No jasně, protože nemám v tom novém .css napsáno, že by to modře mělo obtékat ...

Ale jinak vše zatím jasné a funkční.

 
Odpovědět
21. dubna 14:23
Avatar
Anna Ove Bahulíková:5. srpna 13:43

Jak je možné, že i když nenastavím clear, pozadí mi nezmizelo? Jsem úplný nováček, začátečník ve všech směrech. Zatím mi všechno funngovalo, ale po zadání plovoucího obsahu prostě žádné nepříjemné překvapení nenastalo. Jsem z toho jelen :-D

 
Odpovědět
5. srpna 13:43
Avatar
Jan Doležal
Člen
Avatar
Jan Doležal:31. srpna 15:34

Ahoj, s CSS celkem bojuju. Teorie mi je zatím jasná, ale ve výsledku mi to stejně nefunguje.
Například cvičení s "duhou". Dlouho jsem se s tím trápil a přemýšlel kde by mohla být chyba. Když jsem si potom stáhnul soubory abych se podíval jak to má být správně nebyl v nich skoro žádný rozdíl. Po napojení css staženého z itnetwork na můj html soubor vše fungovalo i když mnou napsaný css soubor byl naprosto stejný.

Stejný problém teď mám s touto lekcí. Zkusím přiložit soubory a pokud by se na to někdo mohl podívat a řict mi kde je chyba budu vážně rád. Jak se znám bude to nejspíš nějaká totální základní kravina kterou přehlížím :)

https://drive.google.com/…ci3FNs5/view
https://drive.google.com/…mbMOWKF/view

 
Odpovědět
31. srpna 15:34
Avatar
Odpovídá na Jan Doležal
Reaktivní uživatel:31. srpna 17:08

Pokud nemůžeš najít rozdíly, zkus diff (třeba na téhle stránce)

Odpovědět
31. srpna 17:08
Kdo je připraven, toho zaskočí něco jiného
Avatar
Jan Doležal
Člen
Avatar
Odpovídá na Reaktivní uživatel
Jan Doležal:31. srpna 22:03

Načetl jsem to znovu teď večer a změny se projevily i když jsem se toho od odpoledne nedotkl. Tak z toho jsem fakt jelen.

Nicméně díky za odkaz na tu stránku, bude se určitě hodit ;)

 
Odpovědět
31. srpna 22:03
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Jan Doležal
Reaktivní uživatel:31. srpna 22:20

Ahá, tak to by ještě mohl být problém v tom, že se ti soubor načetl do cache a pak se používala špatná verze. (Příště) zkus vyčistit cache, třeba to bude fungovat.

Odpovědět
31. srpna 22:20
Kdo je připraven, toho zaskočí něco jiného
Avatar
Jan Doležal
Člen
Avatar
Odpovídá na Reaktivní uživatel
Jan Doležal:31. srpna 22:23

Jo to dává smysl, dobrý nápad. Určitě to zkusím až to zas nepůjde.

 
Odpovědět
31. srpna 22:23
Avatar
Jiří Volf
Člen
Avatar
Jiří Volf:19. listopadu 13:03

Ahoj, opravte mě jestli se pletu a je chyba někde jinde ale abych to měl stejně podle zadání, tak sem musel upravit velikost elementu article section { width: Ze 750px Na- 810px;
jinak se mi tam nevešel ten text podle přídkladu.
Je to tak správně?

 
Odpovědět
19. listopadu 13:03
Avatar
Odpovídá na Jiří Volf
Jakub Podskalský:19. listopadu 13:36

Na každém zařízení se to vykreslí jinak podle jeho rozměrů. I když jsou pixely absolutní jednotky, tak se to nebude zobrazovat u všech naprosto stejně. Myslím, že je to proto, že ta velikost pixelu se odvíjí na těch rozměrech zařízení, není vždycky fyzicky stejná. Dále můžeš mít taky jiný font a jeho velikost než je tady na obrázku.
Omlouvám se, pokud je moje odpověď laicky řečena nebo nějak nepřesná. Takhle si to ale vysvětluji já, rád se nechám někým doplnit/opravit :)

 
Odpovědět
19. listopadu 13:36
Avatar
Jiří Volf
Člen
Avatar
Jiří Volf:19. listopadu 19:20

Dík za odpověd.
Už při základním nastavení

article header { width: 250px;
                                                                                     float: left;}

                                                           article section { width: 710px;
                                                                                    float: left;
                                                                                    background: white; }

bez vložení dalších vlastností selektoru mi to nesedí, takže v textu to nebude.
A pokud jde o teorii z pixelama.....­..možné to asi je

 
Odpovědět
19. listopadu 19:20
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

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