Med CSS har vi fået muligheden for at sætte en grafik ind som listepunkt, i stedet for bolle, cirkel og firkant, som er det normale, vi kan lave i en uordnet liste med HTML.
Her er indsat en smiley-grafik i stedet for den bolle, der normalt ville blive vist i en almindelig uordnet liste. Syntaksen for dette er:
#liste4 ul {
list-style-image:url(smiley.gif);
list-style-type:disc;
}
list-style-type:disc medtages for at angive, hvilken bullet, der skal vises, dersom browseren ikke understøtter denne del af CSS-specifikationen.
Denne liste er formateret med list-style-position:inside; hvilket medfører, at grafikken (eller listepunktet, hvis der ikke er nogen grafik) placeres inde i den blok, der udgøres af li-markøren. Bemærk, hvorledes den venstre margin af listen derved øges betragteligt.
#liste5 ul {
list-style-image:url(smiley.gif);
list-style-type:disc;
list-style-position:inside;
}
Ønsker du at reducere den rigelige venstre margin, du fik i eksempel 5, må du eksplicit sætte en venstre margin:
#liste6 ul {
list-style-image:url(smiley.gif);
list-style-type:disc;
list-style-position:inside;
margin-left:1em;
}
Bemærk i dette eksempel også, at jeg har øget afstanden mellem grafikken og listepunktets tekst. Det er gjort ved at indsætte et
Ønsker du en liste uden bullets kan du sætte list-style:none, der ophæver alle list-style formregler. Men bemærk, at der fortsat er tale om en HTML-liste, når du betragter dokumentets struktur:
#liste7 ul {
margin-left:0;
padding-left:1em;
text-indent:-1em;
}
#liste7 ul li {
list-style:none;
}
Ønsker du at din almindelige liste skal have et andet HTML-listepunkt end disc, circle eller square, skal du først fjerne HTML-punktlistemarkeringen, og dernæst indsætte HTML-tegnækvivalenten for det tegn, du ønsker i stedet. I eksemplet til venstre er valgt dobbeltkrydset #, hvis HTML-ækvivalent er #. Det enkelte listepunkt kommer herefter til at se således ud:
<li># Listepunkt 1</li>
... mens listeformateringen er mage til eksempel 7.
Senest opdateret: 9. nov. 2002.
