Foros del Web - Centrar vertical y horizontalmente mi sitio web

Foros del Web (http://www.forosdelweb.com/)

- Diseño web (http://www.forosdelweb.com/f91/)

- - Centrar vertical y horizontalmente mi sitio web (http://www.forosdelweb.com/f91/centrar-vertical-horizontalmente-mi-sitio-web-613359/)

forelord

08/08/2008 00:33

Centrar vertical y horizontalmente mi sitio web

Hola, tengo una web que no se bien como centrarla vertical y horizontalmente. ¿Alguien podría decirme cómo puedo hacerlo?

Un saludo.

otto1303

09/08/2008 21:22

Respuesta: Centrar vertical y horizontalmente mi sitio web

Horizontalmente lo hago así con CSS, creando un div que abarque todo llamado contenedor:

Código:

#contenedor {

        margin: 0px auto;

}

Con la observación de que en Firefox, Opera, Safari funciona bien, pero en IExplorer 7 no me funciona. Allí utilizo

Código:

<div align="center">todo el contenido</div>

que aunque no es correcto hacerlo con align, me funciona.

Verticalmente es más complicado y quizás algúna otra persona nos ayuda.

ssclamp

10/08/2008 17:34

Respuesta: Centrar vertical y horizontalmente mi sitio web

Coloca todo el contenido de tu web dentro del divisor contenedor y te saldrá totalmente centrado, tanto en el ancho como en el alto, independientemente de la resolución del monitor:

El ejemplo tiene como referencia una medidas de 900px X 500px (esto lo ajustas a tus medidas)

Código PHP:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

 
<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Centramiento horizontal y vertical</title>

 
<style type="text/css">

#contenedor {

    position:absolute;

    width:900px;

    height:500px;

    margin-left: -450px;

    margin-top: -250px;

    left: 50%;

    top: 50%;

    border: 1px solid #484848;

</style>

</head>

 
<body>

<div id="contenedor">

Contenido de tu página

</div>

 
</body>

 
</html>

Saludos

forelord

11/08/2008 03:00

Respuesta: Centrar vertical y horizontalmente mi sitio web

Muchas gracias por la ayuda, esta tarde lo probaré a ver qué tal. Ya os contaré.

forelord

11/08/2008 11:47

Respuesta: Centrar vertical y horizontalmente mi sitio web

Lo primero de todo decir que no tengo mucha idea de diseño web. Segundo comentaros que he hecho lo que me has dicho y la página aparece con una línea cuadrada alrededor de mi web. ¿Cómo la puedo quitar?

Otra cosa, mi página tiene una parte de css en donde definí a través de Dreamweaver el estilo de letra, fondo y color de los enlaces.... ¿Tengo que meter todo el contenido inlcuido estos estilos dentro de la parte que me dices?

Espero vuestra ayuda.

Saludos.

ssclamp

11/08/2008 17:54

Respuesta: Centrar vertical y horizontalmente mi sitio web

Hola

La linea que remarca el divisor es sólo para vieras el efecto de centramiento tanto horizontal como vertical. Para quitar la linea borra esto del estilo:

border: 1px solid #484848;

y ya desaparecerá el recuadro.

Respecto a meter tu contenido dentro del divisor de centramiento, sólo debes incluir el contenido del body. El contenido del head lo metes dentro del head de la página que hace el centramiento.

¿resuelto?.

Coméntanos.

Saludos

forelord

12/08/2008 14:43

Respuesta: Centrar vertical y horizontalmente mi sitio web

Gracias! Pero lo que no consigo es poner el color del fondo de mi web. Al centrarlo solo aparece el color del fondo en el espacio que he creado, pero el resto de la pantalla tiene un color de fondo blanco que no es el mismo que el que tenía mi web.

¿Cómo podría solucionar ésto?

Triby

12/08/2008 17:29

Respuesta: Centrar vertical y horizontalmente mi sitio web

Código PHP:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

 
<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Centramiento horizontal y vertical</title>

 
<style type="text/css">

body {

        background-color: #000;

}

 
#contenedor {

    position:absolute;

    width:900px;

    height:500px;

    margin-left: -450px;

    margin-top: -250px;

    left: 50%;

    top: 50%;

    border: 1px solid #484848;

</style>

</head>

 
<body>

<div id="contenedor">

Contenido de tu página

</div>

 
</body>

 
</html>

Sólo agrega el estilo correspondiente a body y especifica el color de tu preferencia.

ssclamp

12/08/2008 17:45

Respuesta: Centrar vertical y horizontalmente mi sitio web

Exactamente tal como dice Triby.

Saludos

forelord

13/08/2008 14:01

Respuesta: Centrar vertical y horizontalmente mi sitio web

Muchas gracias a los 2. Todo ha ido perfecto y ya tengo mi web como quería. :-)

La zona horaria es GMT -6. Ahora son las 00:30.