Webové technológie
Poznámky:
9. Navigácie a tlačidlá
Ako vytvoriť "celoklikacie" tlačidlo z odkazu:
Ak chceme z odkazu (elementu a) vytvoriť tlačítko, potom je potrebné z bežného odkazu, teda riadkového elementu, urobiť element blokový a prideliť mu rozmer.
a { display: block; width: 160px; height: 20px; padding: 3px 5px; }
Ako na prekreslenie tlačidla:
Keď chceme, aby sa po nabehnutí myši tlačidlo zmenilo, budeme preto potrebovať dynamickú pseudotriedu hover, ktorá sa zapisuje za dvojbodku.
a:hover { background-color: #FFFFFF; color: black; }
Tvorba zvislej tlačidlovej navigácie:
K vytvoreniu zvislej navigačnej ponuky je vhodné použíť neusporiadaný zoznam, teda elementy ul a li, do ktorých uzavrieme odkazy.
V dokumente (XHTML):
<ul id ="menu>" <li><a href="predaj.html">Predaj</a></li> ... </ul>
V CSS potom predovšetkým zrušíme okraje a hlavne odrážky celého zoznamu:
ul#menu { width: 175px; margin: 0; padding: 0; list-style-type: none; border: solid #fc6500; border-width: 2px 2px 2px 0; }
Každé tlačidlo predstavuje jeden element li, ktorého súčasťou je odkaz (element a). Použijeme farbu pozadia a k ohraničeniu tlačidiel rámček.
ul#menu li { background: #bcb500; border-bottom: 1px solid #ece300; }
Spodný rámček u spodnej položky zoznamu vypustíme.
ul#menu li.spodny { border-bottom: none; }
Nakoniec pridelíme štýl elementom a - vnútorný okraj, aby nebol text nalepený na okraj, atd...
A nezabudneme na minulý trik pre "celoklikacie" tlačidlo, aby sa odkaz roztiahol cez celú položku zoznamu.
ul#menu li a { display: block; width: 175px; padding: 5px 5px 5px 10px; font-weight: bold color: #FFFFFF; text-decoration: none; } ul#menu li a:hover { background: #726e00 }
Výsledok si môžete pozrieť TU.
Tvorba vodorovnej tlačidlovej navigácie:
K vytvoreniu zvislej navigačnej ponuky je vhodné použíť neusporiadaný zoznam, teda elementy ul a li, do ktorých uzavrieme odkazy.
V dokumente (XHTML):
<ul id ="menu>" <li><a href="predaj.html">Predaj</a></li> ... </ul>
V šablóne CSS potom postupujeme následovne:
1. Prvým krokom je odstránenie odrážok a okrajov:
ul#menu { margin: 0; padding: 0; list-style-type: none; }
2. V dalšom kroku narovnáme ponuku do vodorovnej polohy. Vykonáme to jednoducho tak, že necháme položky zoznamu plávať vedľa seba - použijeme plávajúce umiestnenie. Prvú položku umiestni k okraju nadriadeného elementu (čo je ul) a dalšie položky vždy k okraju predchádzajúcej položky (li), takže sa poskladajú vedľa seba.
ul#menu li { float: left; }
3. Pretože prehliadač vystrihol položky zoznamu (elementy li) z bežného toku dokumentu, a tak je element ul fyzicky prázdny (nemá žiadnu výšku), vďaka čomu sa stratilo jeho pozadie. Riešením je umiestnenie elementa ul taktiež do plávajúceho umiestnenia. Aby sme zároveň zaistili, že pozadie sa roztiahne cez celú šírku, určíme taktiež šírku elementa ul.
ul#menu { width: 600px; float: left; ... }
4. Doladíme navigačnú ponuku do podoby ktorú požadujeme.
Výsledok si môžete pozrieť TU