Admin/Dev

03
Févr.
2020

Astuce HTML/CSS : Utilisation des ancres avec un en-tête de page fixée

Publié par sky

Le HTML, associé à des styles CSS, est un langage qui a beaucoup évolué, très rapidement. De ce fait, mélanger anciennes et nouvelles technologies ne font pas toujours bon ménage. Ici, l'ancienne technologie est la gestion des ancres, afin d'aider le visiteur à naviguer intra-page, alors que la nouvelle est l'utilisation d'un en-tête fixée, c'est à dire, toujours visible en haut de notre page et de notre navigateur.

Le problème est qu'avec un bloc fixé en haut de page, le contenu ne devient visible qu'après la hauteur du bloc. Hors les ancres déplacent le positionnement de la page, afin que l'ancre ciblée se trouve exactement en haut de la page. Du coup, avec notre en-tête, on ne voit plus le haut de notre bloc ancré.

L'astuce est simple, mais il fallait y penser. Le concept est de créer un autre bloc, placé avant notre bloc de contenu. Et de le définir sans hauteur. Voici le style à lui appliquer.

.anchor {height:0; font-size:0;}

Dans le doute, on va le rendre invisible, mais présent.

.anchor {height:0; font-size:0; visibility:hidden;}

Enfin, et c'est ici tout l'intérêt, il suffit de déplacer ce bloc invisible de la hauteur de notre en-tête vers le haut. Si par exemple, elle est de 80 pixels, voici le style complet.

.anchor {height:0; font-size:0; visibility:hidden; display:block; position:relative; top:-80px;}

Tout simplement.

 
 
Commentaires
Aucun commentaire pour le moment.

 

Poster un commentaire
En postant sur skymac.org, je m'engage à être courtois et à ce que mon message soit pertinent avec le sujet de l'article.
En outre, j'accepte, sans condition, que mon message soit refusé et supprimé si ces règles ne sont pas appliquées.
Ouvrir le panneau de gestion des cookies
Fermer le panneau
Ce site utilise des cookies pour assurer son bon fonctionnement. Il utilise aussi des cookies issues de services tiers permettant de proposer des fonctionnalités avancées. À tout moment, vous pouvez choisir quels services vous souhaitez activer ou refuser, afin de retirer votre consentement quant à l'utilisation des cookies.
 
Personnalisation des services
Vous êtes libre de choisir quels services vous souhaitez activer. En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l'utilisation de technologies de suivi nécessaires à leur bon fonctionnement. En retirant votre consentement pour certains de ces services, certaines fonctionnalités du site peuvent ne plus fonctionner.
Navigation du site  En savoir plus
Le site écrit un cookie de session permettant son bon fonctionnement et aidant à la navigation. Il ne peut être désactivé.
Utilisation : 1 cookie, enregistre l'identifiant de la session.
Durée de vie : Le cookie est présent pendant toute la session sur le site. Il devient obsolète après 24 minutes d'inactivité.
Obligatoire
Popup Média
Afficher des vidéos depuis Yoube ou Dailymotion.
 
Tout accepter Tout refuser Gérer