Foros del Web » Creando para Internet » Diseño web »

Centrar vertical y horizontalmente mi sitio web

Estas en el tema de Centrar vertical y horizontalmente mi sitio web en el foro de Diseño web en Foros del Web. Hola, tengo una web que no se bien como centrarla vertical y horizontalmente. ¿Alguien podría decirme cómo puedo hacerlo? Un saludo....
  #1 (permalink)  
Antiguo 08/08/2008, 01:33
 
Fecha de Ingreso: agosto-2008
Mensajes: 5
Antigüedad: 9 años, 4 meses
Puntos: 0
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.
  #2 (permalink)  
Antiguo 09/08/2008, 22:22
 
Fecha de Ingreso: noviembre-2006
Ubicación: Evergreen Street
Mensajes: 239
Antigüedad: 11 años, 1 mes
Puntos: 2
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.
  #3 (permalink)  
Antiguo 10/08/2008, 18:34
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
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;
    
left50%;
    
top50%;
    
border1px solid #484848;
</style>
</
head>

<
body>
<
div id="contenedor">
Contenido de tu página
</div>

</
body>

</
html
Saludos
  #4 (permalink)  
Antiguo 11/08/2008, 04:00
 
Fecha de Ingreso: agosto-2008
Mensajes: 5
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Centrar vertical y horizontalmente mi sitio web

Muchas gracias por la ayuda, esta tarde lo probaré a ver qué tal. Ya os contaré.
  #5 (permalink)  
Antiguo 11/08/2008, 12:47
 
Fecha de Ingreso: agosto-2008
Mensajes: 5
Antigüedad: 9 años, 4 meses
Puntos: 0
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.
  #6 (permalink)  
Antiguo 11/08/2008, 18:54
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
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
  #7 (permalink)  
Antiguo 12/08/2008, 15:43
 
Fecha de Ingreso: agosto-2008
Mensajes: 5
Antigüedad: 9 años, 4 meses
Puntos: 0
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?
  #8 (permalink)  
Antiguo 12/08/2008, 18:29
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
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;
    
left50%;
    
top50%;
    
border1px 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.
  #9 (permalink)  
Antiguo 12/08/2008, 18:45
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
Respuesta: Centrar vertical y horizontalmente mi sitio web

Exactamente tal como dice Triby.

Saludos
  #10 (permalink)  
Antiguo 13/08/2008, 15:01
 
Fecha de Ingreso: agosto-2008
Mensajes: 5
Antigüedad: 9 años, 4 meses
Puntos: 0
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.
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 21:35.