var Phenix = function () {
Troll du Web depuis 1996

Une marge sur le « scroll » des ancres HTML

Voici une petite astuce pour avoir une marge, entre le « haut du browser » et l’emplacement réel de l’ancres, lorsque l’on clic sur une ancre.

  1. /**
  2.  * Appliquer une marge sur les ancres HTML c'est plus
  3.  * ergonomique.
  4.  */
  5. :target {
  6.     border-top: 75px solid transparent;
  7.     margin: -75px 0 0;
  8.     -webkit-background-clip: padding-box;
  9.     -moz-background-clip: padding;
  10.     background-clip: padding-box;
  11.     outline: none; /* Supprimer la outline disgracieuse de Chrome */
  12. }

:target est une sélécteur css bien supporté qui cible toutes les ancres. Du coup on lui ajouter une fausse marge.
L’avantage ce code, c’est qu’il va fonctionner même si l’ancre est dans un texte. Ce que n’est pas le cas de la majorité des techniques à base de display: block; et de :before.

Voir en ligne : offsetting an html anchor to adjust for fixed header
Un message, un commentaire ?
modération a priori

Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

Qui êtes-vous ?
Votre message
  • Pour créer des paragraphes, laissez simplement des lignes vides.