z-index

[Perrine]

Bonjour à tous,

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 :

<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>

Extrait du CSS pour ces 2 balises :

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;
}

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 :

<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>

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)

p.up{
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.

Modifié 29 Octobre 2004 par Azon

[Sebastien]

Il me semble que z-index ne marche que pour les éléments positionné, ca expliquerait ton probleme

[LaurentDenis]

Sebastien a tout à fait raison. Il te suffit en fait de positionner ton .up pour pouvoir utiliser le z-index:

p.up{
margin-bottom:-59px;
margin-right:8px;
text-align:right;
padding-top:20px;
position: relative;
z-index: 100;
}

cela dit, cette solution pour placer le titre et le lien Haut côté à côte présente un risque mineur: selon la taille des caractères modifiées par la configuration de l'utilisateur, le déplacement de ton .up ne correspondra plus à la hauteur de ligne du titre, et ton alignement horizontal sera perturbé.

[Perrine]

Merci beaucoup, ça marche

Effectivement Laurent, je suis embêtée car j'ai ce problème dans toutes les pages.

Dès que je grossis un peu trop les caractères, certains mots se chevauchent, les div se décalent ...

Je ne sais pas encore comment le gérer. Si je revois complètement ma CSS ou si je mets une CSS à disposition avec moins de graphique et qui prennent 100% de la largeur du body.