DIV con SWF sobre tabla

axe · #1 (**permalink**) 12/11/2009, 09:08

Hola a todos.

Tengo un swf y quisiera ponerlo dentro de un div centrado horizontalmente, y con la posibilidad de definir la posición vertical con respecto al borde superior.
El div debe superponerse a una tabla... justamente eso es lo que no puedo hacer.

Alguna ayuda?
Muchas gracias.

cristian_cena · #2 (**permalink**) 12/11/2009, 11:08

Esto te puede servir http://www.forosdelweb.com/f53/ajust...3/#post3162528

Recuerda que puedes hacer salir un div del flujo normal del documento usando la propiedad position con el valor absolute o fixed.

Ej:
position:absolute;

y luego, ya con el elemento posicionado darle un valor de apilamiento (eje z) con la propiedad z-index (no lo he probado con tablas, si anda avisame je)

Saludos!

axe · #3 (**permalink**) 12/11/2009, 11:52

Emmm.... algo entendí.

Con "position:absolute" pude superponer el div... perfecto. (funciona sobre tablas)
Y con "margin" manejo la distancia con respecto al borde superior.

Pero no me queda centrado... necesitaría más aclaración sobre eso por favor.
Gracias de nuevo.

cristian_cena · #4 (**permalink**) 12/11/2009, 15:47

Hola axe:
Bien, ahora que lo tienes posicionado tendras que dar con las propiedades ...

div {
position:absolute;
top:/*valor que tu quieras, ej: 100px*/;
left:/*valor que tu quieras, ej: 20em*/;
right:/*valor que tu quieras, ej: 25%*/;
botom:/*valor que tu quieras, si es cero (0) no hace falta que incluyas la propiedad*/;
}

... los valores o coordenadas en donde quieres que se hubique.

EDITO:

tambien podemos prevenir la "divitis" ...
http://www.forosdelweb.com/f53/ajust...3/#post3163964
... aplicando una clase (en tu <embed class="tu_clase">)

Saludos!

axe · #5 (**permalink**) 13/11/2009, 08:50

Hola Cristian, ya entiendo mejor el asunto.
Lo que no aclaré es que quiero centrar el div en un diseño flotante... O sea, que quede centrado a cualquier resolución.
Probé poniendo left y rigth en 50% pero no tuve el resultado esperado...

Podrías comentarme?

cristian_cena · #6 (**permalink**) 13/11/2009, 09:11

Hola axe:

Hice esto, no se si es la mejor alternativa pero es lo que se me ocurrió

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
    #relativo {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    width:200px;
    height:200px;
    }
    #absoluto {
    position: absolute;
    top:/*aquí controlas el eje vertical a tu gusto. Ej: 10%, -10px, etc.*/;
    background-color:red;
    width:200px;
    height:200px;
    }
</style>
</head>
<body>
    <div id="relativo">
        <div id="absoluto">
            <p>soy un div absoluto centrado</p>
        </div>
    </div>
</body>
</html>

Saludos!

willyfc · #7 (**permalink**) 13/11/2009, 10:44

Bueno, no se si entendí mal, pero supongo que es algo así(modificando algo el code de cristian_cena):

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
    #absoluto {
    position: absolute;
    top:50%;
	left:50%;
    background-color:red;
    width:200px;
    height:200px;
	margin:-100px 0 0 -100px;
    }
</style>
</head>
<body>
<div id="absoluto">
	<p>soy un div absoluto centrado</p>
</div>
</body>
</html>

axe · #8 (**permalink**) 13/11/2009, 12:20

Quedó bárbaro!
Muchas gracias por comprartir.
A vuestra disposición para lo que gusten.
Un saludo.