[Résolu] Ancre sous mon menu.

Ça fait un bout que je n'ai pas touché à la programmation et ce n'est plus très facile pour moi de m'y retrouver (et étant donné que j'ai 61 ans, que je prends plusieurs médicaments qui affectent mes capacités cognitives et qu'il me reste moins de 2 ans à vivre, je ne veux pas disons, sans vouloir insulter qui que ce soit, "perdre mon temps" à reprendre quasiment à zéro ce que je comprenais assez bien il y a une quinzaine d'années alors que j'avais humblement essayé d'avoir une petite cie de création de sites web comme hobby pendant que j'avais un travail à temps plein qui me bouffait beaucoup de temps et d'énergie (très mauvaise idée mettons) .

Oui, je sais, il y a bien 4 erreurs qui font que mon site ne valide pas, mais j'ose espérer que ça n'intervient pas sur le problème que j'ai.
Cela dit, le seul but de ce site étant d'essayer de vendre en bloc ma collection de BD avant de mourir, je l'effacerai donc à tout jamais lorsque ce sera fait. Il ne s'agit donc que d'un moyen simple de présenter ma collection à d'éventuels libraires spécialisés dans ce genre de produit.

Bref, j'ai fait des ancres pour se retrouver dans la page et tout fonctionne à ce niveau. Ce qui ne fonctionne pas, c'est que les ancres passent sous mon menu et je ne sais pas comment faire en sorte pour que ce ne soit pas le cas.

Je vais mettre l'adresse de mon site et l'effacerai de ce forum lorsque j'aurai vendu mes bd afin de ne pas garder sur le forum un lien qui ne sera plus valide.
Ma collection de BD
Modifié par largowin (12 Jun 2023 - 00:34)

C'est pas super clair. Tu veux que ton menu ne disparaisse pas ou c'est autre chose ?

Je veux que lorsque je clique sur une ancre, l'endroit où l'ancre me fait arriver dans la page ne soit pas caché par mon menu.
J'aimerais donc pouvoir décaler chaque ancre vers le bas afin que le texte ne soit pas caché.

Bonsoir. Ce sujet a été abordé ici même récemment et Mathieuu en a donné une excellente réponse.

Merci, mais ce n'est pas ça que je cherche à faire. Et ce que je veux faire, ça concerne tous les éléments de tous les onglets de mon menu. C'est certainement quelque chose à modifier dans la CSS plutôt que d'ajouter du javascript.

Par exemple, je passe ma souris sur l'onglet R-T et je clique sur Thorgal. Ça m'amène à cet endroit dans la page. On peut voir que le mot Thorgal est caché:

.

Ce que je veux, c'est arriver au même endroit, mais que le mot Thorgal (et les 2 lignes qui suivent ce mot) ne soit pas caché par mon menu. Comme ça:

Et bien, par exemple, il faudrait modifier les titres h2 comme ceci :

<h2>Ian<span id="ian"></span></h2>

Et donner un rembourrage en hauteur à l'ancre/span avec un padding-top ; celui-ci sera ajusté afin que l'ancre soit positionnée juste en dessous du menu lorsqu'elle est invoquée :

h2 span {
    padding-top: 3em;
}

\ô/
j'étais tombé sur : Ancre cachée par un menu en position:fixed qui utilise un pseudo-élément :before avec la pseudo-classe :target pour décaler le contenu sous le menu.

Pour ma part j'ai utilisé

scroll-margin-top

@Dave-Hiock : Mais oui ! Quelle idée j'ai eu ? Un pseudo élément est bien plus intéressant que de rajouter un span dans le HTML.

Quant à toi, @kerlutinoec, tu m'as carrément tué avec ta solution, elle est géniale, je ne connaissais pas.

C'est l'un des intérêts d'intervenir sur ce forum : même quand on cherche à aider du monde on apprend des trucs pour soi-même.

Par contre pour ta peinture, je n'ai pas pu t'aider, mon pinceau n'était pas valide.

Merci à vous tous pour votre aide!

Je vais choisir la méthode trouvée par Dave-Hiock qui est très facile à faire, car celle de kerlutinoec ne fonctionne pas avec la version 13.1.2 de Safari que j'ai (c'est la plus récente que je peux installer avec mon OS).

largowin a écrit :
Merci à vous tous pour votre aide!

Je vais choisir la méthode trouvée par Dave-Hiock qui est très facile à faire, car celle de kerlutinoec ne fonctionne pas avec la version 13.1.2 de Safari que j'ai (c'est la plus récente que je peux installer avec mon OS).

J'avais remarqué ça. En fait, à l'époque j'avais rajouté en plus un margin-top juste pour Safari.

h2 { scroll-margin-top: 50px; margin-top: 50px; }

Oui mais du coup ce compromis décale la mise en page. C'est pour cela que l'élément supplémentaire vide, ou mieux, le pseudo-élément, est une bonne solution intermédiaire. En attendant un support large de ta solution "scroll-margin-top" que j'ai pour ma part déjà adopté (elle est quand-même déjà très bien supportée).