Foros del Web » Creando para Internet » CSS »

Como poner una divs con posicion -xx pixeles respecto al fondo de otra div.

Estas en el tema de Como poner una divs con posicion -xx pixeles respecto al fondo de otra div. en el foro de CSS en Foros del Web. Hola a todos : He coneguido poner dos divs en posiciones izquierda y derecha usando posicionamiento absoluto. La idea es que la tercera (una div ...
  #1 (permalink)  
Antiguo 26/01/2011, 00:57
 
Fecha de Ingreso: noviembre-2010
Mensajes: 70
Antigüedad: 7 años, 1 mes
Puntos: 0
Como poner una divs con posicion -xx pixeles respecto al fondo de otra div.

Hola a todos :
He coneguido poner dos divs en posiciones izquierda y derecha usando posicionamiento absoluto.
La idea es que la tercera (una div horizontal para un menú) quede encima de las otras dos. Querría hacerlo para que estuviese a .-150 del bottom 'calculado' por el tamaño de la primera que es donde va un logo.

Es posible? No logro hacerlo ?
  #2 (permalink)  
Antiguo 26/01/2011, 01:09
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Como poner una divs con posicion -xx pixeles respecto al fondo de otra div

Si puedes poner el código que estas usando sería mucho mejor.
Ten en cuenta que al ponerle posición absoluta a un div este se posicionará respecto a la pantalla del navegador, y habiendo varias opciones de navegadores+resolucionesdelpantalla+etc, es muy probable que no se vea como quieres que se vea.

En cuanto a poner el tercer div por encima del los otros dos, es posible, ya sea con margin o directamente con top o bottom.

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 26/01/2011, 01:22
 
Fecha de Ingreso: noviembre-2010
Mensajes: 70
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Como poner una divs con posicion -xx pixeles respecto al fondo de otra div

Lo que tengo es
<div1_contenedor>
<div_logo_a_la_izquierda>
<div_texto_a_la_derecha>
<div_menu_respecto_al_bottom>
<\div1_contenedor>

Solo men funciona si el div_contenedor tiene ya un heght predefinido.
Lo que querría es conseguir que dependiera automáticamente del tamaño vertical del logo.
Y no consigo nada con los height 'autos'
Gracias por la contestacion C2am
  #4 (permalink)  
Antiguo 26/01/2011, 01:28
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Como poner una divs con posicion -xx pixeles respecto al fondo de otra div

Y que estilos tienen? Te falto el css
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #5 (permalink)  
Antiguo 26/01/2011, 01:34
 
Fecha de Ingreso: noviembre-2010
Mensajes: 70
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Como poner una divs con posicion -xx pixeles respecto al fondo de otra div

.div_contenedor {
width: auto;
height: 250px;
position: relative;
}

Ahora en el contenedor directamente meto la imagen :
<img src="logo_G50.PNG" alt="LOGO TOPFAST" width="250" height="250" />

.div_derecha {
padding-top: 50px;
display: block;
position: absolute;
right: 0px;
top: 0px;
}


.div_menu {
height: 50px;
display: block;
position: absolute;
right: 0px;
bottom: 40px;
background-image: url(oscure1.png);
width: 900px;
}


Y nada, si el contenedor no tiene altura fija el menu no flota, se pone arriba del todo....
(logicamente).
El tema es que el div_contenedor coja altura el solo, y luego poner el menú encima
  #6 (permalink)  
Antiguo 26/01/2011, 01:54
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Como poner una divs con posicion -xx pixeles respecto al fondo de otra div

A ver:
dices:
<div1_contenedor>
<div_logo_a_la_izquierda>
<div_texto_a_la_derecha>
<div_menu_respecto_al_bottom>
<\div1_contenedor>

que en realidad debe ser:
Código HTML:
Ver original
  1. <div id="1_contenedor" class="div_contenedor">
  2.  
  3. <div id="logo_a_la_izquierda" class="">  </div>
  4.  
  5.  
  6. <div id="texto_a_la_derecha" class="div_derecha">  </div>
  7.  
  8. <div id="menu_respecto_al_bottom" class="div_menu"> </div>
  9.  
  10.  
  11. </div>

Trata de poner bien el código sobre el que consultas, porque de esa manera uno sabe exactamente que es lo que tienes y donde puede estar el error.
Eso no quiere decir que pongas todo, por ejemplo, en este caso no interesa lo que tengas como texto, pero sí interesa como defines ese div. Un error podría haber sido que no cierras los div o que cierras así "<\div1_contenedor>" cuando debería ser "</div>". ¿Entiendes lo que digo?

Bueno, luego muestras un div donde supuestamente va la imagen del logo, pero luego dices que pones la imagen directamente en el contenedor. O pones el logo dentro del div al cual le das el estilo "logo"(o como quieras llamarlo) o le aplicas ese estilo directamente a la imagen. Tu decides cual usar.

Y por último, para yo poder armar la estructura que quieres y poder ayudarte, no entiendo donde quieres el menu
Lo quieres debajo del [logo+texto] o encima del [logo+texto]
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #7 (permalink)  
Antiguo 26/01/2011, 02:05
 
Fecha de Ingreso: noviembre-2010
Mensajes: 70
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Como poner una divs con posicion -xx pixeles respecto al fondo de otra div

Ostris, perdona, tienes toda la razón :
Este es el codigo actual

Código HTML:
Ver original
  1. <div class="div_contenedor">
  2.   <img src="logo_G50.PNG" alt="LOGO TOPFAST" width="250" height="250" />
  3.    
  4.   <div class="div_derecha">
  5.     <span class="txt_logo">TOPFAST</span>
  6.     <span class="txt_logo2">TOPOGRAFIA</span>
  7.     <br>
  8.     <hr size="4" noshade="noshade" class="hr_logo">
  9.   <span class="txt_alargado1">Servicios de Ingeniería y Topografía</span></div>
  10.  
  11.    <div class="div_menu">
  12.    </div>
  13.  
  14. </div>
  #8 (permalink)  
Antiguo 26/01/2011, 02:30
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Como poner una divs con posicion -xx pixeles respecto al fondo de otra div

Bien, y ya entendí lo del menu, perdón no captaba la idea.
Lo que tienes es algo así:


Le quite la altura al contenedor y no varió nada, se mantuvo donde lo ves
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #9 (permalink)  
Antiguo 26/01/2011, 02:42
 
Fecha de Ingreso: noviembre-2010
Mensajes: 70
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Como poner una divs con posicion -xx pixeles respecto al fondo de otra div

Joer, me vas a mandar a tomar por .....
EL tema es poner una imagen con un alto de 250 y la barra del menú quedará encima.
Lo que quiero es que poniendo una de 300, quede encima tambien.

Es como .... calcula que tamaño va a tener el contenedor y la ultima div (la del menú), me la vas a poner siempre a 100 px. hacia arriba, tapando la imagen.

De todas formas, si no quieres perder más tiempo con este hilo dejalo (que ya he sido bastante coñazo...)
Gracias C2am
  #10 (permalink)  
Antiguo 26/01/2011, 02:55
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Como poner una divs con posicion -xx pixeles respecto al fondo de otra div

Prueba esto a ver que onda:
Código HTML:
Ver original
  1. <style type="text/css">
  2. <!--
  3. /* reseteo de estilos por defecto*/
  4. * {margin:0; padding:0;  outline: 0;}
  5. a {outline:none;}
  6. ul {list-style:none}
  7.  
  8.  
  9. /* ESTILOS ESTRUCTURA */
  10.  
  11. html, body {
  12.    margin: 0 auto;
  13.  
  14. }
  15.  
  16. .div_contenedor {
  17.     width: auto;
  18.     height:auto;
  19.     position: relative;
  20.     background-color: #CCC;
  21. }
  22.  
  23.  
  24. .logo{
  25.     background-color: #090;
  26.     height: 350px;
  27.     width: 250px;
  28.     float:left;
  29. }
  30.  
  31. .div_derecha {
  32.     padding-top: 50px;
  33.     background-color: #F93;
  34.     /*float:right;*/
  35.     width: auto;
  36. }
  37.  
  38.  
  39. .div_menu {
  40.     height: 50px;
  41.     background-image: url(oscure1.png);
  42.     width: 900px;
  43.     background-color: #CF3;
  44.     position:relative;
  45.     bottom: 150px;
  46.     clear:both;
  47. }
  48.  
  49. -->
  50. </head>
  51.  
  52. <div class="div_contenedor">
  53.  
  54.  
  55.  <div class="logo"> <img src="logo_G50.PNG" alt="LOGO TOPFAST" width="250" height="250"  /></div>
  56.    
  57.   <div class="div_derecha">
  58.     <span class="txt_logo">TOPFAST</span>
  59.     <span class="txt_logo2">TOPOGRAFIA</span>
  60.     <br>
  61.     <hr size="4" noshade="noshade" class="hr_logo">
  62.   <span class="txt_alargado1">Servicios de Ingeniería y Topografía</span></div>
  63.  
  64.  
  65.  <div class="div_menu"> menu menu menu menu </div>
  66. </div>
  67.  
  68.  
  69. </body>
  70. </html>


He probado variando el div logo (que sería la imagen con distinta altura) y se ha mantenido a 150px del borde inferior de la misma.

Faltan afinar detalles, pero creo que funciona.

Problema: se puede presentar si el texto de la derecha es más alto que el logo.

Opción2: es meter el menú dentro del div logo, de manera que siempre quede referenciado a él.


Ah, gracias, como no me dedico a esto, siempre es bueno hacer algo de práctica para aprender más, por eso gracias.
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Última edición por C2am; 26/01/2011 a las 03:05
  #11 (permalink)  
Antiguo 26/01/2011, 03:12
 
Fecha de Ingreso: noviembre-2010
Mensajes: 70
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Como poner una divs con posicion -xx pixeles respecto al fondo de otra div

Conseguido.
De todas formas a veces no queda claro con las css como funcionan algunos parametros que o no se suministran o se les pasa el auto .....
Muchas gracias de nuevo
  #12 (permalink)  
Antiguo 26/01/2011, 03:15
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Como poner una divs con posicion -xx pixeles respecto al fondo de otra div

En general la posición absoluta usala solamente en casos muy específicos, porque si no se tiene cuidado dependera de la pantalla del usuario y terminará en cualquier lado.

Un link ante las dudas: www.librosweb.es .

Un saludo
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #13 (permalink)  
Antiguo 26/01/2011, 04:45
 
Fecha de Ingreso: noviembre-2010
Mensajes: 70
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Como poner una divs con posicion -xx pixeles respecto al fondo de otra div

Muy bueno el link !!! Gracias
No sabras de algo parecido para C++ ?

Etiquetas: fondo, poner, posicion
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 11:22.