Foros del Web » Creando para Internet » CSS »

Como defino la altura de un div respecto a una imagen?

Estas en el tema de Como defino la altura de un div respecto a una imagen? en el foro de CSS en Foros del Web. Que tal. Buscando solución a mi problema encontré este link: http://www.agenciaweb.cl/blog/altura-minima.htm Tomaré las imagenes de esa web para explicar lo que quiero hacer: Esta asi: ...
  #1 (permalink)  
Antiguo 16/01/2009, 18:39
 
Fecha de Ingreso: septiembre-2008
Ubicación: Chihuahua, México
Mensajes: 88
Antigüedad: 9 años, 2 meses
Puntos: 2
Como defino la altura de un div respecto a una imagen?

Que tal. Buscando solución a mi problema encontré este link: http://www.agenciaweb.cl/blog/altura-minima.htm
Tomaré las imagenes de esa web para explicar lo que quiero hacer:

Esta asi:


y quiero que se vea asi:


pero que la solucion me funcione para cualquier tamaño de imagen, es decir, que si la imagen mide 800px de largo, el div contenedor se estire a ese alto para que siga viendose el fondo gris.

En otras palabras quiero que la altura del div que contiene la imagen siempre tenga como mínimo la altura de esta misma independientemente de que tamaño sea. En el link que les puse explican como hacerlo pero cuando la altura de la imagen esta definida.

En los comentarios hablan de que esto se arregla con overflow:hidden pero no se como ni en que parte del codigo aplicarlo y si en realidad esto soluciona el problema para cualqueir tamaño de imagen.

Gracias de antemano.
  #2 (permalink)  
Antiguo 16/01/2009, 21:45
 
Fecha de Ingreso: enero-2009
Ubicación: Mexico
Mensajes: 99
Antigüedad: 8 años, 11 meses
Puntos: 2
Respuesta: Como defino la altura de un div respecto a una imagen?

Se pone en el atributo "style" de la <div>

Código:
<div style="overflow:hidden">
...
</div>
Ahora, no creo que esto haga lo que dices, mas bien, yo digo:

Código:
<div style="height:auto;">
...
</div>
Que aún así no deberías necesitarlo, porque las el atributo "height" en una div, por default es auto (más que defina por herencia otra cosa).
  #3 (permalink)  
Antiguo 17/01/2009, 09:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como defino la altura de un div respecto a una imagen?

Pon el overflow: hidden al div contenedor, al contenedor con fondo gris que va a contener tanto la imagen como el texto, y debes hacerlo en su selector CSS.

Si no sabes cómo, pon el dódigo que estás usando para ese intento y te digo dónde.
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 17/01/2009, 10:40
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Como defino la altura de un div respecto a una imagen?

Saludos!

Explicando la funcion de el Overflow:
(par ponerlo en palabras simples)

El overflow es la barra que aparece a un lado de un cuadro, o en la parte inferior cuando un cuadro (ya sea div, tabla, o cualquier elemento que pueda tener esta propiedad) es mas grande de los limites que le has puesto, entonces aparece esa barra que es con la que subes y bajas... como la que aparece en esta misma pagina de el lado derecho para que subas y bajes.

Si pones al overflow en Hiden, simplemente esa barra no aparecera.
Si pones al overflow en Auto*, aparecera solo si es necesaria.

*Esta propiedad no solucionara tu problema.

Saludos!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #5 (permalink)  
Antiguo 17/01/2009, 11:51
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como defino la altura de un div respecto a una imagen?

CaLiZzZ, ten en cuenta lo siguiente: si la caja tiene altura definida, el overflow hará aparecer o no el scroll a partir de esa altura, pero si no la tiene, en Firefox lo que vas a conseguir es que haga crecer una caja que no lo haría por tener todas sus cajas contenidas con float.
Así, que sí, funcionará, pero a veces y dependiendo de otros factores puede presentar problemas con IE6. No siempre se usa por eso mismo, usando en su lugar el div del corte y el clear: both.
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 17/01/2009, 11:52
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Como defino la altura de un div respecto a una imagen?

Oh! gran detalle!! gracias por el dato Mik! lo tendre en cuenta cuando regrese al diseño web! xD
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #7 (permalink)  
Antiguo 17/01/2009, 12:17
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Como defino la altura de un div respecto a una imagen?

y si lo colocamos de esta manera:

Código HTML:
<div class="contenedor">
	<div class="img"><img name="" src="" width="200" height="200" alt="" style="background-color: #666666" /></div>
	
		<p class="texto">aqui va el contenido que quieras poner aqui va el contenido que quieras poner aqui va el contenido que quieras poner aqui va el contenido que quieras poner aqui va el contenido que quieras poner aqui va el contenido que quieras poner aqui va el contenido que quieras poner aqui va el contenido que quieras poner aqui va el contenido aqui va el contenido aqui va el contenido aqui va el contenido aqui va el contenido aqui va el contenido aqui va el contenido aqui va el contenido aqui va el contenido aqui va el contenido aqui va el contenido aqui va el contenido</p>
</div> 
Código:
.contenedor{ width:500px; height:auto; background-color:#999; display:table;}
.img{ float:left; padding:10px}
.texto{ font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#fff; min-width:300px}
__________________
WFC
codigo82
  #8 (permalink)  
Antiguo 17/01/2009, 12:45
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como defino la altura de un div respecto a una imagen?

Pues bueno, ya sabes el problema que tiene IE6 con el display table o el min-width. Pruébalo por si acaso a ver.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 17/01/2009, 12:57
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Como defino la altura de un div respecto a una imagen?

funciona bien, el min -width no hace falta, pero acabo de darme cuenta de algo, el dice sin importar el tamaño de la imagen esto quiere decir que variará en ancho y alto? y de la forma que lo hice al no tener un ancho ni alto definido ni para la imagen ni el texto, el texto al crecer en altura mas que la imagen se ira por debajo de la imagen, así que no si esta solución le podrá servir
__________________
WFC
codigo82
  #10 (permalink)  
Antiguo 17/01/2009, 14:13
 
Fecha de Ingreso: septiembre-2008
Ubicación: Chihuahua, México
Mensajes: 88
Antigüedad: 9 años, 2 meses
Puntos: 2
Respuesta: Como defino la altura de un div respecto a una imagen?

Que tal, gracias a todos por rersponder! Aqui está mi codigo. Como me dijeron coloqué el Overflow:hidden; dentro del div contenedor y funciono! No crei que fuera tan simple.
Código:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
.contenedor{
width:500px;
background-color:#999999;
padding:10px;
overflow:hidden;
}

.contenedor img{
float:left;
padding-right:10px;
padding-bottom:10px;
}

</style>
</head>

<body>

<div class="contenedor">
<img src="ce5000.jpg" alt="CE5000"  />
<p>The Graphtec CE5000-60 (24") and CE5000-120 (48") professional cutting plotters update the extremely successful CE3000Mk2 series with improved features.</p>
</div>

</body>
</html>
Nunca habia escuchado eso del display table, lo probare solo para ver como se comporta.

Nuevamente, gracias por sus respuestas!
  #11 (permalink)  
Antiguo 17/01/2009, 15:05
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Como defino la altura de un div respecto a una imagen?

Yo uso el display: table; cuando necesito anidar divs y cuando tengo que maquetar... por lo regular la mayoria de los divs son table y funcionan bien en IE.

A que se debe esto?
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #12 (permalink)  
Antiguo 28/02/2009, 20:10
 
Fecha de Ingreso: febrero-2009
Ubicación: Lima, Perú
Mensajes: 19
Antigüedad: 8 años, 9 meses
Puntos: 0
Probando con distintos navegadores

Probé dos soluciones distintas en los tres navegadores que tengo instalados por el momento en Windows Xp, que son Internet Explorer 6.0, Mozilla Firefox 3.0 y Google Chrome 1.0.
Los resultados son los siguientes:

overflow: hidden
Funciona en Firefox y en Chrome, pero Internet Explorer sigue mostrando a la imagen más alta que el div.

clear: both
Funciona en los tres navegadores de misma forma.

No he probado con Safari ni Opera porque ya no los tengo. Deduzco además que en la versión de Linux de Firefox se debe leer igual.

A mi me resultó con "clear:both".
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 09:21.