Foros del Web » Creando para Internet » CSS »

counter y div

Estas en el tema de counter y div en el foro de CSS en Foros del Web. El objetivo de mi codigo es controlar la numeracion de las listas mediante clases. Así, si a una lista le asigno la clase "reset", la ...
  #1 (permalink)  
Antiguo 08/09/2010, 11:15
 
Fecha de Ingreso: noviembre-2009
Mensajes: 17
Antigüedad: 8 años, 1 mes
Puntos: 1
counter y div

El objetivo de mi codigo es controlar la numeracion de las listas mediante clases. Así, si a una lista le asigno la clase "reset", la numeración de esa lista empezaria de nuevo por 1. Sino, continuaría con la numeración anterior. El problema es que dichas listas pueden ir en diferentes divs, y la numeración no sigue de un div a otro.

Por ejemplo, tengo el siguente codigo html:

Código HTML:
<div>
        <ol class="reset">
            <li>primer elemento</li>
            <li>segundo elemendo</li>
        </ol>
        <p>
            texto
        </p>
        <ol>
            <li>tercer elemento</li>
            <li>cuarto elemento</li>
        </ol>
        </div>
        
        <div>
        <ol>
            <li>quinto elemento</li>
            <li>sexto elemento</li>
        </ol>
        <p>
            texto
        </p>
        <ol class="reset">
            <li>primer elemento</li>
            <li>segundo elemento</li>
        </ol>
</div> 
y el siguiente codigo CSS:

Código CSS:
Ver original
  1. body{
  2.     counter-reset:lista;
  3. }
  4.  
  5. .reset{
  6.     counter-reset:lista;
  7. }
  8.  
  9. ol li{
  10.      list-style-type: none;
  11. }
  12.  
  13. ol li:before{
  14.  content: "("counter(lista) ")";
  15.  counter-increment: lista;
  16. }

quiero que la tercera lista siga la numeración de la anterior; que empice por 5. pero al estar en diferentes divs, lo que consigo es que la numeracion empiece de 1 de nuevo.

como podría conseguir que siguiera la numeración a pesar de estar en diferentes divs?
  #2 (permalink)  
Antiguo 08/09/2010, 12:36
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: counter y div

Está poniendo a 0 dos veces el mismo contador, una en /body/ y otra para cada /.reset/ Y recuerde que la última es la que manda.
Elimine de su css lo siguiente:
Código CSS:
Ver original
  1. .reset{
  2.     counter-reset:lista;
  3. }

Como complemento y para hacer más específico el contador, si va a tener algún /ol/ que no desee que incremente el contador, sería conveniente que aplicase alguna clase a los /ol/ que cuenten para el contador:
en vez de
Código CSS:
Ver original
  1. ol li:before{...}
mejor
Código CSS:
Ver original
  1. ol.clasequecuenta li:before {...}
aplicando en el html la clase /.clasequecuenta/ a los /ol/ que quiera que incrementen.
  #3 (permalink)  
Antiguo 13/09/2010, 07:28
 
Fecha de Ingreso: noviembre-2009
Mensajes: 17
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: counter y div

muchisimas gracias por la respuesta! la verdad es que en cierta manera sí he resuelto el problema poniendo las cosas en el modo en el que me has dicho. pero hay una cosa que no puedo: tener diferentes series a lo largo de la página, o mejor dicho, resetear el contador en cualquier momento (lista). no sé si sería posible.
  #4 (permalink)  
Antiguo 13/09/2010, 09:48
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: counter y div

Sí se pueden las dos cosas. Tener varios contadores distintos (e incluso anidados /counters/ o resetear alguno de ellos.

Pero se podría ofrecer una respuesta más precisa, concreta y efectiva en su caso particular, si pudiésemos trabajar con su propio código.

Un ejemplo de contadores anidados: http://css.devillasbuenas.es/generar-contenido.html
  #5 (permalink)  
Antiguo 20/09/2010, 10:09
 
Fecha de Ingreso: noviembre-2009
Mensajes: 17
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: counter y div

Le he estado dando muchas vueltas a este tema, lei el ejemplo que me diste, pero sigo sin conseguir lo que quiero...

respecto a los reset, no he leido por ningún lado que no pueda poner a 0 un contador en diferentes etiquetas.

si probais este ejemplo creo que entendereis lo que quiero. En cada elemento de la lista se explica cual es la numeración que quiero obtener, y cual la que he conseguido.

Código HTML:
<div>
            <ol >
                <li > Numeración: 1 - Obtenido: 1 </li>
                <li > Numeración: 2 - Obtenido: 2 </li>
            </ol>

            <ol >
                <li >Numeración: 3 - Obtenido: 3 </li>
                <li >Numeración: 4 - Obtenido: 4 </li>
            </ol>

            <ol class="reset">
                <li >Numeración: 1 - Obtenido: 1 </li>
                <li > Numeración: 2 - Obtenido: 2</li>
            </ol>
        </div>
        
        <div>
            <ol >
                <li > Numeración: 3 - Obtenido: 5</li>
                <li > Numeración: 4 - Obtenido: 6</li>
            </ol>
        </div> 
el CSS sería el mismo que tenía la semana pasada (después de todos los cambios que hice, he terminado con el mismo codigo)

Código CSS:
Ver original
  1. body{
  2. counter-reset: cnt;
  3. }
  4.  
  5. ol li{
  6. list-style-type:none;
  7. }
  8.  
  9. ol.reset{
  10. counter-reset:cnt;
  11. }
  12.  
  13. ol li:before{
  14. content: "(" counter(cnt) ")";
  15. counter-increment: cnt;
  16. }

el contador no debería de ser 3, por haberlo reiniciado en la lista anterior? si elimino los divs, consigo la numeración que quiero!! que es lo que pasa con los divs y con los contadores?

me da que el problema esta, como decias, en hacer dos reset. pero no porque la ultima es la que manda, si no por lo que engloba cada etiqueta en la que se hace reset... el ol.reset se queda dentro del div que lo contiene y al salir del div es el reset del body el que manda...

sería facil si pudiese meter en un div cada lista seguida, pero el HTML no lo puedo cambiar, y no sé que codigo CSS necesito para conseguir lo que quiero...

espero que se haya entendido

Última edición por siameiz; 20/09/2010 a las 10:28
  #6 (permalink)  
Antiguo 21/09/2010, 11:17
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
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. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  4. <title>Kseso? Jugando con css</title>
  5. <style type="text/css">
  6.  * {
  7.     margin: 0;
  8.     padding: 0;
  9.     border: 0;
  10.     outline: 0;
  11.   }
  12. body{
  13. counter-reset: cnt rojo;
  14. padding: 2em;
  15. }
  16.  
  17. ol, ul {
  18. list-style-type:none;
  19. }
  20.  
  21. ol.otra li:before {
  22. content: "(Rojo" counter(rojo) ")";
  23. counter-increment: rojo;
  24. color: red;
  25. font-family: monospace;
  26. }
  27. ol.reset li:before {
  28. content: "(Azul" counter(cnt) ")";
  29. counter-increment: cnt;
  30. color: blue;
  31. font-style: italic;
  32. }
  33. ol li:before {display: inline-block; width: 100px;}
  34. del {font-size: .7em;}
  35. </head>
  36. <div>
  37.             <ol class="otra">
  38.                 <li>Numeración: 1 - Obtenido: 1 </li>
  39.                 <li>Numeración: 2 - Obtenido: 2 </li>
  40.             </ol>
  41.  
  42.             <ol class="otra">
  43.                 <li>Numeración: 3 - Obtenido: 3 </li>
  44.                 <li>Numeración: 4 - Obtenido: 4 </li>
  45.             </ol>
  46.  
  47.             <ol class="reset">
  48.                 <li>Numeración: 1 - Obtenido: 1 </li>
  49.                 <li>Numeración: 2 - Obtenido: 2</li>
  50.             </ol>
  51. </div>
  52.        
  53. <div>
  54.             <ol class="reset">
  55.                 <li>Numeración: 3 - <del>Obtenido: 5 </del> 3</li>
  56.                 <li>Numeración: 4 - <del>Obtenido: 6 </del> 4</li>
  57.             </ol>
  58. </div>
  59.     <ol class="otra">
  60.                 <li>Numeración: 5 - Obtenido: 5 </li>
  61.                 <li>Numeración: 6 - Obtenido: 6 </li>
  62.                 <li>Numeración: 7 - Obtenido: 7 </li>
  63.                 <li>Numeración: 8 - Obtenido: 8 </li>
  64.     </ol>
  65. <div>
  66.           <div>
  67.               <ul>
  68.                   <li>Una lista más profunda que también cuenta, pero no este /li/:</li>
  69.                   <li>
  70.                       <ol class="reset">
  71.                           <li>Numeración: 5 - Obtenido: 5 </li>
  72.                           <li>Numeración: 6 - Obtenido: 6</li>
  73.                       </ol>
  74.                   </li>
  75.                   <li>Tampoco este /li/ aumenta el contador, porque su /ul/ padre no tiene ninguna de las /class/ definidas para incrementar</li>
  76.               </ul>
  77.           </div>
  78. </div>
  79. </body>
  80. </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.
  #7 (permalink)  
Antiguo 22/09/2010, 03:21
 
Fecha de Ingreso: noviembre-2009
Mensajes: 17
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: counter y div

antes que nada, muchisimas gracias por la respuesta!! es un placer escribir en este foro y recibir respuestas tan rapidamente!

pero.... y si ahora quiero empezar por 1 otra vez? necesito otro contador?

esto es algo impensable en mi caso, porque los usuarios de mi aplicación (tipo wiki) pueden querer tener muchas listas en sus páginas, listas que pueden seguir su numeración a traves de divs (cada sección va en un div) y que cuando quieran puedan reiniciar la numeración.

por las explicaciones que me das, creo que no podría conseguir lo que quiero. sí para el ejemplo que he dado arriba, pero no para todos los casos que se puedan dar en mi aplicación.

lo seguiré intentando, leyendo y releyendo tutoriales sobre contadores pero no estoy muy segura de si voy a poder hacerlo. muchisimas gracias de todos modos!
  #8 (permalink)  
Antiguo 23/09/2010, 10:29
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: counter y div

Cita:
y si ahora quiero empezar por 1 otra vez? necesito otro contador?
Si quiere reiniciar (comenzar la cuenta) en un contador ya creado, sólo necesita identificar una clase o id en el html al que asignarle el /counter-reset: contadorReiniciado/
Pero ha de tener en cuenta, que una vez reiniciado, ese contador a partir de ese momento ya no puede "desreiniciarlo" para continuar con la cuenta primera.
Me explico con un supuesto: si su cnt cuando va por el nº 8 lo pone a cero, ya no podrá retomar la cuenta primera para asignarle el 9, sino que seguirá la numeración correspondiente a la última cuenta iniciada. Esto es, no puede hacer: 1-2-3...8/reinicio/1-2-3-4/retomar 1ª/9-10....

Cita:
...porque los usuarios de mi aplicación (tipo wiki) pueden querer tener muchas listas en sus páginas...
Veo más compleja la parte de programación e implementación para que sus usuarios puedan hacerlo que la parte de css.
Como ya le decía en anteriores mensajes, sólo necesita hacer dos cosas:
- iniciar el contador con su correspondiente /counter-reset: nombre/
- identificar con una clase aquellos elementos que desee aumenten la cuenta con su /counter-increment:nombre; content: "algo" counter(nombre) "algo",/

Y en caso de que contadores encadenados, utilizar la sintaxis /content: "algo" counters(nombre) "algo"/

Pero como ya manifesté, en los son casos muy concretos se necesita conocer detalladamente los códigos, la metodología y el qué para poder responder con un cómo ad hoc.

Etiquetas: counter
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:26.