Como sobreponer dos divs

maryhanns · #1 (**permalink**) 14/11/2008, 12:26

saludos,
Quiesiera saber como hago para sobreponer dos divs.

Por que estoy tratando de tener un div abajo con un fondo de una imagen con un degradado vertical con un alto de 443px. y el de arriba otro div con con otro fondo que completa el degradado del otro si es que se extiende el texto hacia abajo.

Gracias de antemano si me pueden ayudar.

ME cree este codigo pero me deja otros 443px abajo de la pagina.
(Y este problema ya me ha pasado varias veces con posiciones relativas, les agradecería si saben como solucionar esto)

Código:

estilos.css

.wrapper {
	width: 100%;
	text-align: center;
}
.container {
	width: 739px;
	margin-left:auto;
	margin-right:auto;
}
.header {
	width: 100%;
	height: 49px;
	background-image:url(../imagenes/menu_sup.png);
	background-repeat: no-repeat;
}
.content {
	position:relative;
	top:-443px;
	width: 100%;
	height:443px;
	background-image:url(../imagenes/main_top.png);/*esta imagen es la que tiene 443px*/
	background-repeat: no-repeat;
}
.content2 {
	position:relative;
	width: 100%;
	background-image:url(../imagenes/main_mid.png);
	background-repeat: repeat-y;
	top: 443px;
}
.footer {
	margin-top:0px;
	width: 100%;
	background-image:url(../imagenes/main_bot.png);
	background-repeat: no-repeat;
}
body {
	margin-top: 20px;
	padding: 0px;
	background-attachment: scroll;
	background-image: url(../imagenes/Mplus_bkg.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	height:auto;
}

Código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="header">&nbsp;</div>
<div class="content2">
  <div class="content">
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>das</p>
    <p>asd</p>
    <p>asd</p>
  </div>
</div>
<div class="footer">&nbsp;</div>
</div>
</div>
</body>
</html>

Y aquí esta la pagina de prueba http://imageboutique.us/prueba_div

Mikmoro · #2 (**permalink**) 14/11/2008, 12:32

Cita:

Iniciado por maryhanns

Por que estoy tratando de tener un div abajo con un fondo de una imagen con un degradado vertical con un alto de 443px.

¿Y dónde está ese height de 443px? No lo veo en tu css por ninguna parte.

maryhanns · #3 (**permalink**) 14/11/2008, 13:00

Mikmoro. Aqui le edite el codigo.

Código:

height:443px;
background-image:url(../imagenes/main_top.png);/*esta imagen es la que tiene 443px*/

Calizman · #4 (**permalink**) 14/11/2008, 15:54

No se si esto arregle tu problema, pero te recomiendo algo:

Con la poca experiencia que tengo trabajando con el CSS, te se decir que trabajes las paginas con una sola declaracion de tamaños, por ejemplo, si vas a trabajar con los "px" trabaja todos los divs con "px" y mas si va uno dentro de otro, esto te ayudara mucho. Y si trabajas con "%" trabaja todo con "%" porque asi tendras un mayor orden...

Espero que esto te sirva! Saludos!

Mikmoro · #5 (**permalink**) 14/11/2008, 16:26

Bueno, en este caso creo que lo más recomendable es cambiar un poco de estrategia:

- quitar el height
- quitar los deplazamientos
- eliminar la sombra de la imagen superior para que siempre se vea la del inferior y no se monten.
- dar una altura al pie igual a la altura de su imagen.

En definitiva, varias cosas. Mira este ejemplo:

http://www.araudi.net/forosdelweb/ma...maryhanns.html

A ver si te va bien.

P.D.: supongo que tendrás claro que estás usando imágenes PNG, que con IE6 no van a ser transparentes. Si usas fondo blanco en lugar de transparencia para la sombra, deberás volver a cambiar de estrategia.

maryhanns · #6 (**permalink**) 15/11/2008, 08:49

Muchas gracias Mikmoro fuiste muy amable al facilitarme el ejemplo, asi ya resoví mi problema y aprendí como hacerlo