Duda numerar lista ordenada

tofol · #1 (**permalink**) 14/12/2012, 05:38

Hola, la pregunta igual es tonta pero busco en Google y todos dan la información estándar del tema no obtengo lo que quiero. Tengo una lista ordenada con una sublista ordenada numera ordinalmente, pero no se hacer que la sublista siga la numeración de la lista, así:

1.
1.1
1.2
2.

Lo que quiero es que la sublista se numere como 1.1 y 1.2. Aquí el código:

Código:

<ol>
			<li><span class="subrayado">Sistemas Compatibles </span>--> Son sistemas que poseen una o más soluciones. </li>
				<p>Dentro de estos distinguimos dos casos:</p>
			<ol>
				<li><span class="subrayado">Compatibles Determinados </span> --> Poseen una única solución.</li>
				<li><span class="subrayado">Compatibles Indeterminados </span> --> Poseen Infinitas soluciones.</li>
			</ol>

Gracias

emprear · #2 (**permalink**) 14/12/2012, 07:34

Requiere un poco de css

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>lista ordenada con sub listas</title>
 
<style type='text/css'>
/*<![CDATA[*/
ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }
/*]]>*/
</style>
</head>
<body>
<ol>
<li>uno</li>
<li>dos
<ol>
<li>dos.uno</li>
<li>dos.dos</li>
<li>dos.tres</li>
</ol>
</li>
<li>tres
<ol>
<li>tres.uno
<ol>
<li>tres.uno.uno</li>
<li>tres.uno.dos</li>
</ol>
</li>
<li>tres.dos</li>
</ol>
</li>
<li>cuatro</li>
</ol>
</body>
</html>

busca algún tutorial sobre la propiedad counter css

Saludos

tofol · #3 (**permalink**) 14/12/2012, 10:42

Gracias por la ayuda, casi funciona, sólo funciona si la lista se anida indefinidamente,
es decir, así:

1.

1.1

1.2

Pero no funciona cuando vas para atrás otra vez, como es:
1.

1.1

1.2

2.

Con ese código en vez de poner 2. me pone 1.3 y ese no toca

Ya he hecho un san google con lo que me has indicado y nada.

Gracias

emprear · #4 (**permalink**) 14/12/2012, 12:28

que es lo que no funciona? vos probaste mi código
te genera esto

Cita:

1 uno
2 dos
2.1 dos.uno
2.2 dos.dos
2.3 dos.tres
3 tres
3.1 tres.uno
3.1.1 tres.uno.uno
3.1.2 tres.uno.dos
3.2 tres.dos
4 cuatro

Y sería bueno ver cual estás usando

tofol · #5 (**permalink**) 14/12/2012, 13:02

Código html5

Código:

<div id="listaordenada">
		<ol>
			<li><span class="resaltado">Sistemas Compatibles </span>--> Son sistemas que poseen una o más soluciones. </li>
			<p>Dentro de estos distinguimos dos casos:</p>
			<ol>
				<li><span class="resaltado">Compatibles Determinados </span> --> Poseen una única solución.</li>
				<li><span class="resaltado">Compatibles Indeterminados </span> --> Poseen Infinitas soluciones.</li>
			</ol>
		<p>Y luego tenemos los sistemas:</p>
			<li><span class="resaltado">Sistemas Incompatibles </span> --> No poseen solución alguna.</li>
		</ol>
		</div>

Código CSS3:

Código:

/*** INICIO LISTA ORDENADA ***/
#listaordenada ol { 
	counter-reset: item;
}
#listaordenada li { 
	display: block;
}
#listaordenada li:before { 
	counter-increment: item;
	content: counters(item, ".") "."; 
}

Imagen de lo que me genera:

Enlace directo a la imagen->[URL="http://imageshack.us/photo/my-images/841/screenshot001cj.png/"]http://imageshack.us/photo/my-images/841/screenshot001cj.png/[/URL]

Donde pone 1.3 debería poner 2.

Gracias

emprear · #6 (**permalink**) 14/12/2012, 13:19

Tu imagen apenas se distingue, y el código está mal hecho (y de paso te aclaro que counter-increment y counter-reset ya vienen de la especificación css2.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
 
/*** INICIO LISTA ORDENADA ***/
#listaordenada ol { 
 counter-reset: item;
}
#listaordenada li { 
 display: block;
}
#listaordenada li:before { 
 counter-increment: item;
 content: counters(item, ".") "."; 
}
 
 
/*]]>*/
</style>
</head>
<body>
<div id="listaordenada">
<ol>
<li><span class="resaltado">Sistemas Compatibles</span> --&gt; Son sistemas que poseen una o más soluciones.<p>Dentro de estos distinguimos dos casos:</p>
 
<ol>
<li><span class="resaltado">Compatibles Determinados</span> --&gt; Poseen una única solución.</li>
<li><span class="resaltado">Compatibles Indeterminados</span> --&gt; Poseen Infinitas soluciones.</li>
</ol>
 
<p>Y luego tenemos los sistemas:</p>
</li>
<li><span class="resaltado">Sistemas Incompatibles</span> --&gt; No poseen solución alguna.</li>
</ol>
</div>
</body>
</html>

Compará.
Finalmente te diría que si vas a poner descripciones entre los items, se pierde un poco el sentido de las listas anidadas

Saludos

tofol · #7 (**permalink**) 14/12/2012, 13:32

Vale, mea culpa, ya se qué pasaba, el primer </li> que meto lo tenía en el sitio equivocado. Ya está en su sitio. Resuelto. Muchas gracias por tu ayuda.