alinear verticalmente inferior

Jamati · #1 (**permalink**) 06/04/2008, 17:41

Hola, como puedo hacer para que el div.texto del siguiente ejemplo quede alineado verticalmente inferior dentro del div.contenedor

Código HTML:

<html>
<head>
<title></title>
<style type="text/css">
div.contenedor {width:700px;height:800px;border:1px solid #FF0000;background:#E5E5E5;}
div.texto {width:200px;border:1px solid #000000;background:#0099FF;}
</style>
</head>
<body>
<div class="contenedor">
  <div class="texto">
    TEXTO<br>
    TEXTO<br>
    TEXTO<br>
    TEXTO<br>
  </div>
</div>
</body>
</html>

Mikmoro · #2 (**permalink**) 06/04/2008, 17:53

EDITO este mensaje porque la respuesta era una patraña, sólo disculpable por hacerla a las 2 de la mañana, y no aporta nada en absoluto a la solución real, que se encuentra un par de post más abajo.

Mikel.

Jamati · #3 (**permalink**) 06/04/2008, 21:42

Gracias Mikmoro, si no eres tu nadie me ayuda... sinceramente muchas gracias. Te comento:

Hice la prueba que me dijiste, pero fijate que el div.texto se sale fuera del div contenedor. Acá te dejo el codigo para que tu mismo lo puedas ver:

Código HTML:

<html>
<head>
<title></title>
<style type="text/css">
div.contenedor {width:700px;height:800px;border:1px solid #FF0000;background:#E5E5E5;}
div.texto {width:200px;border:1px solid #000000;background:#0099FF;position:absolute;bottom:-230px !important;bottom:-320px;}
</style>
</head>
<body>
<div class="contenedor">
  <div class="texto">
    TEXTO<br>
    TEXTO<br>
    TEXTO<br>
    TEXTO<br>
  </div>
</div>
</body>
</html>

Aparte no entiendo porque me dijiste esos valores, en que te basaste ??

Y contestando tu pregunta para que me puedas ayudar, el div contenedor siempre tendrá el mismo alto, en este caso 800px por ejemplo.

Alguna idea ?

Mikmoro · #4 (**permalink**) 06/04/2008, 23:27

No, no, lo siento. Lo leí ayer justo antes de irme a dormir y te di una respuesta completamente equivocada. Me di cuenta cuando ya había apagado el ordenador.

Lo que debes hacer es poner posición relativa al selector del contenedor, para que acepte que el de texto se coloque en posición absoluta con respecto a él, y darle posición absoluta al texto, de esta manera:

div.contenedor {width:700px;height:800px;border:1px solid #FF0000;background:#E5E5E5;position:relative;}
div.texto {width:200px;border:1px solid #000000;background:#0099FF;position:absolute;bottom: 0;}

La cosa me pilló dormido y se me nubló el pensamiento

.

Esto funciona seguro.

Mikel.

Jamati · #5 (**permalink**) 07/04/2008, 21:13

No tengo mas que palabras de agradecimiento hacia vos, sinceramente muchísimas gracias... no te das una idea lo mucho que me sirve poder resolver esto.

Se nota que tu sabes sobre este tema.

Te comento que anduvo a la perfección, se alineó verticalmente inferior sin ningún tipo de drama. Muchísimas gracias.

Lo que te pregunto ahora es lo siguiente: porque si es tan facil no hay mucho soporte de esto en internet ???... porque antes de molestar a alguien en este foro, intenté averiguar por internet, pero nadie daba una buena solución sencilla.

Mikmoro · #6 (**permalink**) 08/04/2008, 00:37

De nada, ya sabes que es un placer para mi.

Supongo que la información estará, y abundante, pero que cuesta encontrarla, porque no es fácil saber cómo buscar concretamente lo que necesitas, y menos en español. Yo creo que hace mucho la experiencia, la imaginación y el tesón.

Será cosa de un día vayamos haciendo un blog con las "mil y un soluciones con css", aunque supongo que ya habrá bastantes.

Me alegro de que te sirva. Hasta la vista.

Mikel.

Jamati · #7 (**permalink**) 08/04/2008, 21:23

Mikmoro, no quiero abusar y molestar, pero sos el unico que me esta ayudando y el unico quizás que me pueda resolver lo siguiente:

Código HTML:

<html>
<head>
<title></title>
<style type="text/css">
ul {margin:0;padding:0;} 
li {list-style:none;}
div.contenido ul.menu {width:150px;height:100px;float:left;border:1px solid #CC0000;}
div.contenido ul.menu li {width:100%;height:30px;position:relative;margin-top:2px;}
div.contenido ul.menu li ul {display:none;width:150px;top:0px;left:150px;position:absolute;background:#CC0000;}
div.contenido div {width:400px;height:100px;float:left;position:relative;border:1px solid #2E5F83;margin-left:2px;background:#E5E5E5; /*ESTE BACKGROUND SI SE BORRA FUNCIONA*/}
div.contenido div ul {position:absolute;bottom:0;}
</style>
<script language="JavaScript">
function menu(llamador)
{
  var valor = llamador.parentNode.getElementsByTagName('ul')[0];
  valor.style.display = valor.style.display == 'block' ? 'none' : 'block' ;
}
</script>
</head>
<body>
<div class="contenido">
  <ul class="menu">
    <li><a href="#" onMouseOver="menu(this)" onMouseOut="menu(this)">FILA 1</a>
      <ul>
        <li>SUB FILA 1</li>
        <li>SUB FILA 2</li>
      </ul>
    </li>
    <li><a href="#" onMouseOver="menu(this)" onMouseOut="menu(this)">FILA 2</a>
      <ul>
        <li>SUB FILA 1</li>
        <li>SUB FILA 2</li>
      </ul>
    </li>
  </ul>
  <div>
    <ul>
      <li>TEXTO UBICADO VERTICALMENTE INFERIOR</li>
    </ul>
  </div>
</div>
</body>
</html>

Porba el codigo, es corto, y fijate en cualquier navegador. Lo que ocurre es que con lo que dijiste, pude alinear verticalmente inferior una parte... ahora el problema es si te fijas, el div si le pongo un color de fondo me tapa el menu... fijate si querés borrando solamente lo que te comenté y vas a ver como tendría que funcionar perfectamente.

Intenté seguirte con tener imaginacion, pero colmó mi paciencia y no peudo resolverlo. Se resuelve si quito un position:relative por ejemplo, pero me deja de funcionar esa estructura tal como te la hice en el ejemplo.

Me puedes ayudar ?... sino no importa, te entiendo y ya me has ayudado muchísimo. Si sabes algo avisa sino mil gracias nuevamente por todo.

Mikmoro · #8 (**permalink**) 09/04/2008, 04:55

Sí, claro. Ningún problema.

Prueba a ponerle z-index: 1; al selector "div.contenido div", y z-index: 10; al selector "div.contenido ul.menu li ul".

Mikel.

Jamati · #9 (**permalink**) 09/04/2008, 10:33

Gracias como siempre Mikel.

Te comento, hice lo que me dijiste, pero como era de esperar al probar, solamente funciona con Firefox, y no con Explorer. Te adjunto nuevamente el codigo para que veas como queda completo:

Código HTML:

<html>
<head>
<title></title>
<style type="text/css">
ul {margin:0;padding:0;} 
li {list-style:none;}
div.contenido ul.menu {width:150px;height:100px;float:left;border:1px solid #CC0000;}
div.contenido ul.menu li {width:100%;height:30px;position:relative;margin-top:2px;}
div.contenido ul.menu li ul {display:none;width:150px;top:0px;left:150px;position:absolute;background:#CC0000;z-index:10;}
div.contenido div {width:400px;height:100px;float:left;position:relative;border:1px solid #2E5F83;margin-left:2px;z-index:1;background:#E5E5E5;/*ESTE BACKGROUND SI SE BORRA FUNCIONA*/}
div.contenido div ul {position:absolute;bottom:0;}
</style>
<script language="JavaScript">
function menu(llamador)
{
  var valor = llamador.parentNode.getElementsByTagName('ul')[0];
  valor.style.display = valor.style.display == 'block' ? 'none' : 'block' ;
}
</script>
</head>
<body>
<div class="contenido">
  <ul class="menu">
    <li><a href="#" onMouseOver="menu(this)" onMouseOut="menu(this)">FILA 1</a>
      <ul>
        <li>SUB FILA 1</li>
        <li>SUB FILA 2</li>
      </ul>
    </li>
    <li><a href="#" onMouseOver="menu(this)" onMouseOut="menu(this)">FILA 2</a>
      <ul>
        <li>SUB FILA 1</li>
        <li>SUB FILA 2</li>
      </ul>
    </li>
  </ul>
  <div>
    <ul>
      <li>TEXTO UBICADO VERTICALMENTE INFERIOR</li>
    </ul>
  </div>
</div>
</body>
</html>

No lo puedo hacer funcionar en Explorer, no se me ocurre nada. No entiendo porque el Explorer no hace caso a la instrucción z-index que me has echo poner... maldito explorador. Se te ocurre algo ?
Nuevamente mil gracias.

Mikmoro · #10 (**permalink**) 09/04/2008, 10:48

Ahhh, Explorer, siempre explorer.

Añade el mismo z-index 10 al selector "div.contenido ul.menu li" y vuelve a probar.

Mikel.

Jamati · #11 (**permalink**) 09/04/2008, 12:01

Inmensamente GRACIAS Mikel.

Ahora sí funcionó perfecto... ajajaja trataré de no molestarte mas durante un largo rato, y si llego a tener alguna dificultad me romperé el bocho antes de molestarte. No te das una idea lo que me has ayudado.

Muchisimas gracias Mikel.