[Ovillo] span position: absolute dentro de un li
coyr
abpdesign en gmail.com
Mie Oct 24 22:24:35 UTC 2007
Hola que tal. No logro hacer que en explorer un span que están dentro de un
li donde también hay un párrafo. Me funcione la posición absoluta del span.
El codigo es el siguiente
html
<code>
<div class="barra">
<ul>
<li>
<span>19%</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</p>
</li>
<li>
<span>19%</span>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>
</li>
<li>
<span>19%</span>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>
</li>
</ul>
</div>
</code>
Y el CSS es:
.barra { background: #ddd;}
.barra ul, .barra li { margin:0; padding:0; list-style-type: none;
}
.barra ul li { position: relative; clear: both;}
.barra ul li span { border: 1px solid red; position: absolute;
margin: 0; padding: 0; top:0; }
.barra ul li p { padding-left: 50px; border: 1px solid red; margin:
0 0 5px 0;}
La idea es como se vé en Firefox. Si este "experimento" se saca de los
elementos li y sé usa un contenedor como un div, este ya funciona en ie y en
firefox. Pero la idea es hacerlo con la lista. Si alguien puede ayudarme a
encontrar la solución se lo agradecería ;). También he obtenido resultado
similares con float. Bueno, se los dejo a su imaginación. Thanks ;)
--
...Dios si juega a los dados
Más información sobre la lista de distribución Ovillo