Foros del Web » Creando para Internet » CSS »

Centrado de página con css

Estas en el tema de Centrado de página con css en el foro de CSS en Foros del Web. Hola a todos, Me he leido muchos mensajes de este foro para centrar una página de 800 x 600 en cualquier pantalla de ordenador y ...
  #1 (permalink)  
Antiguo 23/12/2010, 04:20
 
Fecha de Ingreso: diciembre-2010
Mensajes: 3
Antigüedad: 7 años
Puntos: 0
Centrado de página con css

Hola a todos,

Me he leido muchos mensajes de este foro para centrar una página de 800 x 600 en cualquier pantalla de ordenador y no me acabo de quedar convencido.

Soy nuevo y me encuentro con que no me quedo a gusto viendo este tamaño en pantallas grandes, ya que queda arriba del todo (sin centrado) y no me gusta nada. En relalidad queda bastante mal.

Así que quiero centrarlo y me meto en el css para hacerlo, y al principio me sale con el tema del top y left 50% y luego subir la mitad de y correr la mitad del tamaño de la página con margin negativo.

Pero me encuntro otro problema que me sale en varios posts y que lo he comprobado en un notebook pequeño y es que no se ve la parte de arriba de la web ni la izquierda. Está movido fuera de la pantalla y no se puede ver de ninguna manera.

Leo más y más posts y me pierdo en explicaciones demasiado complejas por mi nivel básico. Me puede ayudar alguien de forma simple??

Gracias.
  #2 (permalink)  
Antiguo 23/12/2010, 05:11
Avatar de Ventru3  
Fecha de Ingreso: noviembre-2010
Ubicación: Disneylandia
Mensajes: 86
Antigüedad: 7 años
Puntos: 13
Respuesta: Centrado de página con css

Yo lo centro con margin: 0px auto; el problema es que en navegadores antiguos como el IE6 no hace caso.
  #3 (permalink)  
Antiguo 23/12/2010, 06:49
Avatar de armandoweb  
Fecha de Ingreso: enero-2003
Ubicación: San Cristobal, Santa Fe, Argentina
Mensajes: 544
Antigüedad: 14 años, 10 meses
Puntos: 7
Respuesta: Centrado de página con css

Hola:

Puedes poner todo el contenido dentro de un div y como dice Ventru3 le pones a ese div margin: 0px auto;

Con respecto a IE6 no lo tengas en cuenta, el que tenga IE6 debería estar ya actualizandolo!!

Sino puedes poner aqui como tienes el código a ver si podemos ayudarte.

Saludos.
__________________
www.awdesarrollos.com.ar - [twitter: @armandoweb] - [Skype: awdesarrollos"]
  #4 (permalink)  
Antiguo 23/12/2010, 07:00
Avatar de besotico  
Fecha de Ingreso: junio-2008
Ubicación: Iquique, Chile, Chile
Mensajes: 70
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Centrado de página con css

Código CSS:
Ver original
  1. #nombredetudiv {
  2.     margin:0 auto 0 auto;
  3.     width:elquetuquieraspx;
  4.         text-align:left; //para que todo vuelva a la normalidad
  5. }

eso es todo :)
  #5 (permalink)  
Antiguo 24/12/2010, 04:03
 
Fecha de Ingreso: diciembre-2010
Mensajes: 3
Antigüedad: 7 años
Puntos: 0
Respuesta: Centrado de página con css

En principio, gracias por vuestras respuestas, pero no me solucionan el problema.

El centrado con margin: 0px auto ya lo conozco, y sirve para centrar horizontalmente, pero no para centrar una caja en el centro de la pantalla, es decir para centrar horizontal y veriticalmente.

Porque horizontalmente no hay problema, pero verticalmente he visto que no se puede porque desaparece por arriba y la izquierda en cuanto la pantalla es más pequeña que la caja del web. Es decir que se centra bien con el sistema de margin-top y margin-left negativo a la mitad del tamaño del web, después de top y left 50%, pero sólo si la pantalla es grande. En otro caso, no se ve bien.

Gracias y a ver si hay suerte.
  #6 (permalink)  
Antiguo 24/12/2010, 04:34
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Centrado de página con css

Hola:

Para el centrado horizontal: margin:0 auto;

Para el centrado vertical: Centrado Vertical con CSS.

Saludos.

  #7 (permalink)  
Antiguo 05/02/2011, 08:36
 
Fecha de Ingreso: diciembre-2010
Mensajes: 3
Antigüedad: 7 años
Puntos: 0
Respuesta: Centrado de página con css

Hola de nuevo,

Después de más de un mes alejado de este asunto por motivos personales, lo retomo, estudio vuestras propuestas y veo que no me solucionan el problema, ya que la página se ve igualmente cortada por arriba en pantallas de pequeño tamaño.

¿No hay ninguna solución al dilema que tengo? Tiene que haberla, estoy seguro.

Gracias.
  #8 (permalink)  
Antiguo 05/02/2011, 17:59
 
Fecha de Ingreso: junio-2007
Ubicación: Bilbao (Vizcaya) España
Mensajes: 226
Antigüedad: 10 años, 5 meses
Puntos: 31
Respuesta: Centrado de página con css

Buenas noches,

El problema que plantea el señor mmm_240 es muy frecuente y crea no pocos quebraderos de cabeza a clientes y usuarios de páginas web diseñadas por personas sin la debida previsión a la hora de valorar que sus creaciones deben ir orientadas a una perfecta visualización en cualquier formato de pantalla y a través de cualquier cliente.

La popularización de ordenadores de dimensiones cada vez más reducidas, así como dispositivos móviles con acceso a Internet, deja obsoletas técnicas de centrado vertical válidas en tanto en cuanto los monitores más pequeños ofrecían – salvo contadas excepciones – la clásica dimensión 800x600, tan conocida por todos nosotros.

La solución basada en aplicar la propiedad margin: 0px auto no es válida en diversos navegadores, entre los que se encuentran Internet Explorer (y no en su versión 6.0, como se ha apuntado en este hilo de discusión, sino actualmente).

Su mecánica se basa en colocar la propiedad citada en la regla correspondiente al selector del elemento a centrar (a partir de aquí “contenido”), como sigue:

#contenido {
POSITION: relative;
MARGIN: 0px auto;
WIDTH: 800px;
HEIGHT: 600px;
}

Funciona para el centrado horizontal, como bien afirma besotico, pero no ofrece respuesta al problema del centrado vertical, con la caja generalmente localizada en el borde superior.

El darle a la propiedad MARGIN los valores “0px auto 0px auto” ofrece el mismo resultado, ya que es una redundancia innecesaria del anterior, al tener el mismo significado de acuerdo con las reglas de interpretación de CSS, es decir, un valor de 0 píxeles para los márgenes superior e inferior y un valor de autocentrado para los márgenes izquierdo y derecho.

Podéis probarlo y comprobarlo con este trozo de código:

<style type=text/css>
body {
MARGIN: 0px;
BACKGROUND: #fff;
}
#contenedor {
POSITION: relative;
MARGIN: 0px auto 0px auto;
WIDTH: 400px;
HEIGHT: 300px;
BACKGROUND: #FF0000;
}
</style>

<body>
<div id="contenedor"></div>
</body>


El resultado es el mismo con MARGIN: 0px auto 0px auto; y con MARGIN: 0px; en Chrome, Firefox e Internet Explorer: el elemento “contenedor” se centra horizontalmente pero se posiciona a partir del borde superior.

En su momento se apuntaron soluciones de diversa índole para solventar la falta de respuesta por parte de los navegadores al centrado vertical, con propuestas como las que pueden verse en la dirección aportada por jomaruro:

http://www.csslab.cl/2007/01/12/cent...tical-con-css/

La visita a esta página muestra una primera solución, modificada después a través de una actualización con la siguiente formulación:

http://www.csslab.cl/ejemplos/centradovertical2.html

Su respuesta al problema es solo aparente, ya que, como bien describen varios de los participantes en la discusión originada a continuación, la visualización en pantallas de reducido tamaño ofrece el inconveniente que inicia precisamente este hilo de debate; esto es, la pérdida de parte del contenido del contenedor en su parte superior e izquierdo como consecuencia de la aplicación del método utilizado.

Así, se trata de posicionar el origen de coordenadas del contenedor en el centro del espacio disponible en la pantalla en que se visualiza por aplicación de un valor de 50% a las propiedades TOP y LEFT; para, acto seguido, proceder a la corrección que daría centrado al mismo elemento, mediante la técnica de subir la mitad de su altura y desplazar la mitad de su anchura hacia la izquierda dando valores negativos a la propiedad MARGIN.

El código está accesible en la dirección URL para el que quiera comprobar que, aparentemente funciona, salvo que se proceda a su visionado en una pantalla de menor tamaño. Y ello porque las operaciones descritas afectan a realidades distintas: una (TOP y LEFT al 50%) juegan con el tamaño de la pantalla; y otra, (MARGIN en negativo) con el tamaño del contenedor.

Por ello, sólo resuelve el problema cuando el contenedor y el espacio disponible en la pantalla se encuentran en las proporciones adecuadas.

Otro ejemplo de código, también fallido en cuanto intenta visualizarse en pantallas de reducido tamaño, puede ser éste:

<style type="text/css">

html,body {
HEIGHT: 100%;
MARGIN: 0 px;
PADDING: 0px;
}
body {
TEXT-ALIGN: center;
MIN-WIDTH: 800px;
MIN-HEIGHT: 400px;
}
#elemento {
POSITION: absolute;
TOP: 50%;
MARGIN-TOP: -200px;
LEFT: 0px;
WIDTH: 100%;
}
#contenedor {
WIDTH: 800px;
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
HEIGHT: 400px;
BACKGROUND: #ff0000;
}

</style>
</head>

<body>
<div id="elemento">
<div id="contenedor"></div>
</div>
</body>
</html>


Se han buscado y probado alternativas, variaciones y correcciones a este mismo procedimiento, que, con mayor o menor imaginación y empeño pretenden ofrecer la solución a este dilema.

En su momento, yo mismo realicé un estudio sobre esta cuestión, encontrando una respuesta satisfactoria y definitiva a través de la utilización del posicionamiento flotante en lugar del absoluto.

Así, partimos de este nuevo código que incluye html y css, y que, como podréis apreciar, ofrece una solución válida con independencia de las dimensiones de la pantalla en que se visualice el modelo:

<style type="text/css">

html, body {
HEIGHT: 100%;
}
body {
MIN-WIDTH: 800px;
MIN-HEIGHT: 500px;
BACKGROUND: #fff;
}
#elemento-flotante {
MARGIN-TOP: -250px;
WIDTH: 100%;
FLOAT: left;
HEIGHT: 50%
}
#contenedor {
POSITION: relative;
WIDTH: 800px;
MIN-HEIGHT: 500px;
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
CLEAR: both;
BACKGROUND: #000;
}
</style>

<body>
<div id="elemento-flotante"></div>
<div id="contenedor"> </div>
</body>


La razón de la operatividad de esta solución se basa en la conjunción de la naturaleza propia de los elementos flotantes y la propiedad “clear” aplicada en relación a los mismos en otros elementos del conjunto.

Así, un elemento flotante se caracteriza por quedar fuera del flujo normal de la página, colocándose a derecha o izquierda según se le oriente.

La propiedad “clear” determina, para un elemento dado, que ningún elemento flotante quede a derecha, izquierda o a ambos lados del mismo aplicándole el valor correspondiente.

De esta forma, si colocamos un elemento a continuación de otro con posicionamiento flotante – como son el elemento “contenedor” tras “elemento-flotante” –, el primero se situará tras el segundo por aplicación de la propiedad “clear” con valor “both” que vemos en el código.

De esta forma, “elemento-flotante” actúa, por decirlo de alguna forma, como límite superior del elemento “contenedor”.

Si articulamos un juego de medidas y proporciones entre body, elemento “contenedor” y le damos a “elemento-flotante” la propiedad “float” y a “contenedor” la propiedad “clear: both”, tenemos un centrado perfecto horizontal y verticalmente.

Para comentarlo detalladamente:

html, body {
HEIGHT: 100%;
}
body {
MIN-WIDTH: 800px;
MIN-HEIGHT: 500px;
BACKGROUND: #fff;
}


Damos al html y body una altura de 100% con respecto al espacio disponible, aunque estableciendo a continuación unas medidas mínimas de 800px en anchura y 500px coincidentes con las del elemento “contenedor”.

-----------------------------------------------------------

#elemento-flotante {
MARGIN-TOP: -250px;
WIDTH: 100%;
FLOAT: left;
HEIGHT: 50%
}


A “elemento-flotante” se le impone un posicionamiento flotante, una anchura del 100% y una altura del 50%, que será completada con un margen negativo correspondiente a la mitad de body, lo cual determina que escape por el límite superior de body, debido a que el 50% es, en este caso, 250px.

-----------------------------------------------------------

#contenedor {
POSITION: relative;
WIDTH: 800px;
MIN-HEIGHT: 500px;
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
CLEAR: both;
BACKGROUND: #000;
}


El elemento “contenedor” recibe una anchura de 800px, y es posicionado relativamente para su centrado horizontal automático con respecto a la anchura disponible mediante

MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;


Además, se le da una altura mínima igual a la del body, y se le aplica la propiedad “clear” con el valor “both” para “limpiar” la presencia de cualquier elemento flotante tanto a derecha como a izquierda.

En este caso, “elemento-flotante”.

De este modo, “elemento-flotante” siempre se coloca encima del elemento “contenedor”, y con su límite inferior coincidiendo con el límite superior de body,
actuando a su vez a modo de límite superior del elemento “contenedor”, que no puede escapar de la zona de visualización disponible en la pantalla para cualquier height que quiera dárlese y tamaño de pantalla en prácticamente todos los navegadores existentes en el mercando.
__________________
José Manuel Rosón Bravo
  #9 (permalink)  
Antiguo 05/02/2011, 23:10
 
Fecha de Ingreso: enero-2011
Ubicación: Cali
Mensajes: 73
Antigüedad: 6 años, 10 meses
Puntos: 2
Respuesta: Centrado de página con css

Hola MMM_240...

La respuesta de Jm Rosón B es completa y muy válida. Por lo menos a mí de la forma que él explica no me falla la centralización vertical ni horzontal de la capa o división contenedora de todos los objetos en el documento. Entiéndase la solución que proporciona:

Código CSS:
Ver original
  1. #contenedor {
  2. POSITION: relative;
  3. WIDTH: 800px;
  4. MIN-HEIGHT: 500px;
  5. MARGIN-LEFT: auto;
  6. MARGIN-RIGHT: auto;
  7. CLEAR: both;
  8. BACKGROUND: #000;
  9. }


Pero si quieres experimentar otra manera de hacerlo, puede ser de la siguiente manera con la ayuda de css + javascript:

Creas un div o capa contenedora con las siguientes especificaciones de estilo:

Código HTML:
Ver original
  1. <div id="bodycopy">
  2.  
  3. <!-- CONTENIDO DE TU PÁGINA -->
  4.  
  5. </div>

Luego la dotas de estilo ya sea en un (.css) o en la cabecera de tu hoja html como muestra el ejemplo siguiente:

Código CSS:
Ver original
  1. <style type="text/css">
  2. <!--
  3. #bodycopy
  4. {
  5. float: left; /* TAMBIÉN PUEDE SER margin: 0px auto; */
  6. width: 800px; /* PUEDE SER TAMBIÉN DE 1000PX */
  7. min-height: 600px;
  8. background: #ffffff;
  9. }
  10. -->
  11. </style>

Luego en la cabecera de tu documento html, entre las etiquetas <head></head> escribes el siguiente código:

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. <!--
  3. function autoMargin()
  4. {
  5. var ancho = screen.width;
  6. var pos = (ancho - 800)/2; // 800 es igual al width de la capa que quieres centralizar
  7.  
  8. document.getElementById('bodycopy').style.marginLeft = pos;
  9. }
  10. // -->
  11. </script>

Este método me sirve para FF, Crome, IE, Opera y Safari, y tampoco he tenido ningún tipo de problemas con el mismo.
  #10 (permalink)  
Antiguo 06/02/2011, 06:55
 
Fecha de Ingreso: junio-2007
Ubicación: Bilbao (Vizcaya) España
Mensajes: 226
Antigüedad: 10 años, 5 meses
Puntos: 31
Respuesta: Centrado de página con css

Hola gcrlink,

Lo que dices está muy bien y es correcto. El problema es si mmm_240 o cualquier otro usuario quiere incluir JavaScript en su solución de centrado.

Aparte del hecho de que se trata de un lenguaje de programación que no todo el mundo domina, se añade un inconveniente que debe ser expuesto para el aviso de no iniciados y personas con conocimientos básicos relativo a la posible inhabilitación de JavaScript en navegadores, ya sea por el propio interesado o en base a políticas internas que afectan a ordenadores instalados en organizaciones o empresas.

Mi opinión es que un sistema de centrado basado en css puro es la mejor solución, siempre y cuando ofrezca una funcionalidad uniforme y generalizada en todos o la inmensa mayoría de navegadores, como de hecho lo hace el método expuesto.

Espero respuesta y comentarios al respecto.
__________________
José Manuel Rosón Bravo
  #11 (permalink)  
Antiguo 06/02/2011, 13:49
 
Fecha de Ingreso: enero-2011
Ubicación: Cali
Mensajes: 73
Antigüedad: 6 años, 10 meses
Puntos: 2
Respuesta: Centrado de página con css

Cita:
Iniciado por Jm Rosón B Ver Mensaje
Hola gcrlink,

Lo que dices está muy bien y es correcto. El problema es si mmm_240 o cualquier otro usuario quiere incluir JavaScript en su solución de centrado.

Aparte del hecho de que se trata de un lenguaje de programación que no todo el mundo domina, se añade un inconveniente que debe ser expuesto para el aviso de no iniciados y personas con conocimientos básicos relativo a la posible inhabilitación de JavaScript en navegadores, ya sea por el propio interesado o en base a políticas internas que afectan a ordenadores instalados en organizaciones o empresas.

Mi opinión es que un sistema de centrado basado en css puro es la mejor solución, siempre y cuando ofrezca una funcionalidad uniforme y generalizada en todos o la inmensa mayoría de navegadores, como de hecho lo hace el método expuesto.

Espero respuesta y comentarios al respecto.
Saludos Jm Rosón B...

Estoy de acuerdo contigo. Todavía una buena construcción de css es la mejor herramienta que tenemos para lograr el estilo deseado. Pues aunque la ayuda de javascrip funcione puede haber usuarios que no lo tengan habilitado en su navegador o que simplemente no sepan como utilizar lenguaje básico de javascript para diseño web.

En mi caso lo que hago es que utilizo tanto css como javascript para la centralización del contenido. De esta manera si el navegador tiene activado el javascript, la hoja de estilo css se encarga de centralizar el contenido. Pero cuando el navegador tiene activado la lectura de script, simplemente queda centrado.

Aclaro que en el ejemplo que le pasé a MMM_240 sólo le presenté la forma de centralizar el contenido con javascript a la vez que se utilizan parámetros de css que dan estilo a la capa que se quiere centralizar pero no centralizan la misma.
  #12 (permalink)  
Antiguo 06/02/2011, 15:57
 
Fecha de Ingreso: junio-2007
Ubicación: Bilbao (Vizcaya) España
Mensajes: 226
Antigüedad: 10 años, 5 meses
Puntos: 31
Respuesta: Centrado de página con css

Hola de nuevo gcrlink,

Yo personalmente te diré que no entiendo bien el objeto de añadir JavaScript cuando el código CSS expuesto logra un centrado horizontal y vertical perfecto en la inmensa mayoría de navegadores, incluyendo los más populares, que son los que cuentan en realidad.

La sencillez y parquedad código es un valor a tener en cuenta en cualquier diseño y construcción web – siempre y cuando logren los objetivos marcados -, y no entiendo para qué unir dos sistemas de centrado redundantes cuando CSS presenta una solución perfecta a tal problema.

Por otro lado, no comprendo el sentido de tu tercer párrafo “…se utilizan parámetros de css que dan estilo a la capa que se quiere centralizar pero no centralizan la misma.”.

Los parámetros CSS que he incluido se orientan precisamente al centrado del elemento “contenedor”, que es de lo que trata este hilo de debate, y no de formatos ni estilos; y el centrado de elementos, como posicionamiento que es, forma parte del estilo de la página, que es precisamente al razón de ser y fin de CSS.
__________________
José Manuel Rosón Bravo
  #13 (permalink)  
Antiguo 06/02/2011, 22:00
 
Fecha de Ingreso: enero-2011
Ubicación: Cali
Mensajes: 73
Antigüedad: 6 años, 10 meses
Puntos: 2
Respuesta: Centrado de página con css

Cita:
Iniciado por Jm Rosón B Ver Mensaje

Por otro lado, no comprendo el sentido de tu tercer párrafo “…se utilizan parámetros de css que dan estilo a la capa que se quiere centralizar pero no centralizan la misma.”.
Hola Jm Rosón B...

Creo que entiste mal. cuando hablé de los "parámetros" hablaba NO del ejemplo que le expusiste a MMM_240, sino al que yo le expuse, porque más bien, tal como lo notaste y me comentaste, la centrlización que le expuse a MMM_240 se basaba más en el uso de javascript que en el de css.

Entiendo que usar dos mecanismos para una misma función o necesidad es hacer más trabajo cuando con un sólo sistema (css) puede resolverse el dilema de manera limpia y segura en la mayoría de los navegadores. Cuando le presenté a MMM_240 el ejemplo con css+js sólo fue para darle más posibilidades. Entiendo que nunca está de más algo más que aprender. Sólo que NO TOMÉ EN CUENTA el hecho de que sí hay que tener cuidado con el uso de scripts para ciertas funciones. En ninún momento pensé deslegitimar tu aporte el cual para mí es muy bueno y pienso que también para todos los diseñadores web.

En fin, Gracias por los consejo y ayudas.
  #14 (permalink)  
Antiguo 07/02/2011, 03:35
 
Fecha de Ingreso: junio-2007
Ubicación: Bilbao (Vizcaya) España
Mensajes: 226
Antigüedad: 10 años, 5 meses
Puntos: 31
Respuesta: Centrado de página con css

Hola gcrlink,

Comprendido entonces. Se trata de exponer otro sistema de centrado basado en JS.
__________________
José Manuel Rosón Bravo
  #15 (permalink)  
Antiguo 07/02/2011, 10:18
 
Fecha de Ingreso: enero-2011
Ubicación: Cali
Mensajes: 73
Antigüedad: 6 años, 10 meses
Puntos: 2
Pregunta Respuesta: Centrado de página con css

Aprovechando la conversación, Jm sabrás como puedo insertar border-radius en IE y Opera o de por sí no existe este estilo de border para estos navegadores.

Que tengas buen día.

Etiquetas: centrar
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

SíEste tema le ha gustado a 1 personas




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