Foros del Web » Creando para Internet » CSS »

Relative + %

Estas en el tema de Relative + % en el foro de CSS en Foros del Web. Saludos! Tengo un gran problema!--> @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original #contenido {     position : relative ;     width : 800px ; ...
  #1 (permalink)  
Antiguo 07/10/2010, 08:59
 
Fecha de Ingreso: agosto-2008
Mensajes: 271
Antigüedad: 9 años, 4 meses
Puntos: 2
Información Relative + %

Saludos!

Tengo un gran problema!-->

Código CSS:
Ver original
  1. #contenido {
  2.     position: relative;
  3.     width: 800px;
  4.     height: 600px;
  5.     top: 50%;
  6.     margin-top: -300px;
  7. }

En el code anterior las medidas en % en este caso el Top no funcionan, exepto para Safari. Si cambio la medida de % a pixeles o alguna otra, si funciona.

Alguien sabe porq los % no funcionan en posicion relativa ? plz una mano!

Grax!
  #2 (permalink)  
Antiguo 07/10/2010, 16:15
 
Fecha de Ingreso: agosto-2009
Mensajes: 292
Antigüedad: 8 años, 3 meses
Puntos: 5
Respuesta: Relative + %

Cita:
Iniciado por Bigcrime Ver Mensaje
Saludos!

Tengo un gran problema!-->

Código CSS:
Ver original
  1. #contenido {
  2.     position: relative;
  3.     width: 800px;
  4.     height: 600px;
  5.     top: 50%;
  6.     margin-top: -300px;
  7. }

En el code anterior las medidas en % en este caso el Top no funcionan, exepto para Safari. Si cambio la medida de % a pixeles o alguna otra, si funciona.

Alguien sabe porq los % no funcionan en posicion relativa ? plz una mano!

Grax!
En teoria debe funcionar, no puedes poner la pagina para revisar

Saludos!!!
  #3 (permalink)  
Antiguo 07/10/2010, 16:35
 
Fecha de Ingreso: agosto-2008
Mensajes: 271
Antigüedad: 9 años, 4 meses
Puntos: 2
Respuesta: Relative + %

No hay que complicarse, tan simple como eso, la otra parte del codigo es irrelevante.

Pero si quieres lo pruebas aqui -->
http://www.w3schools.com/css/tryit.a...tion_relative2

abrete ese link con firefox y cambiale la posicion a % en lugar de pixeles.

GraX por Responder! Esta es la segunda vez que creo el tema y tu eres el primero . Grax!
  #4 (permalink)  
Antiguo 07/10/2010, 16:41
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Relative + %

Usted define /top:50%/ y la cuestión es ¿50% de qué?
Como fue tan parco en sus códigos, no se si su html ycss sólo contiene ese código o hay más.
Si resulta que esa caja /#contenido/ es hija del html y ni éste ni body tiene declarado valor para /height/, el valor base para calcular el 50% es 0 (cero), por lo que la mitad de su caja desaparece por arriba.

Solución: añada a sus estilos:
Cita:
html, body {
height:100%;
width:100%;
}
Editado:
Respuesta redactada antes de ver el comentario #3
  #5 (permalink)  
Antiguo 07/10/2010, 18:47
 
Fecha de Ingreso: agosto-2008
Mensajes: 271
Antigüedad: 9 años, 4 meses
Puntos: 2
Respuesta: Relative + %

Lol pero tu acaba de dar la respuesta, si funcionaba en w3school, tambien en mi code.
Era solo esa caja, no habia mas, si hubiese habido mas lo hubiese puesto.

Yo siempre crei que el tamaño de html y body ya estaban definidos, nunca le di width ni height. Estoy medio confundido porq:

1-En posicion absoluta no tenia que darles width ni height a html ni body para que funcione.
2-Safari lo corria bien aun sin que html o body tengan width y height definidos en posicion relativa.

Pero bueno muchas GraX! Eres El mejoR!

Última edición por Bigcrime; 07/10/2010 a las 22:02 Razón: Listo

Etiquetas: relative
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:12.