Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de [Borrenlo xD] ¿Como coloco una lista de capas alineadas a la izquierda? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/10/2009, 16:23
 
Fecha de Ingreso: mayo-2008
Ubicación: En la guarida del mal, tratando de conquistar el mundo
Mensajes: 174
Antigüedad: 9 años, 6 meses
Puntos: 2
Pregunta [Borrenlo xD] ¿Como coloco una lista de capas alineadas a la izquierda?

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.

Última edición por ZequeZ; 05/10/2009 a las 16:41 Razón: Solucionado xD
  #2 (permalink)  
Antiguo 05/10/2009, 17:02
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: [Borrenlo xD] ¿Como coloco una lista de capas alineadas a la izquierda?

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
  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" xml:lang="es" lang="es-es">
  3. <title>Kseso? | Jugando con css</title>
  4.  <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {margin: 0; border: 0; padding: 0;}
  7. body {background: #f5f5f5;}
  8. .avatares {position: relative; margin:0 auto; width: 600px; border: 1px solid #444;}
  9. .avatares img {float: left; width: 50px; padding: 10px;}
  10. .avatares p {margin:10px 10px 10px 70px;}
  11. hr {clear: both;}
  12. </head>
  13. <div class="avatares">
  14. <img src="http://www.forosdelweb.com/customavatars/avatar121292_1.gif" alt="avatar" />
  15. <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>
  16. <hr />
  17. <img src="http://www.forosdelweb.com/customavatars/avatar153985_1.gif" alt="avatar" />
  18. <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>
  19. <hr />
  20. <img src="http://www.forosdelweb.com/customavatars/avatar184738_13.gif" alt="avatar" />
  21. <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>
  22. <hr />
  23. </div>
  24. </body>
  25. </html>

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

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 05/10/2009, 18:41
 
Fecha de Ingreso: mayo-2008
Ubicación: En la guarida del mal, tratando de conquistar el mundo
Mensajes: 174
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: [Borrenlo xD] ¿Como coloco una lista de capas alineadas a la izquierda?

Cita:
Iniciado por kseso? Ver Mensaje
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
  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" xml:lang="es" lang="es-es">
  3. <title>Kseso? | Jugando con css</title>
  4.  <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {margin: 0; border: 0; padding: 0;}
  7. body {background: #f5f5f5;}
  8. .avatares {position: relative; margin:0 auto; width: 600px; border: 1px solid #444;}
  9. .avatares img {float: left; width: 50px; padding: 10px;}
  10. .avatares p {margin:10px 10px 10px 70px;}
  11. hr {clear: both;}
  12. </head>
  13. <div class="avatares">
  14. <img src="http://www.forosdelweb.com/customavatars/avatar121292_1.gif" alt="avatar" />
  15. <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>
  16. <hr />
  17. <img src="http://www.forosdelweb.com/customavatars/avatar153985_1.gif" alt="avatar" />
  18. <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>
  19. <hr />
  20. <img src="http://www.forosdelweb.com/customavatars/avatar184738_13.gif" alt="avatar" />
  21. <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>
  22. <hr />
  23. </div>
  24. </body>
  25. </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.

Última edición por ZequeZ; 05/10/2009 a las 18:43 Razón: Error tipográfico
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 07:20.