Tilbake til startsida IKT i praksis. Stilark


Lister

Du kjenner sikkert igjen dei to listetypane som finst i html, «unordered» (<ul>, dvs. punktmarkerte) og «ordered» (<ol>, dvs. nummererte) lister. Skilnaden er måten dei einskilde elementa i lista blir merka på. I ei «uordna» liste blir elementa (oftast) merkte med ein prikk framføre, medan dei i den «ordna» lista blir merka med tal eller bokstavar framføre i aukande rekkefølgje.

Lister i html er i grunnen nokså greie å ha med å gjere når ein bare held styr på rekkefølgja av dei aktuelle elementa. Det einaste du kan styre direkte frå stilarket er kva listemarkør som skal brukast og plasseringa av han.

Listemarkør

I ei uordna (punktmarkert) liste kan eigenskapen list-style-type ha verdiane

Verdi Beskriving
none Ikkje markør
disc Ein fylt sirkel (normalmarkøren)
circle Ein open sirkel
square Ein firkant

I ei ordna (nummerert) liste har du fleire val for list-style-type:

Verdi Beskriving
none Ikkje markør
disc Ein fylt sirkel (normalmarkøren)
circle Ein open sirkel
square Ein firkant
armenian Armensk nummerering
decimal Eit tal
decimal-leading-zero Tal med null framføre (01, 02, 03, etc.)
georgian Gregoriansk markering (an, ban, gan osv.)
lower-alpha Små bokstavar (a, b, c, d, e osv.)
lower-greek Små greske bokstavar (alpha, beta, gamma osv.)
lower-latin Små latinske bokstavar (a, b, c, d, e osv.)
lower-roman Små romertal  (i, ii, iii, iv, v osv.)
upper-alpha Store bokstavar (A, B, C, D, E osv.) 
upper-latin Store latinske bokstavar (A, B, C, D, E osv.)
upper-roman Store romertal (I, II, III, IV, V osv.)

I stilarket bruker du desse verdiane for eksempel slik:

ul.sirkel {list-style-type: circle}
ul.firkant {list-style-type: square}

ol.romertal {list-style-type: upper-roman}
ol.desimal {list-style-type: decimal}

 

Markør frå bilde

Ønskjer du andre markørar, kan dette ordnast ved å setje inn bilde. Kanskje mest aktuelt for punktmarkerte (ul) lister, men gjeld for begge.

Kommandoen ul { list-style-image:url("strek.png") } vil setje inn ein strek som markør i alle punktmarkerte lister der markøren ikkje er slått av. (Etter norsk standard skal ein faktisk bruke strek i staden for andre teikn her).

  • Dette er ei punktliste (ul)
  • med streken som markør

Diverre blir ikkje bilda vist heilt likt i alle nettlesarane. Skilnaden er ikkje større enn at dei fleste kan leve med det, men for perfeksjonisten fann eg eit oppsett i W3Scools.com som rettar på dette.

ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
li
{
background-image:url(lst-strek.gif);
background-repeat:no-repeat;
background-position:10px 1px;
padding-left:30px;
}

 

  • Dette er ei punktliste (ul)
  • med streken som markør

padding og margin må setjast til 0 for ul for at alle nettlesarane skal ha same utgangspunktet.

I li styrer background-position:10px 1px; plasseringa av streken, her 10 pikslar til venstre og 1 piksel nedover. padding-left: 30px; styrer kor langt inn teksten skal kome. Her må verdiane sjølvsagt setjast litt etter prøving og feiling og korleis bildet ser ut.

 

Posisjon

Dette gjeld posisjonen for markøren. Du kan setje han «utanfor» (som er normalverdien) eller «innanfor», eller på CSS-språket: outside og inside. Eigenskapen er list-style-position.

  1. Dette er list-style-position: outside
  2. Dette er list-style-position: inside
  3. Dette er også list-style-position: inside

Skilnaden er altså at linja blir flytt innover utan at det går ut over nummereringa.

 

Send melding
© Innhald og design:  Kolbjørn StuestølStuestøl heimesideSist endra 6. juni 2010