Foros del Web » Creando para Internet » CSS »

Duda con posiciones absolutas y relativas

Estas en el tema de Duda con posiciones absolutas y relativas en el foro de CSS en Foros del Web. Hola por acá, tengo una duda a ver si me ayudan a solucionarla. El caso es que tengo un elemento <header> ...</header> que quiero montar ...
  #1 (permalink)  
Antiguo 15/12/2011, 12:18
Avatar de rogertm
Mod->Cuba
 
Fecha de Ingreso: julio-2005
Ubicación: /home/Cuba/Habana/rogertm/
Mensajes: 2.922
Antigüedad: 18 años, 7 meses
Puntos: 638
Duda con posiciones absolutas y relativas

Hola por acá, tengo una duda a ver si me ayudan a solucionarla. El caso es que tengo un elemento <header> ...</header> que quiero montar encima de una imagen <figure> ...</figure>. Todo está OK, hasta el momento en que lo de adentro de header, osea, el título del artículo ocupa más de dos lineas.

Lo ideal para mi es que se muestre de abajo para arriba, osea, que en lugar de ocupar espacio para abajo, sea para arriba, que l borde inferior del elemento se mantenga siempre a la misma altura.

Aquí una imagen que explica lo que pasa


El código que tengo es este:
Código HTML:
Ver original
  1. <section id="featured">
  2.     <article id="post-105" class="clases">
  3.         <figure class="aligncenter">
  4.             <img scr="ruta/a/la/imagen.jpg" />
  5.         </figure>
  6.         <header>
  7.             <h2 class="entry-title"><a href="#">Lorem ipsum dolor...</a></h2>
  8.         </header>
  9.         <p class="entry-meta">
  10.             Posted on December 12, 2011 by rogertm
  11.         </p><!-- .entry-meta -->
  12.         <div class="entry-content">
  13.             Fusce pulvinar, risus non euismod varius, ante tortor facilisis lorem, non condimentum diam nisl vel lectus
  14.         </div><!-- .entry-content -->
  15.     </article><!-- #post-## -->
Código CSS:
Ver original
  1. #featured{
  2.     overflow: hidden;
  3.     width: 100%;
  4. }
  5. #featured article{
  6.     float: left;
  7.     margin: 0 20px -70px 0;
  8.     width: 320px;
  9. }
  10. #featured header{
  11.     background: #000;
  12.     position: relative;
  13.     bottom: 100px;
  14.     opacity: 0.7;
  15. }
  16. #featured .entry-title{
  17.     min-height: 50px;
  18.     opacity: 1 !important;
  19. }
  20. #featured .entry-meta{
  21.     position: relative;
  22.     top: -65px;
  23. }
  24. #featured .entry-content{
  25.     position: relative;
  26.     top: -85px;
  27. }
Supongo que lo que estoy haciendo mal es referente a las posiciones, por eso tuve que resolver dándole una altura mínima a los títulos, pero cuando se pasa de ahí, baja todo el contenido siguiente...

Gracias de antemano por la ayuda que me puedan brindar.

Saludos.
__________________
Friki y Blogger por Cuenta Propia:213
Twenty'em: Theming is Prose
  #2 (permalink)  
Antiguo 15/12/2011, 12:30
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 350
Antigüedad: 15 años, 6 meses
Puntos: 187
Respuesta: Duda con posiciones absolutas y relativas

Vamos por parte, si tu idea es ponerle un caption al "figure" semanticamente seria correcto utililzar la etiqueta figcaption.

Por otra parte seria mas facil solucionar tu problema viendo un ejemplo en vivo pero mis consejos son los siguientes:

"header" deberia ser un hijo de "figure"
Código HTML:
Ver original
  1. <figure class="aligncenter">
  2.             <img scr="ruta/a/la/imagen.jpg" />
  3.              <header>
  4.             <h2 class="entry-title"><a href="#">Lorem ipsum dolor...</a></h2>
  5.         </header>
  6.         </figure>
Luego, aplicaría posicion relativa al figure
Código CSS:
Ver original
  1. #featured article{ position:relative;}
y finalmente le daria posicionamiento absoluto al "header"
Código CSS:
Ver original
  1. #featured article{
  2.           position:absolute;
  3.           bottom:0;
  4.           width:100%;
  5. }

Saludos y espero que te sirva, cualquier cosa no dudes en preguntar
  #3 (permalink)  
Antiguo 15/12/2011, 12:59
Avatar de rogertm
Mod->Cuba
 
Fecha de Ingreso: julio-2005
Ubicación: /home/Cuba/Habana/rogertm/
Mensajes: 2.922
Antigüedad: 18 años, 7 meses
Puntos: 638
Respuesta: Duda con posiciones absolutas y relativas

Si, me sirve, pero en lugar de header usaré figcaption dentro de figure, así no rompo algunas reglas
__________________
Friki y Blogger por Cuenta Propia:213
Twenty'em: Theming is Prose
  #4 (permalink)  
Antiguo 15/12/2011, 13:12
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 350
Antigüedad: 15 años, 6 meses
Puntos: 187
Respuesta: Duda con posiciones absolutas y relativas

Cita:
Iniciado por rogertm Ver Mensaje
Si, me sirve, pero en lugar de header usaré figcaption dentro de figure, así no rompo algunas reglas
No es romper reglas, porque sintaticamente es correcto alojar un "header" que es un "flow content" denttro de un "figure".

Tanto "header" como "figcaption" funcionarán en tu caso, sin embargo creo que "figcaption" seria mas semanticamente correcto.

Saludos

Etiquetas: contenido, posiciones, relativas, fondo
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 05:15.