Problemilla maquetando con listas <ul>

soru13 · 20 Marzo 2013, 17:06 PM

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

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">&nbsp;</div>
                    <div class="publi720">&nbsp;</div>
                    
                </div>
                
                <div id="menu">
                 &nbsp;
                </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ñ&oacute; 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.

alario0 · 20 Marzo 2013, 19:45 PM

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".

soru13 · 20 Marzo 2013, 20:00 PM

Ya lo conseguí usando la propiedad clear:both en el footer.

Gracias de todas formas.

Test Foro de elhacker.net SMF 2.1

Problemilla maquetando con listas <ul>

soru13

alario0

soru13