Le blog.

Eviter la superposition d’une entête fixe sur une ancre.

Si vous êtes intégrateur web ou bidouillez un peu avec le HTML et le CSS, vous avez sans doute déjà eu affaire à ce problème : la barre de navigation (header) du site est en position fixe, toujours collée au haut de la page, et elle cache la partie haute des zones cibles (ancres). Comment remédier à ce problème ?

L'ancre cible est en partie cachée par l'entête fixe
L’ancre cible est en partie cachée par l’entête en position:fixed;

L’astuce CSS pour voir l’intégralité des ancres cibles

div:target {
    padding-top: 7em; 
    margin-top: -7em; 
}

Eviter ce problème est en fait très simple grâce à une petite astuce CSS : le sélecteur :target nous permet de cibler les éléments (<div> ou autres) qui sont les cibles actuelles sur notre page. Imaginons que notre URL présente une ancre #contenu, la <div id=’contenu’>…</div> sera la seule ciblée avec le sélecteur CSS div:target. Aucune autre div ne sera ciblée, le sélecteur CSS :target nous permet donc de styliser uniquement l’élément HTML qui nous intéresse sur la page.

Mais que faire à partir de là ? L’astuce est d’appliquer un padding-top sur l’élément ciblé, de la taille de la hauteur de l’entête.

Un padding-top ne risque-t-il pas de décaler notre élément vers le bas et d’ajouter une marge inutile ?

Tout à fait ! Notre élément sera décalé vers le bas, mais le navigateur scrollera jusqu’au haut de notre div cible qui présente désormais un espace vide avant son contenu ; cet espace vide créé grâce au padding-top nous permet d’y « caler » l’entête. En contrepartie, on applique une margin-top négative de la même taille afin d’annuler l’espace créé dans la page.

Sans le CSS, le titre de la section cible est caché sous l'entête
Sans le CSS, le titre de la section cible est caché sous l’entête
Avec le CSS, le titre est positionné comme il faut sous l'entête
Avec le CSS, le titre est positionné comme il faut sous l’entête
En résumé, cette astuce CSS permet de descendre notre cible dans la page en agrandissant sa hauteur (padding-top) tout en annulant ce décalage visuellement grâce à une margin-top négative.

Et vous, avez-vous d’autres astuces CSS à nous partager dans les commentaires ?

Soyez le premier à publier un commentaire.

Laisser un commentaire