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