problema divs sobreexpuestos

jemoce · #1 (**permalink**) 26/09/2010, 10:11

Hola, estoy aprendiendo css y creandome una página de ejemplo me surge el siguiente problema:

Tengo una imagen como cabecera, el codigo css es es siguiente:
#header{
width: 811px;
height: 173px;
padding: 0px;
margin: 0px;
background: url(../images/cabecera.jpg) top left no-repeat;
}
Luego esta la parte central de la página, con el siguiente codigo:
#main{
width: 811px;
padding: 0px;
margin: 10px;
background-color: #e5e5e5;
}
Y por último tengo el pie, que es otra imagen:
#footer{
width: 811px;
height: 113px;
padding: 0px;
margin: 0px;
background: url(../images/pie.jpg) bottom left no-repeat;
}
El problema es que cuando lo previsualizo, la imagen de la cabecera y la del pie se sobreexponen, se pisan la una a la otra. Donde puede estar el problema?
Ademas cuadno le toco al margin del main, la imagen del pie se meve...me estoy volviendo loco!!!

juan_14nob · #2 (**permalink**) 26/09/2010, 11:18

te ayudo a resolver el problema pero pone el codigo HTML con el estilo

saludos

jemoce · #3 (**permalink**) 26/09/2010, 11:53

Llevas razón, el código html es este:

<body>
<div id="container">
<div id="header">
</ div>
<div id="main">
Aqui va el contenido principal de la pagina.
</ div>
<div id="footer">
</ div>
</ div>
</ body>

jomaruro · #4 (**permalink**) 26/09/2010, 13:55

Hola:

No he entendido muy bien cual es tu problema, pero échale un vistazo a este ejemplo de Mikmoro, creo que te servirá.

Saludos.

jemoce · #5 (**permalink**) 26/09/2010, 14:38

El problema que tengo es que cuando abro mi html, las dos imágenes, la de la cabecera, y la del pie de página, me aparecen la una sobre la otra, concretamente la del pie encima de la imagen de la cabecera. Os pongo el codigo de toda la página para que lo podais probar y veais lo que pasa (he sustituido las imagenes por colores de fondo):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<style type="text/css">
body{
text-align: center;
background-color: #fff;
}

#container{
margin: 4px auto;
width: 811px;
text-align: left;
}

#header{
width: 811px;
height: 173px;
padding: 0px;
margin: 0px;
/*background: url(../images/cabecera.jpg) top left no-repeat;*/
background-color: #f00;
}

#main{
width: 811px;
padding: 0px;
margin: 10px;
background-color: #e5e5e5;
}

#footer{
width: 811px;
height: 113px;
padding: 0px;
margin: 0px;
/*background: url(../images/pie.jpg) bottom left no-repeat;*/
background-color: #00f;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
</ div>
<div id="main">
Aqui va el contenido principal de la pagina.
</ div>
<div id="footer">
</ div>
</ div>
</body>
</html>

anacona16 · #6 (**permalink**) 27/09/2010, 08:26

No veo necesario meter los tres divs (header, main y footer) dentro de otro (container) yo no lo hago y funciona bien.

jemoce · #7 (**permalink**) 27/09/2010, 08:33

Ya he solucionado el problema, era tan tonto, como no dejar ningun espacion entre </ y div>

Gracias a toodos