¿porque se superponen estas fotos?Ayuda!!! 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%;
}
