Tema: counter y div
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 21/09/2010, 10:17
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: counter y div
Está inicializando (comenzando la cuenta) dos veces: una al cargar el /body/ y otra cada vez que aparece un /ol/ con clase /reset/. Línea 5 de su css.
Por eso su contador vuelve a comenzar y marcar /1/ en el primer /ol.reset/ que aparece, en vez de continuar.

Por otro lado, usted pretende tener dos contadores distintos e incrementar cada uno de ellos a medida que aparecen en el html. Por lo tanto, debe iniciar los dos una sola vez.
Ese inicio se debe hacer no en la lista numerada (para que no se resetee cada vez que aparezca), sino en un ancestro común a todas ellas.
Por lo tanto, si dichas listan van a estar en distintos contenedores y a distintos niveles de profundidad, lo suyo es inicializarlas en el /body/ y para evitar que un /counter-reset/ anule a otro, hacerlo de forma conjunta:
Código CSS: 
Ver original
  1. body{
  2. counter-reset: cnt rojo;
  3. padding: 2em;/*no influye, sólo estética visual*/
  4. }
Ahí iniciamos los dos contadores, el de su código /cnt/ y el segundo que llamo /rojo/

El siguiente paso, es identificar qué elementos incrementarán un contador y cuál el otro:
Código CSS: 
Ver original
  1. /*el contador que usted ya ha creado y llama /cnt/*/
  2. ol.reset li:before {
  3. content: "(Azul" counter(cnt) ")"; /*Contenido del contador, además de su numeración*/
  4. counter-increment: cnt; /*el contador al que afecta: cnt*/
  5. color: blue; /*esta y la siguiente sólo a efectos visuales*/
  6. font-style: italic;
  7. }
  8. /*el segundo que necesitamos para llevar doble contabilidad que llamo /otra/ y el segundo contador llamado /rojo/*/
  9. ol.otra li:before {
  10. content: "(Rojo" counter(rojo) ")"; 
  11. counter-increment: rojo;
  12. color: red;
  13. font-family: monospace;
  14. }
Como se ve en el css, cada /li/ incluido en una lista de definición con clase /.reset/ incrementará (sin reiniciar) el contador /cnt/
Los mismo para los de clase /.otra/ en el contador /rojo/

Lo siguiente es actuar en el html, aplicando una de las dos clases que afectan a los contadores css: /.reset u .otra/ en aquellas listas de numeración que necesitemos para incrementar una u otra numeración.

Unos pocos estilos más para diferenciar visualmente las dos numeraciones y nos quedaría algo como el siguiente código:
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  5. <title>Kseso? Jugando con css</title>
  6. <style type="text/css">
  7.  * {
  8.     margin: 0;
  9.     padding: 0;
  10.     border: 0;
  11.     outline: 0;
  12.   }
  13. body{
  14. counter-reset: cnt rojo;
  15. padding: 2em;
  16. }
  17.  
  18. ol, ul {
  19. list-style-type:none;
  20. }
  21.  
  22. ol.otra li:before {
  23. content: "(Rojo" counter(rojo) ")"; 
  24. counter-increment: rojo;
  25. color: red;
  26. font-family: monospace;
  27. }
  28. ol.reset li:before {
  29. content: "(Azul" counter(cnt) ")"; 
  30. counter-increment: cnt;
  31. color: blue;
  32. font-style: italic;
  33. }
  34. ol li:before {display: inline-block; width: 100px;}
  35. del {font-size: .7em;}
  36. </style>
  37. </head>
  38. <body>
  39. <div>
  40.             <ol class="otra">
  41.                 <li>Numeración: 1 - Obtenido: 1 </li>
  42.                 <li>Numeración: 2 - Obtenido: 2 </li>
  43.             </ol>
  44.  
  45.             <ol class="otra">
  46.                 <li>Numeración: 3 - Obtenido: 3 </li>
  47.                 <li>Numeración: 4 - Obtenido: 4 </li>
  48.             </ol>
  49.  
  50.             <ol class="reset">
  51.                 <li>Numeración: 1 - Obtenido: 1 </li>
  52.                 <li>Numeración: 2 - Obtenido: 2</li>
  53.             </ol>
  54. </div>
  55.         
  56. <div>
  57.             <ol class="reset">
  58.                 <li>Numeración: 3 - <del>Obtenido: 5 </del> 3</li>
  59.                 <li>Numeración: 4 - <del>Obtenido: 6 </del> 4</li>
  60.             </ol>
  61. </div>
  62.     <ol class="otra">
  63.                 <li>Numeración: 5 - Obtenido: 5 </li>
  64.                 <li>Numeración: 6 - Obtenido: 6 </li>
  65.                 <li>Numeración: 7 - Obtenido: 7 </li>
  66.                 <li>Numeración: 8 - Obtenido: 8 </li>
  67.     </ol>
  68. <div>
  69.           <div>
  70.               <ul>
  71.                   <li>Una lista más profunda que también cuenta, pero no este /li/:</li>
  72.                   <li>
  73.                       <ol class="reset">
  74.                           <li>Numeración: 5 - Obtenido: 5 </li>
  75.                           <li>Numeración: 6 - Obtenido: 6</li>
  76.                       </ol>
  77.                   </li>
  78.                   <li>Tampoco este /li/ aumenta el contador, porque su /ul/ padre no tiene ninguna de las /class/ definidas para incrementar</li>
  79.               </ul>
  80.           </div>
  81. </div>
  82. </body>
  83. </html>
Si copia y ejecuta el código anterior, debe ver algo como lo siguiente:


Espero haber sido lo suficientemente claro como para resolver su problema, comprendiendo el porqué obtenía lo que obtenía y cómo lograr lo que necesitaba.

Hasta sólo los hados saben cuándo, usuarios de css.