I forrige post hadde fokus på hvordan en laget lister – på HTML-delen – og brukte standardsymboler i listene. Denne posten dreier seg om pynting av lister med andre typer symboler.
Alternativer til bullets og firkanter
Som punktmarkører for <li>-elementer i listen er det fullt mulig å bruke bilder eller andre symboler. Bilder kan være artig og pynte opp en god del. Ulempen er imidlertid at det tar tid (“latency” pluss lastetid), og av den grunn ikke alltid er så lurt.
For å sette bilder inn som arrows kan en bruke:
<ul style="list-style-image: url(arrow.gif);"> <li> .. </li> </ul>
Alternativt kan vi definere stilen i CSS:
<style type="text/css"> ul { list-style-image: url("/images/arrow.gif") } </style>
og bare angi listen i HTML med <ul><li>-elementer.
Et godt alternativ til bilde er å bruke små symboler. Det finnes tusenvis av små og artige “Unicode”-symboler (se listen i linken) som er greie å bruke og som ikke øker tiden det tar å laste siden noe særlig. Her er noen eksempler på slike symboler:
- ➽ En liten pil
- ♫ Et notesymbol
- ► En pil / triangel
- ♥ Et hjerte
- ⚠ Varselskilt
- ✬ En stjerne
Symbolene ovenfor ble som du ser også vist i en liste. Slik ser HTML-en for den listen ut:
<ul style="list-style: none; line-height: 1.5em;"> <li><span style="float: left; width: 2em;">➽</span> En liten pil</li> <li><span style="float: left; width: 2em;">♫</span> Et notesymbol</li> <li><span style="float: left; width: 2em;">►</span> En pil / triangel</li> <li><span style="float: left; width: 2em;">♥</span> Et hjerte</li> <li><span style="float: left; width: 2em;">⚠</span> Varselskilt</li> <li><span style="float: left; width: 2em;">✬</span> En stjerne</li> </ul>
Listen er som du ser laget ved å ta ut det vanlige bullet-symbolet (“list-style: none”) og sette inn et “span” i <li>-elementene. I stedet kunne vi ha definert det hele i CSS, gitt listetypen en klasse (“class”), kanskje også gitt symbolene en farge (“color: #FFCB97;”), og på den måten spart gjentakelsene og har laget en type liste vi kunne ha brukt flere ganger uten ekstra ny kode:
<style type="text/css"> .symbol { list-style: none; line-height: 1.5em; } .symbol span { float: left; width: 2em; color: #FFCB97; } </style>
Nå kan vi bruke en enklere HTML-kode:
<ul class="symbol">
<li><span>➽</span> En liten pil</li>
<li><span>♫</span> Et notesymbol</li>
<li><span>►</span> En pil / triangel</li>
<li><span>♥</span> Et hjerte</li>
<li><span>⚠</span> Varselskilt</li>
<li><span>✬</span> En stjerne</li>
</ul>
Med denne koden sammen med CSS-stilen får vi:
- ➽ En liten pil
- ♫ Et notesymbol
- ► En pil / triangel
- ♥ Et hjerte
- ⚠ Varselskilt
- ✬ En stjerne
Det at symbolene kan gis den fargen vi ønsker er en annen fordel med bruk av definerte symboler i stedet for bilder – hadde vi brukt bilder av symbolene ville vi ha måttet ha et nytt bilde for å få en annen farge.
OK. Dette er nok for denne gangen. Neste post skal handle om vertikale lister med flere enn en kolonne. Her er linker til artiklene om lister (i en liste):
