Hola,
Éste es un bonito ejemplo de cómo el top-posting dificulta leer todo el
hilo, pero de todos modos sigo abajo de todo.
Bernat Lleonart wrote:
Gracias, ya está solucionado.
Un saludo.
2005/12/18, McDave <[EMAIL PROTECTED]>:
Mi apaño sería poner despues de </p> y antes del </div> un <p
style="clear:both;"></p> para que no se colase la imagen fuera del
div.
On 12/17/05, Bernat Lleonart <[EMAIL PROTECTED]> wrote:
Hola,
Tengo este código, y me gustaría saber cómo podría hacer que el border
del div "activitat" envolviera también a la imagen flotada, de manera
que esta se viera también dentro del marco.
Muchas gracias.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
<html>
<head>
<title>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.activitat {
border: 1px solid #ffab00;
margin: 0 0 6em; 0
color: red;
}
.fotoactivitatesq {
float: left;
margin: 0 1em 0 0;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="activitat">
<h2>Titular</h2>
<img src="imatges/img.jpg" width="184" height="148"
alt="img"
class="fotoactivitatesq">
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Donec
est augue, dapibus nec, sollicitudin id, ornare id, turpis. Integer et
nunc sed dolor vulputate convallis. Nullam lacus lorem, facilisis a,
iaculis id, tincidunt quis, leo. Aliquam id elit ut lectus tempor
bibendum. Duis at nibh ac odio varius tempor. Mauris molestie.</p>
</div>
</body>
</html>
Aunque esté solucionado el problema, te propongo un par de tips que
pueden hacer más elegante tu código.
Para conseguir que el div contenedor envuelva a la imagen flotada, basta
con agregar overflow: hidden al primero:
.activitat {
overflow: hidden;
border: 1px solid #ffab00;
margin: 0 0 6em; 0
color: red;
}
También cambiaría class por id en el contenedor y eliminaría el class en
la imagen. Tu código quedaría así:
CSS
#activitat {
overflow: hidden;
border: 1px solid #ffab00;
margin: 0 0 6em; 0
color: red;
}
#activitat img {
float: left;
margin: 0 1em 0 0;
border: 1px solid blue;
}
HTML
<div id="activitat">
<h2>Titular</h2>
<img src="imagen.jpg" width="184" height="148" alt="img">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec est
augue, dapibus nec, sollicitudin id, ornare id, turpis. Integer et nunc
sed dolor vulputate convallis. Nullam lacus lorem, facilisis a, iaculis
id, tincidunt quis, leo. Aliquam id elit ut lectus tempor bibendum. Duis
at nibh ac odio varius tempor. Mauris molestie.</p>
</div>
Saludos
--
Camilo Kawerín
27Sur comunicación & diseño
http://www.27sur.com
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
