imagen que no se superpnga

alfil123 · #1 (**permalink**) 14/06/2009, 23:04

hola amigos , estoy trabajando con css, y tengo un problemita, bueno estoy poniendo dentro de dos div una imagen con un texto de lado,(la imagen es mas alta que el texto), bueno el problema es que la imagen del primer div pasa hasta el segundo div
este es el codigo que use, y mi pegunta es como le hago para que la imagen se quede dentro del div y flote alado del texto que esta tambien dentro del div
/* CSS Document */

contenedor_texto02{

height:500px;
width:500px;

}
.imgleft {

float : left;

padding : 5px;
border : 1px solid #aaa;
margin: 1px;
margin-right : 10px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin título</title>
<link rel="STYLESHEET" type="text/css" href="libreria03.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div id="contenedor_texto">
<p align="left"><img src="Imagenes/baner03.gif" width="360" height="320" class="imgleft"> hjhjhjklhjklhjklhjklh
</p>
</div>
<div id="contenedor_texto">
<p align="left"><img src="Imagenes/baner03.gif" width="360" height="319" class="imgleft"> hjhjhjklhjklhjklhjklh
</p>
</div>

<p>´ñl´ñl</p>
</body>
</html>

hades87 · #2 (**permalink**) 15/06/2009, 01:44

Para empezar yo aislaría la imagen en un div y el texto en otro, dándole a uno un float: left y al otro un float right.

kseso? · #3 (**permalink**) 15/06/2009, 06:30

Hola Alfil123

Los elementos flotados no hacen crecer a su contenedor, por lo tanto tienes que añadir un "overflow: auto /o/ hidden"

En tu css tienes "contenedor_texto02{..." (supongo que ha sido despiste que no le preceda el . (punto) y en el html como "<div id="contenedor_texto">" (no puede ser un id porque estás usándolo varias veces y no hay concordancia con el css).
Así mismo, tienes la etiqueta img sin cerrar.

Me permito rehacer tu código, a ver si es eso lo que pretendes.
Entre otras cosas, la clase imgleft se la aplico a las imágenes, no a los párrafos.

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>play sobre imagen</title>
<style type="text/css">
* {margin:0; padding:0; position: relative;}
body {background: #063;}
#contenedor {width:850px;
margin: 0 auto;
background: #0c9;
overflow:hidden;
}
.contenedor_texto{
width: 600px;
overflow:hidden;
background: #fff;
margin-bottom: 10px;
}
.contenedor_texto_sin_overf {
width: 600px;
border: 1px solid #900;
background: #cdcdcd;
margin-bottom: 10px;
}
.imgleft {
float : left;
padding : 5px;
border : 1px solid #aaa;
margin: 1px;
margin-right : 10px;
}
</style>
</head>
<body>
<div id="contenedor">
<div class="contenedor_texto">
<p><img class="imgleft" src="http://static.forosdelweb.com/fdwtheme/logo-reflejo.png" width="360" height="320" />
Este es el primer bloque de texto con una imagen a su izquierda, mayor que el texto
</p>
</div>
<div class="contenedor_texto">
<p><img class="imgleft" src="http://static.forosdelweb.com/fdwtheme/logo-reflejo.png" width="360" height="20px" />
Este es el segundo párrafo, pero con una imagen menos alta que la enterior y texto suficiente como para que ocupe mayor altura que la imagen. Verás cómo el texto fluye y se adapta a la imagen
</p>
</div>
<div class="contenedor_texto_sin_overf">
<p><img class="imgleft" src="http://static.forosdelweb.com/fdwtheme/logo-reflejo.png" width="360" height="320" />
contenedor sin la propiedad overflow, con una imagen grande y poco texto, con su fondo gris y un borde rojo para que veas la diferencia con el primero</p>
</div>
</div>
</body>
</html>