Foros del Web - Ver Mensaje Individual - [Borrenlo xD] ¿Como coloco una lista de capas alineadas a la izquierda?

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.