ZaRohem.cz Pražské metro Test osobnosti CowParade 2004 Praha MHD v ČR
Blog ZaRohem 1.PCRevue.cz Vinárna Na roli (Petřvald) Restaurace Třebovická role kapela Terra Ignota

Reklama
Hlavní stránka
Aktuality
Software
Internet
Hardware
Seriály
Viry
Tipy a triky
Download
Konference
Napište nám
Reklama
Doporučujeme užitečný crm systém od CÍGLER SOFTWARE!
29. leden 2002 - Tipy a triky

Jak udělat v HTML seznam s grafickými odrážkami

Tři typy odrážekHTML samo o sobě nabízí tři typy odrážek použitelných v nečíslovaných seznamech - kulatou, kruhovou a čtvercovou. Rozdíly si můžete prohlédnout na obrázku:

Co ale dělat v případě, že chcete jako odrážku použít nějaký grafický prvek? Mnoho uživatelů používá následující metodu:

<img src="obrazek">Text první položky<br>
<img src="obrazek">Text druhé položky<br>

S tímto řešením se dá vystačit pokud žádný z textů nepřesahuje jeden řádek. V opačné případě pak tento text nepokračuje tak, jak bychom požadovali po seznamu (tedy pod prvním písmenem prvního řádku), ale přímo pod obrázkem, což rozhodně nepůsobí profesionálně.

Hledáte řešení? Je snadné - stačí umět něco málo ze základů kaskádových stylů. Patrně nejjednodušší je určit grafický soubor pro všechny odrážky na dané stránce. To provedete takto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Ukazková stránka</title>
<style>
li{list-style-image:url(obrazek.gif)}
</style>
</head>

<body>
<ul>
<li>Text první položky
<li>Text druhé položky
</ul>

Pro všechny odrážky na dané stránce bude místo prostých textových prvků použit soubor obrazek.gif.

Druhou a podobnou možností je použití tzv. třídy stylů, kterou využijete tehdy, chcete-li grafické odrážky pouze na některých místech na stránce, nebo pokud chcete použít více typů grafiky. V takovém případě může vypadat kód takto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Ukazková stránka</title>
<style>
.odrazka{list-style-image:url(obrazek.gif)}
</style>
</head>

<body>
<ul>
<li class="odrazka">Text první položky
<li class="odrazka">Text druhé položky
</ul>

Parametrem class pak prohlížeči sdělujete, jakou odrážku má použít. Pokud byste v záhlaví stránky nadefinovali více tříd, můžete na jedné stránce používat různé typy grafických odrážek.

Reklama
 
 
Aktuální články:
Reklama
Program eWay-CRM je praktické CRM řešení integrované přímo do Microsoft Outlooku.
 
 
Reklama
 
© 1.PC Revue.cz - všechna práva vyhrazena
ISSN: 1213-080X
© Karel Kilián ml.
Zásady ochrany osobních údajů
Reklama