[DUDA] CENTRADO ABSOLUTO - % si , Pixeles no :S

MadKat · #1 (**permalink**) 24/03/2008, 21:37

EDIT: ME CONFUNDI EN EL TITULO, ES AL REVES, %NO y pixeles si.

Bueno, como indica el titulo, estoy teniendo un problema al querer centrar una tabla, al medio de otra tabla al 100% de ancho y alto.

Si pongo por ejemplo, 600pix de alto, se centra dentro de ese rango, pero cuando le doy 100% de alto para que se adapte para cualquier caso, la tabla se me va al margen superior.

Tengo una tabla de 100% x 100% (ancho x alto) y adentro otro tabla (la q quiero centrada). Adentro de la de tabla principal tengo seteado CENTRO en "Horizontal" y MEDIO en "vertical".

No tengo idea que puede ser, me resulta muy extraño, porque en otras ocasiones me funcionó :S.

Si alguien puede ayudarme, le agradezco mucho.

Saludos!

Dejo un codigo de ejemplo por si sirve de ayuda:

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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body {
	background-color: #000000;
}
-->
</style></head>

<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" valign="middle"><table width="300" height="300" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

ElJavista · #2 (**permalink**) 25/03/2008, 09:07

El height = "100%" en una tabla no siempre funciona, depende del DOCTYPE. Para que resulte solo elimina: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" incluendo las comillas.

MadKat · #3 (**permalink**) 25/03/2008, 17:27

Gracias por la respuesta, igualmente, sigue sin funcionar :S que puede ser?

ssclamp · #4 (**permalink**) 25/03/2008, 18:16

De esta forma te funcionará siempre, te dejo el código tal como lo tienes pero no es necesario utilizar una tabla, con el contenedor sólo es suficiente:

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=iso-8859-1" />
<title>Documento sin título</title>
<style type="text/css">
<!--
body {
	background-color: #000000;
}
-->
</style></head>

<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td>
    <div style="position: absolute; margin-left: -150px; margin-top: -150px; width: 300px; height: 300px; top: 50%; left: 50%;">
    <table width="300" height="300" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
    </div>
      </td>
  </tr>
</table>
</body>
</html>

MadKat · #5 (**permalink**) 25/03/2008, 20:46

Gracias ssclamp eso si funciona! Ahora mi duda, si quiero insertar dentro una tabla mas grande, se me deforma el div y queda por cualquier lado, como lo adapto? Gracias desde ya!

Mis saludos!

Apolo · #6 (**permalink**) 25/03/2008, 21:01

Tema movido desde Web general hacia CSS.

Saludos,

MadKat · #7 (**permalink**) 25/03/2008, 21:24

Bueno, gracias, en realidad lo puse en el otro lado porque me parecio que era una consulta general, pero como digas.

Ahora, volviendo, cuando quiero poner un "contenido" mas grande, se me corre todo de lugar. Alguna sugerencia?

ssclamp · #8 (**permalink**) 25/03/2008, 22:28

Tienes dos tablas, una envuelve todo el body y otra dentro del divisor que es el que sale centrado en ancho y altura (independientemente de la resolución de la pantalla).

Si quieres aumentar el tamaño de la tabla interior, debes también cambiar el tamaño del divisor que la contiene:

p.e.

Código HTML:

<div style="position: absolute; margin-left: -300px; margin-top: -200px; width: 600px; height: 400px; top: 50%; left: 50%;">
    <table width="600" height="400" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
    </div>

En el ejemplo hemos aumentado el ancho al doble (de 300px a 600px) y la altura de 300px a 400px. Pero siempre deben ir acompasados los tamaños del divisor y de la tabla (contenedor y contenido).

Espero que te sirva.

Saludos