Lister – HTML & CSS – Del 3 – Lister i flere kolonner

by admin on June 24, 2011 · 0 comments

De to foregående innleggene handlet om enkle <ul><li>-lister. Den første viste hvordan HTML og CSS for slike lister ser ut, og det andre litt om hvordan en kan pynte vertikale lister slik at de ser penere ut og skiller seg ut.

I dette innlegget ser jeg på hvordan en kan lage lister i som har flere enn en kolonne. Slike lister er egentlig verken horisontale eller vertikale – de er begge deler.

Vi tar utgangspunkt i en litt lang liste, la oss si en med 12 “items”. En slik liste ser slik ut (jeg tar ikke med alle 12 elementene her):

  • Item 1
  • Item 2
  • …
  • Item 12

Det er to måter å gjøre om denne enkle vertikale listen til en liste i flere kolonner. Begge innebærer at vi bruker en såkalt “float”. Enten kan vi bruke “float” i <ul>-elementer og lage flere vertikale lister ved siden av hverandre, eller vi kan bruke “float” i <li>-elementene og lage en liste med flere kolonner.

Flere kolonner i lister – “floating” <ul>

Ved denne metoden brekker vi opp den lange listen i flere kortere og bruker “float:left” i <ul>-elementene for å få dem til å legge seg ved siden av hverandre. HMTL-en ser slik ut:

<ul class="list1">
<li><strong>Item 1</strong></li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ul class="list1">
<li><strong>Item 5</strong></li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
<ul class="list1">
<li><strong>Item 9</strong></li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul><div style="clear:both;"></div>

CSS-en som skal til for å få en liste i flere kolonner er ganske enkel:

.list1 {list-style:none; float:left; width:100px; padding-left:20px;}

Jeg bruker en <div> med “clear:both” fordi listen har “float”-elementer. Det gir følgende liste – legg merke til nummereringen av <li>-elementene:

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12

Avstanden til venstre marg bestemmes i “padding-left” og avstanden mellom listene med “width”. Listene kan selvsagt pyntes med annen font, eventuelt kan elementene øverst gis utheves slik jeg har gjort her, og så videre. Men dette er den metoden med “floating” <ul>-elementer.

Flere kolonner i lister – “floating” <li>

Denne gangen ser HTML-koden slik ut:

<ul class="list2">
<li><strong>Item 1</strong></li>
<li><strong>Item 2</strong></li>
<li><strong>Item 3</strong></li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul><div style="clear:both"></div>

Også CSS-en er litt annerledes:

.list2{ list-style:none; width:400px; }
.list2 li {float:left;width:100px;padding-left: 20px;}

Dette gir følgende liste (legge igjen merke til rekkefølgen på elementene):

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12

Når listen lages på denne måten flyter elementene over mot venstre (hver med en “width” på 100px pluss 20 px til “padding”. Stilen for “list2″ har en vidde på 400px, så etter 3 ganger 120 px, er det ikke plass til et fjerde element, og det går da til neste linje.

Om vi definerer vidden til for eksempel 490px, kan vi se hva som skjer:

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12

Nå kommer en fjerde kolonne til syne, rett og slett fordi det er gjort plass til den i “list2″.

Ok. Nok for denne gang. Neste post skal handle om horisontale lister. Her er linker til artiklene om lister (i en liste):

Tagged as: , , , , ,

Leave a Comment