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

[tonnot]

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 ?

[C2am]

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

[tonnot]

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

[C2am]

Y que estilos tienen? Te falto el css

[tonnot]

.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

[C2am]

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:

<div id="1_contenedor" class="div_contenedor">
 
<div id="logo_a_la_izquierda" class="">  </div>
 
 
<div id="texto_a_la_derecha" class="div_derecha">  </div>
 
<div id="menu_respecto_al_bottom" class="div_menu"> </div>
 
 
</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]

[tonnot]

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

Código HTML:

<div class="div_contenedor">
  <img src="logo_G50.PNG" alt="LOGO TOPFAST" width="250" height="250" />
   
  <div class="div_derecha">
    <span class="txt_logo">TOPFAST</span>
    <span class="txt_logo2">TOPOGRAFIA</span>
    <br>
    <hr size="4" noshade="noshade" class="hr_logo">
  <span class="txt_alargado1">Servicios de Ingeniería y Topografía</span></div>
 
   <div class="div_menu"> 
   </div>
 
</div>
 

[C2am]

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

[tonnot]

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

[C2am]

Prueba esto a ver que onda:

Código HTML:

<style type="text/css">
<!--
/* reseteo de estilos por defecto*/
* {margin:0; padding:0;  outline: 0;}
a {outline:none;}
ul {list-style:none}
 
 
/* ESTILOS ESTRUCTURA */
 
html, body {
    margin: 0 auto;
  
} 
 
.div_contenedor {
    width: auto;
    height:auto;
    position: relative;
    background-color: #CCC;
}
 
 
.logo{
    background-color: #090;
    height: 350px;
    width: 250px;
    float:left;
}
 
.div_derecha {
    padding-top: 50px;
    background-color: #F93;
    /*float:right;*/
    width: auto;
}
 
 
.div_menu {
    height: 50px;
    background-image: url(oscure1.png);
    width: 900px;
    background-color: #CF3;
    position:relative;
    bottom: 150px;
    clear:both;
}
 
-->
</style>
</head>
 
<body>
<div class="div_contenedor">
 
 
 <div class="logo"> <img src="logo_G50.PNG" alt="LOGO TOPFAST" width="250" height="250"  /></div>
   
  <div class="div_derecha">
    <span class="txt_logo">TOPFAST</span>
    <span class="txt_logo2">TOPOGRAFIA</span>
    <br>
    <hr size="4" noshade="noshade" class="hr_logo">
  <span class="txt_alargado1">Servicios de Ingeniería y Topografía</span></div>
 
  
 <div class="div_menu"> menu menu menu menu </div>
</div>
 
 
</body>
</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

[tonnot]

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

[C2am]

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

[tonnot]

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