Mi web es un acordeón no se estabiliza

ramondevesa · #1 (**permalink**) 26/07/2011, 01:28

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@charset "UTF-8";
/* CSS Document */
body{ margin:0 0 0 0;}
 
#top{
    background-image:url(file:///Macintosh%20HD/Users/ramondevesa/Desktop/HostPlanet/images/bg-top.png);
    height:60px;
}
.logo{
    margin-left:120px;
    padding-top:4px;
    width:202px;
}
.menu{
    margin-right:120px;
    float:right;
    padding-bottom:19px;
    margin-left:250px;
}
.menu li{
    display:inline;
}
.menu li a{
    text-decoration:none;
    float:left;
}
 
#header{
    height:360px;
    background-image:url(file:///Macintosh%20HD/Users/ramondevesa/Desktop/HostPlanet/images/bg_header.png);
}
.youtube{
    width:600px;
    height:290px;
    margin-left:120px;
    }
#header h2{
    float:right;
    margin-right:120px;
    }
 
#body{
    height:329px;
}
 
#foot{
    height:270px;
    background-image:url(file:///Macintosh%20HD/Users/ramondevesa/Desktop/HostPlanet/images/bg-foot.png)}

Código HTML:

Ver original<!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" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<title>Documento sin título</title>
</head>
 
<body>
<div id="top">
<div class="menu"><ul>
        <li><a href="#"><img src="images/inicio.png" /></a></li>
        <li><a href="#"><img src="images/servicios.png" /></a></li>
        <li><a href="#"><img src="images/clientes.png" /></a></li>
        <li><a href="#"><img src="images/trabajos.png" /></a></li>
        <li><a href="#"><img src="images/blog.png" /></a></li>
        <li><a href="#"><img src="images/contacto.png" /></a></li>
   </ul>
   </div>
<div class="logo"><img src="images/logo.png" /></div>
 
        
</div>
<div id="header">
<h2><br/><img src="images/titulo.png" /><br/><br/><img src="images/subtitulo.png" /></h2>
 
 
 
<div class="youtube">
<br />
<br />
  <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>
</div>
</div>
 
<div id="body"></div>
<div id="foot"></div>
 
</body>
</html>

Un saludo

cristian_cena · #2 (**permalink**) 26/07/2011, 08:43

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.

ramondevesa · #3 (**permalink**) 28/07/2011, 04:15

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.

cristian_cena · #4 (**permalink**) 28/07/2011, 12:11

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.