Div absoluto con otros divs

Tw1sT · #1 (**permalink**) 19/12/2007, 07:20

Buenas, pues despues de darle mucha vuelta e ir haciendo otra vez la web poco a poco he visto ke no me funciona un div absoluto con otros divs al lado de manera relativa.

El div absoluto esta contenido en un Div principal, luego despues de posicionarlos de manera absoluta empiezo el flujo del documento con divs relativos.

La cuestion es ke en firefox funciona todo perfecto, pero con el IE6 (y creo ke con el IE7) no funciona, seguramente sea una tonteria pero no la veo por ningun lado.

Aki les pego el codigo de lo ke me falla:

Código:

<html>

<head>
<title>prueba</title>


<style>


body {
	background: #c0c0c0;
	margin: 10px 0px 20px 0px;
	text-align: center;
}

#caja1 {
   	width:500px;
	height:500px;
	background: #FFFFFF;
	margin:auto;
	padding:auto;
	border:#000000 2px solid;
	position:relative;
}

#caja2 {
	width:200px;
	height:25px;
	position: absolute;
	top:50;
	left:50;
	border:#000000 1px solid;
}

#Caja3 {
	width: 50%;
        height: 50px;
        background:purple;
	float:left;
}

#Caja4 {
	width: 50%;
        height: 50px;
        background:blue;
	float:right;
        text-align:center;
}

</style>
</head>

<body>

<div ID="caja1">

<DIV ID="Caja2">aki van los botones</DIV>
<DIV ID="caja3">aaaa</DIV>
<DIV ID="caja4">aaaa</DIV>
</div>
</body>
</html>

Gracias por la ayuda ke me puedan aportar y un saludo :)

magodeoz78 · #2 (**permalink**) 20/12/2007, 00:36

mira te corregi algunos detalles checalo y espero te sirva acostumbrate a usar archivos CSS, creo que es la mejor manera de administrar, asi te debe de funcionar bien.

<html>

<head>
<title>prueba</title>

<style type="text/css">

body,td,th {
background: #c0c0c0;
margin:0;
padding:0;
}
#contenedor{
width:100%;
height:500px;
margin-top:20px;
}
#caja1 {
width:504px;
height:500px;
background: #FFFFFF;
border: outset #000000 2px solid;
margin:0 auto;
}

#caja2 {
width:200px;
height:25px;
border:#000000 1px solid;
}

#Caja3 {
width:250px;
height:50px;
background:purple;
float:left;
}

#Caja4 {
width:250px;
height:50px;
background:blue;
float:right;
}

</style>
</head>

<body>
<div id="contenedor" align="center">
<div id="caja1">
<div id="Caja3"></div>
<div id="Caja4"></div>
<div id="caja2">creo que te refieres a esto </div>
</div>
</div>
</body>
</html>

Tw1sT · #3 (**permalink**) 20/12/2007, 05:12

Lo de los archivos esta claro, pero mientras ke no tenga todo el estilo necesario no los pondre en un archivo, a parte ke esto es un ejemplo ke reproduce mi error.

Las variaciones ke has esho, la verdad ke no las encuentro sentido, pero bueno no es lo ke buscaba ya ke no esta la caja con posicionamiento absoluto ni nada por el estilo.

Un cosa curiosa ke pude comprobar ayer, e imagino ke sera un bug del IE, es ke al incluir este div:

#Precarga_boton{
width: 0px;
height: 0px;
display: inline;
background-image: url(BotonOver1.jpg);
background-image: url();
}

Y al ponerlo directamente despues del div contenedor y el ke esta en absoluto, el div absoluto sale pero mal posicionado ya ke el IE6 no deja el div #Precarga_boton con el ancho y el largo a 0 como tendria ke estar, si no como si fuera una linea.

Me han confirmado ke en IE7 funciona y en firefox lo ke tengo tb comprobado... realmente curioso!!

Si pudiera conseguir ke el DIV #Precarga_boton no ocupase el espacio ke ocupa y saliese como en IE7 y Firefox, seria una solucion muy practica.

Un saludo y gracias por la respuestas.

Ju4ncho · #4 (**permalink**) 21/12/2007, 11:43

existe una forma de hacer eso mismo(incluir tablas relative, bajo una de posicion absolut) pero teniendo solo el DIV principal y no viendo los demas que estarian incluidos en este? Me explico:

<DIV class="div_principal">

luego aqui incluiria el resto de las tablas.

</DIV>

Lo dificil es esto: las tablas que estarian aqui incluidas, estan posicionadas en otra parte de la pagina, yo con esto quiero especificar que ahora su posicion seria adentro de esta tabla principal.

En teoria seria algo como esto:

Código:

{! Solo para mover y darle formato a una tabla llamada SUBTABLE!}
table.SUBTABLE {
width:830px; height:380 !important; border:1px violet solid; position:relative; top:600px; left:40px; overflow:hidden; z-index:1;
}

Ahi el top es lo que determina la posicion de esa tabla en mi look final, pero estoy buscando una forma donde no tenga q espeficificar el top value, si no que solo anadir un tag en mi html de modo que cuando se compile y se lea el tag, el html reconozca que AHI colocara la tabla SUBTABLE.