SoloCodigo

Programación Web y Scripting => HTML => Mensaje iniciado por: JuanK en Martes 23 de Agosto de 2005, 05:54

Título: Como Posicionar Un Div Relativo A Otro
Publicado por: JuanK en Martes 23 de Agosto de 2005, 05:54

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

1. #DivFoto
2. {
3.   position:absolute;
4.   background-image:url(JuanK.jpg);
5.   background-repeat:no-repeat;
6.   left:contenedor.width-138px;
7.   top:2px;
8.   width:138px;
9.   height:109px;
10.   z-index:3;
11. }
12.  
13. #contenedor
14. {
15. ...
16. ...
17. }
18.  

Les agradezco cualquier idea o sugerencia

Título: Re: Como Posicionar Un Div Relativo A Otro
Publicado por: Altareum en Martes 23 de Agosto de 2005, 16:50

Tenés que hacer lo siguiente:

Citar

#DivFoto
{
   float: left;
   position: relative;
   left: 5px;
}

<div class="contenedor">
  <div class="DivFoto">
  </div>
</div>

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 (http://www.erofantasia.com.ar), está armada con css y algunas tablas.


Espero que esto te sirva.
Altareum.

Título: Re: Como Posicionar Un Div Relativo A Otro
Publicado por: JuanK en Martes 23 de Agosto de 2005, 16:53

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?

Título: Re: Como Posicionar Un Div Relativo A Otro
Publicado por: Altareum en Miércoles 24 de Agosto de 2005, 16:35

Lo que hace es que el div 'flote' a la izquierda. aqui tienes un ejemplo de como sucede esto:

Código: Text

1.  
2. &#60;style type=&#34;text/css&#34;&#62;
3. .contenedor{
4.    width: 300px;
5.    height: 300px;
6.    border: 1px solid #333;
7. }
8.  
9.  
10. .flotante{
11.    float: left;
12.    width: 90px;
13.    margin: 5px;
14.    background-color: #DDD;
15. }
16. &#60;/style&#62;
17. &#60;body&#62;
18.  
19.  
20.  
21. &#60;div class=&#34;contenedor&#34;&#62;
22.    &#60;div class=&#34;flotante&#34;&#62; &#60;/div&#62;
23.    &#60;div class=&#34;flotante&#34;&#62; &#60;/div&#62;
24.    &#60;div class=&#34;flotante&#34;&#62; &#60;/div&#62;
25.    &#60;div class=&#34;flotante&#34;&#62; &#60;/div&#62;
26. &#60;/div&#62;
27.  
28. &#60;/body&#62;
29.  
30.  

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.

Título: Re: Como Posicionar Un Div Relativo A Otro
Publicado por: JuanK en Miércoles 24 de Agosto de 2005, 16:52

OK, lo implementare esta noche.. aunque solucione mi problema usando otras cosas, pero = me sirve saber una manera mejor.

Título: Re: Como Posicionar Un Div Relativo A Otro
Publicado por: vmmc en Martes 30 de Agosto de 2005, 23:46

Hola soy nuevo  espero que te sirva esto  saludos


 <div style="position:absolute;
width:50%;
height:50%;
overflow:auto;
background:#336699;
left:20%;
top:10%;">

hola


</div>