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

Como centrar una pagina web?

Estas en el tema de Como centrar una pagina web? en el foro de Diseño web en Foros del Web. Hola: Este tema ya se discutio en varias ocasiones, lo sé; pero no encontré en algun foro ayuda para el problema que tengo. Bueno, en ...

  #1 (permalink)  
Antiguo 03/12/2005, 18:44
 
Fecha de Ingreso: diciembre-2005
Mensajes: 15
Antigüedad: 18 años, 3 meses
Puntos: 1
Pregunta Como centrar una pagina web?

Hola:

Este tema ya se discutio en varias ocasiones, lo sé; pero no encontré en algun foro ayuda para el problema que tengo.

Bueno, en relidad no es un problema dificil de solucionar, solo que no se como hacerlo correctamente. El tem a es el siguiente:

Tengo una pagina hecha en html y php, utilizo la etiqueta DIV para posicionar cada uno de mis textos o imagenes como posición absoluta. Esta diseñado para monitores con resolución 800x600 pixeles y lo que quiero es que en monitores de resolución superior se visualice la página centrada; es decir con espacios a los lados y además que no se mueva ningun objeto.

Ya intené usar una tabla para contener todo; pero como los objetos (textos imagenes y formularios) son independientes y tienes posicion definida, no funciona. Cómo podría hacer para no modificar mucho código?

No utilizo hojas de estilo, ni capas, ni frames.

Podrian ayudarme por favor, estaré muy agradecida.

Saludos.
  #2 (permalink)  
Antiguo 03/12/2005, 19:00
 
Fecha de Ingreso: junio-2005
Ubicación: Edo. Mex
Mensajes: 725
Antigüedad: 18 años, 9 meses
Puntos: 5
Pues yo lo que hago es esto

<body>
<div align="center">

TODO TU CONTENIDO¡

</div>
</body>

Saludos¡
  #3 (permalink)  
Antiguo 03/12/2005, 19:46
 
Fecha de Ingreso: diciembre-2005
Mensajes: 15
Antigüedad: 18 años, 3 meses
Puntos: 1
Hola ricardomz:

Ese codigo ya lo probé pero no pasa nada. El problema esta en que para cada texto, imagen o formulario estoy utilizando un DIV, en el que defino la posición absoluta, por lo que "siempre" me dará esa posición.

Ejemplo.
Para mostrar una imagen en la posición que quiero que se vea, hago esto:

<DIV style="position:absolute; overflow:hidden; left:204px; top:153px; width:28px; height:47px; z-index:0"><img width=28 height=47 border=0 src="images/topmenu_img1.gif"></DIV>

o para un texto:

<DIV style="position:absolute; overflow:hidden; left:297px; top:273px; width:156px; height:21px; z-index:18">
<FONT style="font-size:10pt" color=#000000 face="Tahoma">
<DIV>Codigo de Estudiante:</DIV>
</FONT>
</DIV>

estoy trabajando sobre este código que fue generado por un editor web para diseñar la presentación de mi página; pero sobre eso hago cambios y aumento código según lo que quiero hacer, es por eso que se ve un poco complicado.

Pero no quiero cambiar todo ese código, ya que es demasiado.

Por favor si alguien tiene una idea...

Gracias.
  #4 (permalink)  
Antiguo 03/12/2005, 20:39
Avatar de KnowDemon  
Fecha de Ingreso: julio-2004
Ubicación: Ciudad de México
Mensajes: 544
Antigüedad: 19 años, 8 meses
Puntos: 2
Cita:
Iniciado por Caroline_
Pero no quiero cambiar todo ese código, ya que es demasiado.
Ese es el problema. Si tienes las cosas colocadas absolutamente no hay forma de centrarlas. (Y me cuesta trabajo creer que el sitio se vea bien si cambias un poco las condiciones de visita: un navegador diferente, tamaños de fuente diferente, etc.).

Lo siento, pero yo te recomiendo encarecidamente que cambies tu maquetación.
__________________
Mi pequeño espacio en la web: VisiónE
"El cosmos es todo lo que es, todo lo que fue, y todo lo que será alguna vez."
  #5 (permalink)  
Antiguo 03/12/2005, 23:31
 
Fecha de Ingreso: diciembre-2005
Mensajes: 15
Antigüedad: 18 años, 3 meses
Puntos: 1
ok, si tengo que cambiar la maquetacion...

Hola KnowDemon:

Podrías guiarme para cambiar la maquetación sobre la que me baso, tendría que tomar a todos mis objetos en un contenedor para organizarlos, de manera que no cambie la estructura; pero que puedo utilizar? no se usar capas, tampoco quiero utilizar frames, como podría hacerlo?

Creo que con el mismo DIV se puede hacer eso, creando clases; pero no se exactamente cómo, por favor ayudame en esto.

Gracias. ;)
  #6 (permalink)  
Antiguo 04/12/2005, 05:14
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 7 meses
Puntos: 381
Prueba a hacer lo siguiente a ver si te da resultado

Coloca un div que abarque todo y con estas propiedades:

<div style="width: 780px; position: relative; margin-left: auto; margin-right: auto;">

Además agrega a tu documento un dtd de xhtml para que en explorer se comporte igual

Te quedaría algo así

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div style="width: 780px; position: relative; margin-left: auto; margin-right: auto;">
...aquí el resto de tus contenidos actuales

</div>

</body>
</html>
mira a ver si con eso lo solucionas
  #7 (permalink)  
Antiguo 04/12/2005, 05:28
Usuarios466
Invitado
 
Mensajes: n/a
Puntos:
Hola, aprovecho este post para deciros que mi página, en firefox la parte de arriba no se centra, sino que está alineada a la izquierda, lo que no entiendo es que en explorer, sale centrada. Tunait podrías decirme dónde tengo el problema y si puedes insertarme código ya centrado? Es que por más que he probado metiendo aling=center y <center> </center> arriba y abajo, y entre la celda no se pone centrada en mozilla firefox.

Mi página es la de mi firma, el index.
  #8 (permalink)  
Antiguo 04/12/2005, 05:35
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 7 meses
Puntos: 381
Hola Juan Ca,

pues te sugiero lo mismo que le he sugerido a Caroline_ te debería de fucionar igual
  #9 (permalink)  
Antiguo 04/12/2005, 07:17
Usuarios466
Invitado
 
Mensajes: n/a
Puntos:
Hola tunait, vale, ahora mismo lo pruevo, pero es que en mi código hay mil y un código div, por lo que creo que ese es el problema por lo que mozilla se vuelve loco, puede ser?

Otra pregunta: ¿qué quiere decir: Además agrega a tu documento un dtd de xhtml? Que es para que funcione de igual manera en explorer que en firefox?

EDITO: De todas formas, tengo un código fuente muy raro, raro, raro! No funciona tunait. Haz la prueva a ver si a ti se te centra la celda de arriba, y si da resultado por favor pegame aquí el código.
  #10 (permalink)  
Antiguo 04/12/2005, 08:40
Avatar de DracoWorld  
Fecha de Ingreso: julio-2003
Ubicación: Mérida - Venezuela
Mensajes: 505
Antigüedad: 20 años, 8 meses
Puntos: 0
caroline, entre las sugerencias arriba sobre re considerar la maquetación de tu sitio, consider el hecho de "no fijo ni líquido sino elástico" osea un diseño flexible, ajustable

mas info http://www.100px.com/articulos/ni_fi...uido_elastico/
  #11 (permalink)  
Antiguo 04/12/2005, 08:46
 
Fecha de Ingreso: diciembre-2005
Mensajes: 15
Antigüedad: 18 años, 3 meses
Puntos: 1
Hola Tunait:

Gracias por tu respuesta; pero el problema que tengo, como digo KnowDemon es que tengo las "cosas colocadas absolutamente no hay forma de centrarlas". (Probé tu codigo antes o alguno parecido pero nada)

Asi es que debo quitar los DIV para cada objeto y tener un solo contenedor o por grupos, tipo frames; pero no queiro utilizar frames.

Y otra cosa, no entiendo eso de:
"Además agrega a tu documento un dtd de xhtml para que en explorer se comporte igual"

Saludos!
  #12 (permalink)  
Antiguo 04/12/2005, 09:08
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 7 meses
Puntos: 381
Cita:
Iniciado por Caroline_
Hola Tunait:

Gracias por tu respuesta; pero el problema que tengo, como digo KnowDemon es que tengo las "cosas colocadas absolutamente no hay forma de centrarlas". (Probé tu codigo antes o alguno parecido pero nada)
Hola Caroline_

Es que no necesitas centrar los elementos posicionados en forma absoluta, lo que necesitas es que los elementos posicionados en forma absoluta mantengan su posición con respecto a un contenedor, tanto si el contenedor se encuentra a la izquierda, como a la derecha como centrado. De forma que sí puedes lograr que esos elementos posicionados en forma absoluta se trasladen con el contenedor centrado manteniendo su posición relativa a ese contenedor.



Cita:
Y otra cosa, no entiendo eso de:
"Además agrega a tu documento un dtd de xhtml para que en explorer se comporte igual"
Entonces no has probado exactamente lo que te propuse. Te dejé un ejemplo del código, míralo bien.

Un dtd es un elemento que se encuentra en la primera línea de un documento que indica al navegador el lenguaje y versión que se utiliza. Para que explorer comprenda que debe centrar tu contenedor principal en la forma que te propongo debes indicarle que renderice tu documento como xhtml1.0 transicional.

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Substituye además tu tag de html por este otro
Código:
<html xmlns="http://www.w3.org/1999/xhtml">

... e inserta el div tal y como te indiqué en mi mensaje anterior de forma que te quede así

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div style="width: 780px; position: relative; margin-left: auto; margin-right: auto;">
...aquí el resto de tus contenidos actuales

</div>

</body>
</html>
Debes fijarte en lo que dejo en negritas.

Más claro no te lo puedo explicar.

Un saludo
  #13 (permalink)  
Antiguo 04/12/2005, 09:12
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 7 meses
Puntos: 381
Cita:
Iniciado por Juan Ca
Hola tunait, vale, ahora mismo lo pruevo, pero es que en mi código hay mil y un código div, por lo que creo que ese es el problema por lo que mozilla se vuelve loco, puede ser?
Pues no

Cita:
EDITO: De todas formas, tengo un código fuente muy raro, raro, raro! No funciona tunait. Haz la prueva a ver si a ti se te centra la celda de arriba, y si da resultado por favor pegame aquí el código
Acabo de cargar tu página (la index) y se centra perfectamente, tanto en firefox como con iexplorer
  #14 (permalink)  
Antiguo 04/12/2005, 09:25
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 7 meses
Puntos: 381
Caroline_, he colgado unos ejemplos en el servidor para que veas el resultado.

Aquí puse un contenedor a 480px con tus elementos posicionados de forma absoluta adentro. El contenedor se alinea a la izquierda y los elementos absolutos están en una posición
Código:
http://www.tunait.com/pruebas/caroline/izquierda.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div style="width: 480px; position: relative;">

<div style="position:absolute; overflow:hidden; left:204px; top:153px; width:28px; height:47px; z-index:0"><img width=28 height=47 border=0 src="images/topmenu_img1.gif"></div>

<div style="position:absolute; overflow:hidden; left:297px; top:273px; width:156px; height:21px; z-index:18">
<font style="font-size:10pt" color=#000000 face="Tahoma">
<div>Codigo de Estudiante:</div>
</font>
</div>

...aquí el resto de tus contenidos actuales

</div>

</body>
</html>
Aquí el mismo contenedor con indicación para que se centre. Observa que los elementos absolutos se mueven con el contenedor manteniendo su posición relativa
Código:
http://www.tunait.com/pruebas/caroline/centrado.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div style="width: 480px; position: relative; margin-left: auto; margin-right: auto;">

<div style="position:absolute; overflow:hidden; left:204px; top:153px; width:28px; height:47px; z-index:0"><img width=28 height=47 border=0 src="images/topmenu_img1.gif"></div>

<div style="position:absolute; overflow:hidden; left:297px; top:273px; width:156px; height:21px; z-index:18">
<font style="font-size:10pt" color=#000000 face="Tahoma">
<div>Codigo de Estudiante:</div>
</font>
</div>

...aquí el resto de tus contenidos actuales

</div>

</body>
</html>
y aquí el mismo que el anterior pero sin el dtd, observarás que el código es el mismo que el centrado, sin embargo explorer no lo centra
Código:
http://www.tunait.com/pruebas/caroli...adosindtd.html
<html>
<head>
<title> t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div style="width: 480px; position: relative; margin-left: auto; margin-right: auto;">

<div style="position:absolute; overflow:hidden; left:204px; top:153px; width:28px; height:47px; z-index:0"><img width=28 height=47 border=0 src="images/topmenu_img1.gif"></div>

<div style="position:absolute; overflow:hidden; left:297px; top:273px; width:156px; height:21px; z-index:18">
<font style="font-size:10pt" color=#000000 face="Tahoma">
<div>Codigo de Estudiante:</div>
</font>
</div>

...aquí el resto de tus contenidos actuales

</div>

</body>
</html>
Debes fijarte en el centrado
http://www.tunait.com/pruebas/caroline/centrado.html
  #15 (permalink)  
Antiguo 04/12/2005, 09:32
 
Fecha de Ingreso: diciembre-2005
Mensajes: 15
Antigüedad: 18 años, 3 meses
Puntos: 1
Hola Tunait:

Disculpa por no ver bien ni entender lo que me dijiste anteriormente, ahora sí hice todo al pie de la letra (ya que explicaste tan detalladamente como para que no me perdiera :) ) asi que... no te enojes! ;)

Y me funcionó a la perfección, muchísimas gracias, la verdad pondré más atención desde ahora.

Gracias nuevamente Tunait y saludos!!!
  #16 (permalink)  
Antiguo 04/12/2005, 09:37
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 7 meses
Puntos: 381
Cita:
Iniciado por Caroline_
Hola Tunait:
Y me funcionó a la perfección, muchísimas gracias
Qué bien, me alegra que lo pudieras resolver

Cita:
Disculpa por no ver bien ni entender lo que me dijiste anteriormente, ahora sí hice todo al pie de la letra (ya que explicaste tan detalladamente como para que no me perdiera :) ) asi que... no te enojes! ;)
Epa, no me enojé creo que debo poner más cuidad cuando escribo deprisa o puede parecer que me enojo

Saludos
  #17 (permalink)  
Antiguo 04/12/2005, 09:38
 
Fecha de Ingreso: diciembre-2005
Mensajes: 15
Antigüedad: 18 años, 3 meses
Puntos: 1
Cita:
Iniciado por tunait
Caroline_, he colgado unos ejemplos en el servidor para que veas el resultado.

Hola otra vez:

Acabo de ver los ejemplos que pusiste, si ya entendí y me funcionó.

Muchas gracias
  #18 (permalink)  
Antiguo 04/12/2005, 09:44
Usuarios466
Invitado
 
Mensajes: n/a
Puntos:
Ahora sí tunait!! No te puedes imaginar lo mucho que te lo agradezco, porque mis visitantes de firefox no podían ver la web centrada, y ahora sí. No sabes lo mucho que te lo agradezco enserio!!

Eso sí, ahora quiero que me expliques como puede ser posible que cambiando lo de arriba del todo del código se pueda centrar una cosa (en firefox). Me refiero a:

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


Porque es lo único que he cambiado y a dado resultado!
Otra cosita, esto no repercutirá en nada con el posicionamiento, o errores del código etc?
  #19 (permalink)  
Antiguo 04/12/2005, 09:45
 
Fecha de Ingreso: diciembre-2005
Mensajes: 15
Antigüedad: 18 años, 3 meses
Puntos: 1
Cita:
Iniciado por DracoWorld
caroline, entre las sugerencias arriba sobre re considerar la maquetación de tu sitio, consider el hecho de "no fijo ni líquido sino elástico" osea un diseño flexible, ajustable
Hola DracoWorld:

Leí el artículo del enlace que me sugeriste, me parece interesante y más óptimo; lo tomaré en cuenta en otra oportunidad, ya que ahora solucioné el problema.

Gracias de todos modos!
  #20 (permalink)  
Antiguo 04/12/2005, 10:01
Usuarios466
Invitado
 
Mensajes: n/a
Puntos:
Hola de nuevo.

Efectivamente, la página se me centra, pero en cuanto a diseño, se me descentra ... La letra es demasiado grande a veces, y la parte de abajo se me estira ... Sabía que era demasido bonito y rápido ...
  #21 (permalink)  
Antiguo 04/12/2005, 10:28
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 7 meses
Puntos: 381
Cita:
Iniciado por Juan Ca
Eso sí, ahora quiero que me expliques como puede ser posible que cambiando lo de arriba del todo del código se pueda centrar una cosa (en firefox).

Porque es lo único que he cambiado y a dado resultado!
Hola de nuevo Jan Ca

en realidad no es que esa línea centre nada. Un DTD (Document Type Definition, Definición de tipo de documento) le indica al navegador cómo debe tratar y mostrar el contenido. Si no se especifica un dtd el navegador realizará una interpretación no específica denominada quirks mode que es un forma no standard que viene a ser algo así como un "todo vale" (esto lo leí por aquí hace algún tiempo, no recuerdo quién lo dijo, seguramente kemie o pascalc).
http://www.disenorama.com/articulos/...o_estandar.htm
http://toad.bitacoras.com/100-standa...irks_mode.html

Cuando un navegador encuentra un dtd encuentra la siguiente información en el caso que comentamos:

El FPI (Formal Public Identifier)
"-//W3C//DTD XHTML 1.0 Transitional//EN"

El URI utilizado como identificador de sistema en el identificador público permite al agente de usuario descargar el dtd y los conjuntos de entidades necesarios.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
(sacado de la w3c)

De esta forma especificando un dtd podemos lograr que los navegadores traten de una forma u otra los contenidos.

Ahora bien, el hecho de especificar un dtd no quiere decir que se vaya a ver todo maravilloso si el documento no es correcto con respecto al dtd proporcionado. Esto quiere decir que si indicamos que ha de tratarlo como xhtml pero el documento tiene errores con respecto a xhtml también podemos obtener resultados inesperados.

Acabo de probar y veo que también funciona el centrado con un dtd para html4.01 (no es necesario usar un dtd para xhtml)


Cita:
Otra cosita, esto no repercutirá en nada con el posicionamiento, o errores del código etc?
¿te refieres a los buscadores?

Juan Ca, respecto al centrado de tu sitio ... veo que lo tienes todo dentro de una misma tabla, por qué no le aplicas el centrado directamente a la tabla?

<table BORDER CELLSPACING=0 CELLPADDING=0 borderColor="#ff6633" align="center">
  #22 (permalink)  
Antiguo 30/12/2006, 21:42
Avatar de ·XATAJ·  
Fecha de Ingreso: octubre-2006
Ubicación: *¡.Argentina.!*
Mensajes: 365
Antigüedad: 17 años, 5 meses
Puntos: 20
Re: Como centrar una pagina web?

Tunait:

Mediante Google he llegado a este thread (porque estaba buscando justamente ést) y tu código me ha servido mucho. Muchas gracias!!!
__________________
No me banneen soy giordano...

Visita mi sitio www.xataj.com.ar
  #23 (permalink)  
Antiguo 25/02/2008, 03:55
 
Fecha de Ingreso: febrero-2008
Mensajes: 1
Antigüedad: 16 años, 1 mes
Puntos: 0
Re: Como centrar una pagina web?

yo tengo una duda, la he centrado con lo he habeis puesto, MUCHIIIISIMAS GRACIAS, pero para hacerlo verticalmente (en altura) lo he intentado siguiendo mas o menos los mismos pasos pero no lo consigo, me podeis echar una mano???, GRACIAS
  #24 (permalink)  
Antiguo 08/05/2008, 16:34
 
Fecha de Ingreso: junio-2007
Mensajes: 19
Antigüedad: 16 años, 9 meses
Puntos: 0
Mensaje Re: Como centrar una pagina web?

Cita:
Iniciado por tunait Ver Mensaje
Prueba a hacer lo siguiente a ver si te da resultado

Coloca un div que abarque todo y con estas propiedades:

<div style="width: 780px; position: relative; margin-left: auto; margin-right: auto;">

Además agrega a tu documento un dtd de xhtml para que en explorer se comporte igual

Te quedaría algo así

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div style="width: 780px; position: relative; margin-left: auto; margin-right: auto;">
...aquí el resto de tus contenidos actuales

</div>

</body>
</html>
mira a ver si con eso lo solucionas
HOLA COMO ESTAS..MIRA PUSE EL CODE TAL CUAL LO PUSISTE Y EN FIREFOX ME SALE CENTRADA PERO NO EN EXPLORERME SALE A LA IZQUIERZA...COSA Q NO PASA CUANDO HAGO LA VISTA PREVIA F12 EN DREAMWEAVER.....AGRADECERIA MUCHO TU AYUDA...-
  #25 (permalink)  
Antiguo 08/05/2008, 16:36
 
Fecha de Ingreso: junio-2007
Mensajes: 19
Antigüedad: 16 años, 9 meses
Puntos: 0
Mensaje Re: Como centrar una pagina web?

Cita:
Iniciado por tunait Ver Mensaje
Prueba a hacer lo siguiente a ver si te da resultado

Coloca un div que abarque todo y con estas propiedades:

<div style="width: 780px; position: relative; margin-left: auto; margin-right: auto;">

Además agrega a tu documento un dtd de xhtml para que en explorer se comporte igual

Te quedaría algo así

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div style="width: 780px; position: relative; margin-left: auto; margin-right: auto;">
...aquí el resto de tus contenidos actuales

</div>

</body>
</html>
mira a ver si con eso lo solucionas
  #26 (permalink)  
Antiguo 08/05/2008, 16:55
 
Fecha de Ingreso: junio-2007
Mensajes: 19
Antigüedad: 16 años, 9 meses
Puntos: 0
Perddon No Habia Leido Bien

Cita:
Iniciado por tunait Ver Mensaje
Prueba a hacer lo siguiente a ver si te da resultado

Coloca un div que abarque todo y con estas propiedades:

<div style="width: 780px; position: relative; margin-left: auto; margin-right: auto;">

Además agrega a tu documento un dtd de xhtml para que en explorer se comporte igual

Te quedaría algo así

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div style="width: 780px; position: relative; margin-left: auto; margin-right: auto;">
...aquí el resto de tus contenidos actuales

</div>

</body>
</html>
mira a ver si con eso lo solucionas
PERDON NO HABIA LEIDO LO DE DTD Y XHTML AUNQUE NO TUVE Q AGREGARLOS COMO DIJISTE CAROLINE X Q YA ESTABAN PUESTOSAUN ASI FIREFOX NO ME LA CENTRA ACA TE ENVIO LA PARTE DE MI CODE A VER SI TNGO ALGO MAL

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CURRICULUM</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
body {
background-color: #000000;
}
a:active {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
text-decoration: underline;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
}
.Estilo3 {color: #FFFFFF}
-->
</style></head>

<body>
<div style="width: 780px; position: relative; margin-left: auto; margin-right: auto;">
  #27 (permalink)  
Antiguo 21/07/2008, 13:20
 
Fecha de Ingreso: julio-2008
Mensajes: 543
Antigüedad: 15 años, 8 meses
Puntos: 56
De acuerdo Respuesta: Como centrar una pagina web?

Estaba buscando precisamente como centrar mi pagina, y gracias a vosotros lo he conseguido,, con los margin:auto y cambiando el "como-se-llame" , que yo tenia este:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

y solo se centraban para mozilla y netscape, pero no para el #¤&%&¤%& exploter, lo he cambiado por el que sugeristeis y voilá! todo centradito y sin descolocarse


:apla uso:

EDITO:

Curioso, probé a validar la pagina en .. http://validator.w3.org/ y me dijo que una leche ese erra un documento xml, asi que cambie a uno parecido al que tenia antes, de html transitional que dan ellos, y siguió funcionando, y despues probé a volver a poner el que tenia originalmente y... !seguia funcionando!... el exploter esta loco...

Última edición por darchy; 21/07/2008 a las 13:36
  #28 (permalink)  
Antiguo 06/08/2008, 17:08
 
Fecha de Ingreso: agosto-2008
Mensajes: 1
Antigüedad: 15 años, 7 meses
Puntos: 0
Respuesta: Como centrar una pagina web?

Holas la pregunta es concreta :D

Cuando escribo http://localhost/mipagina
deberia cargar el index y lo hace solo que la pagina se va a la derecha osea no se centra.

cuando escribo http://localhost/mipagina/index.html
si sale centrado

el hecho es que cuando subo la pagina al hosting todos solo escriben la direccion www.mipagina.com , mas no www.mipagina.com/index.html alguna solucion? para que salga centrado solamente escribiendo www.mipagina.com (sin index)

ah hice lo que indican anteriormente y nada sigue igual...

gracias
  #29 (permalink)  
Antiguo 10/09/2008, 18:15
 
Fecha de Ingreso: septiembre-2008
Mensajes: 1
Antigüedad: 15 años, 6 meses
Puntos: 0
Respuesta: Como centrar una pagina web?

caramba lo logré solo con el <div align="center"> ! eso era todo?? si es asi muchas gracias!
  #30 (permalink)  
Antiguo 01/12/2008, 09:19
Avatar de patricioasencio  
Fecha de Ingreso: diciembre-2008
Ubicación: Chile
Mensajes: 12
Antigüedad: 15 años, 3 meses
Puntos: 0
Respuesta: Como centrar una pagina web?

Cita:
Iniciado por tunait Ver Mensaje
Prueba a hacer lo siguiente a ver si te da resultado

Coloca un div que abarque todo y con estas propiedades:

<div style="width: 780px; position: relative; margin-left: auto; margin-right: auto;">

Además agrega a tu documento un dtd de xhtml para que en explorer se comporte igual

Te quedaría algo así

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div style="width: 780px; position: relative; margin-left: auto; margin-right: auto;">
...aquí el resto de tus contenidos actuales

</div>

</body>
</html>
mira a ver si con eso lo solucionas
Hola, yo lo estaba buscando hace mucho tiempo este tipo de solución y tengo las mismas caracteristicas de Caroline y a mi me resulto a la perfección, muchas gracias.
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.
Tema Cerrado

SíEste tema le ha gustado a 3 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 02:18.