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 ...