Lister
CSS list egenskaber gør at du kan:
-
Sætte forskellige markører for ordnede lister
-
Sætte forskellige markører for uordnede lister
-
Sætte et billede på som list markør
List
I HTML er der to typer lister
-
uordnede lister - de enkelte elementer markeres med bullets <ul>
-
ordnede lister - de enkelte elementer markeres med tal eller bogstaver. <ol>
Forskellige list markører
list-style-type sætter, hvilken markør der skal bruges. Eksempel
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
Nogle af værdierne er for ordnede og andre for uordnede lister.
Værdier for uordnede lister
Værdi |
Beskrivelse |
---|
none |
Ingen markør |
disc |
Default. En bullet |
circle |
Markøren er en cirkel |
square |
Markøren er en firka |
Værdier for ordnede lister
Værdi |
Beskrivelse |
---|
armenian |
The marker is traditional Armenian numbering |
decimal |
The marker is a number |
decimal-leading-zero |
The marker is a number padded by initial zeros (01, 02, 03, etc.) |
georgian |
The marker is traditional Georgian numbering (an, ban, gan, etc.) |
lower-alpha |
The marker is lower-alpha (a, b, c, d, e, etc.) |
lower-greek |
The marker is lower-greek (alpha, beta, gamma, etc.) |
lower-latin |
The marker is lower-latin (a, b, c, d, e, etc.) |
lower-roman |
The marker is lower-roman (i, ii, iii, iv, v, etc.) |
upper-alpha |
The marker is upper-alpha (A, B, C, D, E, etc.) |
upper-latin |
The marker is upper-latin (A, B, C, D, E, etc.) |
upper-roman |
The marker is upper-roman (I, II, III, IV, V, etc.) |
Et billede som list markørt
list-style-image bruges til at definere et billede til listen:
ul { list-style-image: url('sqpurple.gif');}
Ovenstående eksempel vil ikke se ens ud i alle browsere. IE og Opera vil vise billedet en smule højere end Firefox, Chrome og Safarii.
Nedenfor en løsning, der virker i alle browsere
Crossbrowser løsning
Det følgende skulle vise billeder på lister ens i alle browsere:
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
Forklaring på ovenstående
-
For ul:
-
Sætter list-style-type til none, så der slet ikke er nogle bullets på listen
-
Sætter både padding og margin to 0px (for cross-browser compatibility)
-
For li:
-
Sætter URL forbilledet og vister det én gang (no-repeat)
-
Placerer billedet korrekt (venstre 0px og ned 5px)
-
Placer teksten med padding-left
Alle CSS List Properties
The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).
Property |
Description |
Values |
CSS |
---|
list-style |
Sets all the properties for a list in one declaration | list-style-type
list-style-position
list-style-image
inherit |
1 |
list-style-image |
Specifies an image as the list-item marker |
URL
none
inherit |
1 |
list-style-position |
Specifies if the list-item markers should appear inside or outside the content flow |
inside
outside
inherit |
1 |
list-style-type |
Specifies the type of list-item marker |
none
disc
circle
square
decimal
decimal-leading-zero
armenian
georgian
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
lower-roman
upper-roman
inherit |
1 |