Dans cette page, j'ai plusieurs <h2 > avec pour chacun, un retour en haut de page.
Extrait du code pour le premier < h2 > de la page :
CODE
<a name="chap1"></a><h2>Chapitre 1 - Préambule</h2>
<p class="up"><a href="#up" title="Atteindre le haut de la page">haut</a></p>
<p class="up"><a href="#up" title="Atteindre le haut de la page">haut</a></p>
Extrait du CSS pour ces 2 balises :
CODE
h2{
font-size:0.8em;
color:#E3CF88;
padding:5px 50px 5px 10px;
background-color:#300C0E;
margin:40px 0px 20px 0px;
}
p.up{
margin-top:-42px;
margin-right:8px;
text-align:right;
}
font-size:0.8em;
color:#E3CF88;
padding:5px 50px 5px 10px;
background-color:#300C0E;
margin:40px 0px 20px 0px;
}
p.up{
margin-top:-42px;
margin-right:8px;
text-align:right;
}
Or, d'un point de vue sémantique, me suis rendue compte que c'était quand même mieux si le lien vers le haut de la page était placé avant le < h2 > dans la page.
Donc, ça donne ça :
CODE
<p class="up"><a href="#up" title="Atteindre le haut de la page">haut</a></p>
<a name="chap1"></a><h2>Chapitre 1 - Préambule</h2>
<a name="chap1"></a><h2>Chapitre 1 - Préambule</h2>
Je suis obligée de modifier la classe p.up sinon le lien "haut" est décalé vers le haut. Ca donne donc ça : (je rajoute un padding-top sinon le h2 est trop collé au paragraphe précédent)
CODE
p.up{
margin-bottom:-59px;
margin-right:8px;
text-align:right;
padding-top:20px;
}
margin-bottom:-59px;
margin-right:8px;
text-align:right;
padding-top:20px;
}
Bien sûr, ça marche sur firefox ... mais sur IE, le lien "haut" passe dessous le h2 est on ne le voit plus. J'ai essayé de rajouter un z-index mais décidement, je crois que je n'ai pas compris comment l'utiliser car ça ne marche pas.
J'ai mis en ligne les 2 fichiers modifiés donc ne vous étonnez pas si vous voyez tous les liens "haut" à partir du 2ème, décalés vers le bas.