Foros del Web » Creando para Internet » CSS »

imagen que no se superpnga

Estas en el tema de imagen que no se superpnga en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/06/2009, 23:04
 
Fecha de Ingreso: agosto-2005
Mensajes: 722
Antigüedad: 18 años, 7 meses
Puntos: 2
Pregunta imagen que no se superpnga

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&iacute;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>&acute;&ntilde;l&acute;&ntilde;l</p>
</body>
</html>
  #2 (permalink)  
Antiguo 15/06/2009, 01:44
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 16 años, 3 meses
Puntos: 68
Respuesta: imagen que no se superpnga

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.
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 15/06/2009, 06:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: imagen que no se superpnga

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
  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>play sobre imagen</title>
  4. <style type="text/css">
  5. * {margin:0; padding:0; position: relative;}
  6. body {background: #063;}
  7. #contenedor {width:850px;
  8. margin: 0 auto;
  9. background: #0c9;
  10. overflow:hidden;
  11. }
  12. .contenedor_texto{
  13. width: 600px;
  14. overflow:hidden;
  15. background: #fff;
  16. margin-bottom: 10px;
  17. }
  18. .contenedor_texto_sin_overf {
  19. width: 600px;
  20. border: 1px solid #900;
  21. background: #cdcdcd;
  22. margin-bottom: 10px;
  23. }
  24. .imgleft {
  25. float : left;
  26. padding : 5px;
  27. border : 1px solid #aaa;
  28. margin: 1px;
  29. margin-right : 10px;
  30. }
  31. </head>
  32. <div id="contenedor">
  33. <div class="contenedor_texto">
  34. <p><img class="imgleft" src="http://static.forosdelweb.com/fdwtheme/logo-reflejo.png" width="360" height="320" />
  35. Este es el primer bloque de texto con una imagen a su izquierda, mayor que el texto
  36. </p>
  37. </div>
  38. <div class="contenedor_texto">
  39. <p><img class="imgleft" src="http://static.forosdelweb.com/fdwtheme/logo-reflejo.png" width="360" height="20px" />
  40. 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
  41. </p>
  42. </div>
  43. <div class="contenedor_texto_sin_overf">
  44. <p><img class="imgleft" src="http://static.forosdelweb.com/fdwtheme/logo-reflejo.png" width="360" height="320" />
  45. 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>
  46. </div>
  47. </div>
  48. </body>
  49. </html>
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 15/06/2009 a las 11:49
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 03:36.