• Miércoles 20 de Noviembre de 2024, 12:43

Autor Tema:  Como Posicionar Un Div Relativo A Otro  (Leído 2534 veces)

JuanK

  • Miembro de ORO
  • ******
  • Mensajes: 5393
  • Nacionalidad: co
    • Ver Perfil
    • http://juank.io
Como Posicionar Un Div Relativo A Otro
« en: Martes 23 de Agosto de 2005, 05:54 »
0
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
[size=109]Juan Carlos Ruiz Pacheco
[/size]
Microsoft Technical Evangelist
@JuanKRuiz
http://juank.io

Altareum

  • Miembro MUY activo
  • ***
  • Mensajes: 327
    • Ver Perfil
    • http://www.avian.com.ar
Re: Como Posicionar Un Div Relativo A Otro
« Respuesta #1 en: Martes 23 de Agosto de 2005, 16:50 »
0
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, está armada con css y algunas tablas.


Espero que esto te sirva.
Altareum.
El postre!, el postre!, el postre!, el postre!, el postre!, el postre!.....
 | Klinka | Kiree | Avian |

JuanK

  • Miembro de ORO
  • ******
  • Mensajes: 5393
  • Nacionalidad: co
    • Ver Perfil
    • http://juank.io
Re: Como Posicionar Un Div Relativo A Otro
« Respuesta #2 en: Martes 23 de Agosto de 2005, 16:53 »
0
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?
[size=109]Juan Carlos Ruiz Pacheco
[/size]
Microsoft Technical Evangelist
@JuanKRuiz
http://juank.io

Altareum

  • Miembro MUY activo
  • ***
  • Mensajes: 327
    • Ver Perfil
    • http://www.avian.com.ar
Re: Como Posicionar Un Div Relativo A Otro
« Respuesta #3 en: Miércoles 24 de Agosto de 2005, 16:35 »
0
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.
El postre!, el postre!, el postre!, el postre!, el postre!, el postre!.....
 | Klinka | Kiree | Avian |

JuanK

  • Miembro de ORO
  • ******
  • Mensajes: 5393
  • Nacionalidad: co
    • Ver Perfil
    • http://juank.io
Re: Como Posicionar Un Div Relativo A Otro
« Respuesta #4 en: Miércoles 24 de Agosto de 2005, 16:52 »
0
OK, lo implementare esta noche.. aunque solucione mi problema usando otras cosas, pero = me sirve saber una manera mejor.
[size=109]Juan Carlos Ruiz Pacheco
[/size]
Microsoft Technical Evangelist
@JuanKRuiz
http://juank.io

vmmc

  • Nuevo Miembro
  • *
  • Mensajes: 1
    • Ver Perfil
Re: Como Posicionar Un Div Relativo A Otro
« Respuesta #5 en: Martes 30 de Agosto de 2005, 23:46 »
0
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>