para - listas html con numeros romanos
¿Cómo iniciar una nueva lista, continuar la numeración de la lista anterior? (7)
Intento hacer algo que solía ser muy fácil antes de que el atributo de start en las etiquetas OL quedara obsoleto. Me gustaría tener un par de listas ordenadas en mi página, pero empiezo la numeración de la segunda lista donde terminó la primera. Algo como:
1. do stuff
2. do stuff
Here''s a paragraph
3. do stuff
He visto que las propiedades CSS de counter-reset counter-increment deberían poder lograr esto, pero no puedo hacerlo funcionar. Aquí está mi código hasta ahora:
<html>
<head>
<style type="text/css">
ol li { counter-increment: mycounter; }
ol.start { counter-reset: mycounter; }
ol.continue { counter-reset: mycounter 2; }
</style>
</head>
<body>
<ol class="start">
<li>You can''t touch this</li>
<li>You can''t touch this</li>
</ol>
<p>STOP! Hammer time.</p>
<ol class="continue">
<li>You can''t touch this</li>
</ol>
</body>
</html>
Para ser honesto, incluso si eso funcionó, no sería ideal. No quiero tener que especificar el número alcanzado por la primera lista en mi selector ol.continue .
¿Qué estoy haciendo mal? ¿Cuál es la combinación mínima de HTML / CSS requerida para lograr el efecto deseado?
Gracias por adelantado... :)
La solución que finalmente adopté
Aquí está el código HTML y CSS que finalmente utilicé. Gracias a Félix por llevarme allí. También debo mencionar que Lee también ofrece una alternativa interesante de jQuery.
<html>
<head>
<style type="text/css">
ol.split { list-style-type: none; }
ol.split li:before
{
counter-increment: mycounter;
content: counter(mycounter) "./00A0/00A0";
}
ol.split li
{
text-indent: -1.3em;
}
ol.start { counter-reset: mycounter; }
</style>
</head>
<body>
<ol class="split start">
<li>You can''t touch this</li>
<li>You can''t touch this</li>
</ol>
<p>STOP! Hammer time.</p>
<ol class="split">
<li>You can''t touch this</li>
</ol>
</body>
</html>
Advertencia: resulta que esta ''solución'' no funciona en la vista de compatibilidad de IE8 (y probablemente también en otras versiones / navegadores). Si eso no te molesta, genial. :)
Aquí hay una versión diferente de la respuesta que el OP ideó. Hace que el texto se alinee si tiene más de 9 elementos de lista. El patrón podría extenderse a más de 99 elementos, más de 999 elementos, etc.
ol.split { list-style-type: none; }
ol.split li.less-than-ten:before {
counter-increment: mycounter;
content: counter(mycounter) "./00A0/00A0/00A0/00A0";
}
ol.split li.ten-or-greater:before {
counter-increment: mycounter;
content: counter(mycounter) "./00A0/00A0";
}
ol.split li {
display: list-item;
text-indent: -2em;
}
ol.start { counter-reset: mycounter; }
Para usar esto ponga las clases "start" y "split" en la primera. Ponga la clase "dividida" en los próximos ol que quiera incluir en la numeración continua. En la primera y la novena etiqueta de li, coloque la clase "menos de diez". En las etiquetas li 10 a 99, coloque la clase "diez o más". Si desea aplicar el patrón a las etiquetas 100a a 999a li, tendrá que crear algo como esto:
ol.split li.more-than-99:before {
counter-increment: mycounter;
content: counter(mycounter) "./00A0/00A0/00A0/00A0/00A0/00A0";
}
Creo que las etiquetas de 6 "/ 00A0" serán suficientes. Puede que tenga que manipular el número de etiquetas "/ 00A0" y el número de sangría de texto para alinear todo el texto.
Como ya se dijo, necesita :before y content , pero también necesita desactivar la numeración de lista predeterminada. Este es su CSS fijo:
ol.start {
counter-reset: mycounter;
}
ol.start li, ol.continue li {
list-style: none;
}
ol.start li:before, ol.continue li:before {
content: counter(mycounter) ". ";
counter-increment: mycounter;
}
No necesita reiniciar el contador por un tiempo ol.continue , solo continúe usando su contador personalizado. El código anterior se asegura de que el contador solo se use para las listas ol.start y ol.continue .
El atributo de inicio es válido en html5. Yo solo usaría eso.
http://w3c.github.io/html/grouping-content.html#the-ol-element
También http://dev.w3.org/html5/spec/Overview.html#the-ol-element que todavía es compatible con todos los navegadores. Deberías probar para estar seguro, supongo.
algunos jquery para establecer el atributo de inicio dinámicamente si te gusta ese tipo de cosas ...
// assuming all your ol''s have the class mylist
$(function(){
var counter=1;
$(''ol.mylist'').each(function(){
$this = $(this);
$this.attr(''start'',counter);
counter += $(this).find(''li'').length;
});
});
Hay otro enfoque con el que me tropecé al tratar de responder mi propia pregunta ( Eliminar sangría para el elemento dentro de una lista ordenada <ol> ).
Debo señalar que la discusión aquí me ayudó a responder mi pregunta allí, aunque son preguntas diferentes, tienen respuestas similares; entonces, gracias a aquellos que contribuyeron a la discusión sobre este hilo por su ayuda.
Mi solución, en lugar de atribuir clases a la lista de partes del HTML, atribuye una clase al elemento que está rompiendo los elementos <ol> en dos. Usé el nombre de clase mid-ol . La combinación de ol + .mid-ol + ol se puede usar en el CSS.
Para mí, esto fue más satisfactorio que cambiar el carácter de los elementos <ol> , ya que la lista puede existir y persistir a pesar del elemento de ruptura. Por ejemplo, el elemento de ruptura puede moverse, quitarse, etc., pero se requiere poco mantenimiento para el <ol> .
Para no duplicar la discusión en dos lugares, dejaré que cualquier persona interesada examine detenidamente la discusión y el código de ejemplo en el otro hilo.
Perdón por necroing este hilo, pero salió alto cuando me encontré con este problema. Una solución mucho más fácil para el problema de OP es la siguiente:
<ol start="X">
Donde X es el valor de la lista que desea continuar, entonces en su muestra:
<ol>
<li>You can''t touch this</li>
<li>You can''t touch this</li>
</ol>
<p>STOP! Hammer time.</p>
<ol start="3">
<li>You can''t touch this</li>
</ol>
The Opera DevNet tiene un buen ejemplo para este caso de uso disponible aquí: http://devfiles.myopera.com/articles/501/counters-start-example.html (que es parte de su artículo sobre contadores )
Por lo tanto, su código debería verse de esta manera:
<html>
<head>
<style type="text/css">
ol li { counter-increment: mycounter; }
ol.start { counter-reset: mycounter; }
ol.continue { /*counter-reset: mycounter 2; */}
ol li {
counter-increment: mycounter;
list-style-type: none;
}
ol li:before { content: counter(mycounter) ". "; }
</style>
</head>
<body>
<ol class="start">
<li>You can''t touch this</li>
<li>You can''t touch this</li>
</ol>
<p>STOP! Hammer time.</p>
<ol class="continue">
<li>You can''t touch this</li>
</ol>
</body>
</html>
Pero, como mencionó Lee, ol @ start ya no parece obsoleto, yo personalmente preferiría ese enfoque, ya que no solo es un estilo, sino también una cuestión de semántica en su marcado.
también necesita usar una regla: before con una etiqueta de contenido que haga referencia al contador:
mira aquí: http://www.w3schools.com/css/pr_gen_counter-reset.asp