Ver Mensaje Individual
  #1 (permalink)  
Antiguo 05/11/2010, 13:36
Avatar de Walk3r
Walk3r
 
Fecha de Ingreso: noviembre-2008
Ubicación: Barcelona
Mensajes: 22
Antigüedad: 15 años, 5 meses
Puntos: 0
problemas con galeria de imagenes maquetadas con CSS

Hola chicos tengo un problema que me tiene loco, en realidad son varios pero primero lo primero:
Estoy haciendo una galeria usando <div> en el HTML y asignandole los atributos en una hoja CSS; esta galeria se encuentra en una pagina con cabecera y con pie, y el problema que me tiene loco es que al usar "float:left;" para alinear las imagenes, el <div> contenedor de los <divs> que alojan las imagenes pierde todos sus atributos de alto y ancho y por supuesto el pie de la web se pega al logotipo de la cabecera y la galeria de imagenes se desborda pasandole por encima al pie de la pagina.

Ahora la pregunta es: Como alinear las fotos de la galeria 1 al lado de la otra siempre respetando el width y el height del div contenedor?

ESTE ES EL HTML:


<div class="galeria">
<div class="galeria-contenido"><a href="objetos/images/img1.png"><img src="objetos/thumbs/img1.png" alt="Ejemplo 1"><span style="color:green;"><br>1ra imagen</span></a></div>
<div class="galeria-contenido"><a href="objetos/images/img2.png"><img src="objetos/thumbs/img2.png" alt="Ejemplo 2"><span style="color:green;"><br>2ra imagen</span></a></div>
<div class="galeria-contenido"><a href="objetos/images/img3.png"><img src="objetos/thumbs/img3.png" alt="Ejemplo 3"><span style="color:green;"><br>3ra imagen</span></a></div>
<div class="galeria-contenido"><a href="objetos/images/img4.png"><img src="objetos/thumbs/img4.png" alt="Ejemplo 4"><span style="color:green;"><br>4ra imagen</span></a></div>
<div class="galeria-contenido"><a href="objetos/images/img5.png"><img src="objetos/thumbs/img5.png" alt="Ejemplo 5"><span style="color:green;"><br>5ra imagen</span></a></div>
<div class="galeria-contenido"><a href="objetos/images/img6.png"><img src="objetos/thumbs/img6.png" alt="Ejemplo 6"><span style="color:green;"><br>6ra imagen</span></a></div>
</div>



AQUI VA EL CSS


.galeria {width:800px; height:auto;
margin:10px;
padding:5px;
border:1px solid black;


}

.galeria-contenido {width:210px;
height:130px;
margin: 10px;
padding:5px;
background-color:#f5f7f9;
border-right: #a5a7aa solid 1px;
border-bottom: #a5a7aa solid 1px;
text-align:center;
display:block;
}







SOLO PUSE LA PARTE CSS que toca a la galeria.

pues espero sus respuestas que estoy al perder las neuronas