TNPW1 Technologie pro publikování na webu Cvičení č. 7 Menu Martin Adámek.

Prezentace na téma: "TNPW1 Technologie pro publikování na webu Cvičení č. 7 Menu Martin Adámek."— Transkript prezentace:

1 TNPW1 Technologie pro publikování na webu Cvičení č. 7 Menu Martin Adámek

2 TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 2 CSS pseudotřída focus a:hover –pro odkazy, nad kterými je kurzor myši a:focus (+ pro MS IE navíc a:active) –pro odkazy, které jsou vybrány klávesnicí na PC pomocí tabelátoru na smartphonu nebo mobilním telefonu kurzorovým křížem –podobně např. i pro formulářové prvky praktická deklarace –a:hover, a:focus, a:active,input:hover, input:focus, input:active { color: white; { color: white; background-color: navy; background-color: navy; } –www.adamek.cz www.adamek.cz

3 TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 3 (Ne)podtrhávání textu u odkazů nezakazujte podtržení –odlišení pouze jinou barvou je nedostačující –přístupnost, přehlednost –výjimkou odkazy v hlavním, jasně rozpoznatelném, menu neodkazy nepodtrhávejte –uživatel předpokládá, že vše podtržené lze nějak použít, aktivovat zkratky s popisem v title se obvykle podtrhávají tečkovaně –definice v CSS: abbr { cursor: help; border-bottom: 1px dotted black; }

4 TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 4 Bodovaný úkol – dnešní zadání Vytvořte stránku s menu –menu pomocí „ “, položky pomocí „ “ –menu bude obsahovat odkazy –šířka celého menu (modrý blok – ): 150px –šířka položek (žlutých – ): 130px –nastavte v css chování pro „a:hover, a:focus, a:active“ –jako odkaz musí reagovat celé žluté pole (bez ohledu na délku textu v odkazu) display: block nastavení šířky odkazu –všechny mezery (mezi položkami, u krajů modrého bloku,...): 10px –stejné chování v MS IE a ve FF! ohodnocení úkolu: 2 body obecná pravidla jsou na webu webu

5 TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 5 Návod na řešení potíží s okraji Nekompatibilita v některých prohlížečích: –obecné nastavení margin položky 10px nahoru i dolů => potíže u krajních položek (mezi položkami OK) Řešením kombinace: –padding (u menu) –margin (u položek) Pokud je zcela ignorován dolní margin poslední položky, mělo by to být řešitelné dolním paddingem menu (stačí i 1 px)

6 TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 6 Konkrétní řešení potíží s okraji menu (ul): –padding-top: 10px; položky (li): –margin: 0 10px 10px 10px;

7 TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 7 Příště obtékání třísloupcové rozložení