Foros del Web » Creando para Internet » CSS »

Divs absolutos y relativos

Estas en el tema de Divs absolutos y relativos en el foro de CSS en Foros del Web. Muy buenas a todos!! Estoy con un problemita con unos divs, es asi: Tengo un div que es el contenedos que lo tengo como relativo, ...
  #1 (permalink)  
Antiguo 14/03/2011, 12:10
 
Fecha de Ingreso: mayo-2007
Ubicación: Ramos Mejia - Buenos Aires
Mensajes: 153
Antigüedad: 10 años, 7 meses
Puntos: 0
Divs absolutos y relativos

Muy buenas a todos!!

Estoy con un problemita con unos divs, es asi:
Tengo un div que es el contenedos que lo tengo como relativo, ahi adentro tengo dos divs, uno fixed con top:0 que esta ubicado siempreee arriba y otro tambien fixed con botton:0 que esta siempree abajo.. Pero el problema es que cuando le doy zoom a la pagina esos divs se me solapan, se juntan y se tapan, de que forma puedo evitar este solapamiento??

Gracias!!!!!!!!!!!!!
__________________
Agustín Pucci
Web Hosting Argentina
  #2 (permalink)  
Antiguo 14/03/2011, 12:38
Avatar de mtreik  
Fecha de Ingreso: marzo-2011
Ubicación: Yecla (Murcia)
Mensajes: 41
Antigüedad: 6 años, 9 meses
Puntos: 7
Respuesta: Divs absolutos y relativos

Si mira, el problema que comentas es muy sencillo.Primero, lo que yo haría para evitar posibles problemas futuros sería que colocar las div que quieres "fijas" fuera de la div contenedor y asignarles a estas div con position:fixed; una altura con porcentaje. Sería algo así:
Código HTML:
Ver original
  1. <div id="top">
  2. </div>
  3. <div id="contenedor"></div>
  4. <div id="bottom">
  5. </div>
Código CSS:
Ver original
  1. #contenedor{
  2.     position: relative;
  3.     width: 900px;
  4.     height: 1000px;
  5.     margin: auto;
  6. }
  7.  
  8. #top{
  9.     background-color: aqua;
  10.     position: fixed;
  11.     top:0px;
  12.     width: 100%;
  13.     height: 20%;
  14. }
  15.  
  16. #bottom{
  17.     background-color: aqua;
  18.     position: fixed;
  19.     bottom:0px;
  20.     width: 100%;
  21.     height: 20%;
  22. }
Con esto evitarás que se te solapen al hacer zoom.
__________________
Marcelo López Santa
------------------------
Diseñador y programador web
www.sixtudio.com
  #3 (permalink)  
Antiguo 14/03/2011, 13:00
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Divs absolutos y relativos

El punto 0,0 de fixed es la esquina superior izquierda del html. Ojo! no del body, sino del html visible.
Dicho de otra forma: las coordenadas para fixed son el left, right, bottom, top de la ventana del navegador, con independencia de que haya scroll.

Así que la respuesta a su pregunta, ya la debe intuir: no puede hacer nada. Al igual que se le solaparán si reduce el tamaño de la ventana del navegador a una altura menor que la suma de las alturas de los dos fixed.
  #4 (permalink)  
Antiguo 14/03/2011, 13:14
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 8 meses
Puntos: 192
Respuesta: Divs absolutos y relativos

Pues el problema es como dijo kseso?. El posicionado fixed es relativo a la ventana del navegador. Si entiendo bien tu situación, podrías usar este ejemplo:

Código HTML:
Ver original
  1.     <style type="text/css">
  2.         #contenedor{
  3.             height: 300px;
  4.             width: 400px;
  5.             margin: 10px auto;
  6.             background-color: grey;
  7.             position:relative;
  8.         }
  9.         #top{
  10.             position: absolute;
  11.             width:100%;
  12.             top: 0;
  13.             background-color: red;
  14.         }
  15.         #bottom{
  16.             position: absolute;
  17.             width:100%;
  18.             bottom:0;
  19.             background-color: yellow;
  20.         }
  21.     </style>
  22. </head>
  23.  
  24.  
  25.     <div id="contenedor">
  26.         <div id="top">
  27.             <p>Top</p>
  28.         </div>
  29.         <div id="bottom">
  30.             <p>Bottom</p>
  31.         </div>
  32.     </div>
  33. </body>
  34. </html>

El div #contenedor está con posicionado relativo mientras que sus divs interiores (#top y #bottom) usan posicionado absoluto. Tené en cuenta que el conetendor general tiene dimensiones especificadas. Esto es necesario en este caso porque al posicionar algo en forma absoluta, lo sacas del flujo y ya no se hace cálculo automático del espacio que necesitan.
  #5 (permalink)  
Antiguo 14/03/2011, 13:31
 
Fecha de Ingreso: mayo-2007
Ubicación: Ramos Mejia - Buenos Aires
Mensajes: 153
Antigüedad: 10 años, 7 meses
Puntos: 0
Respuesta: Divs absolutos y relativos

Gracias por las resuestas a todos, ahora lo voy a probar!!

Puede que esto tenga problemas con internet explorer??

saludosss
__________________
Agustín Pucci
Web Hosting Argentina
  #6 (permalink)  
Antiguo 14/03/2011, 13:33
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 8 meses
Puntos: 192
Respuesta: Divs absolutos y relativos

Mm, no. Lo que si da problemas es el position:fixed en Internet Explorer 7 y anterior. A veces hay que hacer algunos artificios para que salga como queremos :)
Pero si se trata de posicionado absoluto, no debería darte problemas (excepto algunos problemas de z-index en IE7 y 6)
  #7 (permalink)  
Antiguo 14/03/2011, 15:24
 
Fecha de Ingreso: mayo-2007
Ubicación: Ramos Mejia - Buenos Aires
Mensajes: 153
Antigüedad: 10 años, 7 meses
Puntos: 0
Respuesta: Divs absolutos y relativos

Sii.. ahi me funciono bien, gracias a todos por la ayuda!!

Saludos!!!
__________________
Agustín Pucci
Web Hosting Argentina
  #8 (permalink)  
Antiguo 14/03/2011, 15:37
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Divs absolutos y relativos

Sé que es predicar en el desierto, pero hablamos de posicionamiento absoluto y de un elemento posicionado. Lo primero es un nombre y lo segundo un participio pasivo que puede funcionar como adjetivo.
Mil perdones si mi castellano no se corresponde con el de otras partes del planeta.
  #9 (permalink)  
Antiguo 14/03/2011, 16:03
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Divs absolutos y relativos

Cita:
Iniciado por Naahuel Ver Mensaje
Mm, no. Lo que si da problemas es el position:fixed en Internet Explorer 7 y anterior. A veces hay que hacer algunos artificios para que salga como queremos :)
Pero si se trata de posicionado absoluto, no debería darte problemas (excepto algunos problemas de z-index en IE7 y 6)
Cita:
Iniciado por agpucci Ver Mensaje
Sii.. ahi me funciono bien, gracias a todos por la ayuda!!

Saludos!!!
Cita:
Iniciado por agpucci Ver Mensaje
Muy buenas a todos!!

Estoy con un problemita con unos divs, es asi:
Tengo un div que es el contenedos que lo tengo como relativo, ahi adentro tengo dos divs, uno fixed con top:0 que esta ubicado siempreee arriba y otro tambien fixed con botton:0 que esta siempree abajo.. Pero el problema es que cuando le doy zoom a la pagina esos divs se me solapan, se juntan y se tapan, de que forma puedo evitar este solapamiento??

Gracias!!!!!!!!!!!!!
Quizás sea que no alcancé a comprender la naturaleza de la consulta, pero el mismo solapamiento se dará con independencia de que las dos cajas estén con positión: fixed o que se simule dicho valor para que el ie6 (el 7 sí lo implementa).

Un ejemplo, basado el la realización de Mikmoro:
Código HTML:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xml:lang="es" xmlns="http://www.w3.org/1999/xhtml" lang="es-es"><head>
  3.  
  4.  
  5. <title>Posicion fija para IE6 (fixed) - Recursos CSS - araudi.net</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  7. <meta name="Keywords" content="recursos, css, diseño web, xhtml, software libre">
  8. <meta name="Description" content="Posicion fija para IE6 (fixed) - Recursos CSS - araudi.net">
  9. <meta name="Author" content="Mikel Morote Donazar - Praxis Iruñea SLL">
  10. <meta name="Subject" content="Recursos CSS">
  11. <meta name="Language" content="español">
  12. <meta name="Robots" content="index, follow">
  13. <link rel="alternate" href="http://www.araudi.net/indice.html" title="Indice de contenidos" media="all" lang="es">
  14. <style type="text/css">
  15. * {margin:0; padding:0;}
  16. html, body {width:100%;
  17. height:100%;
  18. overflow:hidden;
  19. }
  20. #contenido {width:100%;
  21. height:100%;
  22. overflow: auto;
  23. }
  24. #fijo1 {
  25. position:absolute;
  26. width:200px;
  27. height:200px;
  28. border:1px solid #000;
  29. background:#cff;
  30. left:50%;
  31. top:0;
  32. }
  33. #fijo2 {
  34. position:absolute;
  35. width:200px;
  36. height:200px;
  37. border:1px solid #000;
  38. background:red;
  39. left:50%;
  40. bottom:0;
  41. }
  42. <div id="contenido">
  43. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  44. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  45. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  46. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  47. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  48. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  49. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  50. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  51. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  52. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  53. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  54. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  55. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  56. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  57. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  58. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  59. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  60. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  61. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  62. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  63. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  64. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  65. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  66. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  67. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  68. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  69. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  70. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  71. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  72. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  73. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  74. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  75. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  76. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  77. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  78. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  79. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  80. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  81. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  82. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  83. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  84. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  85. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  86. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  87. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  88. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  89. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  90. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  91. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  92. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  93. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  94. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  95. </div>
  96. <div id="fijo1">Fijo1</div>
  97. <div id="fijo2">Fijo2</div>
  98. </body></html>

Hagan zoom o disminuyan el tamaño de la ventana del navegador para ver que llega un momento en que las dos cajas se superponen.
  #10 (permalink)  
Antiguo 14/03/2011, 16:17
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 8 meses
Puntos: 192
Respuesta: Divs absolutos y relativos

kseso?: Gracias por la corrección, es verdad que funciona bien en IE7.

Mi interpretación del problema fue que lo que agpucci quería era tener dos elementos con posicionamiento absoluto dentro de un contenedor específico y no de toda la ventana, dado que había posicionado al div padre con position:relative;
  #11 (permalink)  
Antiguo 14/03/2011, 16:44
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Divs absolutos y relativos

Naahuel, no lo tome como un tema personal. Yo mismo cometo muchos errores al escribir. Aún más cuando uso un teclado. Muchos hilos no me molesto en contestarlos por hacer uso de abreviaturas estilo SMS o por no saber explicar sus dudas. No es el caso.
Entiendo que ha sido un desliz. El comentario no iba destinado a su persona sino al público en general.
Mi experiencia es que creamos usos específicos de la lengua para profesiones específicas con el fin de no cometer errores. Los marinos podrían haber usado derecha e izquierda en lugar de babor y estribor, ya no digo cuando hablan de barlovento y sotavento. Algo así ocurre continuamente cuando alguna gente confunde una posición estática con una fija hablando de CSS.
Lamento no haber sido capaz de expresarme de manera adecuada.
  #12 (permalink)  
Antiguo 14/03/2011, 16:52
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 8 meses
Puntos: 192
Respuesta: Divs absolutos y relativos

Yo entiendo, sanxuan. Reconozco que usé mal esos términos y la verdad ni lo había notado. En computación siempre han existido términos incorrectos usados con muchísima frecuencia (deshabibilitar, particionar, etc) pero el mio no es el caso. Sólo trataba de ponerle humor con ese último mensaje.

Un saludo y perdón a los demás por salir del tema.

Etiquetas: Ninguno
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 00:40.