Foros del Web » Creando para Internet » CSS »

alinear verticalmente inferior

Estas en el tema de alinear verticalmente inferior en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/04/2008, 18:41
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
alinear verticalmente inferior

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> 
  #2 (permalink)  
Antiguo 06/04/2008, 18:53
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: alinear verticalmente inferior

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.

Última edición por Mikmoro; 07/04/2008 a las 10:25
  #3 (permalink)  
Antiguo 06/04/2008, 22:42
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Re: alinear verticalmente inferior

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 ?
  #4 (permalink)  
Antiguo 07/04/2008, 00:27
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: alinear verticalmente inferior

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.
  #5 (permalink)  
Antiguo 07/04/2008, 22:13
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Re: alinear verticalmente inferior

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.
  #6 (permalink)  
Antiguo 08/04/2008, 01:37
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: alinear verticalmente inferior

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.
  #7 (permalink)  
Antiguo 08/04/2008, 22:23
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Re: alinear verticalmente inferior

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.
  #8 (permalink)  
Antiguo 09/04/2008, 05:55
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: alinear verticalmente inferior

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.
  #9 (permalink)  
Antiguo 09/04/2008, 11:33
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Re: alinear verticalmente inferior

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.
  #10 (permalink)  
Antiguo 09/04/2008, 11:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: alinear verticalmente inferior

Ahhh, Explorer, siempre explorer.

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

Mikel.
  #11 (permalink)  
Antiguo 09/04/2008, 13:01
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Re: alinear verticalmente inferior

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.
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 23:54.