div sobre otro div pero centrados

kibalion · #1 (**permalink**) 10/07/2010, 15:30

Hola,

Tengo un div sobre otro un poco traslapado para que se vean uno mas que otro.
el codigo que me obliga a poner posicion absoluta y esto me deja los divs pegados al borde izquierdo, pero yo quiero que queden centrados porque mi web esta centrada con respecto al navegador.

adjunto los codigos a ver si me ayudan porfavor.

Gracias!!

Código HTML:

<body bgcolor="#8C653E" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="01"> </div>
<div id="02"> </div>

</body>

Código HTML:

body {
	text-align: center;
}

#01{
	z-index: 0;
	top:104px;
	left:0px;
	width:900px;
	height:12px;
	margin: 0 auto;
	text-align: left;
	background-color: #0099CC;
	position: absolute;
}
#02{
	z-index: 1;
	top:100px;
	left:0px;
	width:900px;
	height:12px;
	margin: 0 auto;
	text-align: left;
	background-color: #CC6666;
	position: absolute;
}

kibalion · #2 (**permalink**) 11/07/2010, 09:44

hay alguna forma??

jomaruro · #3 (**permalink**) 11/07/2010, 12:02

Hola:

No entiendo bien lo que quieres decir, pero si pones los div en position:relative los puedes centrar con margin: 0 auto.

Saludos.

kibalion · #4 (**permalink**) 11/07/2010, 12:14

si los pongo en posicion relative se centran, pero ya no quedan uno sobre otro con el traslape... yo necesito que queden centrados y montados con traslape

kibalion · #5 (**permalink**) 11/07/2010, 12:36

Ahora ya resolvi con distancia left del 50% y el margin left a la mitad del tamaño (de 900) es decir -450, se ve perfecto en IE 6.0, pero en mozilla no se ve nada
alguna idea de como solucionar esto.

adjunto el codigo

Código:

body {
	text-align: center;
}

#01{
	z-index: 0;
	top:104px;
	left:50%;
	width:900px;
	height:12px;
	margin-left:-450px;
	text-align: left;
	background-color: #0099CC;
	position: absolute
}
#02{
	z-index: 1;
	top:100px;
	left:50%;
	width:900px;
	height:12px;
	margin-left:-450px;
	text-align: left;
	background-color: #CC6666;
	position: absolute;
}

kibalion · #6 (**permalink**) 11/07/2010, 14:28

pfff... ya! olvidenlo, ya esta resuelto era solo un detalle.

jomaruro · #7 (**permalink**) 11/07/2010, 16:21

Hola:

Me alegro que lo hayas solucionado. Pero, pienso, que deberías explicar como lo has solucionado para ayudar, en un futuro, a quien pueda necesitarlo.

Saludos.

XxflezhaxX · #8 (**permalink**) 11/07/2010, 18:03

en cuanto lei tenia tu respuesta!!

aunque tu usaste "left:50%;"
la otra forma era que borraras el "left:0%;"

ya que con el body { text-align: center; } es mas que suficiente y solo era cuestion de quitar lo que ya te habia mencionado.

da igual, ya lo resolviste =D
saludos!!