Foros del Web » Creando para Internet » CSS »

Mi web es un acordeón no se estabiliza

Estas en el tema de Mi web es un acordeón no se estabiliza en el foro de CSS en Foros del Web. Buenas, pues eso lo que comento en el título, mi web parece un acordeón, cuando comienzo a minimizar la web se me deforma por completo ...
  #1 (permalink)  
Antiguo 26/07/2011, 01:28
 
Fecha de Ingreso: noviembre-2010
Mensajes: 234
Antigüedad: 6 años, 8 meses
Puntos: 2
Mi web es un acordeón no se estabiliza

Buenas, pues eso lo que comento en el título, mi web parece un acordeón, cuando comienzo a minimizar la web se me deforma por completo y comienzan a montarse las capas y tal. Os dejo el código para ver en que fallo, un saludo.

Código CSS:
Ver original
  1. @charset "UTF-8";
  2. /* CSS Document */
  3. body{ margin:0 0 0 0;}
  4.  
  5. #top{
  6.     background-image:url(file:///Macintosh%20HD/Users/ramondevesa/Desktop/HostPlanet/images/bg-top.png);
  7.     height:60px;
  8. }
  9. .logo{
  10.     margin-left:120px;
  11.     padding-top:4px;
  12.     width:202px;
  13. }
  14. .menu{
  15.     margin-right:120px;
  16.     float:right;
  17.     padding-bottom:19px;
  18.     margin-left:250px;
  19. }
  20. .menu li{
  21.     display:inline;
  22. }
  23. .menu li a{
  24.     text-decoration:none;
  25.     float:left;
  26. }
  27.  
  28. #header{
  29.     height:360px;
  30.     background-image:url(file:///Macintosh%20HD/Users/ramondevesa/Desktop/HostPlanet/images/bg_header.png);
  31. }
  32. .youtube{
  33.     width:600px;
  34.     height:290px;
  35.     margin-left:120px;
  36.     }
  37. #header h2{
  38.     float:right;
  39.     margin-right:120px;
  40.     }
  41.  
  42. #body{
  43.     height:329px;
  44. }
  45.  
  46. #foot{
  47.     height:270px;
  48.     background-image:url(file:///Macintosh%20HD/Users/ramondevesa/Desktop/HostPlanet/images/bg-foot.png)}

Código HTML:
Ver original
  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. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
  5. <title>Documento sin título</title>
  6. </head>
  7.  
  8. <div id="top">
  9. <div class="menu"><ul>
  10.         <li><a href="#"><img src="images/inicio.png" /></a></li>
  11.         <li><a href="#"><img src="images/servicios.png" /></a></li>
  12.         <li><a href="#"><img src="images/clientes.png" /></a></li>
  13.         <li><a href="#"><img src="images/trabajos.png" /></a></li>
  14.         <li><a href="#"><img src="images/blog.png" /></a></li>
  15.         <li><a href="#"><img src="images/contacto.png" /></a></li>
  16.    </ul>
  17.    </div>
  18. <div class="logo"><img src="images/logo.png" /></div>
  19.  
  20.        
  21. </div>
  22. <div id="header">
  23. <h2><br/><img src="images/titulo.png" /><br/><br/><img src="images/subtitulo.png" /></h2>
  24.  
  25.  
  26.  
  27. <div class="youtube">
  28. <br />
  29. <br />
  30.   <center><iframe src="http://player.vimeo.com/video/25833596?title=0&amp;byline=0&amp;portrait=0" width="580" height="273" frameborder="0"></iframe></center>
  31. </div>
  32. </div>
  33.  
  34. <div id="body"></div>
  35. <div id="foot"></div>
  36.  
  37. </body>
  38. </html>

Un saludo
  #2 (permalink)  
Antiguo 26/07/2011, 08:43
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 1 mes
Puntos: 269
Respuesta: Mi web es un acordeón no se estabiliza

hola ramon, tu problema está en como flotas las cajas. No le estas asignando overflow:hidden; al contenedor de las cajas flotadas, ni tomas en cuenta el ancho de cada una de estas y del contenedor. Asimismo, #logo no tiene float y esta afuera de #top que debería ser el contenedor.

Yo siempre pongo el html en orden al flujo de documento (p.ej: si #logo aparece a la izquierda de #menu, entonces en el html escribo #logo y luego, en la línea de abajo, #menu. Puesto que el documento html se compone de arriba a abajo y de izquierda a derecha.) y uso solo float left para todas las cajas flotadas.

En este link está explicado, nada más adaptalo a tu página.

Si, en cambio, no es tu idea usar float, debes tratar las cajas con posicionamiento absoluto. Este enlace te aclarará la cuestión.
Saludos.

Última edición por cristian_cena; 26/07/2011 a las 08:57
  #3 (permalink)  
Antiguo 28/07/2011, 04:15
 
Fecha de Ingreso: noviembre-2010
Mensajes: 234
Antigüedad: 6 años, 8 meses
Puntos: 2
Respuesta: Mi web es un acordeón no se estabiliza

Bueno, me comentas que hay dos alternativas para qu funcione "bien" yo me adapto a la que me recomiendes, te tengo como a un profesional que eres cristian así que haré caso a tus recomendaciones, gracias.
  #4 (permalink)  
Antiguo 28/07/2011, 12:11
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 1 mes
Puntos: 269
Respuesta: Mi web es un acordeón no se estabiliza

Hola ramón, gracias por los alagos, cualquiera de los dos caminos te va a conducir a la solución, cualquier cosa se te presenten problemas, nada más los compartes y lo miramos.

Saludos.

Etiquetas: fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:34.