Lister – HTML & CSS – Del 1

by admin on June 20, 2011 · 0 comments

Lister kan være så mangt: Handlelister, matoppskrifter, lister over ting og tang, oppramsinger, de ti beste eller værste av noe. Tusen forskjellige ting. Derfor brukes lister mye på nettsteder og i blogger. Og derfor kan det være nyttig å vite litt om hva en kan gjøre med dem og hvordan ting kan gjøres. I denne posten ser jeg på vertikale lister (lister der elementene ligger under hverandre).

La oss starte med en enkel liste og se hvordan den blir. Vi bruker html-kodene <ul> og <li>. “ul” står for “unordered list og “li” for element i listen. Hele koden ser slik ut:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Og det gir:

  • Item 1
  • Item 2
  • Item 3

Jeg har ikke gjort noe med denne listen – ikke gitt noen stil (CSS), bare ren HTML. Måten den ser ut på skjermen på avhenger av hva som er lagt inn av stil-elementer på denne bloggen (i stilfilen med CSS-definisjoner) og av hvordan nettleseren du presenterer lister på (default-innstillingene). Utseendet vil variere fra nettsted til nettsted og fra nettleser til nettleser.

Elementene (item) har en firkant foran seg. Det er fordi bloggen har en definisjon av liste som bruker “list-style: square”. Om jeg endrer det til “list-style:circle”, altså bruker følgende HTML, ser vi at det blir annerledes:

<ul style="list-style:circle">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li></ul>
  • Item 1
  • Item 2
  • Item 3

Om jeg brukte en liste av type <ol> (ordered list) i stedet for “ul” (unordered list), med følgende HTML, får vi en nummerert liste:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
  1. Item 1
  2. Item 2
  3. Item 3

Det er enkelt å legge underpunkter inn i en liste slik at vi får en liste med to nivåer. La oss bruke små sirkler foran underpunktene i listen og rykke listen lenger inn mot høyre. For å lage en underliste under punkt to setter jeg inn en ny <ul> der med nye <ul>-elementer. Slik ser koden ut:

<ul style="margin-left:60px">
  <li>Item 1</li>
  <li>Item 2
    <ul style="list-style:circle">
      <li>Item 2.1</li>
      <li>Item 2.2</li>
      <li>Item 2.3</li>
   </ul>
   </li>
 <li>Item 3</li></ul>

Jeg har brukt style=”margin-left:60px” i den første <ul>-en for å flytte listen mot høyre og “list-style:circle” for å bruke rundinger som markeringer i underlisten under punkt 2:

  • Item 1
  • Item 2
    • Item 2.1
    • Item 2.2
    • Item 2.3
  • Item 3

Og det var det. I neste post er det mer om vertikale lister. Her er artiklene om lister (i en liste):

Tagged as: , , ,

Leave a Comment