Komentáře ke stránce:

EUuQd3

xEiEVWmE

rxuABFxsIUn

LenQmJudXyh

yJBzPRSNEjKjVZMJ

csOotBonYauMXRTT

6.9.2010
Boleslav

---- Česky ----

Jak psát web
Vše o WWW
Pixylophone
Webguru
Sova v síti
EgoMetr
Čeština

--- Anglicky ---

HTML Tutorial
W3C
HTML 4.01 (W3C)
HTML 4.0 (WDG)
CSS 2 (W3C)
Bobby
PHP
MySQL
Netscape DevEdge
MSDN
A List Apart
Color Schemer
Anfy Team
drpeterjones

---- Praxe ----

SourceForge

- FreeHosting -

Xnet
PSISCO
Pípni
Place4u
Hosting zdarma
Gringo
site.cz
TENZOR free
aspweb.cz
Sinister
Porno hosting

Tisk

Zkrocené seznamy

CSS Design: Taming Lists
autor: © Mark Newhouse, 2002 (A List Apart)
překlad: Sagvan Humble, 2004

Již v červenci 1999 jsem na diskusních fórech prosazoval přednosti kaskádových stylů. Jsou věci, které se nemění.

Co se změnilo je můj přístup ke kaskádovým stylům a základní struktuře příslušného dokumentu (X)HTML. Všiml jsem si například, že většina internetových stránek obsahuje navigační panel s nabídkou odkazů. Syntakticky se většinou jedná o prostý text s odkazy navzájem oddělenými značkami <div> či <p>. Pokud se týká struktury, jedná se o seznam odkazů a měli bychom podle toho postupovat.

Zřejmým důvodem, proč odkazy nezařazujeme do seznamů, je, že nechceme před každým odkazem v navigační oblasti zobrazovat odrážku. Několik postupů rozvržení stránky WWW pomocí kaskádových stylů jsem nastínil v předcházejícím článku. Jeden z těchto postupů spočíval v zobrazení položek seznamu vedle sebe a nikoli pod sebe.

V tomto textu si ukážeme použití kaskádových stylů ke zkrocení těžkopádných seznamů. Je na čase naučit seznamy řádnému chování, aby na stránkách přestaly bezuzdně řádit.

Příprava arény

V tomto textu budeme používat odrážkové seznamy (unordered list). Veškeré zde uvedené styly CSS mohou být s obdobnými výsledky aplikovány na číslované seznamy (ordered list). Pokud nebude uvedeno jinak, veškeré příklady v textu využívají pro vytvoření seznamu následující kód:

<ul>
	<li>Položka 1</li>
	<li>Položka 2</li>
	<li>Položka 3</li>
	<li>Položka 4</li>
	<li>Položka 5 bude o něco delší,
	    takže se bude zalamovat</li>
</ul>

Každý seznam je umístěn v samostatné značce <div>, která prostřednictvím tabulky CSS určuje chování seznamu. Všem značkám <div> je přiřazeno základní pravidlo:

#base {
	border: 1px solid #000;
	margin: 2em;
	width: 10em;
	padding: 5px;
	}

Bez použití dalších stylů se náš seznam uvedený mezi značkami <div id="base"></div> zobrazí takto:

Položka 1
Položka 2
Položka 3
Položka 4
Položka 5 bude o něco delší, takže se bude zalamovat

Umístění

Výchozí odsazení seznamu může být v některých případech příliš velké. Pouhá změna okraje (margin) či výplně (padding) prvku <ul> nemusí uspokojivě pracovat ve všech prohlížečích. Chceme-li například seznam přesunout až k levému okraji, je třeba současně změnit okraj i výplň. Prohlížeče Internet Explorer a Opera totiž volí zarovnání podle levého okraje, zatímco prohlížeč Mozilla/Netscape zarovnává podle oblasti výplně. Další informace týkající se tohoto problému najdete v článku Consistent List Indentation.

V následujícím příkladu jsou obě vlastnosti margin-left i padding-left odrážkového seznamu <ul> nastaveny na nulu:

Položka 1
Položka 2
Položka 3
Položka 4
Položka 5 bude o něco delší, takže se bude zalamovat

Všimněte si umístění odrážek mimo oblast definovanou prvkem <div>. Pokud by byl seznam umístěn přímo v prvku <body> dokumentu HTML, odrážky by byly umístěny vně okna prohlížeče, a tedy by se nezobrazily vůbec. Chcete-li, aby se odrážky zobrazily uvnitř prvku <div>, avšak podél jeho levé strany, nastavte buď levý okraj nebo výplň na hodnotu 1 em:

Položka 1
Položka 2
Položka 3
Položka 4
Položka 5 bude o něco delší, takže se bude zalamovat

Odrážky

Možná jste se již setkali s potřebou vytvořit vlastní odrážky. Seznam s vlastními odrážkami lze realizovat tabulkou, jejíž jeden sloupec obsahuje odrážky ve formě obrázku s příponou GIF zarovnaného doprava nahoru, druhý sloupec obsahuje vše, co by mělo být uvedeno mezi značkami <li>. Syntaxe CSS umožňuje použít jako odrážku obrázek. V případě, že prohlížeč tuto funkci jazyka CSS nepodporuje (nebo nepodporuje obrázky), použije se výchozí odrážka (popřípadě můžete určit jinou odrážku HTML).

Příslušné pravidlo má tento obecný tvar:

ul {
	list-style-image: url(bullet.gif);
	}

Prohlížeč náš seznam zobrazí takto:

Položka 1
Položka 2
Položka 3
Položka 4
Položka 5 bude o něco delší, takže se bude zalamovat

Chcete-li s ohledem na prohlížeče nepodporující odrážky tvořené obrázkem přidat odrážku HTML, doplňte do pravidla deklaraci:

	list-style-type: disc;

U některých obrázků použitých jako odrážky se může stát, že jejich umístění vedle položek seznamu nebude vyhovovat Vašim představám. V takovém případě může být výhodnější umístit obrázek přímo do bloku položky seznamu (nikoli vně bloku). Požadovanou změnu docílíme deklarací:

	list-style-position: inside;

Uvedené tři deklarace lze spojit do jedné. Zápis ve zkrácené formě bude mít tvar:

ul {
	list-style: disc url(bullet.gif) inside;
	}

Ekvivalentní zápis v nezkrácené formě:

ul {
	list-style-type: disc;
	list-style-image: url(bullet.gif);
	list-style-position: inside;
	}

Na stránce WWW se náš seznam zobrazí takto:

Položka 1
Položka 2
Položka 3
Položka 4
Položka 5 bude o něco delší, takže se bude zalamovat

V některých případech může být zapotřebí vytvořit seznam, u kterého se odrážky zobrazovat nebudou, popřípadě můžete chtít použít namísto odrážky nějaký jiný znak. Syntaxe CSS opět nabízí jednoduché řešení. Stačí do pravidla přidat text list-style: none; a nastavit odsazení položek seznamu (značka <li>). Příslušné pravidlo bude přibližně ve tvaru:

ul {
	list-style: none;
	margin-left: 0;
	padding-left: 1em;
	text-indent: -1em;
	}

Jednu z vlastností výplň (padding) a okraj (margin) je třeba nastavit na nulu, druhou na hodnotu 1 em. Tuto hodnotu může být třeba upravit podle použitého znaku „odrážky“. Záporná hodnota vlastnosti text-indent posune první řádek o příslušnou hodnotu doleva.

Kód HTML bude obsahovat náš obvyklý seznam s tím, že před obsah každé položky seznamu uvedete znak či entitu HTML, kterou chcete použít namísto odrážky. V našem případě použijeme entitu » (znak »):

» Položka 1
» Položka 2
» Položka 3
» Položka 4
» Položka 5 bude o něco delší, takže se bude zalamovat

Rád bych upouzornil, že prohlížeče Netscapa 6/7/Mozilla (a jiné prohlížeče postavené na zobrazovacím jádře Gecko) a Opera mohou vytvářet generovaný obsah definovaný pseudo-prvkem :before jazyka CSS2. Toho můžeme s výhodou využít pro automatické vygenerování znaku „»“ (respektive libovolného jiného znaku pro odrážku). Obsah mezi značkami <ul> tak může zůstat beze změny. Používáte-li prohlížeč Opera nebo prohlížeč na bázi jádra Gecko, stejný seznam lze vytvořit i bez nutnosti vpisování znaku odrážky do položek seznamu:

#custom-gen ul li:before {
	content: "\00BB \0020";
	}

Vlastnost content může obsahovat textové řetězce, adresy URI atd., včetně speciálních znaků. Použijete-li tyto znaky, například znak „»“, je nutné je uvést pomocí kódů v hexadecimálním tvaru. Pro znak „»“ použijeme kód \00BB (druhý znak \0020 představuje mezeru). Konečný výsledek (nezapomeňte, že znak použitý jako odrážka se zobrazí pouze v prohlížečích Opera a Mozilla/Netscape):

Položka 1
Položka 2
Položka 3
Položka 4
Položka 5 bude o něco delší, takže se bude zalamovat

Plně řádkové seznamy

Říká snad někdo, že se položky seznamu musejí zobrazovat pod sebou a s odrážkami po levé straně? Můžete požadovat strukturu uspořádaného seznamu odkazů, který se však na stránce WWW zobrazí jako svislý navigační panel. Stejně tak můžete chtít seznam odkazů zobrazit vedle sebe na horním okraji stránky.

Tato úvaha se netýká pouze seznamu odkazů. Někdy je třeba zobrazit seznam několika položek uprostřed odstavce, může se jednat například o seznam knih, které si chcete přečíst. Co se týče struktury, v tomto případě je použití seznamu opodstatněné, co se týče způsobu zobrazení, nemusí být žádoucí narušit tok textu odstavce. Záchranou jsou opět kaskádové styly CSS!

Vzhledem k tomu, že se tento seznam nemá zobrazovat samostatně, nebudeme jej umísťovat do základní značky <div>, kterou obývaly předchozí seznamy. Tentokrát vytvoříme odstavec, následně náš obvyklý seznam, a nakonec další odstavec.

Slyším Vaše výkřiky: „FAUL! Myslel jsem, že chcete seznam umístit dovnitř odstavce, nikoli mezi dva odstavce.“

Moje odpověť je: „Jistě. Bohužel syntaxe (X)HTML nedovoluje umístit seznam dovnitř odstavce. Za pomoci tabulky stylů však lze kýženého zobrazení dosáhnout.

Styly budou vypadat takto:

#inline-list {
	border: 1px solid #000;
	margin: 2em;
	width: 80%;
	padding: 5px;
	font-family: Verdana, sans-serif;
	}

#inline-list p {
	display: inline;
	}

#inline-list ul, #inline-list li {
	display: inline;
	margin: 0;
	padding: 0;
	color: #339;

	font-weight: bold;
	}

Veškerý kód HTML je součástí prvku <div id="inline-list">. Prvek <div> obsahuje odstavec, za kterým následuje náš obvyklý seznam <ul>, a nakonec další odstavec. Seznam jsme pozměnili, takže jednotlivé položky jsou ukončeny čárkou, poslední položka je ukončena tečkou.

Výsledek je patrný zde (seznam je zobrazen modrým tučným písmem):

Nejprve se zobrazí část textu před seznamem. Může se jednat třeba o příběh manžela, jemuž volá manželka, aby nakoupil pár věcí cestou domů z práce. Na obsahu textu ve skutečnosti nezáleží, pro naše účely pouze potřebujeme nějaký text před seznamem:

Položka 1,
Položka 2,
Položka 3,
Položka 4,
Položka 5 bude o něco delší, takže se bude zalamovat.

A na závěr tu máme text, který se v odstavci zobrazí za seznamem. Jedna či dvě věty pro náš příklad bohatě postačí.

Stejně jako v již uvedeném příkladu s vlastními odrážkami bychom mohli nechat styly CSS vygenerovat čárky a tečku za položkami seznamu automaticky. Pokud se můžete omezit pouze na prohlížeče Opera a prohlížeče s jádrem Gecko, je to to pravé ořechové. V tomto případě budou styly vypadat takto:

#inline-list-gen ul li:after {
	content: ", ";
	}
		
#inline-list-gen ul li.last:after {
	content: ". ";
	}

Pseudo-prvek :after jsme použili pro doplnění čárky za každou položku seznamu a pro doplnění tečky za každou položku, které je přiřazena třída class="last". Výsledek se zobrazí takto (nezapomeňte, že popsaný mechanismus funguje pouze v prohlížečích Opera a Mozilla/Netscape):

Položka 1
Položka 2
Položka 3
Položka 4
Položka 5 bude o něco delší, takže se bude zalamovat

A na závěr tu máme text, který se v odstavci zobrazí za seznamem. Jedna či dvě věty pro náš příklad bohatě postačí.

Navigace

Jak jsem již zmínil, nabídky s odkazy, které jsou součástí téměř každých stránek, by měl tvořit kód seznamu - právě seznamem ve skutečnosti jsou. Vzhledem k tomu, že pro tyto odkazy většinou nechceme použít výchozí styl seznamu, můžeme pomocí stylů CSS způsob zobrazení na stránce změnit. Jak jsme již uvedli v předchozím textu, seznamy lze přimět k zobrazení položek vedle sebe (řádkové zobrazení v textu) namísto pod sebe (výchozí chování). Současně se zbavíme odrážek, takže máme řadu možností, jak položky seznamu navzájem oddělit.

Další příklady vodorovných seznamů (položky vedle sebe) využívají shodný základní kód <div> s těmito styly:

#h-contain {
	padding: 5px;
	border: 1px solid #000;
	margin-bottom: 25px;
	}

Následující dva příklady využívají náš obvyklý seznam (<ul>), z něhož jsme ale vypustili poslední položku s delším textem. Kromě toho jsme přidali další třídu, která zajišťuje oddělené zpracování (zvýraznění) jedné z položek <li> seznamu.

Okraje

Pro oddělení jednotlivých voleb se často používá znak svislé čáry („|“). Jedná se o zřetelný oddělovací znak a lze jej emulovat tím, že k položkám seznamu přidáme okraje:

#pipe ul {
	margin-left: 0;
	padding-left: 0;
	display: inline;
	} 

#pipe ul li {
	margin-left: 0;
	padding: 3px 15px;
	border-left: 1px solid #000;
	list-style: none;
	display: inline;
	}
	
		
#pipe ul li.first {
	margin-left: 0;
	border-left: none;
	list-style: none;
	display: inline;
	}

Do první položky <li> jsme přidali kód class="first", aby se u této položky nezobrazil levý okraj.

Item 1
Item 2
Item 3
Item 4

Další úpravou těchto stylů lze seznam zobrazit ve formě záložek:

#tabs ul {
	margin-left: 0;
	padding-left: 0;
	display: inline;
	} 

#tabs ul li {
	margin-left: 0;
	margin-bottom: 0;
	padding: 2px 15px 5px;
	border: 1px solid #000;
	list-style: none;
	display: inline;
	}
	
		
#tabs ul li.here {
	border-bottom: 1px solid #ffc;
	list-style: none;
	display: inline;
	}

Item 1
Item 2
Item 3
Item 4

Třída class="here", kterou jsme přidali do položky <li>, vytvoří dolní okraj odpovídající barvě pozadí. Je tak naznačeno, že příslušná záložka odpovídá aktuálně zobrazené stránce.

Poznámka: Tento postup poprvé zveřejnil Randal Rust, následně se objevil v řadě příspěvků na diskusním fóru o stylech CSS.

Hierarchické zobrazení

Další typ seznamu odkazů s typicky vodorovným uspořádáním na stránce slouží k znázornění hierarchie. Hierarchické zobrazení ukazuje postup navigace na stránkách počínaje domovskou stránkou a postupně až k aktuálně zobrazené sekci či stránce. Má-li být kód sémanticky správný, je třeba vytvořit sadu vnořených seznamů (každá nová sekce je součástí sekce předchozí):

<div id="bread">
<ul>
	<li class="first">Home
	<ul>

		<li>&#187; Products
		<ul>
			<li>&#187; Computers
			<ul>
				<li>&#187; Software</li>
			</ul></li>

		</ul></li>
	</ul></li>
</ul>
</div>

Na stránce se kód zobrazí takto:

Home
- » Products
  - » Computers
    - » Software

Do tabulky kaskádových stylů stránky přidáme tato pravidla:

#bread {
	color: #ccc;
	background-color: #006;
	padding: 3px;
	margin-bottom: 25px;
	}

#bread ul {
	margin-left: 0;
	padding-left: 0;
	display: inline;
	border: none;
	} 

#bread ul li {
	margin-left: 0;
	padding-left: 2px;
	border: none;
	list-style: none;
	display: inline;
	}

Výsledné zobrazení na stránce:

Home
- » Products
  - » Computers
    - » Software

Znak „»“ (respektive libovolný jiný znak, který chcete použít jako oddělovač) můžeme opět generovat pseudo-prvkem :before; třída class="first" zajistí, aby se u první položky <li> oddělovač nezobrazil:

#bread-gen ul li:before {
	content: "\0020 \0020 \0020 \00BB \0020";
	color: #ff9;
	}
	
#bread-gen ul li.first:before {
	content: " ";
	}

Konečným výsledkem bude zobrazení ve tvaru:

Home
- Products
  - Computers
    - Software

Reálný svět

Své pojednání bych rád zakončil reálnou aplikací uvedených postupů. Pomocí standardního seznamu <ul> obsahujícího odkazy vytvoříme dynamickou nabídku včetně efektu zvýraznění položky pod kurzorem myši. Většinu vizuálních efektů zajistí styly odkazů, zatímco seznam <ul> poskytne strukturu.

Uvedená nabídka odkazů je řešením otázky, kterou mi předložil Michael Efford v diskusním fóru. Michael vytvořil přesně totéž pomocí tabulky, obrázků a kódu JavaScript. Vyslovil přání, zda by totéž nebylo možné dokázat pomocí kaskádových stylů. Vzal jsem to jako výzvu a s pomocí několika dalších členů fóra, kteří mi pomohli s odladěním na různých prohlížečích, jsme dospěli k tabulce stylů aplikované na tento kód HTML:

<div id="button">
<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Hidden Cameras</a></li>
	<li><a href="#">CCTV Cameras</a></li>

	<li><a href="#">Employee Theft</a></li>
	<li><a href="#">Helpful Hints</a></li>
	<li><a href="#">F.A.Q</a></li>

	<li><a href="#">About Us</a></li>
	<li><a href="#">Contact Us</a></li>
</ul>
</div>

Tabulku stylů si projděme pravidlo po pravidle a vysvětleme si, k čemu každé z nich slouží.

#button {
	width: 12em;
	border-right: 1px solid #000;
	padding: 0 0 1em 0;
	margin-bottom: 1em;
	font-family: 'Trebuchet MS', 'Lucida Grande',
	  Verdana, Lucida, Geneva, Helvetica, 
	  Arial, sans-serif;
	background-color: #90bade;
	color: #333;
	}

První pravidlo se týká značky #button div. Definuje velikost prostoru, ve kterém bude nabídka umístěna, a definuje kontext (obsahující blok) nabídky, abychom mohli stanovit způsob chování seznamu a odkazů uvnitř značky <div>. Rozhodl jsem se udělat nabídku tak, aby se automaticky přizpůsobila velikosti písma nastavené v prohlížeči, (téměř) veškeré rozměry jsou proto udávány v jednotkách em. To se týká i šířky nabídky. Plný černý okraj po pravé straně odpovídá původnímu Michaelovu návrhu. Dolní výplň zajišťuje rozšíření oblasti <div> směrem dolů. Oblast <div> tak přesahuje nabídku odkazů, takže je vidět pozadí oblasti <div>. Opět se jedná o chování převzaté z původního návrhu. Dolní okraj slouží k oddělení prvku <div> od eventuálních dalších prvků. Barvy opět odpovídají původnímu návrhu.

	#button ul {
		list-style: none;
		margin: 0;
		padding: 0;
		border: none;
		}
		
	#button li {
		border-bottom: 1px solid #90bade;
		margin: 0;
		}

Dále stanovíme způsob zobrazení seznamu. Vzhledem k tomu, že veškeré položky seznamu tvoří odkazy, přičemž grafické efekty při umístění kurzoru myši by měly být určeny styly CSS přiřazenými k odkazům, nutně jsem odstranil veškeré styly ze seznamů. Navíc jsem na dolní okraj každého odkazu přidal oddělovač ve formě okraje o šířce jednoho pixelu a stejné barvě jako barva pozadí prvku #button div. V původním návrhu byl tento oddělovač tvořen obrázkem.

	#button li a {
		display: block;
		padding: 5px 5px 5px 0.5em;
		border-left: 10px solid #1958b7;
		border-right: 10px solid #508fc4;
		background-color: #2175bc;
		color: #fff;
		text-decoration: none;
		width: 100%;
		}

	html>body #button li a {
		width: auto;
		}

	#button li a:hover {
		border-left: 10px solid #1c64d1;
		border-right: 10px solid #5ba3e0;
		background-color: #2586d7;
		color: #fff;
		}

Nakonec jsme definovali seznamy. Původní návrh počítal s levým a pravým okrajem o šířce 10 pixelů. Tyto okraje spolu s pozadím mění barvu při překrytí kurzorem myši. Tuto funci lze jednoduše zajistit pseudo-třídou CSS :hover. Tuto třídu jsme přidali do stylu odkazů.

Tato část tabulky stylů obsahuje malý trik. K tomu, aby se odkazy zobrazily jako aktivní po celé šířce prvku <div>, nastavil jsem pro ně vlastnost display: block. Funguje to pro všechny prohlížeče kromě IE/Windows. Pokud explicitně nastavíte šířku bloku na hodnotu 100%, prohlížeč IE/Windows funguje správně, problém však nastane s prohlížeči IE5/MAC a Netscape/Mozilla. Použil jsem proto selektor potomka („>“) pro předefinování šířky na hodnotu auto. Vzhledem k tomu, že prohlížeč IE/Windows nepodporuje selektory potomků, ignoruje celé pravidlo. Prohlížeče IE5/Mac, Opera a Netscape/Mozilla pravidlo interpretují, takže jsou spokojeni všichni.

Pravidlo pro pseudo-třídu :hover vyvolá změnu barvy pozadí a okrajů odkazů, najede-li na ně uživatel myší.

Styly a kód seznamu (přibližně 1 kB) nahradily zhruba 5 kB kódu JavaScript a kódu prvku <table>, nemluvě o dalších přibližně 8 kB obrázků zajišťujících efekty při najetí kurzorem myši. Kromě toho je nový kód přehlednější a lépe se aktualizuje, neboť není třeba při změně textu odkazu vytvářet nové obrázky. Nyní stačí jednoduše změnit část textu. Konečný výsledek s drobnými úpravami zejména barev je patrný na této stránce WWW (původní odkaz na stránky Asset Surveillance nefunguje, pozn. překladatele).

Špička ledovce

Věřte nebo ne, v tomto textu jsme pouze lehce nastínili možnosti kaskádových stylů aplikovaných na seznamy. Netvrdím, že zde popsané styly CSS jsou ty nejdokonalejší, s nimiž se kdy setkáte, doufám ale, že Vám dají inspiraci při tvorbě přehledně strukturovaných stránek.

Autor

Mark Newhouse má blog na stránkách gnuhaus.com, pracuje v laboratořích NOAO a publikuje na stránkách realworldstyle.com.

Odkazy

Tento článek v angličtině
Tento článek v ruštině
A List Apart - články týkající se HTML, CSS, DOM, vývoje WWW atd. v angličtině
Listamatic - podrobný popis práce se seznamy v angličtině
Listamatic 2 - podrobný popis práce se seznamy v angličtině
Petr Staníček: CSS Kaskádové styly - kompletní průvodce, Computer Press, Praha 2003