¿Cómo crear una lista con números anidados en HTML y CSS?


HTML, CSS, PHP, JavaScript, Java... tus dudas por aquí...
   

¿Cómo crear una lista con números anidados en HTML y CSS?

Notapor Manuel de la Fuente » Nov 2011, 18:18

Me refiero a una lista de este tipo:

1.1
1.2
1.3
1.3.1
1.3.2
1.3.2.1

Pero obviamente que no sea escribiendo los números manualmente uno por uno. ¿Es posible?
Avatar de Usuario
Manuel de la Fuente
Nivel 6
 
Mensajes: 526
Registrado: May 2009, 15:33
Ubicación: México
Twitter: @ManuelFte

Re: ¿Cómo crear una lista con números anidados en HTML y CSS

Notapor elQuique » Nov 2011, 12:48

Son Order List <ol> anidados :)

Y usas ahí counter y conter-reset

12 Generated content, automatic numbering, and lists
http://www.w3.org/TR/CSS2/generate.html

Make an ordered list go up as 1.1,1.2,1.3 instead of 1,2,3.
http://doctype.com/make-ordered-list-go ... nstead-123

Is it possible to add subitems into an ordered list?
http://doctype.com/possible-add-subitems-ordered-list-6
Avatar de Usuario
elQuique
Moderador
 
Mensajes: 2042
Registrado: May 2009, 18:43
Ubicación: Florida, Uruguay
Twitter: @elQuique

Re: ¿Cómo crear una lista con números anidados en HTML y CSS

Notapor Manuel de la Fuente » Nov 2011, 14:19

Wow, gracias, estaba casi seguro de que me dirían que es imposible. :-D

Pero tengo un problema: cuando el texto que va enlistado es muy largo y se pasa al siguiente renglón, comienza justo por debajo del número en lugar de respetar la sangría, así:

Imagen

Me gustaría que el texto se mantuviera siempre separado del número como ocurre en Word (y en las mismas listas normales de HTML):

Imagen

¿Alguna idea de cómo resolverlo?
Avatar de Usuario
Manuel de la Fuente
Nivel 6
 
Mensajes: 526
Registrado: May 2009, 15:33
Ubicación: México
Twitter: @ManuelFte

Re: ¿Cómo crear una lista con números anidados en HTML y CSS

Notapor Manuel de la Fuente » Nov 2011, 17:07

Ya lo logré, aunque me gustaría una opinión del método utilizado. Lo que hice fue meter el texto dentro de etiquetas P de esta forma:

Código: Seleccionar todo
<ol>
   <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ipsum enim, id iaculis augue. Phasellus lacinia, eros sit amet luctus semper, lorem est venenatis nisl, ut rhoncus sem ipsum sed tellus. Praesent et eros sem. Donec quis metus odio. Curabitur hendrerit quam in nibh ornare at dictum turpis pretium.</p></li>
   <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ipsum enim, id iaculis augue. Phasellus lacinia, eros sit amet luctus semper, lorem est venenatis nisl, ut rhoncus sem ipsum sed tellus. Praesent et eros sem. Donec quis metus odio. Curabitur hendrerit quam in nibh ornare at dictum turpis pretium.</p>
      <ol>
         <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ipsum enim, id iaculis augue. Phasellus lacinia, eros sit amet luctus semper, lorem est venenatis nisl, ut rhoncus sem ipsum sed tellus. Praesent et eros sem. Donec quis metus odio. Curabitur hendrerit quam in nibh ornare at dictum turpis pretium.</p></li>
         <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ipsum enim, id iaculis augue. Phasellus lacinia, eros sit amet luctus semper, lorem est venenatis nisl, ut rhoncus sem ipsum sed tellus. Praesent et eros sem. Donec quis metus odio. Curabitur hendrerit quam in nibh ornare at dictum turpis pretium.</p>
            <ol>
               <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ipsum enim, id iaculis augue. Phasellus lacinia, eros sit amet luctus semper, lorem est venenatis nisl, ut rhoncus sem ipsum sed tellus. Praesent et eros sem. Donec quis metus odio. Curabitur hendrerit quam in nibh ornare at dictum turpis pretium.</p>
                  <ol>
                     <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ipsum enim, id iaculis augue. Phasellus lacinia, eros sit amet luctus semper, lorem est venenatis nisl, ut rhoncus sem ipsum sed tellus. Praesent et eros sem. Donec quis metus odio. Curabitur hendrerit quam in nibh ornare at dictum turpis pretium.</p></li>
                  </ol>
               </li>
            </ol>
         </li>
      </ol>
   </li>   
</ol>


Y le apliqué estos estilos:

Código: Seleccionar todo
ol {
counter-reset:item;
padding-left:1em;
text-align:justify;
}
li {
display:block;
}
li:before {
content:counters(item, ".", decimal) ". ";
counter-increment:item;
float:left;
white-space:pre;
}
li p {
overflow:hidden;
}
ol li ol li ol {
padding-left:2em;
}


El resultado se ve así:

Imagen

¿Qué tal? ¿Alguna corrección o solución más obvia que no haya visto?
Avatar de Usuario
Manuel de la Fuente
Nivel 6
 
Mensajes: 526
Registrado: May 2009, 15:33
Ubicación: México
Twitter: @ManuelFte

Re: ¿Cómo crear una lista con números anidados en HTML y CSS

Notapor Manuel de la Fuente » Nov 2011, 18:06

Creo que encontré la "solución más obvia" de la que hablaba. :-D

Le quité las etiquetas P y sus estilos correspondientes (li p) y agregué un height:100%; en li:before. El resultado luce casi igual excepto que ya no tiene los márgenes superior e inferior característicos de las etiquetas P. :razz:
Avatar de Usuario
Manuel de la Fuente
Nivel 6
 
Mensajes: 526
Registrado: May 2009, 15:33
Ubicación: México
Twitter: @ManuelFte

Re: ¿Cómo crear una lista con números anidados en HTML y CSS

Notapor Manuel de la Fuente » Nov 2011, 01:03

Me topé con otro problema: por alguna extraña (yo diría que tonta) razón, Opera no hace caso del height:100%. Luego de mucho experimentar, lo que me funcionó fue aplicar los estilos de esta forma:

Código: Seleccionar todo
ol {
counter-reset:item;
text-align:justify;
}
li {
display:block;
}
li:before {
content:counters(item, ".", decimal) ". ";
counter-increment:item;
margin-left:-1.2em;
position:absolute;
}
ol li ol li:before {
margin-left:-2em;
}
ol li ol li ol li:before {
margin-left:-2.7em;
}
ol li ol li ol li ol {
padding-left:3.5em;
}
ol li ol li ol li ol li:before {
margin-left:-3.5em;
}


Y así es como se ve en Opera, Firefox, Chrome y Safari:

Imagen

No sé por qué pero creo que siempre acabo dando con la opción más laboriosa y llena de código inútil. :-D
Avatar de Usuario
Manuel de la Fuente
Nivel 6
 
Mensajes: 526
Registrado: May 2009, 15:33
Ubicación: México
Twitter: @ManuelFte


¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 0 invitados

cron