Muy buenas a todos,
estoy ultimando el tema de la galería o catálogo de una tienda online, y resulta que al disponer los elementos (artículos) de la forma que aparace en la foto que os adjunto, el contenedor padre del contenedor padre de todos ellos, hace como si no existieran.
Esto tiene su lógica, pues cada div articulos esta en posicion relativa respecto a su padre, productos, y el padre de este, no se como ponerlo para que acepte el contenido que tiene y se redimensione adecuadamente...
En fin, os paso la imagen, y el css y xhtml relacionado. El problema se donde está y porqué aparece, el tema es solucionarlo, pues por más que intento no consigo más que o quitar el fondo blanco, o dejarlo puesto :s
Un saludo
Código:
#catalogo {
position: relative;
}
#productos {
margin: 0 2%;
position: relative;
}
#productos .articulo {
float: left;
width: 200px;
height: 190px;
margin: 1%;
padding: 5px;
background-color: #c5c7c9;
border-right: #55575a solid 2px;
border-bottom: #55575a solid 2px;
text-align: center;
position: relative;
}
#productos .articulosCentral {
margin: auto;
}
#productos .articuloInferior {
bottom: 0%;
position: absolute;
}
Código PHP:
<div class="cuerpo">
<div id="catalogo">
<?php
echo "<div id=\"productos\">";
while( $resultados = $bd->fetch_array($consulta) )
{
echo "<div class=\"articulo\">
<div class=\"articuloSuperior\">" . $resultados[Nombre] . "</div>
<div class=\"articuloCentral\"><a href=\"descargaArchivo.php?idArchivo=$resultados[CodArticulo]\"><img src=\"descargaArchivo.php?idArchivo=$resultados[CodArticulo]\" alt=\"$resultados[Nombre]\"></img></a></div>
<div class=\"articuloInferior\"><a href=\"anyadeArticuloCesta.php?idArticulo=$resultados[CodArticulo]\">Añadir al carro</a> " . " $resultados[Precio]€</div>
</div>
";
}
echo "</div>";
?>
</div>
</div>
Esto es lo que sale:
http://img191.imageshack.us/i/pantallazo1a.png/
Esto es lo que debería salir(entendiendo que los elementos deberían estar dispuestos como en la foto de arriba:
http://img34.imageshack.us/i/pantallazo3h.png/