Foros del Web » Creando para Internet » CSS »

CSS: No puedo centrar en vertical en IE8 y Mozilla (Codigo y Fotos)

Estas en el tema de CSS: No puedo centrar en vertical en IE8 y Mozilla (Codigo y Fotos) en el foro de CSS en Foros del Web. Buenas, Tengo este codigo para centrar la tabla tanto en vertical como en horizontal y que la tabla se amplie un 60% de alto y ...
  #1 (permalink)  
Antiguo 20/01/2011, 06:59
 
Fecha de Ingreso: enero-2008
Mensajes: 16
Antigüedad: 16 años, 10 meses
Puntos: 0
CSS: No puedo centrar en vertical en IE8 y Mozilla (Codigo y Fotos)

Buenas,

Tengo este codigo para centrar la tabla tanto en vertical como en horizontal y que la tabla se amplie un 60% de alto y ancho, pero solo me funciona en Chrome, en IE8 y Firefox no funciona y no se como arreglarlo..

Código HTML:
<style type="text/css">
#Tabla {
	position:absolute;
	width:60%;
	height:60%;
	top:50%;
	left:50%;
	margin-left:-30%;
	margin-top:-30%;
	overflow-y:scroll;
	background-color: #666666;
}
</style> 
Dejo una captura de los 3 navegadores


  #2 (permalink)  
Antiguo 20/01/2011, 07:23
Avatar de andrescrea  
Fecha de Ingreso: julio-2004
Mensajes: 1.268
Antigüedad: 20 años, 4 meses
Puntos: 92
Respuesta: CSS: No puedo centrar en vertical en IE8 y Mozilla (Codigo y Fotos)

Te pongo como yo lo conseguí y luego lo adaptas a lo tuyo., el mio no era porcentual sino una medida fija.

Código CSS:
Ver original
  1. html {
  2.     width: 100%;
  3. }
  4. BODY {
  5.     margin: 0; padding: 0;
  6. }
  7.  
  8.  
  9.  
  10. #planta {
  11.     position: absolute;
  12.     left: 50%;
  13.     top: 50%;
  14.     height: 400px;
  15.     margin-top: -200px;
  16.     width: 800px;
  17.     margin-left: -400px;
  18.      border: 3px solid #dddddd;
  19.      padding: 0px;
  20. }
  #3 (permalink)  
Antiguo 20/01/2011, 07:30
 
Fecha de Ingreso: enero-2008
Mensajes: 16
Antigüedad: 16 años, 10 meses
Puntos: 0
Respuesta: CSS: No puedo centrar en vertical en IE8 y Mozilla (Codigo y Fotos)

Gracias, pero el dilema es que no quiero que la tabla sea con medidas fijas, porque añadiendo en negativo tambien lo se centrar, pero en porcentajes para las resoluciones me es imposible.

Porcierto utilizo este DOCTYPE que no se se esta bien puesto..

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
Lo mismo es este el fallo, es que no se muy bien su funcion y en el mundo del css ando muy perdido.
  #4 (permalink)  
Antiguo 21/01/2011, 06:39
 
Fecha de Ingreso: enero-2008
Mensajes: 16
Antigüedad: 16 años, 10 meses
Puntos: 0
Respuesta: CSS: No puedo centrar en vertical en IE8 y Mozilla (Codigo y Fotos)

Ya lo consegui dejo el codigo..

Código HTML:
<style type="text/css">
html, body {
    height:100%;
	margin:0;
}
#Tabla {
	position:absolute;
	width:70%;
	height:70%;
	top:15%;
	left:50%;
	margin-left:-35%;
	overflow-y:scroll;
Una Tabla al 70% tanto de ancho como de alto, con Scroll unicamente vertical y centrada tanto vertical como horizontalmente en cualquier resolucion de monitor.

Porcierto la tabla con valores de ancho y alto puestos en 100%
  #5 (permalink)  
Antiguo 21/01/2011, 16:02
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 10 meses
Puntos: 36
Respuesta: CSS: No puedo centrar en vertical en IE8 y Mozilla (Codigo y Fotos)

Las matemáticas son muy simples.
#Tabla{
position:absolute;
width:60%; /* O el porcentaje que quieras */
height:60%;
top: 20%; /* 100 - 60 (altura) dividido entre dos */
left: 20%; /* 100 - 60 (ancho) dividido entre dos */
}
El overflow conviene controlarlo como te han dicho, pero ¿porqué no también en horizontal?
Si redimensionamos la ventana, el contenido dejaría de verse.

Etiquetas: fotos, mozilla, vertical
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 00:18.