Webdesign 101 » CSS » Formatering af HTML-lister

Listers listepunktsmarkører (Markers)

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.


Eksempel 4:

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.


Eksempel 5:

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;
  }
  

Eksempel 6:

Ø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  


Eksempel 7:

Ø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;
  }
  

Eksempel 8:

Ø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.