Como puedo hacer que mi pagina web salga centrada en el explorador
Tengo una
Pagina web en la que introduzco todo dentro de un div y lo centro. Yo en mi ordenador lo veo centrado, pero un amigo que tiene una pantalla de 27 pulgadas me dice que lo ve hacia la izquierda. El código que utilizo es el siguiente:
<div style="position: absolute; left: 26%; top: 10%; width: 900px; height: 1150px; margin-top: -100px; margin-left: -150px; background-color:white">
Todo el contenido web
</div>
Tambien quiero añadir que quiero que el div este me quede arras de arriba del explorador por eso le tengo puesto el margin-top:-100px. Estaría muy agradecido si pudieses hecharme una mano.
2 respuestas
Si me puedes enseñar la web mejor, ten en cuenta que muchos navegadores interpretan las cosas diferentes por lo que puedes encontrarte algunas "diferencias".
Intenta mostrarme la web al completo, ya que no solo podría ser del código si no de otras cosas.
Ese código lo tienes directamente en el DIV te recomiendo hacerlo vía CSS y hacerle un "margin: 0 auto;" y con un "width: 900px;" y te lo debería de centrar.
Tu le estas poniendo absolute, lo que hará que en una pantalla mas grande se vea descentrado.
Miralo y me comentas.
Hola
sakrow, he probado de la forma que me has dicho y solo me centra lo blanco que es donde iría luego el contenido de la web. El problema es que el contenido de ese div lo tengo en varios divpa's y no me los centra. se me quedan hacia el lado izquierdo. de la forma que lo tengo yo me lo centra, pero un amigo que tiene una pantalla de 26 pulgadas me dice que no lo ve centrado del todo sino un poco mas a la izquierda. La web no se como enseñártela, aun no la he subido al servidor. si quieres tecopio el código de solo una pagina aquí o te mando en un block de notas.
Gracias de antemano
ya la he subido a un servidor:
www.spazioip.es/prueba.html
El error es que todos los divs tienen position: absolute.
Quítaselo a todos y veras como siguen a ese div superior.
Pruébalo y me comentas
PD: Yo lo he echo con FIREBUG y funciona bien.
Siento la tardanza, he estado fuera este puente. He probado quitarle a todos los div la intentar absoluta, pero me sale todo desordenau hacia abajo, no tengo nada centrado. No se que es lo que estoy haciendo mal.
Gracias de antemano,
Un saludo
No se si me he explicado bien antes, una vez hecho lo que me has dicho me sale el div principal centrado, y todo los demás div que van dentro me salen en el lado izquierdo del div principal . Como si abría una columna en el lado izquierdo del div principal y cada div iría en una fila diferente. Me sale todo como una lista de arriba abajo, no me deja las cosas donde estaban.
Se me olvido decirte que les pusieras el float, para que flotaran hacia los lados, si es un grupo de tres (como en algún caso) hacerles un float right a los tres y darles un margin para que se separen.
Entones ya lo tendrás.
Lo que te ocurre es que en tu caso tienes que modificar muchas cosas por el absolute, nunca es bueno hacer nada con absolute a menos que sea 100% necesario
Que solución me darias?
Lo primero que el primer div, no tenga el CSS en el HTML, si no que lo hagas todo con CSS en su lugar.
Segundo, quitarle a todos el absolute y hacerlo mediante float, con width. Hacer una buena jerarquía de capas, para poder tener control total sobre ellas.
Y paciencia hasta que quede todo bien, si tienes mas de una pantalla ( o posibilidad de cambiar resoluciones) ponlas para ver que queda bien.
Para centrar generalmente se usa " margin: 0 auto; " de manera que queda pegado a la parte de arriba y por abajo y los lados queda centrado.
Ten cuidado en la parte en la que tengas 3 divs en paralelo, usa margin lateral para darles espacio.
Ten en cuenta también que margin no funciona si no le das un width, nunca uses porcentajes, al menos no en capas superiores, siempre que una capa superior acote a las demás para que no se te desconfigure en distintas pantallas.
Si quieres que ese contenedor quede topando el borde superior de la pantalla y que quede centrado deberías hacer eso:
<! DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo div superior centrado :)</title>
<meta charset="utf-8">
<style>
#contenedor{
width:900px;
height:1150px;
Margin:0px auto; /* con esto hago que mi contenedor quede centrado en la pantalla */
background-color:peru;
}
</style>
</head>
<body>
<div id="contenedor"> Aquí va todo el contenido de la pagina</div>
</body>
</html>
Con eso no deberías tener problemas :D
Saludos y espero que funcione bien :D
Atentamente,
JuanGarciaR
www.juangarciar.com
Hola Juan,
El problema que tengo que dentro de ese div tengo el contenido de la web en varios divpa's, entonces el div donde tiene que ir el contenido si que me sale centrado, pero el contenido no. Por otro lado no me sale el div que esta en el centro pegado a la parte de arriba. No se como solucionarlo :S
Gracias de antemano.
Ya veo que no comprendes bien como usar el css, bueno te comento que para que un diseño se vea bien, deberías dejar de usar el position:absolute;, ya que ese hace que el elemento quede flotando independiente al elemento que lo contenga.
Te dejo una estructura de como deberías trabajar una pagina web:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo div superior centrado :)</title>
<meta charset="utf-8">
<style>
#contenedor{
width:900px;
height:1150px;
margin:0px auto; /* con esto hago que mi contenedor quede centrado en la pantalla */
background-color:perú;
}
#header{
width:100%;
height:100px;
float:left;
background-color:olive;
text-align:center;
}
#menu{
width:100%;
height:50px;
float:left;
background-color:blue;
text-align:center;
}
#center{
width:100%;
height:300px;
float:left;
background-color:green;
text-align:center;
}
#footer{
width:100%;
height:50px;
float:left;
background-color:red;
text-align:center;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="header">
<h1>AQUÍ VA EL CONTENIDO DE LA CABECERA DE LA PAGINA</h1>
<div id="header">
<div id="menu">
<p>AQUÍ VA EL MENU DE LA PAGINA</p>
<div id="menu">
<div id="center">
<h1>AQUÍ VA EL CONTENIDO CENTRAL DE LA PAGINA</h1>
<div id="center">
<div id="footer">
<p>AQUÍ VA EL CONTENIDO DEL PIE DE PAGINA</p>
<div id="footer">
</div>
</body>
</html>
Esa seria la manera de utilizar el css para que cada elemento este dentro de un contenedor y no sobrepase a dicho contenedor.
Espero que funcione bien y que te ayude!
Un cordial saludo!
JuanGarciaR.
www.juangarciar.com
Esta muy bien, pero también quiero que no tenga nada de margen superior, es decir que quede a ras de la barra de explorador.
Como lo podría hacer?
Gracias de antemano
UN saludo.
Para lograr eso solo debes agregar en el estilo los siguiente:
html,body{
margin:0px;
padding:0px;
border:0px;
height:100%;
width:100%;
}
Con eso no deberías tener mas problemas :)