CSS seznamy (1. díl)

Než se vrhnem na kaskádové menu, seznámíme se se seznamy;-)

Seznamy

Většina moderních webů dnes používají k tvorbě menu takzvané seznamy (jak vytvořit menu pomocí seznamů si ukážeme v příštím díle). Seznamy automaticky odsazují každý řádek, nebo přidávají číslo, písmeno nebo odrážku k textu. Zapisujeme je párovýmy tagy <ul>, <ol>, <li> a některýmy dalšímy, které se už jen zřídka používají. Tag <li> (z angl. list item) musí pro správné zobrazení být uvnitř seznamu, to znamená uvnitř elementu <ul> nebo <ol>

Příklad nejjednodušího seznamu:

<ul>
<li>banán</li>
<li>pomeranč</li>
<li>meloun</li>
<li>brokolice</li>
<li>květák</li>
</ul>


a výsledek bude vypadat takto:

• banán
• pomeranč
• meloun
• brokolice
• květák

Pokud byste raději chtěli číslovaný seznam, použijeme místo tagu <ul> tag <ol>. Výsledek bude vypadat takto:

1. banán
2. pomeranč
3. meloun
4. brokolice
5. květák

Jestli se vám podařilo tento jednoduchý seznam sestrojit, můžeme jít dál!

Odrážky

Zde už použijeme kaskádové styly. Úrčíme, jaké odrážky bude seznam mít (čtverečky, kolečka).

Nejprve uvedu příklad v css

<style type="text/css">

li {list-style-image: none;
list-style-type:square;}

</style>


Když zapíšeme tuto definici do stylů, odrážky budou ve tvaru čtverečku. Kromě hodnoty square můžete použít ještě tyto hodnoty: disc - pro kolečkové odrážky, circle pro kruhové odrážky (kolečko bez výplně), upper-roman - římské číslice, a některé další, též méně používané. Tyto hodnoty si můžete vyzkoušet, a použít, která se vám hodí.

Příště o kaskádovém menu

David Kohout
Autor: Kohout