Aligner une image par le bas…

Langage et développement

| par Teddy Payet

Je vous l’accorde, le titre ne laisse que peu présager ce que cet article en retourne. Pour simplifier, voici une question : comment puis-je aligner une image (à droite ou à gauche) d’une zone sur le bas de cette zone ?

Contexte

Vous désirez aligner le logo de votre site avec le bas de votre menu de navigation à droite du logo. Mais votre menu peut s’étoffer au fil de vos articles, de vos créations de rubriques.
Vous pourriez par exemple, régulièrement, selon le besoin, jouer avec le padding-top ou la position bottom de votre menu. Mais selon le navigateur sur lequel le visiteur peut se trouver (cf. Internet Explorer, Safari, Firefox, etc.) le "pixel" est interprété différemment surtout pour si votre zone adjacente est rempli par un texte…

Une solution est de passer par du javascript. Ce qui a le mérite d’être fluide pour le visiteur selon son navigateur et son système d’exploitation. Et bien sûr, jQuery en facilite encore plus la mise en place sans passer par des boucles à rallonge.

Tout d’abord, voici le code html qui nous intéresse :

Pour information, #formulaire_recherche n’a pas de margin défini dans la css.

Et voici le code javascript à insérer entre vos balises <head>…</head> après l’appel à jQuery :

Explications

Nous avons besoin de 3 informations pour pouvoir faire notre opération : la hauteur du bloc qui contient notre logo, la hauteur du formulaire de recherche (qui précède notre menu) et enfin la hauteur de notre menu de navigation. Et on soustrait tout ce beau petit monde.

Donc, Il nous faut trouver la hauteur de l’entête qui contient notre logo et l’enregistrer dans une variable :
gHauteurEntete = $("#entete").height();

Puis, trouver la hauteur du formulaire de recherche #formulaire_recherche et le stocker dans une nouvelle variable :
gHauteurNavRecherche = $("#nav #formulaire_recherche").height();

On continue avec la hauteur de notre menu de navigation :
gHauteurNavMenuEntree = $("#nav .menu-entree").height();

On soustrait tout ça :
gPaddingTopMenuConteneur = gHauteurEntete - gHauteurNavMenuEntree - gHauteurNavRecherche;

Et enfin, on écrit l’information dans l’attribut du bloc contenant notre menu de navigation :
$("#nav .menu-conteneur").css("padding-top", gPaddingTopMenuConteneur);

Amélioration du code

Vous avez pu voir que je renseignais à chaque fois une variable (où je stocke une valeur). Vous pourriez tout à fait vous passer de cette étape et faire directement le calcul de gPaddingTopMenuConteneur.
Le fait d’avoir des variables pour chaque élément permet de lire plus aisément quand on commence à faire du javascript maison et de retrouver une éventuelle erreur.

Avez-vous d’autres astuces ?