Numeracion ol

TheKraKeN · #1 (**permalink**) 27/08/2013, 19:52

Bueno tengo un problema no se me ocurre cual es la solucion resulta que la lista deberia de ser numerada pero me muestra todos los elementos con el numero 1

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Ag666" />

<title>Sin título 1</title>
    
<style>
.post-outer ol{
 margin-left:0;
 padding-left:0
}
.post ol li{
 position:relative;     
 margin:0 0 20px 2em !important;
 padding:4px 8px !important;
 list-style:none;
 *list-style: decimal;
}
.post ol li:before{
 counter-increment:li;
 content:counter(li);
 position:absolute;
 top:-8px;
 left:-39px;
 font-family:'Oswald', serif;
 font-size:40px; /*tamaño de la fuente*/
 width:34px;
 margin:0 0 10px 0;
 padding:4px !important;
 color:#000;
 text-align:center;
}

</style>  
</head>
 
<body>
<div id="wrapper">
    <div class="post">
        <ol>
            <li>El contenido del 1er. elemento</li>
            <li>El contenido del 2do. elemento</li>
            <li>El contenido del 3er. elemento</li>
            <li>El contenido del 4to. elemento</li>
      </ol>
    </div> 
</div>

</body>
</html>

C2am · #2 (**permalink**) 27/08/2013, 21:10

Te sale un 1 porque el pseudoelemento before es uno por cada li.
Por cada nuevo li se implementa un NUEVO :before, con lo cual la cuenta siempre se estará reiniciando.

Edito: posible solución
Has el conteo en .post ol li, y no en .post ol li:before

Código CSS:

Ver original.post-outer ol{
 margin-left:0;
 padding-left:0
}
.post ol li{
 position:relative;     
 margin:0 0 20px 2em !important;
 padding:4px 8px !important;
 list-style:none;
 *list-style: decimal;
    counter-increment:li;
}
.post ol li:before{
 
 content:counter(li);
 position:absolute;
 top:-8px;
 left:-39px;
 font-family:'Oswald', serif;
 font-size:40px; /*tamaño de la fuente*/
 width:34px;
 margin:0 0 10px 0;
 padding:4px !important;
 color:#000;
 text-align:center;
}

http://jsfiddle.net/c2am/HSRfX/41/

faillure · #3 (**permalink**) 28/08/2013, 04:55

¿ganas de complicarse la vida?

Código HTML:

Ver original<ol>
            <li>El contenido del 1er. elemento</li>
            <li>El contenido del 2do. elemento</li>
            <li>El contenido del 3er. elemento</li>
            <li>El contenido del 4to. elemento</li>
</ol>

Código CSS:

Ver original/*
nada que declarar, señor agente.
La numeracion sale sola.
*/

O como diría Bart: "yo no he sido".

Pero si quiere poner guapos los números y no el contenido, piense:
¿por qué vuelve a comenzar la cuenta en cada li?
¿qué propiedad del grupo 'counter' se olvidó de usar?
Pista: la que pone a cero los contadores.
¿a que elemento se aplica el volver a comenzar la cuenta?
[URL="http://ksesocss.blogspot.com/2012/10/contadores-css.html"]pista[/URL]

pista 2
ol {counter-reset: li;} fin de la pista

pregunta: por que me salen los enlaces tan raros?