10. diel - Plávajúce obsah v HTML

V predchádzajúcom cvičení, Riešené úlohy k 6.-9. lekciu HTML a CSS, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

V minulej lekcii, Riešené úlohy k 6.-9. lekciu HTML a CSS , sme začali tvorbu layoutu. V nej budeme teraz v HTML / CSS tutoriálu pokračovať.

Skončili sme vložením tagu article, v ktorom sa nachádzala hlavička (header) a sekcie s článkom (section). Naša stránka vyzerá zjednodušene asi takto:

Elementy header a section sú blokové (ako napríklad odseky). Ich predvolené správanie je, že sa roztiahnu cez celú šírku elementu, v ktorom sú vložené (teda cez celý article) a poskladajú sa pod seba.

My ale teraz budeme chcieť nasledujúce rozloženie kvôli krajšiemu a nápaditějšímu dizajnu:

Header a section budeme chcieť vedľa seba, nie pod sebou. Docielime to tým, že ich označíme ako plávajúce. Plávajúce elementy sa radí vedľa seba za predpokladu, že im nastavíme rozmery.

Presuňme sa do styl.css a nastavme header v článku šírku a že je plávajúca. Doteraz by sme to vedeli len tak, že by sme dali header v HTML nejakú triedu a použili triedny selektor. My ale môžeme použiť tento selektor:

article header {
}

Selektor vyberie všetky hlavičky všetkých článkov na stránke (teda elementy header, vložené v elementu article). Keďže na stránke budeme mať vždy len jeden článok a v ňom jednu hlavičku, bude to fungovať správne. Ono by vlastne stačilo vybrať len header, ale v budúcnosti ich na stránke budeme mať viac, preto tá podmienka s article.

Daný zápis funguje aj v prípade, že by bol header vložený v článku treba ešte takto v tagu div (k čomu je si vysvetlíme neskôr):

<article>
    <div>
        <header>
        ...
        </header>
    </div>
    ...
</article>

Selektora stačí, že bude niekde vnútri article. Keby sme chceli, aby selektor vybral len priamo vnorený element (hovoríme o dieťati = child), použijeme>:

article > header {
}

Teraz by sa header v príklade vyššie nevybral, keďže nie je priamo v article.

To bolo len malé odbočenie, aby sme si rozšírili zásobu selektorov. Aký použijete je na vás.

Plávajúce obsah

CSS nám umožňuje určité elementy na stránke označiť ako plávajúce. Plávajúce elementy sa radí vedľa seba a sú neplovoucím obsahom obtekané.

Prejdime k vlastnostiam, header nastavíme šírku na 250 pixelov a vlastnosť float na left. To znamená, že element je plávajúca a bude sa medzi ďalšie plávajúce elementy na stránke radiť zľava.

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

Rovnako vyberieme aj section, ktoré opäť nastavíme šírku a že má byť plávajúce zľava. Ďalej ju nastavíme biele pozadie (je to predsa len pre text čitateľnejší, pri návrhu webov sa vyhnite textu na Jeme pozadí, než je biela).

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

Webové stránky sa väčšinou robia široké 960px, aby sa vošli na väčšinu monitorov (aj keď v dnešnej dobe sa nemusíte báť aj ľahko prekročiť tisícku). Keď sa pozriete na rozmery, tak súčet šírky oboch stĺpcov dáva presne 960 pixelov.

Keď sa pozrieme teraz na našej stránku, čaká nás nepríjemné prekvapenie:

Elementy s nadpisom a obsahom článku (header a section) sú síce vedľa seba, ale zmizlo nám pozadí elementu article. Ako je to možné?

Ak vedľa seba skladáme plávajúce elementy, musíme za posledným elementom v rade ukončiť plávajúce obsah. To sa robí CSS vlastností clear (ako vyčistiť), do CSS si vložme nový triedny selektor:

.cistic {
    clear: both;
}

Hodnota both znamená, že chceme zastaviť obtekanie z oboch strán, môžeme zadať aj len left alebo right.

Teraz prejdime do HTML a za </ section> vložme element div sa triedou cistic. Tento element obtekania ukončí:

</section>
<div class="cistic"></div>

Výsledok je potom už podľa nášho očakávania:

Len pre zopakovanie: V article sú elementy header a section, obaja majú nastavenú šírku a float na left, radí sa teda vedľa seba. Za posledným je div s clear, ktorý obtekanie zastaví.

Tag div nemá z hľadiska HTML vôbec žiadny význam a používa sa len ku štýlovanie. Je to element blokový. V starom HTML sa divy používali k definícii hlavičky, pätičky, článku a podobne, keď ešte neexistovali HTML 5 tagy. Existuje ešte element span, ktorý je tiež bez významu a je riadkový. Často sa využíva ku štýlovanie textu, napr. Takto:

<p>Mám rád <span class="fialovy">fialovou</span> barvu.</p>

Ak by sme v CSS k ukážke vyššie nastavili do triedneho selektora fialovy fialovú farbu, bolo by slovo "fialovú" v texte vyššie fialovej. Aj keď je to asi jasné, pre istotu zopakujem, že span je úplne nevhodný na označovanie napr. Tučného textu, pretože mu nedodáva žiadny význam a len ho ostyluje. Preto sa divy a spanie používajú čo najmenej je to možné.

Obtekanie

Zostaňme dnes ešte chvíľu pri vlastnosti float, ktorú som načal a ktorá toho označuje ešte trochu viac, nech to máme pohromade v jednom článku.

Ak máme okolo plávajúcich elementov nejaký neplovoucí obsah, napríklad text okolo plávajúceho obrázku, bude text obrázok obtekať. Tento termín opäť iste poznáte z MS Wordu.

Na našej stránke takýto obrázok máme a máme ho v samostatnom odstavci. Budeme chcieť, aby bol vložený do textu, vložme ho teda do bodu s textom:

<p><img src="obrazky/avatar.png" alt="Programátor HoBi" />Jmenuji se Honza Bittner a je mi 16 let...

Výsledkom bude, že sa obrázok vloží do riadku:

Definujme si teraz v CSS triednej selektor vľavo, ktorý nastaví elementu float na left:

.vlevo {
    float: left;
}

A nášmu obrázku pridajme triedu vľavo:

<img src="obrazky/avatar.png" alt="Programátor HoBi" class="vlevo" />

výsledok:

Vidíme, že neplovoucí obsah (text) obteká náš plávajúci obrázok, ktorý je zarovnaný vľavo. Skúsme si obtekanie opäť ukončiť divom s triedou cistic, urobme to niekde medzi odsekmi:

...sportuju.</p>
<div class="cistic"></div>
<p>Mým hlavním koníčkem...

Obtekanie sa ukončí pred posledným odsekom a ten už bude na samostatnom riadku:

Už teda vieme obtekať obrázky a ďalší obsah a tiež skladať elementy vedľa seba. Môžete si obrázok vrátiť do samostatného odseku, vyzeralo to v tomto prípade asi lepšie, však niekedy obtekanie určite využijete. Web je ako vždy nižšie k stiahnutiu. V budúcej lekcii, Rámček, tieň a boxového modelu v CSS , si vysvetlíme tzv. Boxového modelu a dokončíme oblasť s článkom.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.