Tema: Como poner una divs con posicion -xx pixeles respecto al fondo de otra div.
Ver Mensaje Individual
  #10 (permalink)  
Antiguo 26/01/2011, 02:55
Avatar de C2am
C2am
 
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 3 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. </style>
  51. </head>
  52.  
  53. <body>
  54. <div class="div_contenedor">
  55.  
  56.  
  57.  <div class="logo"> <img src="logo_G50.PNG" alt="LOGO TOPFAST" width="250" height="250"  /></div>
  58.    
  59.   <div class="div_derecha">
  60.     <span class="txt_logo">TOPFAST</span>
  61.     <span class="txt_logo2">TOPOGRAFIA</span>
  62.     <br>
  63.     <hr size="4" noshade="noshade" class="hr_logo">
  64.   <span class="txt_alargado1">Servicios de Ingeniería y Topografía</span></div>
  65.  
  66.   
  67.  <div class="div_menu"> menu menu menu menu </div>
  68. </div>
  69.  
  70.  
  71. </body>
  72. </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