Muy buenas gente!!
Tengo un trabajo de la uni con css y me estoy volviendo loco. Tengo que crear una galeria hexagonal de imagenes con un marco. Todo esto dentro de un div para poder centrarlo todo en la página web.
El tema es que la imagen que hay dentro del marco no consigo que se centre. Tengo que usar los atributos:
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
pero no se me centra, y creo que es por el USo de position, pero no me aclaro. Pido ayuda por si alguien podría ayudarme.
Aqui teneis el link del html y las imagenes(no tiene virus xD): [URL="http://www.megaupload.com/?d=8YKF98GG"]http://www.megaupload.com/?d=8YKF98GG[/URL]
También pego el código, por si no quereis descargarlo:
Código:
<!DOCTYPE HTML>
<meta charset="UTF-8">
<style type="text/css">
img{
height:100%;
width:100%;
}
.container_imagen{
position:absolute;
border: 1px solid gray;
height: 90%;
width: 90%;
}
.marco:focus{
left:207px !important;
top:250.34px !important;
-moz-transform:rotate(0deg) !important;
width:360px !important;
height:255px !important;
z-index: 10;
}
.marco{
position:absolute;
width:240px;
height:170px;
background-color:#0B3861;
//border:1px solid black;
display: -moz-box; //con el moz-box activado el redimensionamiento falla
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
}
.marco#uno{
left:267px;
top:0px;
}
.marco#dos{
transform:rotate(60deg);
-moz-transform:rotate(60deg);
-moz-transform-origin: 0% 100%;
left:507px;
top:0px;
}
.marco#tres{
transform:rotate(-60deg);
-moz-transform:rotate(-60deg);
-moz-transform-origin: 0% 0%;
left:507px;
top:585.68px;
}
.marco#cuatro{
left:267px;
top:585.68px;
}
.marco#cinco{
transform:rotate(60deg);
-moz-transform:rotate(60deg);
-moz-transform-origin: 100% 0%;
left:27px;
top:585.68px;
}
.marco#seis{
transform:rotate(-60deg);
-moz-transform:rotate(-60deg);
-moz-transform-origin: 100% 100%;
left:27px;
top:0px;
}
.container{
border:1px solid red;
width:775px;
height:758px;
}
.container_todo{
position:relative;
width:50%;
height:100%;
display: -moz-box; //con el moz-box activado el redimensionamiento falla
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
}
</style>
<html lang="es">
<head>
<title>Galeria de Imagenes</title>
</head>
<body>
<div class="container_todo">
<div class="container">
<div class="marco" id="uno" tabindex="1">
<div class="container_imagen">
<img src="imagenes/space1.jpg">
</div>
</div>
<div class="marco" id="dos" tabindex="2">
<div class="container_imagen">
<img src="imagenes/space2.jpg">
</div>
</div>
<div class="marco" id="tres" tabindex="3">
<div class="container_imagen">
<img src="imagenes/space3.jpg">
</div>
</div>
<div class="marco" id="cuatro" tabindex="4">
<div class="container_imagen">
<img src="imagenes/space4.jpg">
</div>
</div>
<div class="marco" id="cinco" tabindex="5">
<div class="container_imagen">
<img src="imagenes/space5.jpg">
</div>
</div>
<div class="marco" id="seis" tabindex="6">
<div class="container_imagen">
<img src="imagenes/space6.jpg">
</div>
</div>
</div>
</div>
</body>
</html>
Muchisimas gracias, si me echais una mano me ayudareis muchisimo chic@s!!