2005/12/18, Camilo Kawerín <[EMAIL PROTECTED]>: > 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.
Lo siento, suelo tenerlo en cuenta pero hoy he respondido con prisas y se me ha olvidado. > 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í: El problema es que aparece más de un elemento en la página con ese nombre, y por eso he optado por utilizar una clase. > 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 Muchas gracias por tus consejos. _______________________________________________ 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
