[Résolu] Problèmes d'ancres avec Chrome, Safari et Opera

Bonjour à toutes et à tous.

Mes pages comportent du texte avec des notes, regroupées plus bas dans la page. Les appels de notes sont ainsi codés :

<a id="retour1"></a><a href="#note1">(1)</a>

Afin de pouvoir revenir au texte, le code de la note est le suivant :

<a id="note1">1</a>TEXTE DE LA NOTE<a href="#retour1">retour</a>

Jusque là, aucun problème.

Pour des raisons esthétiques, j'ai mis une barre de 23 pixels en haut de mes pages. Afin que les ancres ne soient pas cachées sous cette barre, j'ai indiqué dans la page css :

:target {
padding-top: 25px;
margin-top: -25px;
}

L'astuce fonctionne parfaitement avec Firefox, IE et Edge. En revanche, pour Chrome, Safari et Opéra, ça ne fonctionne que dans un sens. La première ligne de la note appelée apparaît bien sous la barre, mais l'ancre de retour au texte est cachée sous la barre, comme si, dans le sens note -> texte, ces navigateurs ne prenaient pas en compte l'élément target, alors qu'ils le prennent parfaitement en compte dans le sens texte -> note, et que les deux codages m'apparaissent tout à fait identiques. Bref, ça marche du haut vers le bas, mais pas du bas vers le haut.

Il manque certainement quelque chose, peut-être trois fois rien, mais je m'arrache les cheveux en essayant vainement de trouver la soluce.

Un immense merci à celles et ceux qui auraient une solution, un début de solution, ou même d'explication.

Cordialement.
Modifié par PMV (23 Apr 2019 - 06:46)

Bonjour, ne cherchez plus, je n'ai plus de cheveux mais j'ai trouvé la solution.

Il faut mettre l'ancre après l'appel de note, et non avant. Ainsi, au lieu d'écrire :
<a id="retour1"></a><a href="#note1">(1)</a>

il faut écrire :
<a href="#note1">(1)</a><a id="retour1"></a>

et ça fonctionne sur tous les navigateurs. Ce n'était pas un problème de CSS, mais plutôt de HTML. Bête comme l'œuf de Christophe Colomb.

Merci à celles et ceux qui se sont penchés sur le problème.

Cordialement.

Ton code n'est pas bon, il faut mettre tous les attributs sur la même balise :

<a id="note1" href="#retour1">(1)</a>

Mettre une balise <a> n'a de sens que si tu veux faire un lien. Si tu t'en sers pour formater du texte ou pour mettre un id pour faire une ancre, utilise une autre balise comme <span> ou <div>

<span id="note1">1</span>TEXTE DE LA NOTE

Modifié par Depassage (23 Apr 2019 - 10:30)