Foros del Web » Creando para Internet » CSS »

Problema de float con galeria en CSS

Estas en el tema de Problema de float con galeria en CSS en el foro de CSS en Foros del Web. Me encontre con este tutorial para hacer una galeria de fotos con CSS, y funciona barbaro, porque al flotar las imagenes si redimenciono la pagina ...
  #1 (permalink)  
Antiguo 07/08/2005, 11:43
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
[Solucionado] Problema de float con galeria en CSS

Me encontre con este tutorial para hacer una galeria de fotos con CSS, y funciona barbaro, porque al flotar las imagenes si redimenciono la pagina las imagenes se autoacomodan en varias lineas, etc. Pero mi problema recide en que necesito poner un div con un texto abajo de la galeria, pero al estar las imagenes flotando no ocupan espacio, por lo que el div se mete debajo de las imagenes o a un costado (segun el navegador). Entonces, como puedo hacer para conservar el float de las imagenes pero que ocupen el espacio que deberian ocupar?

El tutorial: http://worlds.cpsimoes.net/f-worlds_...egallery.shtml
El resultado final: http://cb2web.com/tests/gallery/gallery.htm

Desde ya muchas gracias.
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.

Última edición por K3NNY; 08/08/2005 a las 14:52 Razón: ya me solucionaron el problema
  #2 (permalink)  
Antiguo 07/08/2005, 21:17
 
Fecha de Ingreso: mayo-2005
Mensajes: 306
Antigüedad: 12 años, 6 meses
Puntos: 0
Hola, probaste utilizando la propiedad clear?
de esta forma:

Código:
<div style="clear:both">
texto texto texto texto texto 
</div>
Saludos!
  #3 (permalink)  
Antiguo 08/08/2005, 14:50
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
De acuerdo Muchisimas Gracias

Caaapoooooo!!! Funciona de maravillas.

PD: Sos groso, sabelo!
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #4 (permalink)  
Antiguo 12/08/2005, 16:41
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
Pregunta

Tengo otro problema. La galeria funciona barbara por si sola, pero cuando la meto dentro de un div posicionado relativamente no se ve en IE. Osea, en IE la galeria queda debajo del div que lo contiene (el cual tiene un color de fondo, por lo que tapa la galeria)

Código:
<html>
<head>
	<title>Thumbnails Gallery</title>
	<style type="text/css">
	<!--
		#thumbnail dl {
			border: 1px solid #f90;
			width: 170px;
			padding: 10px;
			margin-right: 10px;
			background-color: #fc0;
			float: left;
			}
		#content {
			position: relative;
			width: auto;
			background-color: #fc3;
			}
	-->
</style>
</head>
<body>
	<div id="content">
		<div id="thumbnail">
			<dl>
  				<dt><img src="image1_thumb.jpg" width="160" height="120" /></dt>
  				<dd><a href="image1.jpg">Image 1</a></dd>
			</dl>
			<dl>
  				<dt><img src="image2_thumb.jpg" width="160" height="120" /></dt>
  				<dd><a href="image2.jpg">Image 2</a></dd>
			</dl>
			<dl>
		  		<dt><img src="image3_thumb.jpg" width="160" height="120" /></dt>
  				<dd><a href="image3.jpg">Image 3</a></dd>
			</dl>
		<div style="clear:both">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed felis metus, egestas sed, vulputate vitae, vestibulum eget, leo. Phasellus fringilla mi vitae lectus. Nam eu magna. Nullam vel tellus. Praesent bibendum. Fusce sit amet erat sit amet augue pulvinar placerat. Praesent porttitor magna a metus. Nullam magna arcu, convallis eu, tempus eget, volutpat non, enim. Donec sem ante, semper quis, aliquet eu, sollicitudin id, magna. Sed ut tellus.
		</div>
	</div>
</body>
</html>
Miren el codigo en Firefox o Opera y despues en IE y van a ver lo que quiero decir (prueben sacarle el color de fondo al div #content")

Alguien sabe porque pasa esto?
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #5 (permalink)  
Antiguo 13/08/2005, 13:33
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
Perdon por levantar el tema, pero probe poniendoles z-index a cada div pero parece no afectarle. Alguien tiene idea siquiera de como se llama este bug de IE?
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #6 (permalink)  
Antiguo 13/08/2005, 13:44
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
LO ENCONTRE. Definitivamente es un bug de IE, sigo sin saber como se llama pero encontre la solucion. La solucion consiste en posicionar relativamente el objeto a flotar, y luego flotarlo. En el ejemplo que postie antes, el CSS del div a flotar quedaria asi:

Código:
		#thumbnail dl {
			border: 1px solid #f90;
			width: 170px;
			padding: 10px;
			margin-right: 10px;
			background-color: #fc0;
			position: relative;
			float: left;
			}
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #7 (permalink)  
Antiguo 13/08/2005, 13:45
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
LO ENCONTRE. Definitivamente es un bug de IE, sigo sin saber como se llama pero encontre la solucion. La solucion consiste en posicionar relativamente el objeto a flotar, y luego flotarlo. En el ejemplo que postie antes, el CSS del div a flotar quedaria asi:

Código:
		#thumbnail dl {
			border: 1px solid #f90;
			width: 170px;
			padding: 10px;
			margin-right: 10px;
			background-color: #fc0;
			position: relative;
			float: left;
			}
Al que le interese, llegue a esta solucion poniendo esto en Yahoo: ie+bug+float+absolute (4 resultado)
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #8 (permalink)  
Antiguo 16/08/2005, 16:56
Avatar de JJRC  
Fecha de Ingreso: enero-2003
Ubicación: Argentina
Mensajes: 261
Antigüedad: 14 años, 11 meses
Puntos: 1
Yo también tengo un problema con este maldito IE y float.

Resulta que tengo una tabla y dentro de ella un float que en firefox se ve dentro de la tabla y en IE se sobresale.

¿Alguien sabe como puedo corregir eso?
__________________
El dinero no te cambia, te delata...
  #9 (permalink)  
Antiguo 16/08/2005, 17:30
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
Proba poniendo un abjeto abajo del float (osea, a continuacion) que tenga un "clear" en la misma direccion que el float. Por ejemplo...

<div style="float:left;">Lorem Ipsum</div>
<div style="clear:left;">&nbsp;</div>

...cualquier duda pregunta. ;)
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #10 (permalink)  
Antiguo 16/08/2005, 22:45
Avatar de JJRC  
Fecha de Ingreso: enero-2003
Ubicación: Argentina
Mensajes: 261
Antigüedad: 14 años, 11 meses
Puntos: 1
Cita:
Iniciado por K3NNY
Proba poniendo un abjeto abajo del float (osea, a continuacion) que tenga un "clear" en la misma direccion que el float. Por ejemplo...

<div style="float:left;">Lorem Ipsum</div>
<div style="clear:left;">&nbsp;</div>

...cualquier duda pregunta. ;)
Sos un capo k3nny!!!

Avisame donde te mando la pizza.
__________________
El dinero no te cambia, te delata...
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 20:15.