CSS: Listojen muotoilu 2008-01-12 17:47

Listojen muotoiluun on omia ominaisuuksia. Valitsimessa viitataan useimmiten ul tai ol-elementtiin.

Generated content, automatic numbering, and lists

Listoihin liittyviä muotoiluja W3C:n CSS-spesifikaatiossa.

Luettelomerkkien tyyppi list-style-type

Listojen luettelomerkkien ominaisuuksia voidaan määrittää. Ominaisuus list-style-type muuttaa luettelomerkin tyyppiä. Huomioi että määrittely kohdistetaan ul-elementille, ei li-elementille.

ul {
	list-style-type: circle;
}
ol {
	list-style-type: lower-latin;
}

Luettelomerkit voidaan myös kokonaan poistaa esimerkiksi navigointilistasta. Samalla kannattaa poistaa myös oletussisennykset.

#navigointi ul {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}

• Arvoja järjestämättömille listoille: disc, circle, square.
• Arvoja järjestetyille listoille: decimal (1, 2, 3), decimal-leading-zero (01, 02, 03... 99), lower-roman (i, ii, iii), upper-roman (I, II, III), lower-latin (a, b, c) upper-latin (A, B, C), lower-greek (α β γ).

Luettelomerkkien sijainti list-style-position

Luettelomerkit voidaan sijoittaa sisällön ulko- tai sisäpuolelle. Oletuksena ne ovat ulkopuolella outside. Jos li-elementin sisältö jakaantuu useammalle riville, luettelomerkit voidaa asettaa sisäpuolelle inside, jolloin ne sisentävät ensimmäistä riviä, ja luettelomerkin vasen reuna asettuu samalle tasolle sisällön vasemman reunan kanssa.

ul {
	list-style-position: inside;
}

Luettelomerkkikuva list-style-image

Myös omaa kuvaa voidaan käyttää luettelomerkkinä.

ul {
	list-style-image: url(esimerkki.gif);
}

Käytä sopivan kokoista kuvaa, ja muista että sitä ei juuri voi asetella pystysuunnassa suhteessa tekstiin.

Luettelomerkin etäisyys tekstistä

Luettelomerkin vaakasuuntaista etäisyyttä tekstistä voidaan muuttaa määrittämällä li-elementille ominaisuutta padding-left.

ul li {
	padding-left: 1em;
}

Kannattaa muuten esikatsella eri selaimissa...

Luettelomerkin väri

Luettelomerkin väri voidaan vaihtaa määrittämällä ul-elementille luettelomerkille haluttu väri, ja palauttamalla sitten tekstille oletusväri määrittämällä se li-elementille.

.esimerkki ul {
	color: #f00; /* pallukat punaisiksi... */
}

.esimerkki ul li {
	color: #000; /* ...mutta teksti mustana */
}

display: list-item

Mikä tahansa elementti saadaan näyttämään listalta ominaisuudella display. Esimerkiksi otsikoiden eteen voidaan määrittää luettelomerkit.

h2 {
	display: list-item;
	list-style-type: circle;
	list-style-position: inside; 
}

Esimerkissä määritettiin list-style-position: inside, että luettelomerkki tulee esimerkiksi otsikolle määritetyn taustavärin päälle, ja reunusten sisäpuolelle.

Navigointi

Katso myös ohjeet navigointilistoista.