[Borrenlo xD] ¿Como coloco una lista de capas alineadas a la izquierda?

ZequeZ · #1 (**permalink**) 05/10/2009, 15:23

Bueno, es una pregunta medio boba, pero hace media hora que estoy intentando y no me sale xDDD.

La cosa es que quiero colocar unos comentarios, con su respectivo avatar a la izquierda...

Código:

[Avatar][Comentario multilinea]
        [Comentario multilinea]
        [Comentario multilinea]
        [Comentario multilinea]
        [Comentario multilinea]
        [Comentario multilinea]
[Avatar][Comentario multilinea]
        [Comentario multilinea]
        [Comentario multilinea]
        [Comentario multilinea]
        [Comentario multilinea]
        [Comentario multilinea]
[Avatar][Comentario multilinea]
        [Comentario multilinea]
        [Comentario multilinea]
        [Comentario multilinea]
        [Comentario multilinea]
        [Comentario multilinea]

He intentado colocando cada comentario en una capa contenedora con posición relativa, pero el problema es que esta no se alarga con el comentario, ya que este requiere de posición absoluta para colocarlo a la derecha del avatar.

También intenté colocandolos en una lista y alinear las capas con float:left, pero otra vez, la capa contenedora no cambia de tamaño con el comentario -.-.

Como hago? =(

PD: Se me ocurre que podría dejar un margen grande a la izquierda del comentario para el avatar, y posicionar a este absolutamente dentro del comentario, pero no quiero hacer cosas raras dejando tanto margin :S.

→→→→→→→→→→→→→→→→→→→→ EDITO:

Listo, ya lo solucioné, a la capa contenedora de cada comentario (Avatar y texto) le puse posición relativa, y la capa de texto del comentario, le puse posición relativa, y a a capa de avatar le puse absoluta :P.

kseso? · #2 (**permalink**) 05/10/2009, 16:02

ZequeZ

¿Pero por qué tantas cajas?
Vamos a hacer algo de prevención de divitis

Una caja conteniendo todo, y definimos 3 declaraciones de css:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Kseso? | Jugando con css</title>
 <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; border: 0; padding: 0;}
body {background: #f5f5f5;}
.avatares {position: relative; margin:0 auto; width: 600px; border: 1px solid #444;}
.avatares img {float: left; width: 50px; padding: 10px;}
.avatares p {margin:10px 10px 10px 70px;}
hr {clear: both;}
</style>
</head>
<body>
<div class="avatares">
<img src="http://www.forosdelweb.com/customavatars/avatar121292_1.gif" alt="avatar" />
<p>Lorem ipsum dolor sit amet consectetuer tellus iaculis at nunc pede. A quis faucibus et justo Curabitur eu dui Phasellus vel elit. Sed et vitae faucibus sed hac convallis sed eu ipsum convallis. Justo elit fringilla ante sagittis sem Pellentesque elit lacinia enim Curabitur. Pellentesque senectus eleifend sed et Nam et Nam amet orci pulvinar. Condimentum cursus dui id nisl dolor purus egestas tristique tincidunt ut. Ante sem.</p>
<hr />
<img src="http://www.forosdelweb.com/customavatars/avatar153985_1.gif" alt="avatar" />
<p>Lorem ipsum dolor sit amet consectetuer tellus iaculis at nunc pede. A quis faucibus et justo Curabitur eu dui Phasellus vel elit. egestas tristique tincidunt ut. Ante sem.</p>
<hr />
<img src="http://www.forosdelweb.com/customavatars/avatar184738_13.gif" alt="avatar" />
<p>Lorem ipsum dolor sit amet consectetuer tellus iaculis at nunc pede. A quis faucibus et justo Curabitur eu dui Phasellus vel elit. Sed et vitae faucibus sed hac convallis sed eu ipsum convallis. Justo elit fringilla ante sagittis sem Pellentesque elit lacinia enim Curabitur. Pellentesque senectus eleifend sed et Nam et Nam amet orci pulvinar. Condimentum cursus dui id nisl dolor purus egestas tristique tincidunt ut. Ante sem. Lorem ipsum dolor sit amet consectetuer tellus iaculis at nunc pede. A quis faucibus et justo Curabitur eu dui Phasellus vel elit. Sed et vitae faucibus sed hac convallis sed eu ipsum convallis.</p>
<hr />
</div>
</body>
</html>

Si te preguntas por el <hr />, es para prevenir el caso central: imagen con más altura que el texto.

Un saludo

ZequeZ · #3 (**permalink**) 05/10/2009, 17:41

Cita:

Iniciado por kseso?

ZequeZ

¿Pero por qué tantas cajas?
Vamos a hacer algo de prevención de divitis

Una caja conteniendo todo, y definimos 3 declaraciones de css:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Kseso? | Jugando con css</title>
 <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; border: 0; padding: 0;}
body {background: #f5f5f5;}
.avatares {position: relative; margin:0 auto; width: 600px; border: 1px solid #444;}
.avatares img {float: left; width: 50px; padding: 10px;}
.avatares p {margin:10px 10px 10px 70px;}
hr {clear: both;}
</style>
</head>
<body>
<div class="avatares">
<img src="http://www.forosdelweb.com/customavatars/avatar121292_1.gif" alt="avatar" />
<p>Lorem ipsum dolor sit amet consectetuer tellus iaculis at nunc pede. A quis faucibus et justo Curabitur eu dui Phasellus vel elit. Sed et vitae faucibus sed hac convallis sed eu ipsum convallis. Justo elit fringilla ante sagittis sem Pellentesque elit lacinia enim Curabitur. Pellentesque senectus eleifend sed et Nam et Nam amet orci pulvinar. Condimentum cursus dui id nisl dolor purus egestas tristique tincidunt ut. Ante sem.</p>
<hr />
<img src="http://www.forosdelweb.com/customavatars/avatar153985_1.gif" alt="avatar" />
<p>Lorem ipsum dolor sit amet consectetuer tellus iaculis at nunc pede. A quis faucibus et justo Curabitur eu dui Phasellus vel elit. egestas tristique tincidunt ut. Ante sem.</p>
<hr />
<img src="http://www.forosdelweb.com/customavatars/avatar184738_13.gif" alt="avatar" />
<p>Lorem ipsum dolor sit amet consectetuer tellus iaculis at nunc pede. A quis faucibus et justo Curabitur eu dui Phasellus vel elit. Sed et vitae faucibus sed hac convallis sed eu ipsum convallis. Justo elit fringilla ante sagittis sem Pellentesque elit lacinia enim Curabitur. Pellentesque senectus eleifend sed et Nam et Nam amet orci pulvinar. Condimentum cursus dui id nisl dolor purus egestas tristique tincidunt ut. Ante sem. Lorem ipsum dolor sit amet consectetuer tellus iaculis at nunc pede. A quis faucibus et justo Curabitur eu dui Phasellus vel elit. Sed et vitae faucibus sed hac convallis sed eu ipsum convallis.</p>
<hr />
</div>
</body>
</html>

Si te preguntas por el <hr />, es para prevenir el caso central: imagen con más altura que el texto.

Un saludo

Ahhh, el secreto taba en el "clear" xDDD.
Ni la conocía esa propiedad, gracias xD.

De todos modos, lo tenía que hacer con capas si o si, porque sino no le puedo poner bordes redondeados, imágenes, ni anda raro xd.