Unión de 3 divs en vertical

UniversalStudios · #1 (**permalink**) 30/06/2011, 15:08

Hola!

Os explico, estoy haciendo una web en la que el cajón de contenido consta de 4 Divs

El primero es el que contiene los otros 3 divs y lo uso para centrarlos en la página sin necesidad de cambiar sus propiedades.

Los otros 3 son

1: Contiene solo la imagen de fondo del cajón de contenido (con esquinas redondeadas)

2: Aquí va todo el contenido de la web y la imagen de fondo es la continuación de la imagen del DIV 1

3: Contiene el pie de página y la imagen de fondo es también una prolongación de las imágenes de los DIV 1 y 2.

El problema es el siguiente: he estado mirando margins y paddings y no hay manera de que los 3 divs estén juntos sin ningún píxel de separación. Por ese motivo el cajón de contenido se ve "fraccionado" es decir, las imágenes no están juntas y hay vacíos entre una y otra...

Alguien puede echarme una mano?

Gracias de antemano!

afrika026 · #2 (**permalink**) 04/07/2011, 06:36

por qué no pones la imagen background entera en el div contenedor, es decir, el que aloja los demas divs?

UniversalStudios · #3 (**permalink**) 07/07/2011, 03:40

Cita:

Iniciado por afrika026

por qué no pones la imagen background entera en el div contenedor, es decir, el que aloja los demas divs?

Porque si varía el largo de la página se me repetirá la imagen...

pedro_delgado · #4 (**permalink**) 07/07/2011, 09:19

html:

<body>
<div id="contenedor">
<div class="contenido"></div>
<div class="contenido"></div>
<div class="contenido"></div>
</div>
</body>

css:

*{
margin : 0px;
padding : 0px;
}

#contenedor{
position : relative;
width : 1000px; 
margin-left: -500px; 
left : 50%;
}

.contenido{
position : relative;
height : 200px; 
width : 100%;
}

Mira a ver si eso es lo que necesitas, metele los backgraunds a cada div. No debería dejar ningún tipo de separación entre ellos.

Un saludo!

PD: el tamaño de los div lo he puesto a ojo, adaptalos a lo que necesites para que encaje el background.