YMUSY1

1. Cvičení 8 YMUSY1 Floating, sloupce Multimediální systémy 1

2. Floating • Vlastnost boxů (blokových elementů) • None (výchozí hodnota) • Left (pozice vůči levému okraji) • Right (pozice vůči pravému okraji) • Plovoucí box je obtékán obsahem okolo • Ostatní prvky se samy vykreslí tak, aby byl box obtékán

3. Konstrukce třísloupcového layoutu Obsahová část – šířka je vždy auto, nastaven marginleft a right na hodnotu (šířka postraního sloupce + odsazení) kvůli zamezení obtékání pod sloupce. Obsahové části se též nikdy nenastavuje pevná výška Pravý sloupec – zpravidla pevná šířka, nastavený float na right. Výška sloupce je vždy proměnná (auto) Patička – definice zpravidla na celou šířku stránky, výška bývá pevně definovaná, nutné použít clear:both. Při použití margin se bude patička odsazovat od prostředka – neplovoucího elementu, proto v případě odsazování nuno vložit prázdný div nad patičku a clear nastavit jemu Levý sloupec – zpravidla pevná šířka, nastavený float na left. Výška sloupce je vždy proměnná (auto) Hlavička – definice zpravidla na celou šířku stránky, výška bývá pevně definovaná

4. Vlastnost z-index • Určuje pozici prvku na virtuální ose z (překrytí) • Hodnotou může být celé číslo • Čím vyšší, tím větší je priorita zobrazení – tím více nahoře bude prvek • Lze vkládat i záporné hodnoty

5. Bodovaný úkol – max. 2 body • Vytvořit kompletní třísloupcový layout (validní XHTML 1.0 Strict) • Hlavička, postranní plovoucí sloupce, obsahová část a patička. • Pro rozlišení použijte barvy • Obsahová část bude naplněna odstavci textu, text nebude přetékat pod postranní sloupce • Hlavička bude obsahovat nadpis druhé úrovně • Patička bude obsahovat vycentrovaný text • Postranní divy budou mít též nějaký obsah • Definice obsahových kontejnerů bude v CSS souboru • Barvu textu přizpůsobit kontrastně vzhledem k pozadí (formátováno v CSS souboru)