Webdesign 101 » CSS » Formatering af HTML-lister

CSS-formatering af HTML-lister

Formatering af lister

CSS-formatering af lister
 Listers listepunkter
 Vandrette/inline lister
 Lister som menuelementer
 Lister som logiske stier
 Lister som CSS-rollovers

Referencer vedr. emnet

Disse artikler er inspireret af gazingus.org og Mark Newhouse's artikel "Taming Lists" på alistapart.com.

HTML lister, især ordnede og uordnede lister, bruges ikke nær nok, i betragtning af at det er en eminent måde at strukturere på.

F. eks. er en menu jo en liste over links, men hvor ofte giver menuen struktur som en liste?

I en lille serie artikler giver jeg eksempler på, hvorledes du kan kontrollere listers udseende ved hjælp af stylesheets - ja, endog lave vandrette lister!

  • Listepunkt 1
  • Listepunkt 2
  • Listepunkt 3
  • Listepunkt 4
  • Listepunkt 5 er lidt længere end de øvrige

Eksempel 1:

Til venstre ser du en ganske almindelig uordnet liste, indeholdt i en CSS-kasse. Stylesheet for kassen er:

#liste1 {
border:1px solid black;
margin:2em;
width:12em;
padding:5px;
}

Der er ikke nogen særlig formatering af listen.

  • Listepunkt 1
  • Listepunkt 2
  • Listepunkt 3
  • Listepunkt 4
  • Listepunkt 5 er lidt længere end de øvrige

Eksempel 2:

Denne liste er formateret med margin-left:0 og padding-left:0. Bemærk, hvorledes listepunkterne forsvinder (I Internet Explorer - i Netscape, Mozilla og Opera er de synlige uden for kassen). Kassen, hvori listen er sat ind, er den samme som i det første eksempel, men listen formateres af følgende stylesheet:

#liste2 ul {
margin-left:0;
padding-left:0;
}
  • Listepunkt 1
  • Listepunkt 2
  • Listepunkt 3
  • Listepunkt 4
  • Listepunkt 5 er lidt længere end de øvrige

Eksempel 3:

Ønsker du at have synlige listepunkter i venstre margin, skal du tilføje en margin-left eller en padding-left på 1em.

#liste3 ul {
margin-left:1em;
padding-left:0;
}

Senest opdateret: 9. nov. 2002.