Foros del Web » Creando para Internet » CSS »

Centrado problemático sin explicación

Estas en el tema de Centrado problemático sin explicación en el foro de CSS en Foros del Web. Lo cierto es que no entiendo este problema con el centrado. He utilizado está técnica para centrar por los cuatro lados una página: #contenedor { ...
  #1 (permalink)  
Antiguo 19/12/2010, 10:16
 
Fecha de Ingreso: noviembre-2005
Mensajes: 825
Antigüedad: 12 años, 1 mes
Puntos: 8
Centrado problemático sin explicación

Lo cierto es que no entiendo este problema con el centrado.

He utilizado está técnica para centrar por los cuatro lados una página:

#contenedor {
POSITION: absolute;
MARGIN-TOP: -300px;
MARGIN-LEFT: -400px;
WIDTH: 800px;
HEIGHT: 600px;
TOP: 50%;
LEFT: 50%;
}

Donde #contenedor es el elemento que lo contiene todo en la web dentro del body.

Hoy me encuentro con una sorpresa.

Trabajo con un monitor de 17 pulgadas y hoy veo que si el área de visualización de la pantalla disminuye por inserción de barras de direcciones, etc. el procedimiento no funciona porque la parte superior de la web aparece comida hacia arriba, es decir, que en pantallas pequeñas (en este caso de menos de 600 píxeles de altura) una web aparece cortada por arriba.

Ejemplo:

En una pantalla de 400px de alto, que las hay, con estos datos

#contenedor {
POSITION: absolute;
MARGIN-TOP: -300px;
MARGIN-LEFT: -400px;
WIDTH: 800px;
HEIGHT: 600px;
TOP: 50%;
LEFT: 50%;
}

La web de 600px de alto no se muestra con un scroll, sino que aparece a partir del pixel 200, es decir, que no se ven los 200 píxeles superiores.

No encuentro la explicación ni por asomo.

¿Sabéis de qué se trata?

Gracias
  #2 (permalink)  
Antiguo 19/12/2010, 12:38
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Centrado problemático sin explicación

Sí que tiene explicación. Es más, está haciendo estupendamente bien lo que le indica en su código.

Veamos si soy capaz de explicarme, o mejor, de que usted lo vea. Es imprescindible que siga y lea lo enlazado, por favor.
Su código:
Código CSS:
Ver original
  1. #contenedor {
  2. POSITION: absolute;
  3. WIDTH: 800px;
  4. HEIGHT: 600px;
  5. TOP: 50%;
  6. LEFT: 50%;
  7. MARGIN-TOP: -300px;
  8. MARGIN-LEFT: -400px;
  9. }
Le dice que tome una posición absoluta y se coloque (tomando como referente la esquina superior izquierda) en el centro del html/body (la ventana del navegador).
Con lo anterior, la caja #contenedor queda desplazada hacia abajo y la derecha. Recuerde que lo que ha puesto en el centro ha sido la esquina superior izquierda. Así que esa diferencia la corrige con el margen negativo. Que si se fija su valor es la mitad del tamaño.

Así que ahora ya tiene un div centrado en horizontal en la ventana (siempre que la ventana tenga un tamaño mínimo igual a la anchura de #contenedor + el margen asignado (en valor absoluto) = 1200px
Y para la vertical, igual. Cambiando anchura por altura = 900px
Valores para su ejemplo.

¿Qué ocurre con medidas de ventana menores a ese valor mínimo?
Sencillamente, su código sigue haciendo lo que le ha indicado, así que calcula el centro, posiciona la caja y aplica el margen negativo.
Si la ventana mide h(altura, eje y)= 400px y w(anchura, eje x)= 500px el centro está en las coordenadas y= 200 // x=250 le resta el margen indicado y se coloca en x=-50 y= -200 y voilá! desaparecen los primeros 50px de la parte superior y los 200px de la izquierda.

Espero haberme explicado y no haber cometido algún error en los cálculos numéricos.

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




La zona horaria es GMT -6. Ahora son las 21:52.