Superposición de capas y alineación

riverastur · #1 (**permalink**) 16/07/2014, 06:43

Hola a tod@s,

a ver si me puede ayudar alguien, llevo días intentando lograr lo que os voy a preguntar y ya estoy pensando en desistir...

Busco la mejor manera de conseguir una disposición de capas como la de la imagen:
- las partes rosa y azul no hay problema, he puesto un borde al body y un color de fondo;
- una capa con fondo verde al fondo;
- una capa blanca que será donde irá todo el contenido de la web y tendrá 980px de anchura;
- una capa roja que será el pie de la web y ocupará todo el ancho de la pantalla.

Muchísimas gracias por adelantado.

Un saludo!

C2am · #2 (**permalink**) 16/07/2014, 11:16

Muestra el html y el css con el cual estás trabajando.
A partir de allí te podremos ayudar.
Saludos

riverastur · #3 (**permalink**) 16/07/2014, 11:44

Gracias C2am,

el código html:

<body>
<div class="fondosuperior">
<div class="cabecera"></div>
</div>
<div class="cuerpo"></div>
<div class="pie"></div>
</body>

y el css:

body{
background-color:#333;
}

.fondosuperior{
position:relative;
z-index:1;
height:400px;
background-color:#090;
}

.cabecera{
position:relative;
z-index:2;
width:900px;
height:150px;
background-color:#966;
margin:auto;
}

.cuerpo{
position:relative;
z-index:2;
background-color:#03C;
width:900px;
height:650px;
margin:0 auto;
}

.pie{
position:relative;
z-index:1;
min-height:150px;
background-color:#F60;
}

Y de momento esto es lo que he conseguido:

Me falta que la capa azul (cuerpo) se superponga sobre la verde y que la naranja (pie) esté siempre abajo del todo de la web.

Gracias de nuevo!

alzacon · #4 (**permalink**) 16/07/2014, 13:14

Yo no me termino de enterar muy bien lo que quieres hacer, las imagenes y los comentarios de lo que buscas son distintos. Podrías usar para el fondo un imagen, o algo mas actual como los gradientes lineales.

riverastur · #5 (**permalink**) 16/07/2014, 14:34

Hola alzacon,

lo que busco es que la imagen del post anterior sea así:

Tanto en el html como en el css las capas son:

fondosuperior (verde)
cabecera (marrón)
cuerpo (azul)
pie (naranja)

El problema principal es que el cuerpo (la capa azul) debería ir justo debajo de la cabecera (marrón) y superpuesta sobre fondosuperior (verde).

Luego ya está el problema de que el pie (naranja) esté siempre abajo del todo de la web, pero con eso aún no me he peleado demasiado...

Gracias!

Zhinyuu · #6 (**permalink**) 16/07/2014, 15:28

¿De qué sirve dividir los laterales a la mitad? ¿qué uso tendrá? ¿Darle algún efecto? ¿Poner alguna imagen? No creo que deba resolverse así

Yo sugiero:

un div general contenedor de:
-div para la cabecera
-div izquierdo - div central - div derecho
- div para el pie

Hasta aquí serían 6 capas. Pero si en verdad quieres hacer esa estructura que muestras en la primera imagen, yo probaría con hacer

1 div general contenedor de:
- div para cabecera
-div izquierdo contenedor de:
* Div arriba clase A
* div abajo clase B
- div central
-div derecho contenedor de:
* div arriba clase A
* div abajo clase B
-div para el pie

alzacon · #7 (**permalink**) 16/07/2014, 17:31

Como te dije y con altura del "contenedor" fija. http://codepen.io/anon/pen/pziBo

riverastur · #8 (**permalink**) 17/07/2014, 00:47

Os pongo el ejemplo real de lo que busco, lo otro era solo una captura de unos archivos que estaba utilizando para pruebas...

Busco esto:

Como veis, el slide de inicio está encima de la capa que en los ejemplos ateriores era verde, pero se sale por debajo.
La cuestión es también que el pie, la capa de abajo del todo, tiene que ir adaptándose a la altura de la página, es decir, tiene que estar siempre en la parte de abajo del todo de la web.

Hasta el sábado no podré probar los ejemplos anteriores, pero creo que no conseguirían eso...

Muchísimas gracias a todos de nuevo!

pzin · #9 (**permalink**) 17/07/2014, 07:51

Donde tú ves elementos HTML otros ven imágenes de fondo. Creo que te estás complicando tú solo.