Hola a todos,
En una pagina web destinada a fotografia queria crear una pagina en la que aparecieran 8 fotos cuadradas. He creado un div para cada foto y he metido estos dentro de un div. Las fotos están organizadas en 2 filas de 4 fotos. El problema es que las columna de abajo aparece medio superpuesta a la columna de arriba. Esto se puede solucionar poniendo un margin-top generoso, pero creo que sería una solución un tanto cutre y además estoy seguro de que algo he hecho mal. Os dejo el código:
Código HTML:
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<link href="imags/lookylittle1.ico" type="image/x-icon" rel="shortcut icon" />
<title>A different look to photography</title>
<link rel="stylesheet" type="text/css" href="fotosstyle.css" />
</head>
<body>
<div id="container">
<div id="menus">
<div id="logo">
<a href="looky.html"><img src="imags/lookyround.png" /></a>
</div>
<div id="sidemenu">
<ul>
<li id="a">Inicio</li>
<li>Fotos</li>
<li>Quien Soy</li>
<li>Citas</li>
</ul>
</div>
</div>
<div id="anterior">
<a href=""><img src="imags/left.png" /></a>
</div>
<div id="fotos">
<div class="foto"><a href="foto1.html"><img class="fotosm" src="imags/IMG-20140311-WA0003.jpg" /></a></div>
<div class="foto"><a href="foto2.html"><img class="fotosm" src="imags/IMG-20140311-WA0004.jpg" /></a></div>
<div class="foto"><img class="fotosm" src="imags/IMG-20140311-WA0011.jpg" /></div>
<div class="foto"><img class="fotosm" src="imags/1.jpg" /></div>
<div class="foto"><img class="fotosm" src="imags/2.jpg" /></div>
<div class="foto"><img class="fotosm" src="imags/3.jpg" /></div>
<div class="foto"><img class="fotosm" src="imags/4.jpg" /></div>
<div class="foto"><img class="fotosm" src="imags/5.jpg" /></div>
</div>
</div>
</html> Código HTML:
#container {
margin:0px 0px 0px 0px;
}
#menus {
width: 20%;
display:inline-block;
clear:right;
float:left;
margin-left:1.5%
}
#logo {
width:85%;
margin-top:8%;
margin-left:2.5%;
margin-bottom:5%;
}
#logo > a > img {
width:40%;
margin-left:30%;
margin-left:30%;
}
#logo > a > img:hover {
opacity:0.6;
-webkit-transition:opacity 0.25s;
}
#sidemenu {
width:80%;
}
#a{
border-top:1px solid black;
}
#sidemenu > ul {
list-style-type:none;
list-style-position:inside;
padding-left:0px;
margin-left: 3.5%;
text-align:center;
}
#sidemenu > ul > li {
font-family:Raleway;
font-size: 20px;
font-weight: light;
border-bottom: 1px solid black;
line-height:150%;
}
#anterior {
display:inline;
width:10%;
overflow:hidden;
margin-top:5%;
}
#anterior img {
width:4%;
margin-top:24%;
}
.fotosm{
width:100%;
margin:0px;
}
.fotosm:hover{
opacity:0.6;
-webkit-transition:opacity 0.5s;
}
#fotos {
width:75%;
padding-left:8%;
height:80%;
overflow: hidden;
}
#footer {
width:70%;
margin-top:10px;
margin-right:15%;
margin-left:15%;
}
.foto{
width:20%;
height:20%;
padding:0px;
float:left;
display:inline;
margin:1.25%;
padding:0.5%;
}
Gracias y un saludo