IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 14 - Obtékání v HTML - Float, Stín

V předešlém cvičení, Řešené úlohy k 7.-13. 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á asi takto:

Moje první webová stránka
index.html

Dnes si ukážeme, jak k lepšímu rozvržení naší stránky využijeme obtékání prvku a posuneme tímto náš obrázek vpravo vedle textu. Podíváme se také jak lze využít nastavení stínu.

Plovoucí obsah (float)

Float umožňuje nastavit obtékání elementu dalším obsahem - například pokud chceme do textu umístit obrázek a chceme, aby jej text nějakým způsobem obklopoval (tak, jako to známe například z Wordu a jiných textových editorů).  

Dříve se používal float k pozicování elementů v layoutu vedle sebe. Toto užití je dnes už špatně. Používáme k tomu flexbox, o kterém si povíme později. Nikdy bychom float neměli používat k vytváření layoutu stránky!

Někdo si myslí, že se float už nemá vůbec používat. Float jako takový ovšem špatně není a je to naprosto validní vlastnost k obtékání elementů v textu.

Vlastnost float použijeme na obrázek s naším avatarem, který má již přiřazenou třídu .avatar.

V CSS nyní upravíme selektor pro třídu .avatar, kde jsme doposud měli definovanou pouze šířku. K ní vložíme tyto další vlastnosti:

.avatar{
    float: right;
    width: 300px;
    padding-left: 10px;
    filter: grayscale(1);
}

Ty nám umožní nastavit následující:

  • vlastnost float s hodnotou right umožní, že obrázek bude umístěn vpravo a obtékán textem zleva

Rovnou jsme obrázku nastavili i několik dalších věcí:

  • vlastnost padding, o které si povíme dále v kurzu, zajistí odsazení obrázku, aby se text nenalepil přímo na fotografii
  • a přidání černobílého vzhledu díky vlastnosti filter: greyscale(1);, kde grayscale může nabývat číselné hodnoty 0, 0.1, 0.2, ... až 1 podle toho, na kolik chceme obrázek ztmavit. Hodnotu vlastnosti grayscale lze uvádět také v procentech. Můžeme si vyzkoušet zadat např. hodnotu 0.5 (nebo 50%), abychom věděli, že i takové možnosti stylování CSS nabízí.

Floatem lze do textu vložit i jiné elementy než obrázky, je jim ovšem vždy potřeba nastavit pevnou šířku.

Ukončení obtékání

Někdy se může stát, že je text kratší, než je výška obrázku. Obrázek pak může začít obtékat další element, který je za textem a stránka by se nám rozhodila. Proto na konec textu vložíme element s vlastností clear. Na takový "čistič" nesmíme zapomenout a obtékání na konci obsahu takto zastavit. Proto si jej nyní rovnou přidáme.

Na konec <section> tedy přidáme <div> se třídou cistic, tedy celým zápisem <div class="cistic"></div>:

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

    <p>
        Vítejte na mém prvním webu, psát weby se teprve učím, ale myslím, že mi to docela jde.
    </p>

    <p>
        Jmenuji se Honza Bittner a je mi 16 let. Chodím na Střední průmyslovou školu v České Lípě na obor IT.
        Kontaktovat mě můžete na <a href="kontakt.html">kontaktní stránce</a>.
    </p>
    ...

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

</section>

Následně si v CSS souboru pro tuto třídu vytvoříme selektor .cistic.

.cistic {
    clear: both;
}

Vlastnost clear nabývá hodnot left, right nebo both, podle toho, z jaké strany chceme obtékání plovoucích elementů ukončit. Obvykle chceme jednoduše na konci textu ukončit všechno obtékání, protože dále již text nepokračuje, a vložíme tam tedy jednoduše <div> s clear: both.

Výsledkem tedy je, že je fotka v šedých tónech a obtékána textem, což je nejlépe vidět při zmenšení prohlížeče:

Moje první webová stránka
index.html

Stín

Se stínem jsme se již v CSS setkali, byl to stín u textu pomocí CSS3 vlastnosti text-shadow. Stín můžeme nastavit libovolnému elementu na stránce pomocí vlastnosti box-shadow. Element se třídou article bychom stínem ostylovali takto:

article {
    margin: 0 auto;
    ...
    box-shadow: 2px 2px 7px #1c2228;
}
  • První 2 hodnoty (2px 2px) jsou pozice stínu.
  • Třetí hodnotou (7px) je rozostření.
  • Poslední hodnotou je barva.

Vlastnost ostyluje obdélníkový stín okolo elementu. Podívejme se na výsledek:

Moje první webová stránka
index.html

Po vyzkoušení si vlastnost box-shadow s uvedenými hodnotami ze selektoru article smažeme.

V příští lekci, Rámeček a boxmodel v CSS, si vysvětlíme tzv. boxmodel a dokončíme oblast s článkem.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 6530x (2.27 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Řešené úlohy k 7.-13. lekci HTML a CSS
Všechny články v sekci
Webové stránky krok za krokem
Přeskočit článek
(nedoporučujeme)
Rámeček a boxmodel v CSS
Článek pro vás napsal David Hartinger
Avatar
Uživatelské hodnocení:
1844 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity