no valida centrado de pagina...

andrewp · #1 (**permalink**) 17/06/2008, 11:12

Saludos,

Tengo una paginilla que tiene la caracteriztica de quedar en el centro del explorador indiferente a la resolucion del usuario (como minimo 1024x768).

El problema es que para llevar a cabo esto debo dejar la cabecera del HTML de la siguiente manera:

Código PHP:

  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

y en dicho orden. Por su puesto, el validador no lo acepta porque dice que el <!DOCTYPE html > debe estar primero. Pero si lo dejo en el orden que me solicita el validador la página ya no queda centrada. verticalmente.

Podrían echarme una mano con esto?

Gracias

#2 (**permalink**) 18/06/2008, 10:58

Tendrás que pegar el código que estás usando.

Claramente lo que sucede es que el "modo estricto" del navegador que estás probando no acepta correctamente tu código.

Entre XHTML y HTML hay algunas sutiles diferencias, que a veces provocan esto. Una de las principales es que algunas cosas deben especificarse para el elemento "html", no solo para "body" (aunque no sé si esto te afecte.

Saludos.

#3 (**permalink**) 18/06/2008, 11:12

No deberías complicarte tanto, no es necesario un encabezado para centrar una página, con unas pocas clases de CSS se puede... te explico el método que me ha funcionado a mi hasta ahora:

Código:

html, body
{
     height:100%;
     margin:0pt;
     padding:0pt;
}

body
{
      text-align:center;
}

#alinearVertical
{
     float:left;
     height:50%;
     margin-top:-366px; //La mitad del alto de lo que será tu div de contenido
     width:100%;
}

#contenido
{
     height:732px; //El doble del margin-top de #alinearVertical
     width:965px;
     margin-left:auto;
     margin-right:auto;
     text-align:left;
     top:0px;
}

Lo único importante es que el div de contenidos debe ser de dimensiones estáticas (al menos el alto, el ancho puede buscarse una forma de centrarlo aunque sea variable). El código HTML sería algo así:

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" />
</head>
<body>
    <div id="alinearVertical"><!-- Dejar este div vacío --></div>
    <div id="contenido"><!-- Colocar TODO el contenido dentro de este div --></div>
</body>
</html>

Pueden ver un ejemplo funcionando en mi página, espero que sea de utilidad....

Saludos,

Héctor Borges
www.arepahosting.com
Valencia - Venezuela