Hola, estoy maquetando una web y me ha surgido un problema con las listas "<li>" que no consigo resolver. Éstas exceden la altura que tienen e invaden la parte del footer, he estado mirando el CSS y el HTML pero no encuentro la razón. Os dejo el código a continuación:
El CSS
Y el HTML:
Aquí una imagen con el resultado:
http://oi49.tinypic.com/2ljqkg8.jpg
Incluso reduciendo el tamaño de la lista <ul> sigue haciendo lo mismo:
http://oi46.tinypic.com/2ntjmev.jpg
(lo verde es la lista <ul>)
Gracias de antemano.
El CSS
Código (css) [Seleccionar]
#cuerpo{
width:100%;
height:600px;
}
#footer{
width:990px;
height:150px;
margin:auto;
background-color:#FFF;
text-align:center;
border:1px solid #DBDBDB;
}
#cuerpo #izq{
width:369px;
float:left;
height:300px;
background-color:green;
}
#cuerpo #derech{
width:369px;
float:left;
}
#cuerpo .menu{
height:100%;
width:250px;
float:left;
border-left:1px solid #DBDBDB;
}
.video{
margin-top:20px;
margin-bottom:10px;
height:190px;
width:300px;
border: 1px solid #DDD;
box-shadow: 3px 3px 3px #999;
-moz-box-shadow: 3px 3px 5px #999;
-webkit-box-shadow: 3px 3px 3px #999;
padding:2px;
}
.video img{
height:160px;
width:300px;
}
.video p{
margin-top:4px;
background-color:white;
}
/* fotos prueba -- */
.contenedor{
list-style:none;
}
.contenedor li{
float:left;
margin-right:20px;
margin-top:10px;
}
.imagen{
margin-bottom:10px;
max-height:300px;
width:300px;
border: 1px solid #DDD;
box-shadow: 3px 3px 3px #999;
-moz-box-shadow: 3px 3px 5px #999;
-webkit-box-shadow: 3px 3px 3px #999;
padding:2px;
}
.imagen img{
max-height:300px;
max-width:300px;
}
Y el HTML:
Código (html4strict) [Seleccionar]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="includes/css/index.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="contenedor">
<div id="medio">
<div id="header">
<div id="logo"> </div>
<div class="publi720"> </div>
</div>
<div id="menu">
</div>
<div id="cuerpo">
<div id="izq">
<ul class="contenedor">
<li class="video">
<img src="http://i1.ytimg.com/vi/hEi8wnNzius/mqdefault.jpg" />
<p align="center">Ivan Nieto - Nadie me enseñó a vivir</p>
</li>
<li class="imagen">
<img src="http://cdn.ebaumsworld.com/mediaFiles/picture/2152390/83120827.jpg" />
</li>
<li class="imagen">
<img src="http://cdn.ebaumsworld.com/mediaFiles/picture/2152390/83120846.jpg" />
</li>
</ul>
</div>
<div id="derech">
asdfasdf
</div>
<div class="menu">
menu
</div>
</div><!-- FIN CUERPO -->
</div><!-- FIN MEDIO -->
<div id="footer">
Footer
</div>
</div><!-- FIN CONTENEDOR -->
</body>
</html>
Aquí una imagen con el resultado:
http://oi49.tinypic.com/2ljqkg8.jpg
Incluso reduciendo el tamaño de la lista <ul> sigue haciendo lo mismo:
http://oi46.tinypic.com/2ntjmev.jpg
(lo verde es la lista <ul>)
Gracias de antemano.