Lista-elementtien muokkaaminen

CSS:llä voidaan muuttaa HTML:n lista-elementtejä. Voidaan esimerkiksi muuttaa luettelomerkkiä, tai valita vaikka oma kuva luettelomerkiksi.

Luettelomerkit

Luettelomerkkiä vaihdetaan LIST-STYLE-TYPE-attribuutilla. Attribuutilla voidaan muuttaa esimerkiksi järjestetyn listan luettelomerkki näyttämään siltä, että kyseessä olisi järjestämätön lista.

list-style-type:arvo;

Ei luettelomerkkiä:

<ul style="list-style-type:none;">
   <li>Lorem</li>
   <li>Ipsum</li>
   <li>Dolor</li>
   <li>Sit amet</li>
</ul>

Pallo:

<ul style="list-style-type:disc;">
   <li>Lorem</li>
   <li>Ipsum</li>
   <li>Dolor</li>
   <li>Sit amet</li>
</ul>

Ympyrä:

<ul style="list-style-type:circle;">
   <li>Lorem</li>
   <li>Ipsum</li>
   <li>Dolor</li>
   <li>Sit amet</li>
</ul>

Neliö:

<ul style="list-style-type:square;">
   <li>Lorem</li>
   <li>Ipsum</li>
   <li>Dolor</li>
   <li>Sit amet</li>
</ul>

Numerointi:

<ul style="list-style-type:decimal;">
   <li>Lorem</li>
   <li>Ipsum</li>
   <li>Dolor</li>
   <li>Sit amet</li>
</ul>

Numerointi, jossa luvun alussa nolla:

<ul style="list-style-type:decimal-leading-zero;">
   <li>Lorem</li>
   <li>Ipsum</li>
   <li>Dolor</li>
   <li>Sit amet</li>
</ul>

Pienet kirjaimet:

<ul style="list-style-type:lower-alpha;">
   <li>Lorem</li>
   <li>Ipsum</li>
   <li>Dolor</li>
   <li>Sit amet</li>
</ul>

Suuret kirjaimet:

<ul style="list-style-type:upper-alpha;">
   <li>Lorem</li>
   <li>Ipsum</li>
   <li>Dolor</li>
   <li>Sit amet</li>
</ul>

Pienet Roomalaiset numerot:

<ul style="list-style-type:lower-roman;">
   <li>Lorem</li>
   <li>Ipsum</li>
   <li>Dolor</li>
   <li>Sit amet</li>
</ul>

Suuret Roomalaiset numerot:

<ul style="list-style-type:upper-roman;">
   <li>Lorem</li>
   <li>Ipsum</li>
   <li>Dolor</li>
   <li>Sit amet</li>
</ul>

Oma kuva luettelomerkiksi?

Luettelomerkiksi voidaan myös valita oma kuva. Tämä tehdään LIST-STYLE-IMAGE-attribuutilla. Arvoksi annetaan url('kuvan sijainti').

list-style-image:url('sijainti');
<ul style="list-style-image:url('luettelomerkki.png');">
   <li>Lorem</li>
   <li>Ipsum</li>
   <li>Dolor</li>
   <li>Sit amet</li>
</ul>

Vertikaalinen lista

Joskus lista on tarpeellista saada vaakatasoon. Esimerkiksi jos halutaan tehdä vertikaalinen navigaatiopalkki. Tämä voidaan toteuttaa FLOAT-attribuutilla. Attribuutti laitetaan lista-elementin LI-tagiin.

float:arvo;
<ul>
   <li style="float:left;">Lorem</li>
   <li style="float:left;">Ipsum</li>
   <li style="float:left;">Dolor</li>
   <li style="float:left;">Sit amet</li>
</ul>

HUOM! Esimerkissä olen poistanut luettelomerkin ja lisännyt LI-tagiin paddingia selkeyden vuoksi.

<< Tekstin muotoilu Edellinen osa || Seuraava osa Taustaväri ja taustakuva >>