Foros del Web » Creando para Internet » CSS »

Centrado Vertical (para avanzados)

Estas en el tema de Centrado Vertical (para avanzados) en el foro de CSS en Foros del Web. Hola, estoy tratando de centrar una web verticalmente con el clasico: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original #centradoVertical { width : 980px ; height : ...
  #1 (permalink)  
Antiguo 29/12/2010, 06:26
 
Fecha de Ingreso: mayo-2005
Mensajes: 284
Antigüedad: 18 años, 10 meses
Puntos: 11
Centrado Vertical (para avanzados)

Hola, estoy tratando de centrar una web verticalmente con el clasico:

Código CSS:
Ver original
  1. #centradoVertical {width:980px; height:600px; position:absolute; left:50%; top:50%; margin-top:-300px; margin-left:-490px;}

Y funciona bien siempre y cuando el alto de la pantalla del usuario no sea, en este caso, inferior a 600px, porque en ese caso la web se corta!
Esto es un problema gravísimo de inaccesibilidad.
Se me ocurre que podría usar javascript para detectar esa situación y reposicionar la web, pero no se puede con CSS puro?

Saludos !!

PD: Estas son las cosas que no me gusta del CSS, como es que algo tan comun y simple todavia sigue siendo casi imposible?
  #2 (permalink)  
Antiguo 29/12/2010, 06:34
 
Fecha de Ingreso: mayo-2005
Mensajes: 284
Antigüedad: 18 años, 10 meses
Puntos: 11
Respuesta: Centrado Vertical (para avanzados)

Me respondo solo, agregando esto:

Código CSS:
Ver original
  1. html, body {  
  2.      height:100%;  
  3.      margin:0;  
  4. }
  5.  
  6.  
  7. body {  
  8.      position:relative;  
  9.      min-width:980px;  
  10.      min-height:600px;  
  11. }

Evitamos el problema anterior.
No funciona en IE6 pero bueno, ya ni Google da soporte para IE6 asique que se joda el que lo siga usando.

EDIT:
Para IE6 encontre esto que hay que agregar pero no se si funciona ya que no lo tengo para probar:
<!--[if lte IE 6.0]>
<style>
#centradoVertical {
top:expression(document.body.clientHeight < 601? "0px": "50%" );
margin-top:expression(document.body.clientHeight < 601? "0px": "-300px" );
left:expression(document.body.clientWidth < 981? "0px": "50%" );
margin-left:expression(document.body.clientWidth < 981? "0px": "-490px" );
</style>
<![endif]-->
  #3 (permalink)  
Antiguo 29/12/2010, 07:12
 
Fecha de Ingreso: julio-2008
Ubicación: Barcelona
Mensajes: 2.100
Antigüedad: 15 años, 9 meses
Puntos: 165
Respuesta: Centrado Vertical (para avanzados)

y si haces un contenedor que ocupe el 100% de alto y ancho y trabajas respecto a este?

Un saludo!
  #4 (permalink)  
Antiguo 29/12/2010, 08:10
 
Fecha de Ingreso: mayo-2005
Mensajes: 284
Antigüedad: 18 años, 10 meses
Puntos: 11
Respuesta: Centrado Vertical (para avanzados)

Podrías poner un ejemplo miktrv? el codigo que puse arriba funciona perfecto, pero siempre es bueno tener otras alternativas mas en un tema tan solicitado como el centrado vertical.
  #5 (permalink)  
Antiguo 30/12/2010, 15:04
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Centrado Vertical (para avanzados)

Pregunto, porque no lo se, o tengo serias dudas.
enridp:
¿Y no será fallo previo de concepción, planteamiento o diseño el querer centrar en la vertical una caja que tiene 600px de altura?
Cita:
width:980px; height:600px;

Etiquetas: vertical, 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 15:28.