elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


 


Tema destacado: Entrar al Canal Oficial Telegram de elhacker.net


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Problemilla maquetando con listas <ul>
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Problemilla maquetando con listas <ul>  (Leído 613 veces)
soru13

Desconectado Desconectado

Mensajes: 246



Ver Perfil
Problemilla maquetando con listas <ul>
« en: 20 Marzo 2013, 17:06 »

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

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.


En línea

alario0

Desconectado Desconectado

Mensajes: 6



Ver Perfil
Re: Problemilla maquetando con listas <ul>
« Respuesta #1 en: 20 Marzo 2013, 19:45 »

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


En línea

soru13

Desconectado Desconectado

Mensajes: 246



Ver Perfil
Re: Problemilla maquetando con listas <ul>
« Respuesta #2 en: 20 Marzo 2013, 20:00 »

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

Gracias de todas formas.  :D
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Listas
PHP
Darksurgeon13 1 1,439 Último mensaje 19 Diciembre 2009, 19:28
por Og.
Uso de Listas: Subprograma que lea 2 listas y forme una.
Dudas Generales
hbenitez 2 1,983 Último mensaje 8 Agosto 2010, 20:11
por hbenitez
Ayuda Acerca De Listas y Listas Circulares (Revienta Memoria :S)
Programación C/C++
Gerik 0 1,688 Último mensaje 12 Septiembre 2010, 01:49
por Gerik
Listas en C++
Programación C/C++
farresito 4 2,059 Último mensaje 10 Marzo 2011, 12:54
por farresito
listas
Programación C/C++
johrdy 3 1,141 Último mensaje 5 Marzo 2012, 00:35
por rir3760
Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines