Definování rozměrů (šířky a výšky) pomocí CSS stylů je velmi důležité pro úpravu webových stránek do požadované podoby (například nahoře záhlaví, vlevo menu, vpravo obsah,...).

• rozměr lze nastavit prakticky jakémukoliv HTML prvku (odstavci, nadpisu, tabulce, obrázku)
• pro práci s rozměry existují dvě základní CSS vlastnosti: width (šířka) a height (výška)

Rozměry

width

• vlastnost určující šířku prvku
• pozor na správné pořadí písmenek: width
• hodnotou může být:
  • délka (px)
  • procento (%)
  • auto (automatické dopočítání šířky)
• v případě použití procenta se šířka vypočítává ze šířky nadřízeného prvku (okno prohlížeče, obalující blokový prvek)
• hodnota "auto" se používá v případě, kdy potřebuje zachovat poměr mezi výškou a šířkou obrázku (pokud definujete šířku v pixelech, definujte výšku hodnotou "auto" a naopak)

selektor {width: 500px}

height

• vlastnost určující výšku prvku
• pozor na správné pořadí písmenek: height
• hodnotou může být:
  • délka (px)
  • auto (automatické dopočítání výšky)
• hodnota "auto" se používá v případě, kdy potřebuje zachovat poměr mezi výškou a šířkou obrázku (pokud definujete šířku v pixelech, definujte výšku hodnotou "auto" a naopak)

selektor {height: 300px}

Příklady použití rozměrů

Definování rozměrů se při tvorbě webových stránek řídí několika pravidly.

1. Pokud chceme ovlivnit šířku nebo výšku vložených obrázků, je vhodnější použít přímý styl CSS nebo příslušné HTML atributy u značky <img>.
2. Pro definování rozměrů univerzálních oddílů <div> je vhodné použít naopak externí zápis do CSS souboru ve spojení s vytvořením vlastní třídy CSS.

<img src="obrazek.jpg" width="350">

Příklad nastavení rozměrů obrázku pomocí atributu HTML.

<img src="obrazek.jpg" style="width: 350px;">

Příklad nastavení rozměrů obrázku pomocí přímého stylu CSS.

<img src="obrazek.jpg" style="width: 50%; height: auto;">

U takto nastaveného rozměru obrázku se šířka vždy automaticky přizpůsobí na polovinu šířky okna prohlížeče.

<h1 style="width: 350px; font-size: 24pt; background-color: yellow;">Nadpis</h1>

Příklad zobrazí nadpis 1. úrovně, který bude mít žluté pozadí, velikost písma 24 textových bodů a šířku 350 pixelů.

Obtékání

Obtékání textu (stejně jako v textovém editoru) funguje v omezené míře v HTML. HTML prvek, kterému nastavíte obtékání, se posune k pravému nebo levému okraji nadřazeného prvku. Na uvolněné místo se posune HTML element, který je za ním (jsou mu zkráceny řádky o šířku obtékaného prvku).

float

• nastaví obtékání vybranému HTML prvku, který však musí mít nastavenu šířku vlastností "width"
• lze nastavit hodnotu left (prvek se posune k levému okraji a prvek za ním ho bude obtékat zprava) nebo right (prvek se posune k pravému okraji a prvek za ním ho bude obtékat zleva)
• obtékáním se z prvku stává blokový prvek

selektor {float: left}
selektor {float: right}

clear

• na konci každého prvku, který obtéká jiný prvek (je mu nastavena vlastnost "float"), se musí nastavit tzv. "ukončení obtékání"
• nejčastěji se používá prázdný oddíl (<div>), kterému je přímým stylem přiřazena vlastnost "clear"
• za tímto prvkem se všechen další obsah vykresluje bez obtékání
• vlastnost "clear" má tři hodnoty:
  • left (ukončí levé obtékání)
  • right (ukončí pravé obtékání)
  • both (ukončí oba dva typy obtékání)

selektor {clear: left}
selektor {clear: both}

Příklad použití obtékání

<h1>Nadpis</h1>
<div style="width: 300px">
  <img src="obrazek.jpg" style="float: left">
  <p>Běžný text v odstavci</p>
</div>
<div style="clear: left"></div>

Příklad nejprve zobrazí nadpis, pod ním u levého okraje obrázek a text odstavce zobrazí u pravého okraje obrázku, oddíl ukončí obtékání.

Úkol

• Ve složce WWW si vytvořte složku 17.
• Ze složky 16 si zkopírujte všechny potřebné soubory.
• Soubor mesta.html upravte následujícím způsobem:
  • vložené obrázky "obalte" oddílem <DIV> a nastavte mu třídu s názvem "obtekani".
• Soubor style.css upravte následujícím způsobem:
  • na konec vložte komentář "CV17"
  • identifikátoru "obal" nastavte šířku 800 pixelů, barvu pozadí bílé (RGB kódem), zaoblení ohraničení na 10 pixelů a vycentrujte pomocí vnějšího okraje,
  • třídě "obtekani" nastavte typ obtékání vlevo, pravý vnější okraj 10 pixelů a dolní vnější okraj 5 pixelů,
  • pomocí kontextového zápisu nastavte obtékaným obrázkům zaoblení ohraničení na 10 pixelů,
  • třídě "doprava" nastavte ukončení levého obtékání.
• Zkontrolujte na případné chyby a uložte.