Question d'origine :
Bonjour,
Certains sites (prenons l'exemple de celui de l'ANSSI) intègrent des ancres pour une meilleure navigation (prenons l'exemple du glossaireglossaire). Malheureusement, il arrive que le développeur ajoute un bandeau en haut du site et oublie d'ajouter une marge de la même taille au-dessus des ancres (qui permettraient de ne pas masquer le contenu pointé)…
Ma question est la suivante : est-il possible pour un internaute de partager un lien d'ancrage (comme celui précédemment indiqué) en ajoutant un paramètre dans l'URL afin de forcer cette marge lors d'un clic sur le fameux lien ?
Merci pour votre excellent service !
Réponse du Guichet
bml_ecm
- Département : Espace numérique
Le 13/03/2020 à 08h56
Bonjour,
Une page Web est un
A l’intérieur de ce document structuré, le développeur qui créé la page, ajoute des
Le langage HTML est un standard publié par le
Dans l’exemple que vous donnez, on voit le code de l’ancre avec la balise « <a> ».
Le lien est https://www.ssi.gouv.fr/particulier/glo ... pouet-toot donc doit permettre d’aller directement au mot pouet-toot en utilisant l’ancre codée de la façon suivante« <a name="pouet-toot"> »
Cependant, on n’accède pas directement au mot « Pouet-Toot », qui est caché sous un bandeau apparaissant de manière fixe en haut de page. Il faut donc déplacer légèrement la souris vers le bas de la page pour voir apparaitre la définition du mot recherché.
Pour résoudre ce problème, il nous semble qu’il faille passer par une modification du code. Nous n’avons pas trouvé de paramètre qu’il serait possible de rajouter dans l’URL afin de décaler le point d’ancrage en fonction de la taille du bandeau.
Dans point de vue informatique, la solution consiste à placer les ancres de manière relative par rapport au bandeau. Il faut ainsi décaler le point d’ancrage d’une taille donnée (identique à la taille du bandeau), et ce paramètre ne peut pas se définir dans l’URL.
Dans le code, cela fonctionne de la façon suivante :
Donnez un nom à votre ancre.
<a class="anchor" id="top"></a>
Vous pourrez ensuite positionner votre nom d’ancre en fonction de votre bandeau.
a.anchor {
display: block;
position: relative;
top: -250px;
visibility: hidden;
}
De nombreuses ressources relatives aux standards du Web sont disponibles à la Bibliothèque Municipale de Lyon, par exemple HTML5 et CSS3 de Christophe Aubry ou Premiers pas en CSS3 & HTML5 de Francis Draillard.
Les espaces numériques de la BmL mettent à disposition des ressources de formation, notamment celui de la bibliothèque de la Part-Dieu : cours en ligne HTML5 et CSS …mais aussi tout un ensemble d’autres ressources numériques.
Enfin, de nombreuses ressources web sont disponibles, par exemple sur Open Class Room.
DANS NOS COLLECTIONS :
Ça pourrait vous intéresser :
L'I.A remet-elle en question la transition bibliographique...
Commentaires 0
Connectez-vous pour pouvoir commenter.
Se connecter