TNPW1 Technologie pro publikování na webu Cvičení č. 8 Obtékání a sloupce Martin Adámek.

Prezentace na téma: "TNPW1 Technologie pro publikování na webu Cvičení č. 8 Obtékání a sloupce Martin Adámek."— Transkript prezentace:

1 TNPW1 Technologie pro publikování na webu Cvičení č. 8 Obtékání a sloupce Martin Adámek

2 TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 2 Z-index pořadí na ose „z“ pro pozicované prvky –position: absolute, relative, příp. fixed jinak výchozí hodnota „position“ je „static“ výchozí hodnota: auto –pokud se nevnořuje, odpovídá hodnotě „0“ kladné číslo~vyšší důležitost záporné číslo~nižší důležitost

3 TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 3 Plovoucí boxy výchozí nastavení: float: none nastavení obtékaných prvků: –float: left –float: right –nutné povinně zadat šířku obtékající prvky se samy narovnají okolo

4 TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 4 Třísloupcové rozložení 2 obtékané prvky (float: left; float: right;) pak 1 běžný, obtékající, prvek –bez obtékání –nastavený margin (left, right) proti podtečení pod krajní sloupce –bez nastavené šířky pro plovoucí rozložení (přizpůsobení šířce okna) cílem zabránit nutnosti zobrazení vodorovného posuvníku !!!

5 TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 5 Třísloupcové rozložení nejvyšší obvykle hlavní obsah (uprostřed) –=>u něj margin (levý i pravý) nejvyšší může být i jeden z krajních sloupců –=> nutnost použít u patičky css vlastnost clear: both clear: left, right, both; výchozí je clear:none; –pokud má patička nastaveno margin-top≠0: margin-top patičky by platil jen pro prostředek => nad patičku vložit prázdný div –výška např. 1px –clear nastavit jemu příklad –lide.uhk.cz/fim/ucitel/fsadamm2 lide.uhk.cz/fim/ucitel/fsadamm2

6 TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 6 Bodovaný úkol – dnešní zadání Vytvořte stránku s třísloupcovým plovoucím rozložením (layoutem) –stačí vytvořit 5 barevných obdélníků (divů) hlavička; levý; pravý; hlavní; patička mezi jednotlivými bloky zadané pevné mezery pružné rozložení (přizpůsobení šířce okna) –tentokrát výjimečně stačí správné chování ve FF ale při různých běžných rozlišeních samozřejmě stále validní kód, s patřičným odkazem ohodnocení úkolu: 2 body obecná pravidla jsou na webu webu

7 TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 7 Příště boxmodel zadání semestrálního projektu!