RSS
Bloggdesign.nu
Läs artikel

Listor

I HTML finns det tre olika typer av listor. Osorterade, sorterade och definerade.

Osorterade listor

Exempel: Markera kod
<ul>
<li>Listpost 1</li>
<li>Listpost 2</li>
<li>Listpost 3</li>
</ul>

Osorterade listor använder sig av cirklar eller fyrkanter som list-ikoner. List-ikoner är små ikoner som syns bredvid varje listpost. För att justera list-ikonen för en lista används attributet 'style' och dess egenskap 'list-style-type'. Exempel på hur man anger detta finns längre ner i artikeln.

Sorterade listor

Exempel: Markera kod
<ol>
<li>Listpost 1</li>
<li>Listpost 2</li>
<li>Listpost 3</li>
</ol>

Sorterade listor använder sig av olika former av siffror och bokstäver som list-ikoner. Till sorterade listor finns det en mängd olika list-ikoner men det är inte alla av dem som stöds av alla webbläsare så mitt råd är att använda er av dem tre vanligaste "circle", "disc" och "square".

Definerade listor

Exempel: Markera kod
<dl>
<dt>www.bloggdesign.nu</dt>
<dd>En väldigt bra site om bloggdesign.</dd>
<dt>www.google.com</dt>
<dd>En jättebra sökmotor som alla borde använda till allt.</dd>
</dl>

Definerade listor är något som inte är så vanliga på HTML sidor. En definerad lista består av två olika poster. Termer och beskrivningar.

<dl> = Taggen för definerad lista.
<dt> = Anger en term.
<dd> = Anger en beskrivning.

Listor i fler nivåer

Exempel: Markera kod
<ul>
<li>Listpost 1</li>
<li>
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ol>
</li>
<li>Listpost 3</li>
<li>Listpost 4</li>
</ul>

Listor går även att använda i flera nivåer. För att göra detta anges de "undre" listorna i <li> taggarna för att få en egen post.

Byte av list-ikon för osorterade och sorterade listor

Exempel: Markera kod
<ol style="list-style-type: upper-roman">
<li>Listpost 1</li>
<li>Listpost 2</li>
<li>Listpost 3</li>
</ol>

För att byta list-ikon används attributet 'style' och dess egenskap 'list-style-type'. I exemplet ovan har jag använt mig av värdet "upper-roman" till egenskapen 'list-style-type' för att få romersta tecken som list-ikoner.

Värde Förklaring av list-ikon
none Ingen ikon
circle Tom cirkel
disc Ifylld cirkel
square Fyrkant
armenian Armenisk numrering
decimal Numrering (1, 2, 3 etc.)
decimal-leading-zero Numrering med 0:a som inledning (01, 02, 03 etc.)
georgian Georgisk numrering (an, ban, gan etc.)
lower-alpha Gemener (a, b, c etc.)
lower-greek Grekiska gemener (alpha, beta, gamma etc.)
lower-latin Latinska gemener (a, b, c, d eller 1, 2, 3 etc.)
lower-roman Romänska gemener (i, ii, iii, iv etc.)
upper-alpha Versaler (A, B, C etc.)
upper-latin Latiska versaler (A, B, C etc.)
upper-roman Romänska versaler (I, II, III, IV etc.)

Egen bild som list-ikon

Exempel: Markera kod
<ol style="list-style-image: url('listarrow.gif')">
<li>Listpost 1</li>
<li>Listpost 2</li>
<li>Listpost 3</li>
</ol>

Det är även möjligt att använda en egen bild som list-ikon. För att göra detta används attributet 'style' och egenskapen 'list-style-image'. Sedan anges bilden som dess värde.

Exempel

Sammanfattning

  • Listor finns i tre olika typer. Osorterade, sorterade och definerade.
  • Det finns ett flertal olika list-ikoner men alla stöds inte av alla webbläsare.
  • Egna bilder kan användas som list-ikoner.
Denna artikel publicerades 23 Juli 2009 av Krille, har visats 1700 gånger och diskuterats i forumet med 0 inlägg.