kaxigt.com

Den här guiden tar upp hur man gör uppställningar med olika sorts listor.

Listor använder man för att presentera en uppställning och det finns tre olika alternativ att välja på. De allra vanligaste är punktlistorna, därefter kommer de numrerade listorna. Sist har vi definitionslistorna.

Listor har något som heter list item – det vill säga en listpost – och denna märks ut som <li>. Varje <li> är en egen rad i listan. Om vi börjar med punktlistorna inleds denna lista med attributet <ul> – vilket betyder unorderedlist – en lista som inte har givits någon definition. Framför varje listelement uppkommer då en liten punkt (list-style) om man inte valt bort det.

Koden för en odefinierad lista ser ut så här. Jag har valt bort list-style i denna lista.

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

Resultat:

• listpost 1
• listpost 2
• listpost 3

Numrerade listor skiljer sig inte annat än att listan nu får ett definitionsattribut. En numrerad lista börjar med attributet <ol> – vilket betyder ordered list – en ordnad lista. Fortfarande måste vi givetvis använda oss av vårt list item – <li>.

Koden för en ordered list – eller numrerad lista – ser ut så här:

<ol>
<li>listpost 1</li>
<li>listpost 2</li>
<li>listpost 3</li>
</ol>

Resultat:

1. listpost 1
2. listpost 2
3. listpost 3

Denna typ av lista är mycket bra om man vill numrera en uppställning eller ranka något i fallande skala. Det går också alldeles utmärkt att djupledes nästla en lista. Ofta används det till att skapa menyer med dropdown-effekt.

Listan kan då se ut så här, med ett djup på en nivå:

 <ul>
  <li>basnivå</li>
  <li>basnivå
    <ul>
      <li>djupnivå 1</li>
      <li>djupnivå 1</li>
    </ul>
  </li>
  <li>bas nivå</li>
</ul>

Resultat:

• basnivå
• basnivå
  • djupnivå 1
  • djupnivå 1
• bas nivå

Den tredje varianten av listor skiljer sig däremot från de två andra. Eftersom det handlar om en definitionslista använder vi helt andra attribut. Just definitionslistor är mycket bra att använda om du vill göra en lista med underbeskrivningar.

Du ges möjlighet att skapa en listrubrik och under denna kan du sedan fylla på med din beskrivning. Vi ska nu kika lite närmare på hur denna lista fungerar och ser ut.

Definitionslistorna börjar med attributet <dl>. Men istället för att använda ett list item/listpost – använder vi något som kallas för definition term – en definierad term. Denna märks ut som <dt>. Det är i <dt> som varje definition i listan anges.

Du kan se det som en ”rubrik”. Under denna kommer sedan din detaljerade förklaring/beskrivning till listans definition/rubrik. Denna kod märks ut som <dd> – en detaljerad definition.

Koden ser ut så här:

<dl>
<dt>Kaxigt</dt>
<dd>En site för dig</dd>
<dt>Besökare</dt>
<dd>Här finns många webguider</dd>
<dt>Skoj</dt>
<dd>Webdesign är kul!</dd>
</dl>

Och den ger denna lista. Här är listdefinitionerna per rad grönmarkerade för att underlätta förståelsen i uppbyggnaden.

dl

dt Kaxigt /dt

dd En site för dig /dd

dt Besökare /dt

dd Här finns många webguider /dd

dt Skoj /dt

dd Webdesign är kul! /dd

/dl

Visste du att du kan styla dina listor med css?