1 / 5

YMUSY1

Cvičení 8. YMUSY1. Floating , sloupce. Multimedi ální systémy 1. 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

Download Presentation

YMUSY1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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)

More Related