Lister med HTML



Lister generelt

Der er generelt to typer af lister, ordnede lister og ikke-ordnede lister. De ordnede lister er dem med 1, 2, 3, osv. og de ikke-ordnede lister er dem med bullets af forskellig art, f.eks. •

Tags for ordnede og ikke-ordnede lister er hhv. <OL> (ordered list) og <UL> (un-ordered list). De enkelte linier i listerne laver man med tag'en <LI> (list item). Der er i sagens natur en række attributter til disse tags, som kan hjælpe med at gøre ens lister lidt mere varierede.


Ordnede lister, typografien

De ordnede lister er listerne med punkterne 1, 2, 3, etc., eller a, b, c, etc.

En standard ordnet liste med to punkter vil som kode se således ud:

<OL>
<LI>Her er det første punkt</LI>
<LI>Her er det andet punkt</LI>
</OL>


På siden, når den vises, ser det således ud:

  1. Her er det første punkt
  2. Her er det andet punkt


Bemærk, at det ikke er nødvendigt at bruge <BR> efter hvert list item.

Default-setting for OL-tag'en er arabiske tal, dvs. 1, 2, 3... Det kan man ændre. Dette gøres for de flestes vedkommende med attributten TYPE, og der er seks at vælge mellem:

VærdiEffekt
noneDer vises ingen nummerering.
1Arabiske tal (1, 2, 3, 4...), som er default-værdien.
aAlfabetisk ordnet med minuskler/lowercase (a, b, c, d...)
AAlfabetisk ordnet med versaler/uppercase (A, B, C, D...)
iRomertal med minuskler/lowercase (i, ii, iii, iv...)
IRomertal med versaler/uppercase (I, II, III, IV...)

Skal man bruge andet, skal man bruge STYLE og list-style. Det bliver gennemgået lidt længere nede.

Hvis man således vil have en ordnet liste med romertal i uppercase bliver koden <OL TYPE="I">, så ser det således ud:

  1. Her er det første punkt
  2. Her er det andet punkt


Attributten TYPE er begrænset i sine muligheder, men for den almindelige bruger dækker den fint programmeringsbehovet og er nem at bruge. Skal man lave mere avancerede ting, skal man bruge attributten STYLE og variablen list-style-type. Hvis vi starter med dem vi lige har gennemgået i det ovenstående:

VærdiEffekt
noneDer vises ingen nummerering.
decimalArabiske tal (1, 2, 3, 4...), som er default-værdien.
lower-alphaAlfabetisk ordnet med minuskler/lowercase (a, b, c, d...)
upper-alphaAlfabetisk ordnet med versaler/uppercase (A, B, C, D...)
lower-romanRomertal med minuskler/lowercase (i, ii, iii, iv...)
upper-romanRomertal med versaler/uppercase (I, II, III, IV...)

Ud over disse er der flg. jeg har fundet:

VærdiEffekt
decimal-leading-zeroTallene 1 til 9 vises som 01, 02, 03, 04...
lower-greekAlfabetisk ordnet med græske minuskler/lowercase (α, β, γ, δ...)
hebrewAlfabetisk ordnet med hebræiske bogstaver (א, ב, ג, ד...)
armenianAlfabetisk ordnet med armenske bogstaver
cjk-ideographicAlfabetisk ordnet med ideografisk nummerering (kinesiske tal)
georgianAlfabetisk ordnet med traditionel georgisk nummerering
hiraganaAlfabetisk ordnet med traditionel hiragana-nummerering
hiragana-irohaAlfabetisk ordnet med traditionel hiragana-iroha-nummerering
katakanaAlfabetisk ordnet med traditionel katakana-nummerering
katakana-irohaAlfabetisk ordnet med traditionel katakana-iroha-nummerering
inheritAlfabetisk ordnet med samme nummerering som parent-elementet (kun for underinddelinger)

Vær opmærsom på, at ikke alle vaiabler fungerer på alle browsere.

Man kan således, hvis man skulle have behovet, lave en ordnet liste med armenske bogstaver ved STYLE="list-style-type:armenian". Resultatet ser således ud:

  1. Her er det første punkt
  2. Her er det andet punkt


Ordnede lister, værdien

Default-værdien for starttallet i en ordnet liste er 1, men dette kan også ændres efter behov. Dette gøre med attributten VALUE, og den skal på LI-tag'en. Vil man f.eks. gerne starte fra 10, bliver det således til <LI VALUE="10">, så ser det således ud:

  1. Her er det første punkt
  2. Her er det andet punkt


Der er ikke noget i vejen for at starte med et negativt tal, f.eks. -1, så ser det således ud:

  1. Her er det første punkt
  2. Her er det andet punkt


Ligeledes kan kan springe over tal ved at sætte VALUE på andet end den første LI-tag, f.eks. punkt 2 lavet om til punkt 5:

  1. Her er det første punkt
  2. Her er det femte punkt på plads nr. 2


Bullet lists/Ikke-ordnede lister, standardinstillinger

De ikke-ordnede lister er listerne med bullet points, f.eks. • eller -,i daglig tale bullet lists.

En standard bullet list med to punkter vil som kode se således ud:

<UL>
<LI>Her er det første punkt</LI>
<LI>Her er det andet punkt</LI>
</UL>


På siden, når den vises, ser det således ud:

  • Her er det første punkt
  • Her er det andet punkt


Bemærk, at det ikke er nødvendigt at bruge <BR> efter hvert list item.

Når man laver underinddelinger på sin bullet list, vil tag'en selv formatere underinddelingerne. De fleste browsere vil automatisk bruge en anden bullet til underinddeling, end den der er i første niveau, men hvis man vil sikre sig et ens udseende over alle browsere, skal man specifikt definiere hvilken bullet der skal anvendes (kommer lidt længere nede). En standard bullet list med to punkter, hvoraf den første har en underinddeling på to bullets, vil som kode se således ud:

<UL>
<LI>Her er det første punkt
<UL>
<LI>Her er det første underpunkt</LI>
<LI>Her er det andet underpunkt</LI>
</UL>
</LI>
<LI>Her er det andet punkt</LI>
</UL>


På siden, når den vises, ser det således ud:

  • Her er det første punkt
    • Her er det første underpunkt
    • Her er det andet underpunkt
  • Her er det andet punkt


Dette kan selvsagt fortsættes med under-underinddelinger osv.


Formatering af bullet lists

Formateringen af underinddelingerne gøres med en STYLE="" og en af flg. variabler:

VærdiEffekt
list-styleSpecificerer alle værdierne for en liste i én deklarering.
list-style-imageSpecificerer et billede som markøren.
list-style-positionSpecificerer om listens markører skal være inden for eller uden for tekstblokken.
list-style-typeSpecificerer typen af markør.

Variablen 'list-style' er en kombinationsvariabel, hvor man kan kombinere 'list-style-image' og 'list-style-position' eller 'list-style-type' og 'list-style-position', i stedet for at specificere de enkelte variabler, f.eks. STYLE="list-style:square outside" i stedet for STYLE="list-style-type:square; list-style-position:outside". En pragmatisk kodning, som jeg selv bruger, er 'list-style' ved typer, fordi det er den jeg bruger mest, og de specifikke -position og -image til resten, af hensyn til overskueligheden af koden.

List-style-type er den mest almindeligt anvendte af formateringerne (forkortet til list-style), antageligt fordi vi som forfattere er lidt kedelige mht. typografi, og standardværdierne til fulde dækker vores behov for overskuelighed af bullet lists. Det kunne f.eks. være en sort firkant vi har brug for:

<UL STYLE="list-style-type:square;">
<LI>Her er det første punkt</LI>
<LI>Her er det andet punkt</LI>
</UL>


Dette ser således ud:

  • Her er det første punkt
  • Her er det andet punkt

Til list-style-type har man flg. muligheder:

VærdiEffekt
circleMarkøren er en cirkel.
discMarkøren er en udfyldt cirkel. Dette er default værdien for første niveau af en <UL>.
noneIngen markør vises.
squareMarkøren er en kvadrat.


Hvis man i stedet for de almindelige bullets gerne vil bruge grafiske elementer, f.eks. smileys eller flag, kan man gøre dette ved at anvende list-style-image. Hvis vi f.eks. gerne vil have en bullet list med små dannebrogsflag, filen DK.gif i directoriet Graphics, ser koden således ud:

<UL STYLE="list-style-image:url('Graphics/DK.gif')">
<LI>Her er det første punkt</LI>
<LI>Her er det andet punkt</LI>
</UL>


Dette ser således ud:

  • Her er det første punkt
  • Her er det andet punkt


List-style-position definerer om en bullet er inden for eller uden for tekstblokken til ens LI. Der er to muligheder: inside og outside, med den tredie der hedder inherit hvor man nedarver den af de to værdier, som parent elementet har. Default er outside. Hvis vi tager vores liste med flagene fra før og definerer positionen til inside ser koden således ud:

<UL STYLE="list-style-position:inside; list-style-image:url('Graphics/DK.gif')">
<LI>Her er det første punkt</LI>
<LI>Her er det andet punkt</LI>
</UL>


På siden ser det således ud:

  • Her er det første punkt
  • Her er det andet punkt

Så længe man kun har den ene linje på hver bullet, er den eneste effekt man ser, at indrykket bliver større. Den reelle effekt bliver tydelige, hvis man har flere linjer:

Ved "list-style-position:outside":
  • Punkt 1, linje 1
    Punkt 1, linje 2
  • Punkt 2, linje 1
    Punkt 2, linje 2

Ved "list-style-position:inside":
  • Punkt 1, linje 1
    Punkt 1, linje 2
  • Punkt 2, linje 1
    Punkt 2, linje 2


Bullet lists/Ikke-ordnede lister, andre typer bullets

Hvis man synes at det er lidt kedeligt med de muligheder man har med standard HTML, kan man, så at sige, gå uden for reservatet og selv definere sine bullets. Det er en lidt omstændig proces, men effekten er ret god.

Det hedder sig, at metoden skulle kunne bruges til alle typer af specielle karakterer, men indtil videre synes metoden kun at fungere ordentligt for karakterer der ikke skal skrives med koder. Man skal med andre ord kunne skrive et tegn som f.eks. ♔ direkte, uden at være nødt til at bruge koden &#9812;. Man kan her med fordel bruge filformatet UTF-8 og sætte CHARSET="UTF-8", så man har det størst mulige udvalg af specielle karakterer til rådighed.

Metoden består af to dele. Det første man skal benytte sig af er en selector der hedder 'before' til sit list item. For at begrænse effekten til de list items hvor jeg ønsker at anvende dem, specificerer jeg en klasse der hedder SpecialBullet. Syntaxen ser således ud:


UL LI.SpecialBullet:before
{
content:"» ";
margin-left: -12px;
}

Dette skal indsættes i sidens style sheet.

Denne linje "UL LI.SpecialBullet" betyder list items (LI) i uordnede lister (UL) med klassen SpecialBullet (CLASS="SpecialBullet") skal starte med '» ' (tegnet » + et mellemrum). For at linjer ikke skal se ud som ved "list-style-position:inside" oven over, skal den første linje lige trækkes lidt til venstre. Dette gøres ved margin-left. Værdien af margin-left afhænger af den bullet man anvender. Til '» ' skal værdien være -12px.

I selve listen skal man gøre to ting: man specificerer, at listen ikke skal bruge bullets med 'list-style:none' i UL-tag'en, og sætter CLASS="SpecialBullet" på LI-tags'ene. Koden kommer til at se således ud:


<UL STYLE="list-style:none">
<LI CLASS="SpecialBullet">Punkt 1, linje 1<BR>Punkt 1, linje 2</LI>
<LI CLASS="SpecialBullet">Punkt 2, linje 1<BR>Punkt 2, linje 2</LI>
</UL>


Resultatet på siden bliver så:

  • Punkt 1, linje 1
    Punkt 1, linje 2
  • Punkt 2, linje 1
    Punkt 2, linje 2




Afstande mellem bullets og lister

Listerne har en indbygget afstand, svarende til afstanden mellem tekstafsnit. Hvis man indsætter underpunkter, vil disse ligeledes have en fast afstand. Dette kan gå ud over læsevenligheden af siden ved meget tekst ved hver bullet, fordi det bliver en meget massiv klods af tekst. Her vil man derfor ofte gerne løsne lidt op på afstandene.

Hvis vi ser på en liste med meget tekst som denne, hvor der er standardopsætning:

  • Her er det første punkt, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    • Her er det første underpunkt, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    • Her er det andet underpunkt, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  • Her er det andet punkt, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  • Her er det tredje punkt, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  • Her er det fjerde punkt, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla


så er læsevenligheden stærkt begrænset. Det man kan gøre, er at give hvert LI en lidt større margin i bunden. Hvis vi nu sætter margin-bottom til 5px, så ser det således ud:

<UL>
<LI STYLE="margin-bottom:5px">Her er det første punkt, bla...
<UL>
<LI STYLE="margin-bottom:5px">Her er det første underpunkt, bla...</LI>
<LI STYLE="margin-bottom:5px">Her er det andet underpunkt, bla...</LI>
</UL>
</LI>
<LI STYLE="margin-bottom:5px">Her er det andet punkt, bla...</LI>
<LI STYLE="margin-bottom:5px">Her er det tredje punkt, bla...</LI>
<LI STYLE="margin-bottom:5px">Her er det fjerde punkt, bla...</LI>
</UL>


På siden, når den vises, ser det således ud:

  • Her er det første punkt, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    • Her er det første underpunkt, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    • Her er det andet underpunkt, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  • Her er det andet punkt, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  • Her er det tredje punkt, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  • Her er det fjerde punkt, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla


Hvilken afstand man vælger er en smagssag. Hvis man får en bedre læseoplevelse ved at have en anden afstand på underpunkterne, gør man bare dette.


Det hænder, at man gerne vil have ekstra afstand på blokken af underpunkter, for at gøre teksten lettere at overskue. Man kan fristes til at lægge et break ind mellem LI-tag'ene, sådan her:

<LI STYLE="margin-bottom:5px">Her er det andet underpunkt, bla...</LI>
</UL>
</LI><BR>
<LI STYLE="margin-bottom:5px">Her er det andet punkt, bla...</LI>


Dette er imidlertid en skidt idé. De fleste browsere kan godt læse koden og afvikle den korrekt, men ikke dem alle, og koden kan ikke valideres, så man risikerer at søgemaskinerne registrerer siden som dårlig, så man bliver begravet på side 100 i søgningerne.

Måden man gør det på, er ved at lave en margin-bottom på UL-tag'en til underpunkterne, sådan her:

<UL>
<LI STYLE="margin-bottom:5px">Her er det første punkt, bla...
<UL STYLE="margin-bottom:15px">
<LI STYLE="margin-bottom:5px">Her er det første underpunkt, bla...</LI>
<LI STYLE="margin-bottom:5px">Her er det andet underpunkt, bla...</LI>
</UL>
</LI>
<LI STYLE="margin-bottom:5px">Her er det andet punkt, bla...</LI>
<LI STYLE="margin-bottom:5px">Her er det tredje punkt, bla...</LI>
<LI STYLE="margin-bottom:5px">Her er det fjerde punkt, bla...</LI>
</UL>


På siden, når den vises, ser det således ud:

  • Her er det første punkt, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    • Her er det første underpunkt, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    • Her er det andet underpunkt, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  • Her er det andet punkt, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  • Her er det tredje punkt, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  • Her er det fjerde punkt, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla


Principielt kunne man også sætte margin-bottom på andet underpunkt til 15px:

<UL>
<LI STYLE="margin-bottom:5px">Her er det første punkt, bla...
<UL>
<LI STYLE="margin-bottom:5px">Her er det første underpunkt, bla...</LI>
<LI STYLE="margin-bottom:15px">Her er det andet underpunkt, bla...</LI>
</UL>
</LI>
<LI STYLE="margin-bottom:5px">Her er det andet punkt, bla...</LI>
<LI STYLE="margin-bottom:5px">Her er det tredje punkt, bla...</LI>
<LI STYLE="margin-bottom:5px">Her er det fjerde punkt, bla...</LI>
</UL>


Det anbefales ikke at bruge denne løsning. Man vil, for det første, med layout som dette ikke lave en STYLE på hver eneste LI-tag, men specificere margin-bottom for både LI og UL-tag i et stylesheet, evt. som en CLASS, hvis man kører med flere forskellige layout på listerne man bruger. Skal man til at tilføje nye underpunkter, eller til at lave underpunkter til andre af hovedpunkterne, bliver det også unødigt besværligt med denne løsning. Det kan gå med en enkelt side eller tre, men man kommer hurtigt op på mange sider på et site, og så er det, at man har brug for de simple og robuste løsninger på ens kode, så man holder mængden af fejl på et absolut minimum.

HVIS man absolut vil bruge en løsning med et break, skal man have dette lige før </LI>, på denne måde:

<LI STYLE="margin-bottom:5px">Her er det andet underpunkt, bla...</LI>
</UL>
<BR></LI>
<LI STYLE="margin-bottom:5px">Her er det andet punkt, bla...</LI>

MEN, det er en skidt løsning, for man kan for det første ikke justere afstanden, så det giver den bedste læseoplevelse, og det skal rettes manuelt, alle steder, hvis man finder ud af, at man vil have det til at se anderledes ud, i stedet for bare at justere en variabel i sit stylesheet, og så ser det rigtigt ud alle steder.