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#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:
<!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"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="includes/css/index.css" type="text/css" rel="stylesheet" />
<div class="publi720"> </div>
<img src="http://i1.ytimg.com/vi/hEi8wnNzius/mqdefault.jpg" /> <p align="center">Ivan Nieto - Nadie me enseñ
ó a vivir
</p>
<img src="http://cdn.ebaumsworld.com/mediaFiles/picture/2152390/83120827.jpg" /> <img src="http://cdn.ebaumsworld.com/mediaFiles/picture/2152390/83120846.jpg" />
asdfasdf
menu
</div><!-- FIN CUERPO -->
Footer
</div><!-- FIN CONTENEDOR -->
Aquí una imagen con el resultado:http://oi49.tinypic.com/2ljqkg8.jpg (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 (http://oi46.tinypic.com/2ntjmev.jpg)
(lo verde es la lista <ul>)
Gracias de antemano.
El contenido de tu "<div id='izq'>" es mayor que su tamaño, por eso cuando sobrepasa su tamaño coloca los elementos restantes a continuación y te invaden el "footer".
Una de las cosas que puedes hacer es incluir un "overflow:scroll;" en el css del div y te añadirá una barra de desplazamiento y no ocupará el espacio del "footer".