Utilisation de z-index dans mon cas ?
Papang
-
or3li3n Messages postés 212 Statut Membre -
or3li3n Messages postés 212 Statut Membre -
Bonjour à tous,
J'ai un petit soucis avec z-index moi aussi. Voici l'adresse de mon site (www.wowvaevictis.com), et j'aimerais que l'infobulle qui apparait quand on glisse le curseur sur les petites icones en dessous du menu soit en premier plan.
J'ai bien compris qu'il fallait utiliser "position: " mais je ne sais pas ou le placer. Est ce que quelqu'un pourrait m'éclairer s'il vous plaît ? Merci d'avance.
Papang.
J'ai un petit soucis avec z-index moi aussi. Voici l'adresse de mon site (www.wowvaevictis.com), et j'aimerais que l'infobulle qui apparait quand on glisse le curseur sur les petites icones en dessous du menu soit en premier plan.
J'ai bien compris qu'il fallait utiliser "position: " mais je ne sais pas ou le placer. Est ce que quelqu'un pourrait m'éclairer s'il vous plaît ? Merci d'avance.
Papang.
A voir également:
- Utilisation de z-index dans mon cas ?
- Code ascii de a à z - Guide
- Utilisation chromecast - Guide
- Télécharger gratuitement notice d'utilisation - Guide
- Gpu z - Télécharger - Informations & Diagnostic
- Index téléphonique - Guide
4 réponses
Bonsoir,
Alors merci pour ta réponse, mais j'aurais du préciser que j'ai déjà fait pas mal de test. Voici le CSS qui génère mon infobulle :
J'ai essayé de mettre un z-index moins important aussi dans le <div> qui se situe après aussi, mais rien n'y fait ... C'est le <div id="mainarea"> si je ne me trompe pas.
Merci de votre aide, et de votre patience :)
Papang.
Alors merci pour ta réponse, mais j'aurais du préciser que j'ai déjà fait pas mal de test. Voici le CSS qui génère mon infobulle :
a.infobulle {
position: relative;
color: black;
text-decoration: none;
/* border-bottom: 1px gray dotted; on souligne le texte */
}
a.infobulle span {
display: none; /* on masque l'infobulle */
}
a.infobulle:hover {
background: none; /* correction d'un bug IE */
cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.infobulle:hover span {
display: inline; /* on affiche l'infobullebulle */
position: absolute;
z-index: 500; /*on définit une valeur pour l'ordre d'affichage */
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
top: -20px; /* on positionne notre infobullebulle */
left: 20px;
background: white;
color: green;
padding: 3px;
border: 1px solid green;
border-left: 4px solid green;
}
J'ai essayé de mettre un z-index moins important aussi dans le <div> qui se situe après aussi, mais rien n'y fait ... C'est le <div id="mainarea"> si je ne me trompe pas.
#mainarea {
background: #DDDDDD;
padding: 5px 10px 15px 10px;
margin: 0px;
position: relative;
z-index: 5;
}
Merci de votre aide, et de votre patience :)
Papang.
