Duda en el concepto de maquetación con el float

Pakar · #1 (**permalink**) 18/08/2008, 03:47

Buenas, estoy intentando maquetar una web con el float, para poder ofrecerle distintas apareciencias modificando la hoja de estilo con el float y los tamaños.

Mi objetivo es lo q muestro en la siguiente imagen a la izda y lo q obtengo es la maquetación de la derecha:

http://www.subirimagen.es/220981/Problema_20maquetaci_F3n_JPG.html

El código que se ejecuta es el siguiente:

Cita:

<body>
<div id="todo">
<div id="login" >
Login
</div>
<div id="cabecera">
Cabecera
</div>
<div id="menuCliente">
Cliente
</div>
<div id="menuAdministracion">
Administracion
</div>
<div id="cuerpo">
Cuerpo
</div>
</div>
</body>

Cita:

#todo {
height:"900px";
width:"700px";
}

#login {
background-color:#00CC00;
float:left;
width:10%;
height:20%;
}

#cabecera {
background-color:#333300;
float:right;
width:90%;
height:20%;
}

#menuCliente {
background-color:#FF3333;
float:left;
width:20%;
height:80%;
}

#menuAdministracion {
background-color:#660000;
float:right;
width:80%;
height:20%;
}

#cuerpo {
background-color:#FFFFCC;
float:right;
width:80%;
height:60%;
}

Mi duda radica en que no sé qué estoy realizando mal, si es un tema de programación o un tema de concepto de maquetación.

Muchas gracias por adelatando

Mikmoro · #2 (**permalink**) 18/08/2008, 05:19

Creo que tu código se parece más bien poco a lo que muestras en las imágenes. Prueba con estos retoques, que queda como la parte izquierda que muestras tanto en FF como en IE:

Cita:

<!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>
<title>Sin título-1</title>
<style type="text/css">
#todo {
height:700px;
width:900px;
}
#login {
background-color:#00CC00;
float:left;
width:20%;
height:20%;
}
#cabecera {
background-color:#333300;
float:right;
width:80%;
height:20%;
}
#menuCliente {
background-color:#FF3333;
float:left;
width:20%;
height:80%;
}
#menuAdministracion {
background-color:#660000;
float:right;
width:80%;
height:10%;
}
#cuerpo {
background-color:#FFFFCC;
float:right;
width:80%;
height:70%;
}
</style>
</head>
<body>
<div id="todo">
<div id="login" >
Login
</div>
<div id="cabecera">
Cabecera
</div>
<div id="menuCliente">
Cliente
</div>
<div id="menuAdministracion">
Administracion
</div>
<div id="cuerpo">
Cuerpo
</div>
</div>
</body>
</html>

Pakar · #3 (**permalink**) 18/08/2008, 07:14

Buenas, gracias por la solución, la verdad es que he comprobado lo que indicas que no se corresponde el código a las imágenes, y me he confundido por el visualizador del Dreamweaver, siento las molestias.
Gracias
Un saludo