Foros del Web » Diseño web » HTML »

Cómo centrar página web

Estas en el tema de Cómo centrar página web en el foro de HTML en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 14/02/2014, 16:56
Avatar de Nelsonfmc  
Fecha de Ingreso: febrero-2014
Ubicación: Miranda
Mensajes: 4
Antigüedad: 8 meses
Puntos: 0
Cómo centrar página web

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.
  #2 (permalink)  
Antiguo 14/02/2014, 23:38
 
Fecha de Ingreso: julio-2010
Mensajes: 367
Antigüedad: 4 años, 2 meses
Puntos: 43
Respuesta: Cómo centrar página web

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".
  #3 (permalink)  
Antiguo 18/02/2014, 05:20
 
Fecha de Ingreso: febrero-2014
Mensajes: 2
Antigüedad: 8 meses
Puntos: 0
Respuesta: Cómo centrar página web

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*/
}
  #4 (permalink)  
Antiguo 18/02/2014, 05:41
 
Fecha de Ingreso: julio-2010
Mensajes: 367
Antigüedad: 4 años, 2 meses
Puntos: 43
Respuesta: Cómo centrar página web

Cita:
Iniciado por cimorra140 Ver Mensaje
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"
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.

Etiquetas: css, formulario, href, página, php, todo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:26.
SEO by vBSEO 3.3.2