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.