Foros del Web » Creando para Internet » CSS »

Pegar contenido al fondo de una caja

Estas en el tema de Pegar contenido al fondo de una caja en el foro de CSS en Foros del Web. Hola por acá. pues bien, tengo una caja en la que a su vez, tengo cuatro cajas más con contenido diferente cada una, y por ...
  #1 (permalink)  
Antiguo 10/03/2011, 09:59
Avatar de rogertm
Mod->Cuba
 
Fecha de Ingreso: julio-2005
Ubicación: /home/Cuba/Habana/rogertm/
Mensajes: 2.922
Antigüedad: 12 años, 4 meses
Puntos: 638
Pregunta Pegar contenido al fondo de una caja

Hola por acá. pues bien, tengo una caja en la que a su vez, tengo cuatro cajas más con contenido diferente cada una, y por supuesto, la altura de cada una varía, y se me ocurrió que quedaría bien si se pegan estas cuatro cajas al fondo, pero no encuentro la manera. Tengo el siguiente código:
Código HTML:
Ver original
  1. <section id="footer-widget-area" role="complementary">
  2.     <aside id="first" class="widget-area"> contenido 1 </aside>
  3.     <aside id="second" class="widget-area"> contenido 2 </aside>
  4.     <aside id="third" class="widget-area"> contenido 3 </aside>
  5.     <aside id="fourth" class="widget-area"> contenido 4 </aside>
Código CSS:
Ver original
  1. #footer-widget-area {
  2.     overflow: hidden;
  3. }
  4. #footer-widget-area .widget-area {
  5.     float: left;
  6.     margin-right: 20px;
  7.     width: 220px;
  8. }
He intentado jugar con la propiedad position y vertical-align, pero no logro lo que quiero. Aquí les dejo una imagen de lo que tengo y se darán cuenta de lo que quiero:



Saludos y gracias de antemano
__________________
Friki y Blogger por Cuenta Propia:213
Twenty'em: Theming is Prose
  #2 (permalink)  
Antiguo 10/03/2011, 11:34
davidbrepe
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Pegar contenido al fondo de una caja

no entiendo muy bien...
cuando dices que se peguen al fondo te refieres a que no se pueda interactuar con el ratón?
que sea como una imagen?

si es así prueba a ponerle un z-index:10 y a poner una capa transparente por encima, con z-index: 20 por ejemplo
  #3 (permalink)  
Antiguo 10/03/2011, 11:44
Avatar de rogertm
Mod->Cuba
 
Fecha de Ingreso: julio-2005
Ubicación: /home/Cuba/Habana/rogertm/
Mensajes: 2.922
Antigüedad: 12 años, 4 meses
Puntos: 638
Respuesta: Pegar contenido al fondo de una caja

No... lo que quiero es que se vea exactamente al revés a como está la imagen. Que las cajas de adentro <aside> ...</aside> estén pegadas al fondo de la caja que las contiene <section> ...</section>

Gracias por intentar ayudar... Saludos.
__________________
Friki y Blogger por Cuenta Propia:213
Twenty'em: Theming is Prose
  #4 (permalink)  
Antiguo 10/03/2011, 12:01
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Pegar contenido al fondo de una caja

especifica una altura a la etiqueta <section> ya sea fija o en porcentaje y aplica un alto al 100% a la etiqueta <aside>

y si no te anda bien eso tendrás que buscar la forma de adaptar la técnica de columnas equilibradas con estas etiquetas del html5 que la verdad no se que tanto difiera.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #5 (permalink)  
Antiguo 10/03/2011, 12:10
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Pegar contenido al fondo de una caja

Supongo que lo que quieres es que las cajas queden pegadas al borde inferior de su contenedor y no al fondo. Yo tampoco lo entendí a la primera.
Mi navegador tampoco entendió el HTML5 hasta que le hice saber de su existencia. De momento no constituye un estándar.
Salvo que CSS3, que tampoco es estándar aún, tenga alguna forma más simple de lograrlo(http://www.w3schools.com/css3/css3_pr_box-align.asp), sólo se me ocurre utilizar posicionamiento absoluto para las cajas dentro de un contenedor con posicionamiento relativo. En esas circunstancias la etiqueta aside supongo que pierde totalmente su razón de ser.
También podríamos desplazarlas mediante posicionamiento relativo o usando márgenes, pero en cualquier caso es necesario que conozcamos de antemano la altura de las cajas para realizar los ajustes.
  #6 (permalink)  
Antiguo 10/03/2011, 13:04
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Pegar contenido al fondo de una caja

Cita:
<section id="footer-widget-area<- si fuese necesario limpiar los float para que crezca" role="complementary">
<aside id="first <- posición absoluta, bottom 0 left el calculado" class="widget-area"> contenido 1 </aside>
<aside id="second<- posición absoluta, bottom 0 left el calculado" class="widget-area"> contenido 2 </aside>
<aside id="third<- posición absoluta, bottom 0 left el calculado" class="widget-area"> contenido 3 </aside>
<aside id="fourth<- posición relative, flotado right" class="widget-area"> contenido 4 </aside>
</section>
Aunque quizás quedase más estético (y es una opinión personal) que fuesen de igual altura todos los aside (falsas columnas equilibradas) o incluso una escalera decreciente de izquierda a derecha (Bloguer->Post->Pages->Coments según los contenidos de la imagen).

Sanxuan: la etiqueta aside no tiene (por semántica) ninguna relación con las propiedades position o similares. Símplemente engloba contenidos un tanto ajenos (o secundarios) a la temática principal (article) pero con cierta relación entre ellos (los aside incluidos conjuntamente en el mismo section). Creo, o al menos así es como yo los asimilo.
  #7 (permalink)  
Antiguo 11/03/2011, 07:56
Avatar de rogertm
Mod->Cuba
 
Fecha de Ingreso: julio-2005
Ubicación: /home/Cuba/Habana/rogertm/
Mensajes: 2.922
Antigüedad: 12 años, 4 meses
Puntos: 638
De acuerdo Respuesta: Pegar contenido al fondo de una caja

Excelente @kseso?, tu respuesta me ha dado la solución y un gramo más de conocimiento en esto del CSS

Gracias también por la sugerencia de la posición de los widgets, pero esos son solo de prueba, aunque en realidad lo que quiero es que se muestren de manera desordenada, osea, sin que el tamaño sea el que prime el orden de los mismos, sino el contenido, así cambiarán constantemente dependiendo de los comentarios, los post, etc, y serán diferentes a cada rato...

Un saludo y gracias a todos por ayudarme
__________________
Friki y Blogger por Cuenta Propia:213
Twenty'em: Theming is Prose
  #8 (permalink)  
Antiguo 16/03/2011, 12:57
Avatar de rogertm
Mod->Cuba
 
Fecha de Ingreso: julio-2005
Ubicación: /home/Cuba/Habana/rogertm/
Mensajes: 2.922
Antigüedad: 12 años, 4 meses
Puntos: 638
Respuesta: Pegar contenido al fondo de una caja

Weow! Me acabo de dar cuenta que la caja contenedora asume el tamaño del aside de la extrema derecha... ¿Cómo puedo hacer para que asuma el de la mayor?

He intentado algunas cosas con las posiciones, pero no logro nada...
__________________
Friki y Blogger por Cuenta Propia:213
Twenty'em: Theming is Prose
  #9 (permalink)  
Antiguo 18/03/2011, 14:53
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Pegar contenido al fondo de una caja

Con mis disculpas por el retraso, que quizás llegue tarde:
Cita:
Iniciado por rogertm Ver Mensaje
Weow! Me acabo de dar cuenta que la caja contenedora asume el tamaño del aside de la extrema derecha...<--lógico, si usaste mi sugerencia, es la que tiene position:relative, las otras al estar en absolute no fuerzan a su padre a crecer, ni con overflow ni con nada ¿Cómo puedo hacer para que asuma el de la mayor?<-- asignandole el relative a la caja mayor, ya sea manualmente (porque a priori sepas cuál será o si lo desconoces mediante programación -si fuera posible-)

He intentado algunas cosas con las posiciones, pero no logro nada...

Etiquetas: caja, contenido, fondo, pegar
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 07:17.