Foros del Web » Creando para Internet » CSS »

Posicionar capa relativa verticalmente con porcentaje

Estas en el tema de Posicionar capa relativa verticalmente con porcentaje en el foro de CSS en Foros del Web. Hola! El problema que tengo es que para un div al que le doy un estilo de posicion relativa y trato de mover verticalmente con ...
  #1 (permalink)  
Antiguo 23/09/2009, 03:09
 
Fecha de Ingreso: marzo-2008
Mensajes: 9
Antigüedad: 9 años, 9 meses
Puntos: 0
Posicionar capa relativa verticalmente con porcentaje

Hola!
El problema que tengo es que para un div al que le doy un estilo de posicion relativa y trato de mover verticalmente con top o con bottom, si introduzco sus valores como porcentaje los ignora el navegador. Sin embargo si introduzco los valores con pixeles (por ejemplo), sí se mueve el div verticalmente.

Código:
<div  style="z-index:1;"><img src="Images/elSol.jpg"/></div>

<div  style="position:relative; bottom:85%; width:20%; z-index:3;">
	<p><b>Nosotros en imágenes</b><br />
  	   <b>(iniciar  pase de diapositivas)</b>	</p>
 </div>
En teoría el párrafo debería situarse soble la imagen elSol, pero se queda debajo de la misma. Sin embargo si pongo bottom igual a x (los que sean) pixeles, la imagen si se mueve verticalmente.

En fin, espero que alguien pueda ayudarme.
Un saludo.
  #2 (permalink)  
Antiguo 23/09/2009, 09:53
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Posicionar capa relativa verticalmente con porcentaje

a ver si esto te sirve
__________________
WFC
codigo82
  #3 (permalink)  
Antiguo 23/09/2009, 12:51
 
Fecha de Ingreso: marzo-2008
Mensajes: 9
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Posicionar capa relativa verticalmente con porcentaje

Gracias por contestar!!
Tu respuesta es compleja pero no me aclara el porqué top y bottom no son interpretados por los navegadores cuando se les pone un valor en porcentaje.
Llevo ya un par de días buscando información al repecto y todo indica que teóricamente deberían funcionar a la perfección, lo cual es bastante frustrante.
Pero bueno, no me rindo y si alguien puede aclararme algo al respecto, pues estupendo.
Saludos.
  #4 (permalink)  
Antiguo 24/09/2009, 14:00
 
Fecha de Ingreso: marzo-2008
Mensajes: 9
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Posicionar capa relativa verticalmente con porcentaje

Le he dado mil vueltas al código que me habéis aconsejado y sigo sin salir del apuro.
Me sigue pareciendo incleíblemente extraño que top y bottom no funcionen con porcentajes y sí con el mismo código funcionen con píxeles. Algo debo estar haciendo mal, como es evidente, os dejo el código para que alguien se anima a sacarme de la ceguera que estoy teniendo en este tema.

Código:
<style type="text/css">
#caja{
	display:table;
	height::100%;
	width:100%;
	position:absolute;
}
.cajainner{
	display:table-cell;
	margin:0;
	padding:0;
	text-align:center;
}

</style>

</head>

<body>

<div id="caja">
  <div class="cajainner"> 
    <div><img src="Images/elSol.jpg"/></div>
    <div style="position:relative; bottom:85%; z-index:2;">
	  <p><b>Nosotros en imágenes</b><br />
  	   <b>(iniciar  pase de diapositivas)</b>	</p>
     </div>

    <div style="position:relative;bottom:80%; z-index:3;"><img src="fotos/P6300027_1.jpg" /></div>
  </div>
</div>

</body>
</html>
Gracias.
  #5 (permalink)  
Antiguo 24/09/2009, 15:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Posicionar capa relativa verticalmente con porcentaje

1.- La posición relativa deplaza según las coordenadas (top-right-bottom-left) con respecto a su propia posición, no a los vértices de la ventana.
2.- El porcentaje corresponderá a la proporción con respecto a su contenedor (o padre), que como en tu caso no tiene tamaño, el 85% de nada es nada.

Añade un height: 100% a .cajainner y verás que empieza a funcionar.
Ahora cambia tu bottom: 85% por un 15% y verás su desplazamiento: un 15% del tamaño de su contenedor (100%), y con respecto a su posición inicial, no de la ventana.

Espero haberte aclarado.
  #6 (permalink)  
Antiguo 25/09/2009, 00:56
 
Fecha de Ingreso: marzo-2008
Mensajes: 9
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Posicionar capa relativa verticalmente con porcentaje

Hola!!
Aclarado!! Ahora funciona, pero tuve que incluir, además de lo dicho, en cajainner un position:absolute para que se movieran.
Gracias por todo, ok?
Nos vemos.
  #7 (permalink)  
Antiguo 25/09/2009, 05:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Posicionar capa relativa verticalmente con porcentaje

Si haces lo que te he dicho no es necesario en absoluto, pero ya no importa si te funciona como quieres.

Saludos.
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 04:16.