Jag bloggar numera på http://blog.dileno.com ».

Att göra attraktivare listor

en CSS-artikel av Martin S., publicerad den 2 maj 2005
Normalt sett när man jobbar med listor, så hamnar en punktsymbol eller siffersymbol framför listelementen i listan. Ibland nöjer man sig med det, ibland inte. Vid de tillfällen där man inte nöjer sig med denna formatering kan man använda sig av egenskapen list-style-type i CSS, eller till och med göra en egen listpunktsymbol. Jag visar dig hur.

Att använda list-style-type


list-style-type är en CSS-egenskap till de typer av listor som finns i xhtml. Dessa listtyper är fem till antalet, men jag kommer i denna artikel enbart att ta upp de tre mest använda listtyperna; ul (oordnad lista), ol (ordnad lista) och dl (definitionslista). Se artikeln Att använda rätt lista till rätt ändamål för mer om listor.

Som default visar dagens webbläsare en punkt framför en oordnad listas listelement, en siffra framför en ordnad listas listelement och enbart ett indrag framför en definitionslistas listbeskrivningselement. Detta kan man ändra på genom att använda sig av egenskapen list-style-type för varje lista. Har du skapat en oordnad lista och vill formatera listpunkterna i den, skriver du en regel för det i CSS:

ul { list-style-type: lower-alpha; }
Denna regel säger att listelementen i listan ska ha en listpunkt som är av typen liten bokstav.

lower-alpha

Vill man ha en vanlig cirkel så skriver man så här:

ul { list-style-type: circle; }
Listan ser då ut enligt nedan:

circle

För att använda andra listpunktsymboler så får du ge list-style-type-egenskapen ett annat värde. Här är en tabell över listpunktsymboler man kan använda sig av:

Tabell: listpunktssymboler
NyckelordExempel
discfylld cirkel (den punktsymbol som används om man inte anger egen formatering)
circlecirkel, icke-fylld
squarekvadrat
decimal1 2 3 4 5.. siffra
upper-alphaA B C D E.. stora bokstäver (versaler)
lower-alphaa b c d e.. små bokstäver (gemener)
upper-romanI II III IV V.. romerska siffror (stora bokstäver)
lower-romani ii iii iv v.. romerska siffror (små bokstäver)
noneingen symbol alls


Vill du till exempel inte ha någon symbol före dina listelement så sätter du list-style-type till none.

Margin och padding


När man jobbar med definitionslistor så hamnar definitionsbeskrivningen alltid längre in i sidan än definitionstermen. Detta kan avhjälpas genom att man använder sig av margin och padding. (för en introduktion i margin och padding, se CSS-artikeln Margin och padding – marginaler och fyllnad)

Ett kodexempel på hur man kan få en definitionslistas definitionsbeskrivning att ha samma indrag som definitionstermen. Först har vi definitionslistan:

<dl>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>xhtml</dt>
<dd>eXtensible HyperText Markup Language</dd>
<dt>XML</dt>
<dd>eXtensible Markup Language</dd>
</dl>

Om vi inte har gett en definitionslista en regel, så kommer koden ovan att generera följande lista:

oformatterad definitionslista

För att få bort indraget på varje beskrivning, så lägger vi till en regel för definitionslistor:

dd { margin: 0; padding-left: 8px; }
Nu kommer listan att se ut så här:

formaterad definitionslista

Som du ser är indraget mycket mindre nu. Hade vi satt padding till 0 så hade det inte varit något indrag över huvud taget. I och med att vi använder oss av egenskapen padding-left talar vi om hur långt från vänster definitionsbeskrivningen ska komma i listan. Med margin talar vi om att vi inte ska ha nåt avstånd till omkringliggande objekt.

Att använda bilder som punktsymboler


Vill man använda sig av en punktsymbol, fast inte en som redan finns inbyggd, så kan man skapa sin egen. Jag gjorde min egen punkt, som jag lade in som bakgrundsbild till listelementen i min lista. Så här:

li {
background: url(list_background.gif) no-repeat 0 50%;
margin: 2px;
padding-left: 16px; }

I background-egenskapen anger jag en url till bilden. För att bilden bara ska visas en gång anger jag värdet no-repeat. Annars kommer bilden att visas över hela listelement i höjd och bredd. 0 betyder att bakgrundsbilden ska hamna 0 pixlar från vänster, och 50% betyder att bilden ska vara centrerad i höjd jämfört med texten i listelementet. Så här blev resultatet:

lista med bakgrundsbild som punktsymbol

Betydligt mer uppfräschande än alla inbyggda listsymboler, tycker jag. Vill du använda en bakgrundsbild till ett element i en definitionslista så lägger du bara till dt eller dd i CSS-regeln:

li, dt {
/* här kommer regeln */ }

När man använder sig av definitionslistor och bakgrundsbilder som listsymboler så får man vara uppmärksam på vilken margin och padding man anger. Se kodexempel nedan:

dd { background: url(list_background.gif) no-repeat 0 50%;
padding-left: 16px;
margin: 2px; }

Denna CSS-regel ger en lista där punktsymbolen inte har ett indrag i listelementen.

definitionslista med bakgrundsbild som punktsymbol

Att däremot ändra på vänsterindraget för listsymbolen och padding-left för listelementen ger en mer överskådlig lista.

dd { background: url(list_background.gif) no-repeat 10px 50%;
padding-left: 26px;
margin: 2px; }

Definitionslistan får då detta utseende:

definitionslista med indragen bakgrundsbild som punktsymbol

Slutligen


Att kunna formatera sina listor precis som man vill ha dem är superbt. Fallgroparna däremot kan vara att man överanvänder formatering av listorna, och då tänker jag främst på användningen av bakgrundsbilder som listsymboler. Generellt sett bör man hålla sig på en grafisk nivå som inte är alltför svår att överskåda. Att använda olika listsymboler för samma typ av lista på olika ställen på en sajt är aldrig att föredra – i alla fall inte i en större utsträckning. Det finns exempel jag sett som inte alls varit bra.

Annars är mina råd att testa dig fram! En speciell lista med speciella listpunkter kan se bra ut på ett ställe, men inte på ett annat. Då är det bra att ha möjligheten att formatera sina listor.