Zoznamy |
1. Číslované |
|
|
Zadáva sa len typ číslovania
rímskych číslic (malé lower-roman a veľké upper-roman), číslovanie od nuly -
decimal-leading-zero. To všetko pomocou list-style-type: |
ol
{list-style-type: lower-roman;} |
|
|
2. Nečíslované |
|
|
Zadáva sa len typ odrážky disc,
circle, square pomocou list-style-type: |
ul {list-style-type: circle;} |
|
!!! Pre oba typy môžme zadať, že miesto čísla alebo odrážky bude
náš vyrobený obrázok, napr cislo.jpg, z adresára pcs. Potom pomocou
list-style mu dáme cestu: |
ul
{list-style-type-image: url(pcs/cislo.jpg) inside;} |
|
inside znamená, že odrážka je
vnorená do zoznamu (opak je outside). |
|
Ak použijeme list-style: none môžme vytvoriť menu = žiadne
odrážky. |
|
|
Vertikálne menu |
|
Ak chceme urobiť ponuku odkazov
pod sebou, vytvoríme vlastne nečíslovaný zoznam s vlastným štýlom. |
ul
#mojemenu {list-style-type: none; width: 100px; background-image:
url(ja.gig); border: 2px orange;} |
#mojemenu li {border: bottom;} |
každý odkaz má horný okraj |
#mojemenu
a {color: orange; display: block; text-decoration: none;} |
#mojemenu
a:link {color: orange;} |
#mojemenu
a:visited {color: yellow;} |
#mojemenu
a:hover {color: fuchsia; font-style: italic; background-image:
url(jojo.gif);} |
#mojemenu
a :active {color: orange;} |
|
V treťom riadku je diplay:
block, čo zabezpečí, že odkazy budú v bloku pod sebou. |
Horizontálne menu |
|
Urobí sa podobme, len do li dáme
display: inline, takže: |
ul
#mojemenu {background-image: url(ja.gig);} |
#mojemenu
li {display: inline; list-style-type: none;} |
#mojemenu
a {color: orange; display: block; text-decoration: none;} |
#mojemenu ........ |
|
|
!!! Pozor !!! Takto sme vytvorili jedno menu, preto sme ho
pomenovali za krížikom mojemenu, a v stránke ho potom začneme vytvárať
pomocou |
<ul
id="mojemenu"> |
|
a
tu už budú jednotlivé odkazy pomocoi li ... |
|
|