Foros del Web » Creando para Internet » CSS »

Problema con float

Estas en el tema de Problema con float en el foro de CSS en Foros del Web. He decidido crear una galería de fotos con css, todo bien pero las fotos estan dentro de una div con float, todo correcto, pero tendría ...
  #1 (permalink)  
Antiguo 12/10/2006, 11:19
Avatar de hector_he  
Fecha de Ingreso: agosto-2006
Ubicación: Barcelona
Mensajes: 207
Antigüedad: 11 años, 3 meses
Puntos: 4
Problema con float

He decidido crear una galería de fotos con css, todo bien pero las fotos estan dentro de una div con float, todo correcto, pero tendría que estar dentro de otra capa la qual tiene el fondo) pero salen de ella devido al float.
Que se puede hacer?

#text_ex{padding:14px;background-color: #D9E57F; clear:left}
.contenedorfoto {
float:left;
width:200px;
height:100px;
margin: 10px;
padding:5px;
background-color:#f5f7f9;
border-right: #a5a7aa solid 1px;
border-bottom: #a5a7aa solid 1px;
text-align:center;
}


<div id="text_ex">
<div class="contenedorfoto"><a href="#"><img src="img/1.jpg" border="0" alt=""/></a><br /><span>Descripción de la imagen</span></div>
<div class="contenedorfoto"><a href="#"><img src="img/2.jpg" border="0" alt=""/></a><br /><span>Descripción de la imagen</span></div>
<div class="contenedorfoto"><a href="#"><img src="img/3.jpg" border="0" alt=""/></a><br /><span>Descripción de la imagen</span></div>
<div class="contenedorfoto"><a href="#"><img src="img/4.jpg" border="0" alt=""/></a><br /><span>Descripción de la imagen</span></div>
<div class="contenedorfoto"><a href="#"><img src="img/5.jpg" border="0" alt=""/></a><br /><span>Descripción de la imagen</span></div>
</div>
  #2 (permalink)  
Antiguo 12/10/2006, 14:10
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Aquí está la solución.

PD: ¿para que los span?
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 12/10/2006, 14:35
Avatar de hector_he  
Fecha de Ingreso: agosto-2006
Ubicación: Barcelona
Mensajes: 207
Antigüedad: 11 años, 3 meses
Puntos: 4
Muchas gracias por la contestación.
He estado buscando y he aplicado otra solución:

div.spacer {clear: both;}

Y colocar dos divs ( <div class="spacer">&nbsp;</div> ), una al principio de la primera imagen y otra la final...

edit. He provado tu solución y me parece más útil. Gracias!
Lo único que no consuigo es centrar las imágenes...

pd: Los span no hagas caso he estado suiguiendo el esquema de un tutotril que tenía ese código.
  #4 (permalink)  
Antiguo 15/10/2006, 09:54
Avatar de hector_he  
Fecha de Ingreso: agosto-2006
Ubicación: Barcelona
Mensajes: 207
Antigüedad: 11 años, 3 meses
Puntos: 4
Me he dado cuenta de que esta solución solo se me aplica en Firefox no en IE.
Que puedo hacer?

pd. que es limpiar los flotantes?...

edit: He encontrado la solución!
<div style="clear:both"></div>

Última edición por hector_he; 15/10/2006 a las 10:25
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 08:18.