Problema con el footer

[simplyisa]

Buenas tardes.

Seguro que ya os han planteado esta duda más veces, pero no encuentro nada al respecto. Os explico mi situación: quiero que el footer de mi página esté SIEMPRE al final, pero no quiero que sea un "sticky footer" y aparezca en todo momento, me da igual que la página tenga de alto 800px, como 3000px, solo quiero que el footer aparezca al final. La cosa es que lo consigo en las páginas con poco contenido, donde el contenido no llega abajo del todo, pero sin embargo, en el blog, que tiene mucha más altura como es lógico, no lo consigo y el footer me queda superpuesto al resto del contenido, tal y como os muestro en esta imagen:



Por más que busco no he encontrado gran cosa de como solucionar esto, y menos en el caso de wordpress ¿alguna idea?

¡Gracias de antemano!

[Nekko]

Es un tema de CSS, tenés la url del proyecto? O al menos facilitanos el HTML generado en la parte del footer (SOLAMENTE) y su respectivo CSS.

[simplyisa]

Este es el archivo footer.php

<?php
/**
* The template for displaying the footer.
*
* Contains footer content and the closing of the
* #main and #page div elements.
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
?>
</div><!-- #main .wrapper -->
<footer id="colophon" role="contentinfo">
<br />
<br />
<div class="site-info">
credits
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>
</body>
</html>

Y esta la parte del CSS:
/* Footer */
footer[role="contentinfo"] {
background: url(http://pelusasfactory.net/images/background-footer.png) repeat-x;
text-align:center;
left: 0;
bottom: 0;
width: 100%;
height: 155px;
position:absolute;

}

[Nekko]

El footer necesita posicionarse normal en vez de position:absolute.

Probá borrando las lineas

Código CSS:

position:absolute;
left: 0;
bottom: 0;
 

Es probable que se descalabre todo, podrías probar dandole un float:left;

[simplyisa]

Con el CSS así:

Código PHP:

  footer[role="contentinfo"] {
    background: url(http://pelusasfactory.net/images/background-footer.png) repeat-x;
    text-align:center;
    width: 100%;
    height: 155px;
    float:left;    
} 
   

Se me ve así:



Peor aún porque ni ocupa todo el ancho, ni sale pegado abajo u.u

[Nekko]

Te lo muevo a CSS

[pzin]

No estoy seguro, pero entiendo que lo que quieres es que el pie de página esté fijo en la parte de abajo del navegador, pero no del documento —es decir, que esté al final del viewport— y que no se mueva de ahí.

Si es así, usa una posición fija para el pie de página y colócalo en la parte de abajo con bottom:

Código CSS:

position: fixed;
bottom: 0;
 

[simplyisa]

Eso también lo probé, pero aunque aparece pegado abajo no es lo quiero, primero por que no ocupa toda la parte inferior de nuevo, y segundo porque no busco que esté siempre visible, sino simplemente que aparezca al final de la página, veréis:



Como veis en la foto, el sidebar queda oculto por el footer, no quiero eso, quiero que se vea todo, y ya cuando termine la página pues que aparezca el footer. Os dejo el link para que lo veáis: http://pelusasfactory.net/?page_id=8

No se si me estoy explicando muy bien, pero gracias a todos igualmente.

[dvpareja]

Simplemente cambia fixed por relative

Código CSS:

footer[role="contentinfo"] {
    background: url("http://pelusasfactory.net/images/background-footer.png") repeat-x scroll 0 0 transparent;
    bottom: 0;
    height: 155px;
    position: relative;
    text-align: center;
    width: 100%;
}
 

y si sacas el footer de la div#page, no tendrás el problema del margen inferior.

Saludos

P.D: Usa Firebug en Firefox y te quitarás muchos quebraderos de cabeza.

[pzin]

Claro, la cosa es que tendrías que sacar el footer del contenedor, porque tiene aplicada un clase, .site, que tiene dos max-width declarados en style.css, linea #1425.

Otra sería quitar esos anchos máximos a .site y aplicárselos sólo a #mashead y a #main.

Que no conozco mucho Wordpress, así que no será cual de las dos soluciones será la mejor.

[simplyisa]

Ahora si que queda pegado al fondo, y ocupa el 100% de la página, pero solo en el blog, en el resto de páginas cuyo contenido no es tan extenso, no aparece pegado al final de la página, sino en medio.

[pzin]

Para eso si que tienes que usar lo del sticky footer.

[dvpareja]

Tu tienes:
<body>
<div id="page">
.....
</div>
<footer>....</footer>
</body>

Y yo haría

<body>
<div id="main-wrapper">
<div id="page">
.....
</div>
<footer>....</footer>
</div>
</body>

y definiria las css de #main-wrapper como:

div#main-wrapper {
position:relative;
height:100%;
width:100%;
}
y las de footer

footer {
position:absolute;
bottom:0;
width:100%;
// Y las que necesites
}

[simplyisa]

Sigue apareciendo en medio de la página :(

[dvpareja]

Curioso, en Chrome y en FF lo veo perfecto.

¿Qué sección ves mal y en qué navegador?

[simplyisa]

Uso Chrome, lo que veo mal es el footer, es decir, la parte amarilla de abajo, te adjunto una captura completa para que veas que en la página de inicio el footer no aparece pegado abajo, sino a mitad de la pantalla: http://img196.imageshack.us/img196/7442/96l.png

[pzin]

Iniciado por pzin

Para eso si que tienes que usar lo del sticky footer.

[simplyisa]

Con el sticky footer volveríamos al problema de antes, pisaría el contenido del blog.

[pzin]

No, porque ahora se supone que tu elemento ya no está dentro del contenedor ese que no te dejaba ponerlo al 100%, y es una cosa fundamental para poner aplicar es técnica.

Si lo aplicas bien funcionará sin problemas.

[dvpareja]

Pon esto en tu css

Código CSS:

html, body
{
    height: 100%;
}
 

[simplyisa]

¡Ahora si! al 100% se me iba demasiado abajo, lo he puesto a un 85% y se ve perfecto.
Muchísimas gracias por toda tu ayuda y paciencia (:

[pzin]

Ahora tienes scroll que no sirve de nada.