Problemas con maquetación

Rubix · #1 (**permalink**) 23/12/2009, 03:14

Buenos dias.

Estoy maquetando una web, y decidme tonto, pero no entiendo como un código tan sencillo me está dando problemas. Lo que me está dando problemas es el "div" cabecera y el peu. Os pongo el pongo el html:

Código HTML:

<!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=iso-8859-1" />
<title>xxxxxxxxx </title>
<meta name="description" content="xxxxxxxxxxx"/>
<meta name="keywords" content="xxxxxxxx"/>
<link href="estilos/estilos.css" rel="stylesheet" type="text/css" />
</head>


<body>

<div id="contenedor">
	<div id="cabecera"></div>
	<div id="contenedor-cos">
		<div id="menu"></div>
		<div id="principal"></div>
	</div> <!-- DIV CONTENEDOR-COS--->
	<div id="peu"></div>
</div> <!-- DIV CONTENEDOR -->

</body>
</html>

Y ahora el css:

Código:

body {
	font: smaller Arial, Helvetica, sans-serif;
}

#contenedor {
	width:960px;
	height:600px;
	margin-left:auto;
	margin-right:auto;
}

<!-- CAPÇALERA -->

#cabecera {
	width:960px;
	height:55px;
	background-color:#000000;
}


<!-- COS DE LA WEB -->

#contenedor-cos {
	width: 960px;
	height: 490px;
	float:left;
}

#menu {
	width: 170px;
	height:490px;
	background-image:url(../img/Torrelamina2_02.jpg);
	float:left;
}

#principal {
	width: 790px;
	height:490px;
	float:left;
	background-image:url(../img/Torrelamina2_03.jpg);
}

<!-- PEU DE PÀGINA -->

#peu {
	width:960px;
	height:55px;
	text-align:center;
	background-color:#000000;
}

<!-- ALTRES -->

#clear {
	clear:both;
}

Pues eso es todo. A ver si me ayudáis a abrir los ojos y a darme cuenta de mis errores. Gracias!

Impostor · #2 (**permalink**) 23/12/2009, 06:30

Yo le he estado echando un vistazo y tampoco lo entiendo. Esperare a estar en casa con firebug para ver si da mas pistas.

Saludos¡¡

Willy_N · #3 (**permalink**) 23/12/2009, 07:44

Hay fallos en los comentarios.

En el css se ponen así: /* comentarios aquí */ y no así: 

En el html debe ser así:  y no así: 

Con esto arreglas algunas cosas, pero el peu sigue sin aparecer.

Si al peu le das éste margen aparecerá:

Código CSS:

Ver originalmargin:490px 0 0 0;

Rubix · #4 (**permalink**) 23/12/2009, 09:24

Muchas gracias! Ha funcionado.

Lo que no entiendo es por que hay que poner el "margin" para el último div, pero en fin, funciona.

Gracias de nuevo y saludos!

Willy_N · #5 (**permalink**) 23/12/2009, 11:43

Si le quites el margin al peu y el float:left; al #contenedor-cos también queda bien.
No me preguntas por qué es así, es que no lo se.