Aligner une image par le bas…

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 :

<div class="container_16">
            <div class="grid_3" id="entete">
                <div class="accueil">
	<a title="Accueil du site" href="http://localhost:8888/" rel="start home"><img width="160" height="165" style="height:165px;width:160px;" src="IMG/siteon0.jpg" alt="" class="spip_logos"></a>
</div>            </div>
            <div class="grid_13" id="nav">
                <div id="formulaire_recherche" class="formulaire_spip formulaire_recherche">
<form method="get" action="http://localhost:8888/spip.php?page=recherche"><div>
	<input type="hidden" value="recherche" name="page">
	<label for="recherche">Rechercher&nbsp;:</label>
	<input type="text" accesskey="4" value="Rechercher&nbsp;:" id="recherche" onfocus="this.value=''" name="recherche" size="10" class="text"><input type="submit" title="Rechercher" value="&gt;&gt;" class="submit">
</div></form>
</div>
                <div class="menu-conteneur" style="padding-top: 103px;">
<ul class="menu-liste menu-items">
		
		<li class="menu-entree item rub7">
			<a title="association" href="spip.php?rubrique7">association</a>
		</li>
		<li class="menu-entree item rub2">
			<a title="action" href="spip.php?rubrique2">action</a>
		</li>
		<li class="menu-entree item rub8">
			<a title="recherche" href="spip.php?rubrique8">recherche</a>
		</li>
		<li class="menu-entree item rub63">
			<a title="formation" href="spip.php?rubrique63">formation</a>
		</li>
		<li class="menu-entree item rub1">
			<a title="édition" href="spip.php?rubrique1">édition</a>
		</li>
		<li class="menu-entree item rub66">
			<a title="écho" href="spip.php?rubrique66">écho</a>
		</li>
              </ul>
            </div>
            </div>
        </div>

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 :

<script type="text/javascript">
$("document").ready(function()
	{
		gHauteurEntete = $("#entete").height();
		gHauteurNavRecherche = $("#nav #formulaire_recherche").height();
		gHauteurNavMenuEntree = $("#nav .menu-entree").height();
		gPaddingTopMenuConteneur = gHauteurEntete - gHauteurNavMenuEntree - gHauteurNavRecherche;
		
		$("#nav .menu-conteneur").css("padding-top", gPaddingTopMenuConteneur);
	}
);
</script>

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 ?

dimanche 6 mai 2012

par Teddy Payet

Langage et développement: Javascript, jQuery
Catégorie: Astuce, Notes de développement

Répondre à cet article

Qui êtes-vous ?

Nom

Courriel (non publié)

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Texte de votre message

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Prévenez-moi de tous les nouveaux commentaires de cette discussion par email

Suivre les commentaires : |

Contexte

Explications

Amélioration du code

Derniers commentaires