Listas ordenadas

calathea · #1 (**permalink**) 07/03/2009, 07:31

Soy nueva en esto de la programacion html, y estaba practicando cosillas de lo más básicas...

Muchas de ellas consigo que me salgan, pero las listas ordenadas se me resiten.

Tengo entendido que, por defecto, vienen enumeradas con números arábigos (1, 2, 3, ...) y que si lo queremos cambiar, con poner <ol type="tipo"> indicando el código del tipo en "tipo" (A/a para letras, mayúsculas/minúsculas; o I/i para numeros romanos en mayúsculas/minúsculas).

Tengo este código:

Código HTML:

<ol type="1">
	<lh>Una lista ordenada
	<li>Elemento uno</li>
	<ol type="A">
	<li>Elemento A</li>
	<ol type="a">
	<li>Elemento a</li>
	<ol type="I">
	<li>Elemento I</li>
	<ol type="i">
	<li>Elemento i</li>
	<ol type="A">
	<li value="B">Elemento B</li>
	<ol type="a">
	<li value="b">Elemento b</li>
	<ol type="I">
	<li value="II">Elemento II</li>
	<ol type="i">
	<li value="ii">Elemento ii</li>
	<ol type="1">
	<li value="2">Elemento dos</li>
</ol>

Pero en la vista de la página me aparece mal, y con un formato en escalera:

Cita:

Una lista ordenada
1.Elemento uno

A.Elemento A
a.Elemento a
I. Elemento I
i.Elemento i
A.Elemento B
a.Elemento b
I.Elemento II
i.Elemento ii
2. Elemento dos

No entiendo porqué toma esa estructura en escalera, ni por qué sólo toma el valor que le he especificado para el elemento dos y no para los elementos B, b, II, ii.

Lo que quería lograr era poner todos los elementos numerados con arábigos en el mismo nivel de sangría, los elementos con letras mayúsculas en otro, los de minúsculas en otro, los de romanos mayusculas en otro y finalmente los de romanos minúsculas en otro nivel de sangría diferente.

Si alguien me pudiera decir dónde está el error se lo agradecería.
Un saludo!

jomaruro · #2 (**permalink**) 07/03/2009, 07:55

Hola:

No se exactamente como lo quieres hacer pero el problema es que no cierras nada más que las etiquetas li.

Un ejemplo podría ser este:

Código:

        <ol type="1">
	        <lh>Una lista ordenada
	            <li>Elemento uno</li>
	                <ol type="A">
	                    <li>Elemento A</li>
	                </ol>
	                <ol type="a">
	                    <li>Elemento a</li>
	                </ol>
	<ol type="I">
	<li>Elemento I</li>
	<ol type="i">
	<li>Elemento i</li>
	<ol type="A">
	<li value="B">Elemento B</li>
	<ol type="a">
	<li value="b">Elemento b</li>
	<ol type="I">
	<li value="II">Elemento II</li>
	<ol type="i">
	<li value="ii">Elemento ii</li>
	<ol type="1">
	<li value="2">Elemento dos</li>
</ol>

Ahora adaptalo a tus necesidades.

Un Saludo.

j84625 · #3 (**permalink**) 07/03/2009, 08:29

Hola si me das un ejemplo de como quieres que se clasifiquen los elementos de la lista seria mejor
supongo que quieres algo asi

Código PHP:

  <ol type="1"> 
    <li>Elemento uno</li> 
    <ol type="A"> 
        <li>Elemento</li> 
    </ol> 
    <ol type="a"> 
        <li>Elemento</li> 
    </ol> 
    <ol type="I"> 
        <li>Elemento</li> 
    </ol> 
</ol>

calathea · #4 (**permalink**) 07/03/2009, 08:38

Mi idea era poner algo asi:

1.Elemento uno

A.Elemento A

a.Elemento a

I.Elemento I

i.Elemento i

B.Elemento B

b.Elemento b

II.Elemento II

ii.Elemento ii

2.Elemento dos

He probado cerrando los <ol> que me dijiste, pero entonces me aparece esto otro:

1. Elemento uno

A. Elemento A

a. Elemento a

I. Elemento I

i. Elemento i

A. Elemento B
a. Elemento b
I. Elemento II
i. Elemento ii
2. Elemento dos

Sigue sin modificárseme lo de que aparezca B, b, II, ii (en vez de A, a, I, i) en la segunda aparicion.

Este es el código de lo que he descrito anteriormente:

Código HTML:

<ol type="1">
	<lh>Y ahora una lista ordenada
	<li>Elemento uno</li>
	</ol>
	<ol type="A">
	<li>Elemento A</li>
	<ol type="a">
	<li>Elemento a</li>
	<ol type="I">
	<li>Elemento I</li>
	<ol type="i">
	<li>Elemento i</li>
	<ol type="A">
	<li value="B">Elemento B</li>
	</ol>
	<ol type="a">
	<li value="b">Elemento b</li>
	</ol>
	<ol type="I">
	<li value="II">Elemento II</li>
	</ol>
	<ol type="i">
	<li value="ii">Elemento ii</li>
	</ol>
	<ol type="1">
	<li value="2">Elemento dos</li>
</ol>

Gracias por la ayuda!

jomaruro · #5 (**permalink**) 07/03/2009, 10:30

Hola:

Prueba a ver si esto te soluciona tu duda:

Código HTML:

 <ol type="1">
	        <lh>Y ahora una lista ordenada</lh>
	        <li>Elemento uno</li>
        	<ol type="A">
	            <li>Elemento A</li>
        	    <ol type="a">
	                <li>Elemento a</li>
	                <ol type="I">
	                    <li>Elemento I</li>
        	            <ol type="i">
	                        <li>Elemento i</li>
	                    </ol>
	                </ol>
	            </ol>
	        </ol>
    	    <ol type="A">
	            <li value="B">Elemento B</li>
	            <ol type="a">
	                <li value="b">Elemento b</li>
	                <ol type="I">
    	                <li value="II">Elemento II</li>
	                    <ol type="i">
	                        <li value="ii">Elemento ii</li>
	                    </ol>
    	            </ol>
	            </ol>
	        </ol>
	    </ol>
	    <ol type="1">
	        <li value="2">Elemento dos</li>
        </ol>

Saludos.

Null_ · #6 (**permalink**) 07/03/2009, 11:32

Todas las listas que estan aqui presentes no cumplen con la regla básica de las listas en XHTML, que deben anidarse una dentro de otra. Además, el estilo nunca debe estar incrustado dentro código HTML.
La etiqueta <lh> no existe. Usas etiquetas obsoletas como value y controlas el estilo con type.
Observe además que tienes un "Elemento b" en el "Elemento B" sin la existencia de un "Elemento a" lo que es claramente una pérdida de lógica en la enumeracion del contenido de la lista.

CSS (entre <head> y </head> o en la hoja de estilo):

Código:

<style type="text/css">
<!--
ol ol		{list-style-type:upper-alpha;}
ol ol ol	{list-style-type:lower-alpha;}
ol ol ol ol	{list-style-type:upper-roman;}
ol ol ol ol ol	{list-style-type:lower-roman;}
-->
</style>

XHTML estricto válido entre <body> y </body>:

Código HTML:

<ol>
<li>Elemento uno
	<ol>
	<li>Elemento A
		<ol>
			<li>Elemento a
				<ol>
					<li>Elemento I
						<ol>
							<li>Elemento i</li>
						</ol>
					</li>
				</ol>
			</li>
		</ol>
	</li>
	<li>Elemento B
		<ol>
			<li>Elemento a
				<ol>
					<li>Elemento I
						<ol>
							<li>Elemento i</li>
						</ol>
					</li>
				</ol>
			</li>
		</ol>
	</li>
	</ol>
</li>
<li>Elemento dos</li>
</ol>

* Si se agrega un <ol> adicional, este debe estar dentro de una etiqueta <li>, que contendrá a los siguientes items de listas.

Saludos :D

jomaruro · #7 (**permalink**) 07/03/2009, 12:17

Hola:

Algo me decía que no lo estaba haciendo bien, ahora ya se que es.

Saludos.

calathea · #8 (**permalink**) 11/03/2009, 04:01

A mi me han dicho en clase que la etiqueta <lh> indica que es una cabecera de lista...y de hecho la pongo y aparece lo que escribo en medio como "titulo" de la lista. De todas formas, si <lh> no existe, ¿¿qué etiqueta se utilizaría para indicar la cabecera??

Respecto al código que me pusiste, Null_ ...no funciona: los elementos uno y dos son efectivamente elementos 1 y 2...pero los demás no están enumerados con un tipo de numeracion diferente (letras mayusculas, minusculas, numeros romanos mayusculas y numeros romanos minúsculas), sino con unos:

Aparte, aunque no tenga lógica que haya un elemento b sin existir un elemento a previo...ya dije que simplemente estoy practicando con la teoria que me han dado en clase...según la cual, en una lista ordenada puedo cambiar el valor de la enumeracion con un <li value="x"> siendo x el valor que le quiero asignar a ese elemento de la lista...y eso es el otro punto que no consigo que me salga: modificar a mano el valor de la enumeracion

Gracias a todos ;)

calathea · #9 (**permalink**) 14/03/2009, 05:28

Ya solucioné mi problema...me estaba confundiendo con los values...y evidentemete, en la anidacion (gracias x ese detalle, no sabia que funcionaba asi...

)

El código ahora queda asi: (por si a alguien que este comenzando con esto, como yo, le puede servir...)

Código HTML:

<body>
<ol>
<li>Elemento uno
	<ol type="A">
	<li>Elemento A
		<ol type="a">
			<li>Elemento a
				<ol type="I">
					<li>Elemento I
						<ol type="i">
							<li>Elemento i</li>
						</ol>
					</li>
				</ol>
			</li>
		</ol>
	</li>
	<li>Elemento B
		<ol type="a">
			<li value="2">Elemento b
				<ol type="I">
					<li value="2">Elemento II
						<ol type="i">
							<li value="2">Elemento ii</li>
						</ol>
					</li>
				</ol>
			</li>
		</ol>
	</li>
	</ol>
</li>
<li>Elemento dos</li>
</ol>
</body>

baccxus · #10 (**permalink**) 14/03/2009, 14:33

Cita:

Iniciado por calathea

Respecto al código que me pusiste, Null_ ...no funciona: los elementos uno y dos son efectivamente elementos 1 y 2...pero los demás no están enumerados con un tipo de numeracion diferente (letras mayusculas, minusculas, numeros romanos mayusculas y numeros romanos minúsculas), sino con unos:

A mi sí que me funciona lo que puso Null_, de hecho más de uno aprendimos de éste tema.

Saludos

jomaruro · #11 (**permalink**) 14/03/2009, 16:11

Cita:

Iniciado por baccxus

A mi sí que me funciona lo que puso Null_, de hecho más de uno aprendimos de éste tema.

Hola:

Si, funciona perfectamente. Y estoy de acuerdo en que más de uno aprendimos del tema.

Saludos.