Keskustelu: Nettisivujen teko: Ongelma listojen kanssa

Hejssan. Pitäisi tehdä yksi iso lista, ja en saa sitä toimimaan oikein ja validisti.

Tarkoitus olisi siis saada seuraavanlainen lista:

1. OTSIKKO
	a. asd
	b. sad
	c. das
2. OTSIKKO
	2.1 fasd
		a. sddd
		b. asdd
		c. dassd
	2.2 asdd
		a. sddsd
		b. asdasdas
		c. dasasdsd

Sain toimiin ihan hyvin seuraavanlaisella koodilla:

<ol>
	<li>OTSIKKO</li>
	<ol>
		<li>...</li>
	</ol>
	<li>OTSIKKO</li>
	<ol>
		<li>...</li>
		<ol>
			<li>...</li>
		</ol>
	</ol>
</ol>

...mutta se ei ole validia. Validator haluaa noi ol-tagit (jotka siis toisen ol-tagin sisässä) li-tagin sisään, ja tämän seurauksena lista näyttää seuraavalta:

kuva

eli jokaisen li-tagiin tulee tietysti toi listamerkintä. Miten sen saisi pois noiden <li><ol>...</ol>/li> -settien kohdalla siten, että myös tuo elementtien laskeminen menisi oikein? Punaiset kohdat siis ovat ylimääräisiä.

Laittamalla ne niiden li-elementtien väliin minkä alakohtia ne on.

<ol>
    <li>OTSIKKO 1
        <ol>
            <li>Otsikko 1:n alakohta</li>
        </ol>
    </li>
    <li>OTSIKKO 2
        <ol>
            <li>Otsikko 2:n alakohta</li>
            <li>Ja toinen
                <ol>
                    <li>Otsikko 2:n toisen alakohdan alakohta.</li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

Kiitos.

Kurkkaa CSS:n counter, counter-increment ja counter-reset

Luonnollisesti ei toimi IE:llä (ehkä IE8:lla, mutta ei ole juuri nyt millä testata).