Positionnement de mon footer, avec un content à hauteur variable...

Bonjour,


Avant tout, merci à tous, car ce site est une véritable mine d'informations, qui m'aide et me suit depuis déjà quelque temps, dans mon apprentissage de la création de sites web...

Je suis actuellement en train de refaire mon site (avec Wordpress), et j'ai donc voulu l'améliorer techniquement, en ajoutant quelques touches de jQuery/javascript (légères, car je suis débutant en "code").
J'utilise le très bon plugin Masonry, pour mon contenu, qui adapte la largeur de mon content dans une limite (max-width) que je lui ai donnée, et y insère donc mes posts, positionnés en absolute.
Je souhaite positionner mon footer en pied de page (position:fixed et bottom:0), et j'aimerais que la largeur de celui-ci soit identique à celle du content (dont la largeur n'est pas fixe, comme expliqué précédemment). Et c'est la que je suis bloqué...

J'ai donc "pondu" un bout de code, d'après mes recherches, mais celui-ci ne donne pas le résultat recherché. Et en raison de mon niveau en code, je ne vois pas mon erreur, ni comment la résoudre... Quelqu'un pourrait-il m'aider ?

Voici donc le code, que vous pouvez voir en (in)action ici... Il est donc directement intégré dans le footer :

<div id="footer">

<p>&#169; <?php bloginfo('name'); ?>, <?php print(date(Y)); ?></p>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.masonry.min.js"></script>

<script type="text/javascript">
	$('body').masonry({
		itemSelector: '.post, #contentlinks li, #content-contact li, #content-illustration, #content-graphisme, #content-internet, #content-special',
		columnWidth: 75,
		isAnimated: true,
		isFitWidth: true
	});
</script>

<script type="text/javascript">
	jQuery(function($)({
		var contentwidth = $('#content').width();
		var footerwidth = $('#footer').width();
		$('#footer').css('width', contentwidth);
	});
</script>

</div>

Merci d'avance, à tous !
Modifié par soykje (29 Mar 2012 - 21:08)

Bonjour,


Finalement je me réponds à moi-même, ayant fini par trouvé une astuce pour résoudre mon problème

J'ai donc laissé le footer "tranquille", au niveau du css, et sans le sortir du flux, donc. Pour le placement en bas de page, j'ai trouvé un morceau de code (en .js), qui m'a permis de le positionner, en fonction de la taille de la fenêtre et du contenu...

Je copie donc le script ici, des fois que ça puisse aider quelqu'un (à appeler ensuite, dans le footer.php du thème) !

var monInterval = "";

function getWindowHeight() {
    var windowHeight=0;
    if (typeof(window.innerHeight)=='number') {
        windowHeight=window.innerHeight;
    }
    else {
    if (document.documentElement&&document.documentElement.clientHeight) {
         windowHeight = document.documentElement.clientHeight;
    }
    else {
    if (document.body&&document.body.clientHeight) {
         windowHeight=document.body.clientHeight;
    }
    }
    }
    return windowHeight;
}

function setFooter() {
	if(monInterval != "") {
               clearInterval(monInterval);
	}
	
        if (document.getElementById) {
               var windowHeight=getWindowHeight();
        if (windowHeight>0) {
               var contentHeight = document.getElementById('content').offsetHeight;
               var footerElement = document.getElementById('footer');
               var footerHeight = footerElement.offsetHeight;		
        if (windowHeight-(contentHeight+footerHeight+200)>=0) {
	       footerElement.style.position='relative';
               footerElement.style.top = (windowHeight-(200+contentHeight+footerHeight))+'px';		
        }
        else {
	       footerElement.style.position='static';
        }
        }
      }
}
window.onload = function() {
	setFooter();
}
window.onresize = function() {
	//on appelle la fonction avec un délai pour qu'il s'adapte après le positionnement des posts
	monInterval = setInterval('setFooter()', 555);
}

Modifié par soykje (29 Mar 2012 - 21:08)