Hola a todos, estoy creando mi primera hoja de estilo. Estoy un poco perdido y espero que podáis ayudarme. Quiero que mi index.html esté dividido en 3 capas:
header, contenido y footer.
La hoja de estilo que tengo de momento es la siguiente:
Código PHP:
@charset "utf-8";
/* CSS Document */
html, body {
height: 100%;
margin: 0;
}
#header {
background:#000;
height: 150px;
}
# contenido {
height: 100%;
}
#footer {
background:#000;
height: 150px;
margin-top: -150px;
}
y mi index.html es el siguiente:
Código PHP:
<!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" />
<title>Documento sin título</title>
<link rel="stylesheet" type="text/css" href="CSS/CSS.css" title="principal">
</head>
<body>
<div id="header">
</div>
<div id="contenido">
Estas en el contenido
</div>
<div id="footer">
Estas en el pie de pagina
</div>
</body>
</html>
Con esto quiero conseguir tener la web dividida en 3 franjas horizontales. Las correspondientes a header y footer simétricas (de color negro )y la de contenido más grande que éstas (en color blanco). La cosa es que con lo que tengo sólo se muestra la del header.
¿Dónde estoy metiendo la pata?