Programación Web y Scripting > HTML
Como Posicionar Un Div Relativo A Otro
JuanK:
Hola,
lo que pasa es que quiero que la coordenada left de un div varie de acuerdo al contenedor ...
es decir
Si mi div tiene width = 138, quiero que la posicion left sea:
left = anchoContendor-138;
donde contenedor es donde se encuentra anidado el div...
no se si me he hecho entender, la idea es no usar porcentajes.
--- Código: Text ---#DivFoto{ position:absolute; background-image:url(JuanK.jpg); background-repeat:no-repeat; left:contenedor.width-138px; top:2px; width:138px; height:109px; z-index:3;} #contenedor{......}
Les agradezco cualquier idea o sugerencia
Altareum:
Tenés que hacer lo siguiente:
--- Citar ---#DivFoto
{
float: left;
position: relative;
left: 5px;
}
<div class="contenedor">
<div class="DivFoto">
</div>
</div>
--- Fin de la cita ---
Esto hace que el DivFoto se acomode 'relativamente' dentro del contenedor... por lo que si el contenedor esta a 100px del borde de la ventana, el DivFoto estará a 105px del mismo (a 5px del contenedor)....
Ojo... DivFoto tiene que estar "dentro" del contenedor, ya que se hace relativo a su nodo superior....
Si quieres ver algunos ejemplos de esto, fijate en una de mis webs Erofantasia, está armada con css y algunas tablas.
Espero que esto te sirva.
Altareum.
JuanK:
Hola,
gracias!!! anoche
finalmente resolvi mi problema puntual eliminando la propiedad left y creandop una propiedad rigth usando posicionamiento absoluto, me intriga que hace lo que has puesto?
float: left;
me podrias explicar porfa?
Altareum:
Lo que hace es que el div 'flote' a la izquierda. aqui tienes un ejemplo de como sucede esto:
--- Código: Text --- <style type="text/css">.contenedor{ width: 300px; height: 300px; border: 1px solid #333;} .flotante{ float: left; width: 90px; margin: 5px; background-color: #DDD;}</style><body> <div class="contenedor"> <div class="flotante"> </div> <div class="flotante"> </div> <div class="flotante"> </div> <div class="flotante"> </div></div> </body>
Como podras ver cada div mide en realidad 100px (90 del cuerpo mas 5 de cada lado). A su vez el div que los contiene mide unos 300px de ancho.
Por lo general los div se acomodan uno debajo del otro (lo podras ver si le quitas la propiedad float), pero en este caso se acomodan todos a la izquierda, cuanto puedan.
Al llegar al ancho maximo del contenedor, el 4div se coloca debajo ya que no puede aumentar el tamaño del contenedor.
Espero que se haya entendido.
Cualquier cosa, pregunta.
Altareum.
JuanK:
OK, lo implementare esta noche.. aunque solucione mi problema usando otras cosas, pero = me sirve saber una manera mejor.
Navegación
[#] Página Siguiente
Ir a la versión completa