Posicionamiento de capas con CSS

aalleexx81 · #1 (**permalink**) 13/10/2011, 04:11

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?

IsaBelM · #2 (**permalink**) 13/10/2011, 04:48

probablemente el problema está en el espacio que hay entre la almohadilla y el nombre

Cita:

# contenido

aalleexx81 · #3 (**permalink**) 13/10/2011, 04:50

He quitado el espacio que me dijiste pero sigue igual. HE metido una imagen en el div contenido y sigue sin aparecerme el pie de página.

¿Alguna sugerencia?

IsaBelM · #4 (**permalink**) 13/10/2011, 05:00

acabo de probarlo con el cambio que te sugerí y funciona

aalleexx81 · #5 (**permalink**) 13/10/2011, 05:03

¿Tienes skype o msn para hablar más cómodamente?

Verás el código lo tengo de la siguiente forma:

CSS:

Código PHP:

  html, body {
    
    font:Arial, Helvetica, sans-serif;    
    font-size:30px;
    color: black;
    height: 100%; 
    overflow:hidden;
    margin: 0;
}

#header {

    background:#000;
    height: 200px;
}

#contenido {

    width:100%;
    background:#FFF;
    
}

#footer {
    
    background:#000;
    height: 200px; 
    margin-top -200px;  
}

y el html está así:

Código PHP:

  <body>

    <div id="header">
        
</div>
    
    <div id="contenido">
        <img src="imagenes/AP_GRUPO.jpg" align="middle" width="1000" height="1000"/>
        <a href="grupoap.html"><b> Enter WebSite </b></a>
    </div>
    
    <div id="footer">

    </div>

</body>

El tema es que dependiendo de si abro la página con IE o Mozilla se ve de diferente forma. Otra cosa es que no consigo centrar la imagen que está en contenido. No consigo que posicione todo como yo quiero. Por ejemplo la barra de la capa header es igual de alta que la de la capa footer pero me aparece más delgada.

¿Qué hago mal?

IsaBelM · #6 (**permalink**) 13/10/2011, 05:32

a ver si esto es lo que quieres

Cita:

html, body {

font:Arial, Helvetica, sans-serif;
font-size:30px;
color: black;
height: 100%;
/* overflow:hidden; */
margin: 0;
}

#header {

background:#000;
height: 200px;
}

#contenido {
margin: 0 auto;
background: #FFF url('img1.png');
width: 1000px;
height: 1000px;
}

#footer {

background:#000;
height: 200px;
margin-top -200px;
}

<div id="header">

</div>

<div id="contenido">

<a href="grupoap.html"><b> Enter WebSite </b></a>
</div>

<div id="footer">

</div>

aalleexx81 · #7 (**permalink**) 13/10/2011, 05:38

Te agradezco tu ayuda, pero no es exactamente lo que quiero. La imagen del index no quiero que sea de fondo, quiero que se incluya dentro de contenido y que esté centrada.

Además sigo sin ver el pie de página en IE. No sé por qué ocurre esto.

IsaBelM · #8 (**permalink**) 13/10/2011, 07:25

prueba ahora

Cita:

html, body {

font:Arial, Helvetica, sans-serif;
font-size:30px;
color: black;
height: 100%;
/* overflow:hidden; */
margin: 0;
}

#header {

background:#000;
height: 200px;
}

#contenido {
text-align: center;
position: relative;
}

#contenido a {
position: absolute;
top: 400px;
left: 300px;
display: block;
}

#footer {

background:#000;
height: 200px;

}

<div id="header">

</div>

<div id="contenido">
<img src="imagenes/AP_GRUPO.jpg" width="1000" height="1000"/>
<a href="grupoap.html"><b> Enter WebSite </b></a>
</div>

<div id="footer">

</div>

fíjate que a la imagen le he quitado (align="middle")
en qué versión de ie te da problemas??

aalleexx81 · #9 (**permalink**) 13/10/2011, 08:08

Muchas gracias por tu ayuda. Parece que sí funciona, el problema creo que es las dimensiones de los elementos. Si le quito el scrollbar vertical desaparece el pie de página en IE o se ve más pequeño en Mozilla.

¿Qué debo hacer para que me cuadre perfecto con el tamaño de la pantalla? (Si es posible claro)

Por cierto he metido en el div header una imagen de fondo, quiero que ocupe toda la capa, pero lo que hace es multiplicar la imagen hasta que rellena todo. ¿Hay alguna forma de que cuadre la imagen con el tamaño de la capa?

Gracias de nuevo. Saludos

IsaBelM · #10 (**permalink**) 13/10/2011, 13:06

si a lo que te refieres es a añadir overflow:hidden; al body, el footer y parte de la imagen no se mostrará en ningún navegador. sólo la imagen tiene 1000px de alto

con respecto a tu segunda pregunta. has de usar la etiqueta <img> y no asignar la imagen como background

aalleexx81 · #11 (**permalink**) 14/10/2011, 00:37

¿Entonces para que la página se vea bien en cualquier navegador tengo que disminuir el tamaño de los elementos?

IsaBelM · #12 (**permalink**) 14/10/2011, 05:51

en el alto y ancho de la imagen en lugar de usar unidades absolutas, usa unidades relativas (%)