Foros del Web » Creando para Internet » CSS »

alinear verticalmente contenido

Estas en el tema de alinear verticalmente contenido en el foro de CSS en Foros del Web. Pues tengo el siguiente problema: Tengo un <div> y quiero alinear el contenido dentro del mismo hacia abajo (verticalmente hablando). He leído mucho sobre alinear ...
  #1 (permalink)  
Antiguo 25/02/2008, 08:30
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
alinear verticalmente contenido

Pues tengo el siguiente problema:

Tengo un <div> y quiero alinear el contenido dentro del mismo hacia abajo (verticalmente hablando). He leído mucho sobre alinear y todo el soporte que hay en la web está dirigido principalmente al alineamiento horizontal... pero justamente ahora quiero alinear todo hacia abajo.

Con tablas no había problema, ya que ponía vertical-align:bottom... pero en una capa como se hace ?

Gracias por cualquier sugerencia.

Saludos !!
  #2 (permalink)  
Antiguo 25/02/2008, 11:27
 
Fecha de Ingreso: diciembre-2007
Mensajes: 11
Antigüedad: 10 años
Puntos: 0
Re: alinear verticalmente contenido

Puede ser que sea, que tengas que darle un nombre al div?
Asi cuando vayas al codigo, puedas darle solo esa
Código HTML:
 <div id="nombre">  asi cuando vayas al css solo le pones las propiedades #nombre: etc...;
Bue, eso es lo primero que se me vino a la cabeza.
No se si te servira, je
Saludos
  #3 (permalink)  
Antiguo 25/02/2008, 12:56
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Re: alinear verticalmente contenido

muchas gracias por responder _GaBY_

te cuento que la capa ya tiene nombre, eso está Ok, pero dentro del CSS como sería el código ??... me explico ?

porque para las tablas ponía: vertical-align:buttom , pero para los <div> no sé y me estoy volviendo loco

cualquier ayuda me serviría, muchísimas gracias nuevamente.
  #4 (permalink)  
Antiguo 25/02/2008, 14:07
 
Fecha de Ingreso: diciembre-2007
Mensajes: 11
Antigüedad: 10 años
Puntos: 0
Re: alinear verticalmente contenido

Creo que tenes que usar los "margin"

#nombre {
margin-top:10px; margin-bottom:10px;
}

Mira encontre esta pagina dentro del foro:
http://www.forosdelweb.com/967310-post50.html
es medio viejo pero que se yo...
Espero que te sirva!!
  #5 (permalink)  
Antiguo 25/02/2008, 16:18
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Re: alinear verticalmente contenido

Muchísimas gracias....

tengo un <div> con un determinado alto, y dentro de esta capa hay varios div mas, pero quiero que todo se alinee verticalmente hacia abajo, o sea quiero que tenga una alineación vertical inferior.

Este código que me pasaste es para texto, pero también funciona si tengo divs ??
  #6 (permalink)  
Antiguo 27/02/2008, 01:49
Avatar de rasmarko  
Fecha de Ingreso: noviembre-2002
Ubicación: México
Mensajes: 78
Antigüedad: 15 años, 1 mes
Puntos: 1
Re: alinear verticalmente contenido

Logré algo a lo que tu te refieres, mi propuesta es hacer un display: table-cell al Div principal, que dentro de él tengas más código html como imágenes, texto e incluso otros divs.

Aquí te dejo un ejemplo completo de cómo podría funcionar:

Código PHP:
 <style>
.
principal {
displaytable-cell;
vertical-alignbottom;
height500px;
background#FFCC66;
}
.
contenido {
padding50px;
background#333333;
color#FFFFFF;
}

</
style>


<
div class="principal">
<
div class="contenido">
  <
p>Pues tengo el siguiente problema:</p>
  <
p>Tengo un y quiero alinear el contenido dentro del mismo hacia abajo (verticalmente hablando). He leído mucho sobre alinear y todo el soporte que hay en la web está dirigido principalmente al alineamiento horizontal... pero justamente ahora quiero alinear todo hacia abajo.</p>
  <
pCon tablas no había problemaya que ponía vertical-align:bottom... pero en una capa como se hace ?</p>
  <
p>Gracias por cualquier sugerencia.</p>
  <
p>Saludos !! </p>
</
div>
</
div
Sin embargo, al terminar de proponer lo anterior, me encontré con la sorpresa de que sólo funciona en Firefox y Opera, pero Internet Explorer no lo reconoce.

Espero que alguien pueda, con base en mi ejemplo, dar a luz una solución, como un hack, para el ahora tan odiado navegador de Internet Explorer.
__________________
Fuentes - Diseweb - Frases Célebres
  #7 (permalink)  
Antiguo 27/02/2008, 15:48
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Re: alinear verticalmente contenido

Bastante interesante rasmarko...

la verdad que no entendía (y quizás todavía tampoco entiendo) como funciona el display:table-cell ... pero si con eso funciona buenísimo.

Ahora como bien vos dijiste, esperemos que alguien con mas conocimientos nos ayude a ver como podemos lograr esto para el maldito explorer !!!

muchas gracias por la respuesta, cuando tengamos la parte que nos falta para explorer ahí sí podré implementarlo.

Gracias y espero que alguien nos pueda ayudar.
  #8 (permalink)  
Antiguo 27/02/2008, 17:11
 
Fecha de Ingreso: diciembre-2007
Mensajes: 11
Antigüedad: 10 años
Puntos: 0
Re: alinear verticalmente contenido

jajaj que lio que es esto!!

me dijieron que si el problema es solo en IE TEngo que usar

<!--[if IE 5]>
<style type="text/css">
div{ width: 500px;}
</style>
<![endif]-->

Dentro de pagina.html en la parte de <body>
y se corrige solo en el IE...
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 18:45.