Úvod do HTML a CSS - lekce 9

Podklady ke stažení

Pokračuj se svým kódem z minulé lekce.

Nemáš-li z nějakého důvodu kód k dispozici, zde je ke stažení náš projekt ve stavu, v jakém jsme ho opustili v minulé lekci: czchts.cz/htmlcss09

Obtékání obrázků textem - float

Obtékání obrázků se v CSS nastavuje vlastností float. Vlastnost float může nabývat hodnot left nebo right, podle toho, na jaké straně chceme, aby byl obrázek umístěný.

img {
 float: left;
}

Hodnota left umístí obrázek vlevo a text ho obtéká zprava. Vlastnost right umístí obrázek vpravo a text ho obtéká zleva. Obrázek je obtékaný veškerým textem, který za obrázkem následuje, dokud není obtékání zastaveno.

Vlastnost float můžeme nastavit jakémukoliv prvku, nemusíme se omezovat jen na obrázky. Obtékán může být jakýkoliv prvek, který nezabírá celou šířku stránky (nemůže být obtékán textem, když vedle něj není na text místo).

Zastavení obtékání - clear

Obtékání lze zastavit pomocí CSS vlastnosti clear. Ta může mít hodnotu left, right nebo both, podle toho, jaké obtékání chceme zastavit. Hodnota both zastaví obtékání objektu ať už je obtékán zleva nebo zprava.

Vlastnost clear se nastavuje prvnímu prvku, u kterého už nechceme, aby obtékal objekt/obrázek s nastaveným float.

Představme si následující příklad:

<img src="foto.jpg" alt="Foto">

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi libero eaque id maiores temporibus voluptatum porro ipsum voluptatem sequi, enim cupiditate minus in, culpa quas magnam, esse ducimus sint reprehenderit.</p>

<h2>Nadpis</h2>

<p>Itaque, id dignissimos! Natus recusandae quia facilis magni, error illo, optio fugit sint iste fugiat dolorum, architecto dignissimos. Libero modi placeat quae, alias voluptatum dolorum. Quaerat ipsa voluptates quo eius!</p>

img {
 float: left;
}

h2 {
 clear: left;
}

V příkladu výše je obrázek umístěn vlevo a text ho obtéká zprava. Protože ale nadpis <h2> má zastavené obtékání pomocí vlastnosti clear, tak nadpis už nebude obrázek obtékat. Vedle obrázku tedy bude pouze první odstavec. Nadpis a druhý odstavec budou pod obrázkem.

Přetečení obtékaného prvku mimo box

Obrázek (nebo jiný prvek), který má nastavené obtékání vlastností float, je tzv. vyjmut z toku dokumentu. Pro rodičovský element (prvek, uvnitř kterého je obtékaný obrázek uzavřen) jakoby obrázek přestal existovat. Protože obrázek najednou "neexistuje", rodičovský prvek na něj nebere ohled a upraví svoji výšku tak, aby obklopoval pouze text uvnitř (a další neobtékané prvky).

Kvůli tomuto jevu může někdy dojít k situaci, kdy obtékaný obrázek přeteče ven mimo hranice svého rodičovského boxu, když je vedle něho pouze malé množství textu.

<div class="box">
 <img src="foto.jpg" alt="Foto">
 <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi libero eaque.</p>
</div>

img {
 float: left;
}

Někdy je toto chování žádoucí, ale obvykle mu chceme zabránit a chceme, aby i obtékaný obrázek byl celý uvnitř rodičovského boxu. Nechceme, aby trčel mimo box.

Existuje několik způsobů, jak tomuto přetečení zabránit. Nejjednodušší moderní způsob (nefunguje vůbec nebo jen částečně ve starých prohlížečích), je nastavit boxu vlastnost overflow na hodnotu auto.

Box se roztáhne tak, aby automaticky obklopoval i prvky, které by z něho normálně přetekly ven, tedy i náš obrázek.

.box {
 overflow: auto;
}

Obrázkové pozadí

Stejně jako jsme barvu pozadí nastavovali pomocí background-color, můžeme prvku nastavit i obrázkové pozadí pomocí vlastnosti background-image.

Cesta k obrázku, který má být na pozadí, se uvádí do závorek jako parametr CSS funkce url().

.box {
 background-image: url(pozadi.jpg);
}

Opakování pozadí

Obrázkové pozadí se standardně opakuje, tj. když obrázek není dost velký, aby pokryl celý prvek, opakuje se jako dlaždice vedle sebe ve vodorovném i svislém směru.

Opakování pozadí můžeme řídit pomocí vlastnosti background-repeat, která může mít hodnotu:

• repeat-x - opakuje se pouze ve vodorovném směru
• repeat-y - opakuje se pouze ve svislém směru
• repeat - opakuje se v obou směrech (výchozí nastavení)
• no-repeat - opakování je vypnuté, zobrazí se pouze jedna "dlaždice"

.box {
 background-repeat: no-repeat;
}

Pozice pozadí

Obrázek se ve výchozím nastavení umístí na pozadí objektu tak, že je v levém horním rohu. Polohu pozadí uvnitř objektu můžeme řídit pomocí vlastnosti background-position, za kterou můžeme uvést několik různých hodnot nebo jejich kombinaci.

• left top - levý horní roh (výchozí nastavení)
• right bottom - pravý dolní roh
• center center - uprostřed, lze zkrátit pouze na jedno center
• jakákoliv další kombinace slov left, right, top, bottom, center
• 30% 70% - číselné nastavení polohy levého horního rohu obrázku na souřadnice uvnitř boxu. První je horizontální souřadnice, druhá vertikální. 0% 0% je levý horní roh, 100% 0% je pravý horní roh, 50% 100% je uprostřed dole, atd.
• 10px 60px - viz. výše, v jakýchkoliv CSS délkových jednotkách

.box {
 background-position: center;
}

Velikost pozadí

Obrázek na pozadí se ve výchozím nastavení zachovává svou původní velikost (jak je uložen z grafického editoru). Velikost můžeme změnit pomocí vlastnosti background-size. Ta může mít hodnoty:

• 100% 100% (nebo samozřejmě jakoukoliv jinou hodnotu v %) - roztáhne pozadí tak, aby zabíralo na šířku a výšku daná procenta ze šířky boxu. Pokud má nastavený rozměr jiný poměr stran než obrázek, může dojít k deformaci obrázku.
• 50px 30px - stejné jako viz výše, ale v jakýchkoliv jiných CSS délkových jednotkách.
• cover - zvětší pozadí tak, aby nikdy nebylo deformované (zachovalo si poměr stran), ale přitom pokrylo kompletně celý box.

.box {
 background-size: cover;
}

Zkrácený zápis

Pro zápis všech vlastností pozadí (background-color, background-image, background-position, background-size, background-repeat, a dalších) můžeme použít zkratku background, kterou jdou nastavit všechny tyto vlastnosti najednou.

.box {
 background: #806030 url(foto.jpg) right 50% / top 30% no-repeat;
}

Kontrolní otázky

• Jakou CSS vlastností nastavujeme objektu obtékání?
• Jako CSS vlastností můžeme obtékání zastavit? Na jaký prvek ji přidáváme?
• Jak zabráníme přetečení obtékaného obrázku mimo hranice boxu?
• Jak v CSS nastavujeme obrázkové pozadí?
• Lze ovlivnit velikost a pozici obrázkového pozadí?
• Jakou CSS vlastnosti se nastavuje opakování obrázkového pozadí?

‍