Setřídené a nesetřídené seznamy

Nabízím kvalitní řešení, které vám padne.

Setřídené a nesetřídené seznamy

Po delší pauze se podíváme na to, jak vytvářet seznamy s tím aby html kódu byla zachována struktura. Určitě už jste se setkali s několika metodami, jak udělat vizuálně pěkné seznamy, ale plnily všechny webové standardy? Ukážeme si pár metod jak dát jednotlivým položkám význam a samozřejmě je budeme později velmi jednoduše stylizovat pomocí kaskádových stylů.

Metoda A: použití <br />

Začneme na takovém pěkném příkladu, který znázorňuje seznam odběratelů vaší firmy dovážející zeleninu.

 <b>Supermarket OVOZEL</b><br />
 <b>Restaurace "Na Rohu"</b><br />
 <b>Potraviny Otec & Syn</b><br />
 <b>Závodní jídelna Prčice</b><br />
 <b>Hostinec "U Josefa"</b>

Takto by vypadal seznam dodavatelů na stránkách webdesignera-začátečníka. Tento kód nepředává žádnou strukturu, pouze holý text, který je vizuálně formátovaný. Prohlížeč a vyhledávácí roboti nezjistí že se jedná o seznam a také to budou považovat za obyčejný text a nepřidělý mu žádnou větší prioritu. Tak se podíváme dál, co se s tím dá dělat...

Metoda B: seznamy pomocí <ul> a <li>

 <ul>
 <li>Supermarket OVOZEL</li>
 <li>Restaurace "Na Rohu"</li>
 <li>Potraviny Otec & Syn</li>
 <li>Závodní jídelna Prčice</li>
 <li>Hostinec "U Josefa"</li>
 </ul>

Výsledek:

Supermarket OVOZEL
Restaurace "Na Rohu"
Potraviny Otec & Syn
Závodní jídelna Prčice
Hostinec "U Josefa"

Jak vidíte, prohlížeč automaticky přidá před položky odrážky a odsadí je. Tento kód má strukturu a vyhledávací roboti zjistí že se jedná o seznam a také mu přidělí větší důležitost než textu okolo.

Stylizace s využítím CSS

Máme vytvořený seznam a teď už nám jenom zbývá upravit ho vizuálně tak, aby se nám líbil. Začneme tím, že vypneme odrážky a nastvíme odsazení na 5 pixelů shora, zdola a zleva:

 ul {
 list-style: none;
 margin: 5px 0 5px 5px;
 padding: 0;
 }

A přidáme vlastní typ písma, barvu textu, velikost písma, tučnost, výplň na 18 pixelů a nakonec malou šipečku jako pozadí, kterou umístíme hned vlevo a vertikálně vycentrujeme na řádek.

 ul {
 font-family: verdana, sans-serif;
 color: #555;
 font-size: 11px;
 font-weight: bold;
 padding-left: 25px;
 background: url(arrow.gif) no-repeat 0 50%;
 }

Výsledek :

Supermarket OVOZEL
Restaurace "Na Rohu"
Potraviny Otec & Syn
Závodní jídelna Prčice
Hostinec "U Josefa"

A máme vytvořený sémantický seznam, který můžeme velice jednoduše stylizovat pomocí úpravy pár řádků našeho CSS. Veliká výhoda této metody je, že když prohlížeč nebude umět pracovat se styly CSS (ať už je nepodporuje, uživatel si vypne jejich podporu nebo je prohlížeč nemůže z nějakého důvodu najít), seznam se zobrazí jako v předchozím případě s klasickými odrážkami a mírným odsazením. To je velice vhodné a v tom je síla webových standardů.

Metoda C: očíslovaný seznam <ul>

Vemme si například situaci že na svých stránkách vystvětlujete postup jak správně vypnout počítač. Mohli by jste to udělat třeba takto:

 <ul>
 <li>1. Stisknete na tlačítko Start</li>
 <li>2. Vyberete položku vypnout</li>
 <li>3. Počkáte až se počítač sám vypne</li>
 <li>4. Vypnete tiskárnu a ostatní zapnutá zařízení</li>
 </ul>

Výsledek :

1. Stisknete na tlačítko Start
2. Vyberete položku vypnout
3. Počkáte až se počítač sám vypne"
4. Vypnete tiskárnu a ostatní zapnutá zařízení

Upozorňuji že tento návod může být v realitě úplně jiný, jelikož záleží jaký operační systém používáte a jak moderní počítač vlastníte...:-)

Zde vidíte jak by mohl vypadat očíslovaný seznam položek. Je to docela v pohodě, ale co když máte takový seznam s 50 položkami a někam doprostřed chcete vložit položku navíc? Nic moc přepisovat polovinu čísel... Tento problém se však dá také vyřešit.

Metoda D: setříděný (očíslovaný) seznam <ol>

 <ol>
 <li>Stisknete na tlačítko Start</li>
 <li>Vyberete položku vypnout</li>
 <li>Počkáte až se počítač sám vypne</li>
 <li>Vypnete tiskárnu a ostatní zapnutá zařízení</li>
 </ol>

Výsledek :

Stisknete na tlačítko Start
Vyberete položku vypnout
Počkáte až se počítač sám vypne"
Vypnete tiskárnu a ostatní zapnutá zařízení

Značka <ol> je zkratkou pro setříděný seznam (ordered list), takže ze sémantického hlediska používáme pro danou úlohu ten správný prvek než je <ul>.

Číslování

Co vás možná zaskočilo je, že jsme k položkám nepřidali žádná čísla. Čisla se totiž generují při použití <ol> automaticky v obvyklém pořadí. Takže pokud bychom potřebovali doprostřed vložit ještě jednu položku, pouze tam vložíme párový tag <li> a prohlížeč už si to sám očísluje.

Zalamování

Další výhodou je to, že když se delší položky seznamu zalamují na další řádek, jsou od čísla odsazeny, kdežto v metodě C by se říádky zalomily bez odsazení.

Druhy číslic

Výchozím stylem číslování jsou arabské číslice (1, 2, 3, 4, ...), ale pomocí CSS to můžeme velice jednoduše změnit. Stačí pouze v CSS aplikovat vlastnost list-style-type, která může mít tyto hodnoty:

decimal: 1, 2, 3, 4, ...
upper-alpha: A, B, C, D, ...
lower-alpha: a, b, c, d, ...
upper-roman: I, II, III, IV, ...
lower-roman: i, ii, iii, iv, ...
none: nečíselné hodnoty

Pokud bychom chtěli aby naše metoda generovale velké římské číslice, udělali bychom to takto:

 ol li {
 list-style-type: upper-roman;
 }

Výsledek :

Stisknete na tlačítko Start
Vyberete položku vypnout
Počkáte až se počítač sám vypne
Vypnete tiskárnu a ostatní zapnutá zařízení

Kompatibilita

Dříve se dal použít ke změně typu seznamu na římské číslice HTML atribut type aplikovaný přímo na prvke <ol>. V HTML 4.01 byl ale tento atribut zavržen ve prospěch použití pravidel CSS nastíněných výše. Proto byste atribut type s ohledem na budoucí kompatibilitu používat neměli, dejte přednost kaskádovým stylům.

Troška magie s CSS

Možná se vám použítá čísla zdají fádní, proto našemu seznamu přidáme id a podíváme se na to, jak seznam můžeme vizuálně stylizovat podle vlastních představ.

 <ol id="navod">
 <li id="ol_1">Stisknete na tlačítko Start</li>
 <li id="ol_2">Vyberete položku vypnout</li>
 <li id="ol_3">Počkáte až se počítač sám vypne</li>
 <li id="ol_4">Vypnete tiskárnu a ostatní zapnutá zařízení</li>
 </ol>

Začneme tím, že si vypneme očíslování.

 #navod li {
 list-style-type: none;
 }

Dále vypneme odsazení a výplň celého seznamu, pak nastavíme výplň položek na 5 pixelů shora a zdola a na 50 pixelů zleva a zprava. Následuje nastavení odsazení položek zdola o 6 pixelů a přidání spodního rámu o šířce 1px.

 #navod {
 list-style-type: none;
 margin: 0;
 padding: 0;
 }
 #navod li {
 padding: 5px 50px;
 margin-bottom: 6px;
 border-bottom: 1px solid #ccc;
 }

Teď už jenom nastavíme pozadí jednotlivých položek, kde jsme si vytvořili malé číselné obrázky.

 #ol_1 {
 background: url(images/ol_1.gif) no-repeat 6px 50%
 }
 #ol_2 {
 background: url(images/ol_2.gif) no-repeat 6px 50%
 }
 #ol_3 {
 background: url(images/ol_3.gif) no-repeat 6px 50%
 }
 #ol_4 {
 background: url(images/ol_4.gif) no-repeat 6px 50%
 }

Výsledek :

Stisknete na tlačítko Start
Vyberete položku vypnout
Počkáte až se počítač sám vypne
Vypnete tiskárnu a ostatní zapnutá zařízení

Jak vidíte, vytvořením pár řádků se dají udělat zázraky. Nebojte se experimentovat a uvidíte, že dokážete vytvořit velmi zajímavé seznamy.

Shrnutí

Pokud tedy budete na svých stránkách chtít vytvořit nesetříděný seznam, určitě využijte metodu B. V případě kdy budete chtít vytvořit očíslovaný setříděný seznam, použijte metodu D, která vám v budoucnosti ušetří nepříjemnosti s číslováním. Metodě A se zkoušejte v každém případě vyhnout, protože takový kód nepředává prohlížeči a vyhledávacím robotům žádnou strukturu.

26.9.2005