Cómo centrar página web

Nelsonfmc · #1 (**permalink**) 14/02/2014, 17:56

Verán, llevo casi que toda la tarde intento centrar todos los elementos de mi página pero nada que lo consigo, coloco "align="center"" en el div, o con un CSS pero igual, cuando quito el style con el position:absolute y demás sí se centra pero quedan todas en el "top" de la página, alguien sabe qué puedo hacer? De verdad ya intenté de todo:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Inicio - Sistema de registro de ingresos</title>
<meta name="generator" content="WYSIWYG Web Builder 9 - http://www.wysiwygwebbuilder.com">
<style type="text/css">
body
{
   margin: 0;
   padding: 0;
   background-color: #E1E1E1;
   color: #000000;
}
</style>
<style type="text/css">
a
{
   color: #0000FF;
   text-decoration: underline;
}
a:visited
{
   color: #800080;
}
a:active
{
   color: #FF0000;
}
a:hover
{
   color: #0000FF;
   text-decoration: underline;
}
</style>
<style type="text/css">
#wb_formulario
{
   background-color: transparent;
   border: 0px #000000 solid;
}
#cedula
{
   border: 1px #A9A9A9 solid;
   background-color: #FFFFFF;
   color :#000000;
   font-family: Arial;
   font-size: 13px;
   text-align: left;
   vertical-align: middle;
}
#wb_Text1 
{
	background-color: transparent;
	border: 0px #000000 solid;
	padding: 0;
	text-align: center;
	margin-left: auto;
	margin-top: auto;
}
#wb_Text1 div
{
   text-align: left;
}
#wb_Text3 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
   text-align: left;
}
#wb_Text3 div
{
   text-align: left;
}
#Line1
{
   color: #A0A0A0;
   background-color: #A0A0A0;
   border-width: 0px;
}
#pass
{
   border: 1px #A9A9A9 solid;
   background-color: #FFFFFF;
   color :#000000;
   font-family: Arial;
   font-size: 13px;
   text-align: left;
   vertical-align: middle;
}
#enviar
{
   border: 1px #A9A9A9 solid;
   background-color: #F0F0F0;
   color: #000000;
   font-family: Arial;
   font-size: 13px;
}
#Line2
{
   color: #A0A0A0;
   background-color: #A0A0A0;
   border-width: 0px;
}
#wb_Text2 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
   text-align: left;
}
#wb_Text2 div
{
   text-align: left;
}
</style>
</head>
<body>
<div id="wb_cajaform" style="position:absolute;left:382px;top:143px;width:348px;height:299px;z-index:3;">
<img src="images/img0001.png" id="cajaform" alt="" style="border-width:0;width:348px;height:299px;"></div>
<div id="wb_formulario" style="position:absolute;left:440px;top:223px;width:244px;height:156px;z-index:4;">
<form name="Form1" method="post" action="./verificar.php" enctype="text/plain" id="formulario">
<input type="number" id="cedula" style="position:absolute;left:36px;top:25px;width:167px;height:18px;line-height:18px;z-index:0;" name="cedula" value="" maxlength="8" placeholder="Cédula de identidad">
<input type="text" id="pass" style="position:absolute;left:36px;top:67px;width:167px;height:18px;line-height:18px;z-index:1;" name="pass" value="" maxlength="18" placeholder="Contraseña">
<input type="submit" id="enviar" name="" value="Ingresar" style="position:absolute;left:69px;top:108px;width:96px;height:25px;z-index:2;">
</form>
</div>
<div align="center" id="wb_Text1" style=" top: 23px; z-index: 5; text-align: center;">
<span style="color:#696969;font-family:Arial;font-size:37px;">Sistema de registro de ingresos</span></div>
<div id="wb_Text3" style="position:absolute;left:459px;top:157px;width:215px;height:27px;z-index:6;text-align:left;">
<span style="color:#696969;font-family:Arial;font-size:24px;">Ingresar al sistema</span></div>
<hr id="Line1" style="margin:0;padding:0;position:absolute;left:399px;top:198px;width:308px;height:1px;z-index:7;">
<hr id="Line2" style="margin:0;padding:0;position:absolute;left:400px;top:392px;width:308px;height:1px;z-index:8;">
<div id="wb_Text2" style="position:absolute;left:444px;top:408px;width:234px;height:16px;z-index:9;text-align:left;">
<span style="color:#000000;font-family:Arial;font-size:13px;"><a href="./registrar.php">¿No estás registrado? - Regístrate aquí</a></span></div>
</body>
</html>

Ayuda por favor, saludos.

Zeromm · #2 (**permalink**) 15/02/2014, 00:38

Queda clara una cosa. Odias hasta limites insospechados los archivios .css xDD. Tienes css incrustado y css en linea por todas partes, que es justo lo menos recomendable xDDD.

Primero, no incrustes el css dentro del html ni lo metas en linea.

Segundo, si lo incrustas (que insisto, mejor que no lo hagas), ¿porque incrustarlo dentro de varias etiquetas "style"? ¿porque no usar solo una y meter ahí el css?

Tercero. Tienes que acostumbrarte a indentar el html, ya que así es más complejo encontrar posibles errores.

Cuarto. Y esta es la razón de tus problemas. Todos, sin excepción, los "position" de tu página son "absolute", así olvidate por completo de centrar nada xD. Tienes que usar "relative".

cimorra140 · #3 (**permalink**) 18/02/2014, 06:20

Si lo que quieres es centrar tu web, y que esta se vaya ajustando conforme se re-dimensiona el navegador, prueba lo siguiente.

#Div_a_centrar {
margin: 0 auto /*Donde "0" es la distancia con la parte superior y "auto" es la distancia lateral izquierda*/
}

Zeromm · #4 (**permalink**) 18/02/2014, 06:41

Cita:

Iniciado por cimorra140

Si lo que quieres es centrar tu web, y que esta se vaya ajustando conforme se re-dimensiona el navegador, prueba lo siguiente.

#Div_a_centrar {
margin: 0 auto /*Donde "0" es la distancia con la parte superior y "auto" es la distancia lateral izquierda*/
}

Con el css que él tiene eso no funcionaría, ya que lo tiene tooodo con "absolute"