Posicionar elemento desde el final

Anonimo12 · #1 (**permalink**) 18/03/2014, 08:39

Buenas tardes:

Estoy usando CSS para diseñar la parte estética de la una web y necesito, dado este ejemplo:

Código HTML:

<head>
<meta charset="utf-8">
<meta name="author" content="nombre autor">
<meta name="keywords" content="inicio, iniciar, sesion, login"

<style>
footer {text-align:center; font-size: 15px; color: black; font-style: italic; AQUI-IRIA-EL-CSS-RESTANTE}
</style>
</head>
<body>
<header>
...
</header>
<article>
...
</article>
<footer>
   CONTENIDO
</footer>
</body>

Necesito añadir donde "AQUI-IRIA-EL-CSS-RESTANTE" una directriz/instrucción para que coloque el "CONTENIDO" de la etiqueta footer al final de la web contando desde abajo, es decir, si le digo que deje un margen de 40 px que deje ese margen al final de la web y coloque el contenido inmediatamente encima de él.

Si bien con la etiqueta footer colocada donde está me imprime el contenido al final de la web, necesito decirle en qué lugar exactamente contando desde el final; he probado con "margin-botton: 40 px" pero no he obtenido el resultado deseado.

Un saludo!

hackjose · #2 (**permalink**) 18/03/2014, 12:50

Usa position fixed a ver si solucionas el problema

saludos

SonrisaCs · #3 (**permalink**) 18/03/2014, 13:44

Hola, fijate que arriba te faltó cerrar una etiqueta meta, por otro lado te recomiendo que hagas un llamado a tu archivo css con <link> en vez de ponerlo adjunto al documento...

Para hacer lo que vos querés, ¿probaste esto?

Código CSS:

Ver original#footer {
      position: absolute;
      bottom: Xpx
}

Donde "X" sería un número que indique la distancia desde abajo hacia arriba...

Saludos

pzin · #4 (**permalink**) 18/03/2014, 14:16

Igual lo que buscas es poner un sticky footer.

Anonimo12 · #5 (**permalink**) 19/03/2014, 10:17

Buenas:

Gracias por las respuestas, lo he conseguido con:

Código HTML:

    #footer {
          position: absolute;
          bottom: Xpx
    }

Pero ahora el "text-align: center;" ha dejado de funcionar, es decir, ya no me centra el texto del pie de página. No tengo ningún error sintáctico. Este es el código completo:

Código HTML:

footer {position: absolute; bottom: 10px; text-align: center; font-size: 15px; color: black; font-style: italic;}

Un saludo.

pzin · #6 (**permalink**) 19/03/2014, 10:18

No es una buena solución lo de usar la posición absoluta.

De todas formas, el centrado de texto seguramente siga funcionando y el problema será que ese elemento no te ocupa todo el ancho, así que deberías de añadirle un width: 100%.

Anonimo12 · #7 (**permalink**) 19/03/2014, 10:27

Cita:

Iniciado por pzin

No es una buena solución lo de usar la posición absoluta.

De todas formas, el centrado de texto seguramente siga funcionando y el problema será que ese elemento no te ocupa todo el ancho, así que deberías de añadirle un width: 100%.

Con el "width: 100%" se ha centrado el texto, pero veo que tienes razón en lo de que no es una buena solución el absolute porque, cuando disminuyo el tamaño de la ventana en el navegador, el contenido del footer se posiciona incorrectamente situándose encima de otros elementos, cosa que no pasa sin el absolute.

¿Me podrías indicar qué debo añadir a mi footer del ejemplo que me has mandando en tu anterior mensaje (sticky footer)?, no lo comprendo muy bien, soy un novato en CSS.

Gracias.

pzin · #8 (**permalink**) 19/03/2014, 12:19

Pues en el enlace tienes el código.

Partes de la base de que tienes una estructura así en tu sitio:

Código HTML:

Ver original<body>
 
  <div class="page-wrap">
    El contenido de tu página o sitio.
  </div>
 
  <footer class="site-footer"></footer>
 
</body>

Es decir, un contenedor que contiene todo el sitio, y el pie de página lo dejas por fuera.

Y según el ejemplo del sitio, verás un valor de 142px, que es la altura del pie de página, eso ya lo cambias a la altura que tenga el tuyo.

andresgarciadev · #9 (**permalink**) 20/03/2014, 17:28

por que simplemente no le das al contenido del body (el article) un height de 90% y al footer uno de 10%? asi se mantendria al final y listo e.e

Anonimo12 · #10 (**permalink**) 21/03/2014, 03:26

Gracias my frinds!

Pero seguimos en las mismas y ahora con otro problema, al usar Sticky footer la página aumenta su altura provocando que puedas desplazarla arriba-abajo con la barra lateral, cosa que queda fea porque la página de inicio solo contiene: título - formulario - pie de página.

He intentado cambiar los tamaños del sticky footer pero seguimos en las mismas. Me cuesta creer que para algo tan básico como es disminuir la separación entre el footer y la parte baja de la web no haya una solución clara y sin efectos laterales xD

Un saludo.