Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: soru13 en 20 Marzo 2013, 17:06 pm


Título: Problemilla maquetando con listas <ul>
Publicado por: soru13 en 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
  1. #cuerpo{
  2. 	width:100%;
  3. 	height:600px;	
  4. }
  5.  
  6. #footer{
  7. 	width:990px;
  8. 	height:150px;
  9. 	margin:auto;
  10. 	background-color:#FFF;
  11. 	text-align:center;	
  12. 	border:1px solid #DBDBDB;
  13. }
  14.  
  15. #cuerpo #izq{
  16. 	width:369px;
  17. 	float:left;	
  18.  
  19. 	height:300px;
  20. 	background-color:green;
  21. }
  22.  
  23. #cuerpo #derech{
  24. 	width:369px;
  25. 	float:left;	
  26. }
  27.  
  28. #cuerpo .menu{
  29. 	height:100%;
  30. 	width:250px;
  31. 	float:left;	
  32. 	border-left:1px solid #DBDBDB;	
  33. }
  34.  
  35. .video{
  36. 	margin-top:20px;
  37. 	margin-bottom:10px;
  38.  
  39. 	height:190px;
  40. 	width:300px;
  41.  
  42. 	border: 1px solid #DDD;
  43. 	box-shadow: 3px 3px 3px #999;
  44. 	-moz-box-shadow: 3px 3px 5px #999;
  45. 	-webkit-box-shadow: 3px 3px 3px #999;
  46. 	padding:2px;
  47. }
  48.  
  49. .video img{
  50. 	height:160px;	
  51. 	width:300px;
  52. }
  53.  
  54. .video p{
  55. 	margin-top:4px;
  56. 	background-color:white;
  57. }
  58.  
  59. /* fotos prueba -- */
  60. .contenedor{
  61. 	list-style:none;
  62. }
  63.  
  64. .contenedor li{
  65. 	float:left;	
  66. 	margin-right:20px;
  67. 	margin-top:10px;
  68. }
  69.  
  70. .imagen{	
  71. 	margin-bottom:10px;
  72. 	max-height:300px;
  73. 	width:300px;
  74.  
  75. 	border: 1px solid #DDD;
  76. 	box-shadow: 3px 3px 3px #999;
  77. 	-moz-box-shadow: 3px 3px 5px #999;
  78. 	-webkit-box-shadow: 3px 3px 3px #999;
  79. 	padding:2px;
  80. }
  81.  
  82. .imagen img{
  83. 	max-height:300px;
  84. 	max-width:300px;
  85. }
  86.  

Y el HTML:

Código
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>Untitled Document</title>
  6.         <link href="includes/css/index.css" type="text/css" rel="stylesheet"  />
  7.     </head>
  8.  
  9.     <body>
  10.  
  11.         <div id="contenedor">
  12.  
  13.             <div id="medio">
  14.  
  15.                 <div id="header">
  16.  
  17.                     <div id="logo">&nbsp;</div>
  18.                     <div class="publi720">&nbsp;</div>
  19.  
  20.                 </div>
  21.  
  22.                 <div id="menu">
  23.                 	&nbsp;
  24.                 </div>
  25.  
  26.                 <div id="cuerpo">
  27.  
  28.                     <div id="izq">
  29.  
  30.                         <ul class="contenedor">
  31.                         	<li class="video">
  32.                             	<img src="http://i1.ytimg.com/vi/hEi8wnNzius/mqdefault.jpg" />
  33.                            		<p align="center">Ivan Nieto - Nadie me enseñ&oacute; a vivir</p>
  34.                             </li>
  35.  
  36.                         	<li class="imagen">
  37.                             	<img src="http://cdn.ebaumsworld.com/mediaFiles/picture/2152390/83120827.jpg" />
  38.                             </li>
  39.                             <li class="imagen">
  40.                             	<img src="http://cdn.ebaumsworld.com/mediaFiles/picture/2152390/83120846.jpg"  />
  41.                             </li>
  42.                         </ul>
  43.  
  44.                     </div>
  45.  
  46.                     <div id="derech">
  47.                     	asdfasdf
  48.                     </div>
  49.  
  50.                     <div class="menu">
  51.                     	menu
  52.                     </div>
  53.  
  54.                 </div><!-- FIN CUERPO -->
  55.  
  56.             </div><!-- FIN MEDIO -->
  57.  
  58. 			<div id="footer">
  59. 				Footer
  60.             </div>
  61.  
  62.         </div><!-- FIN CONTENEDOR -->
  63.  
  64.     </body>
  65. </html>
  66.  

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.

Título: Re: Problemilla maquetando con listas <ul>
Publicado por: alario0 en 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".

Título: Re: Problemilla maquetando con listas <ul>
Publicado por: soru13 en 20 Marzo 2013, 20:00 pm
Ya lo conseguí usando la propiedad clear:both en el footer.

Gracias de todas formas.  :D


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines