Lister i HTML og CSS
I denne artikel kan du lære at lave- og ændre udseende på HTML lister ved brug af CSS.
Edited: 2017-09-18 21:18
Sorterede og Usorterede lister bliver lavet med HTML elementerne ol (sorteret liste) og ul (usorteret liste). Normalt vil en ol liste blive vist med tal foran hver ting på listen, hvorimod tingene på en ul liste vil blive vist med en prik foran.
På Dansk er HTML lister også blevet betegnet som ordnede og uordnede.
En liste i HTML bliver på Dansk også kaldt en punktopstilling. For at lave en punktopstilling med HTML, skal man først afgøre hvilken liste-type som giver mest mening at bruge. Hvis rækkefølgen på tingene i listen er tilfældig eller ligegyldig, vil det værre mest korrekt at bruge ul listen. Omvendt, hvis rækkefølgen er afgørrende, bør man benytte ol.
En liste bliver lavet ved hjælp af to elementer. Det første er selve parent elementet, som bestemmer typen for listen, og det næste er selve list-item (li) elementet. Hver ting på en liste skal altså være placeret i et li element.
Sorteret liste:
<ol> <li>Mælk</li> <li>Æg</li> <li>Smør</li> </ol>
Usorteret liste:
<ul> <li>Mælk</li> <li>Æg</li> <li>Smør</li> </ul>
CSS kode:
ol, ul {
margin:0;padding:0;
margin-bottom: 1em;
list-style-type:none;
}
li {margin-left: 2em;}
Se eksempel her: Test af Lister i HTML og CSS
Ændring af udseende på lister med CSS
For at ændre udseende på listerne vil man typisk fjerne den eksisterende margin og padding, før man begynder at ændre på listerne med sin egen CSS.
Mange HTML elementer har en såkaldt default indstilling, og for lister gælder det, at de har en default margin. Der er dog nogle browsere som bruger padding i stedet, og derfor vælger man altså at fjerne begge dele, inden man tilføjer sine egne regler. Det kan man gøre som vist i eksemplet nedenfor:
ol, ul {margin:0;padding:0;}
Når vi adskiller med komma, kan vi angive reglerne for både ol og ul på samme tid.
Husk. Det er altså vigtigt, at man fjerner både margin og padding på listerne, da de ellers ikke vil se ens ud i alle browsere.
Vi kan så angive vores egen CSS efterfølgende:
ol, ul {
margin-bottom: 1em;
}
li {margin-left: 2em;}
Når man tilføjer sin egen CSS kode til lister, så er det vigtigt, at man giver nok plads til eventuelle punkter eller tal på listen. Ca 2em i margin-left burde være nok. Man kan også ændre default indstillingen for punkterne, hvilket faktisk også ændre liste-typen.
Ved at angive en list-style-type:none; for listen i CSS, vil man fjerne eventuelle punkter og tal foran hver list-item helt. Vi har stadig at gøre med en liste, men punkterne vil ikke længere blive vist. Det kan vi gøre som vist nedenfor:
ol {list-style-type:none;}
Navigation menu med lister
Det er meget normalt, at man laver en navigations menu ved hjælp af lister. Det gør man for at adskille hvert link, med mere end bare et linjeskift eller mellemrum. Skærmoplæsere har nemlig noget nemmere ved at præsentere en liste af links for en bruger, hvorimod det ville være noget kludder hvis linksne bare var placeret frit-flyvende i et parent element.
En navigations menu lavet med en liste kan kodes på følgende måde:
<nav> <ol> <li>Om os</li> <li>Privat Politik</li> <li>Kontakt</li> </ol> </nav>
Kombinationen af at bruge en liste sammen med nav er begge dele med til, at gøre din side mere tilgængelig for brugere som benytter sig af skærmoplæsere. Det kan også være en god idé, at have en overskrift til en liste af links. Men dette er dog ikke strength nødvendigt.
Fortæl os hvad du tænker: