Vad du kan göra med listor i CSS
Listor, att lista en viss sorts text, är mycket användbart när man skriver webbsidor. Förutom att de kan se ut som helt traditionella punkt- eller nummerlistor, ska de också användas när du listar länkar och gör dina menyer och navigeringsfält.
Här går jag igenom hur listor kodas och vilka möjligheter som finns att formge listor med CSS. Vertikala som horisontella.
Punktlistor och numrerade listor
Punktlistan är väl må hända den mest traditionella listan, där ordningen du skriver i är av mindre betydelse. Denna listtyp kallas också i (X)HTML för unordered list och markeras med taggen <ul>.
<ul> <li>Listelement 1</li> <li>Listelement 2</li> </ul>
Den enda skillnaden rent kodmässigt mellan punktlistan och den numrerade listan är att <ul> i den numrerade listan byts ut mot <ol>, ordered list. Den ordnade listan där innehållets ordning har viss betydelse.
Nästlade listor
Att nästla listor, det vill säga ha listor inuti listor så att t.ex. en <ul> kommer efter en <li>, är bara tillåtet i XHTML Transitional. Prova gärna om du lagt in andra element i listorna att validera din kod, så att du kan vara säker på att du skriver rätt och standardmässigt.
Du kan däremot lägga in en punkt- eller nummerlista i en definitionslista. Definitionslistan används för att lista ett antal ord eller fraser, där du också förklarar eller berättar mer om dessa. Listmarkörerna kommer på så sätt i par om en term (<dt>) och en förklaring (<dd>). Hela listan markeras med <dl>.
Attribut till listor
De flesta av de attribut som tidigare användes till listor är numera deprecated, d.v.s. avskrivna från nuvarande webbstandard. Du får dock använda attributet start i <ol> för att tala om med vilket nummer listan ska starta. Användbart om du skriver lite text mellan två listor som egentligen hör ihop.
Formge listor
Med CSS finns flera möjligheter vad gäller hur numrerade listor ska numreras, eller hur listmarkörerna (punkterna) i en punktlista ska se ut. Egenskapen heter list-style-type och används för både ul och ol.
Några vanliga värden till list-style-type för numrerade listor är
decimal - förinställt värde som ger vanliga siffror
decimal-leading-zero – siffran inleds med nolla
lower-roman – romerska siffror i gemener
upper-roman – romerska siffror med versaler
lower-alpha – bokstäver gemena
upper-alpha – bokstäver versala
none – ingen listmarkör (om du vill att den inte ärvs)
För punktlistorna väljer du mellan listmarkörena
disc – fylld cirkel
circle – tom cirkel
square – fyrkant
Punktlistor kan dessutom ha en valfri bild som listmarkör. Då skriver du list-style-image:url() och anger adressen till bilden inom parenteserna. Tänk på att en listmarkörsbild inte ska vara så jättestor. Oftast räcker det med högst 10 x 10 pixlar.
Horisontella listor i navigeringsfält
Om du vill göra ett navigeringsfält som ligger horisontellt, går det ändå mycket bra att använda en helt vanlig punktlista. Med CSS lägger du ut listan på en rad så att den inte längre ser ut som en traditionell lista.
När du ger deklarationen display:inline till li, läggs listelementen på en och samma rad istället för under varandra som är det förinställda. Du får också rätt vertikal justering på listan om du använder line-height (radhöjd) med samma värde som ditt navigeringsfält är högt. Mellanrum mellan listelementen styrs med margin.
Läs mer om listor
2009-07-20 (12:30)
Webbdesign och webbutveckling
Dela med dig: