En CSS, il faut que l'élément qui possède l'id ai un padding correspondant à la hauteur de header. Mais en fonction de ton design ça peut être compliqué à être mis en place (98% des cas du coup ...)
L'autre solution consiste à faire du JS. En gros refaire le comportement de l'ancre mais au lieu de position le scroll à niveau de l'ancre, ce sera la position de l'ancre plus la hauteur du header.
La seconde solution sera efficace à 100%, mais le travail est plus long (penser toute les situations) et il faut passer par le Javascript.
Pour le JS, on verra plus tard. Je n'en suis pas encore là.
Pour le CSS. Je n'ai pas mon ordi près de moi pour tester mais, a priori, si je met un padding sur mon id, je vais avoir un décalage dans ma page. (mon ancre est en milieu de page, pas au sommet).
C'est en effet mon problème. J'ai corrigé mon post initial qui n'était pas clair.
J'avais utilisé padding comme le conseille Toutoclic plus haut. Il me convient bien pour d'autres raisons.
Merci pour ce "sticky" mais ça ne résout pas mon problème. Cela permet à ma section de s'afficher sous le header par défaut mais lorsque je clic sur le lien vers la même page (ou une autre d'ailleurs), l'ancre se positionne toujours sous le header.
- Edité par Alain Chavenon 12 janvier 2021 à 17:51:11
Top @NadriJS je ne connaissais pas non plus, belle trouvaille !
Je pense que dans certaine situation ça peut être problématique (toujours le cas quand on modifie le comportement du scroll) mais ça ouvre pas mal de possibilités avant de passer sur du JS.
Puis mon ancre avec un class (je devrais donc toutes les identifier ainsi) :
<h2 class="lien_ancre" id="nom_ancre">Texte</h2>
Et le CSS
.ancres {scroll-margin-top: 200px;}
Sauf que mon éditeur (NotePad++) ne me le "prends" pas. Il comprend scroll mais pas scroll-margin-top.
Ca à l'air d'être un autre problème ...
En attendant, je me débrouille avec les margin/padding mais si vous avez encore un peu de temps pour me conseiller, ce serait chouette. Je n'aime pas rester sur un truc que je n'ai pas compris .
Oui, c'est bien ce que j'ai fait comme dans ton exemple. D'ailleurs, très pratique ton site.
Mais je ne peux pas le tester car dans mon éditeur, la propriété scroll-margin-top ne marche pas. Comme d'autres d'ailleurs.
Notepad ne me la donne même pas dans la liste de choix (il s'arrête à scroll) et si je l'écris, la coloration syntaxique ne s'applique pas.
Tu saurais pourquoi ?
Désolé de paraître bizarre mais notepad++ the sert juste a taper ton Code, ce n'est pas un compilateur, qu'il reconnaisse ton code ou pas n'est pas le plus important. Lance le navigateur et voit si ça marche
Scroll-margin fonctionne très bien pour résoudre ce problème qui, apparemment, embête bcp de monde.
Cette propriété n'était pas prise en compte par Notepad mais marche très bien sur Visual Code. Sur https://developer.mozilla.org/, dans les spécifications, elle a un état de "Candidat au statut de recommandation". Peut-être un rapport ? En tout cas, maintenant, ca marche.
La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]
La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]
my website https://www.jsonformatting.com
La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]
La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]
La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]
Pas d'aide concernant le code par MP, le forum est là pour ça :)