Forum TourDeJeu -> Troublant Problème De Z-index En Css

TourDeJeu, le réseau des jeux en ligne alternatifs : jeux web multijoueurs, jeux par forum. En savoir +

En ligne : + de 500 jeux, + de 7000 news, + de 26000 commentaires

Forum TourDeJeu · Règles du forum	Aide Recherche Membres
Bienvenue invité ( Connexion \| Inscription )	Recevoir à nouveau l'email de validation

Forum TourDeJeu -> La création et la gestion de jeux -> Programmer

Flux RSS des discussions du forum :

pour les joueurs, et

pour les créateurs et MJ

Troublant Problème De Z-index En Css

Suivre ce sujet | Envoyer ce sujet | Imprimer ce sujet

Sybler

Ecrit le : Dimanche 01 Juin 2008 à 01h49

Ouf

Groupe : Membre
Messages : 453

[Edit: Oups, a déplacer dans Design...]

Bon, mise en contexte:

J'ai une liste de messages. Chaque message est séparé en 2 colonnes, un peu comme un forum. À gauche, l'expéditeur et les destinataires ainsi que l'heure, à gauche le message.

Lorsqu'on passe par dessus un nom (expéditeur ou destinataire), une infobulle apparait par dessus une partie du message et indique l'image et la description du personnage.

Problématique:
L'info bulle passe bien par dessus le contenu du message immédiat, mais pas par dessus les messages suivants.

Solution tentée:
- J'ai essayé de mettre le z-index de l'infobulle à 9999;
- J'ai essayé de mettre chaque message en ordre décroisant de z-index. (si 20 messages par page, le message1 a un z-index de 20, le second de 19, etc.)

Rien à faire

Voici un peu de code, abrégé de contenu pour des raison de clarté.

HTML (répéter 19 autres fois pour les 19 message qui suivraient, en dés-incrémentant le z-index):

CODE

<div class="he_item" style="z-index:20;">
<div class="he_leftbar" id="gauche987">
<span style="float:left;">
De :
</span>
<div style="margin-left:50px;margin-top:5px;">
<div id="987_456">
<a href="#perso456" id="perso456">
NOM
<span style="margin-left:100px;" class="infobulle">
DESCRIPTION
</span>
</a>
</div>
</div>

<br />

<span style="float:left;">
A :
</span>
<div style="margin-left:30px;">
<div id="987_123">
<a href="#perso123" id="perso123">
NOM
<span style="margin-left:100px;" class="infobulle">
DESCRIPTION
</span>
</a>
</div>
</div>

<br /><span class="color_date">19/12/08 20h45</span>
</div>
<div class="he_rightbar" id="droite987">
MESSAGE
</div>
<div class="clearboth"></div>
</div>

CSS:

CODE

/* INFO BULE */
a span.infobulle, a div {
display: none;
visibility:hidden;
text-decoration:none;
width:0px;
}

a:hover {
background: none;
text-decoration:none;
}

a:hover span.infobulle, a:hover div {
visibility:visible;
width:400px;
display: inline;
position: absolute;
text-align: left;
text-decoration:none;
}

table.infobulle, div.infobulle, span.infobulle {
color: #FFDDAA;
width:400px;
border:1px solid #555599;
background-color:#000816;
font-size:8pt;
text-decoration:none;
font-weight: bold;
padding: 5px;
}

.clearboth{
clear:both;
}

.he_item{
margin: 5px auto 0px auto;
width:700px;
overflow:auto;
}
.he_leftbar{
float:left;
width:150px;

border:1px solid #555599;
background-color: #001632;
font-size:12px;
font-weight:bold;
text-align:left;
}
.he_rightbar{
float:left;
margin-left:5px;
width:535px;

border-top:1px solid #555599;
font-size:12px;
vertical-align: top;
text-align:justify;
}

WebDev en mode:
- Afficher les niveaux des éléments empilés
- Afficher les information topographiques

user posted image

Ps.: Je m'excuse si le problème est costaud, j'ai essayé de simplifier au maximum

--------------------

Sybler

Ecrit le : Dimanche 01 Juin 2008 à 03h10

Ouf

Groupe : Membre
Messages : 453

Bon, après avoir passé l'après midi et désespéré au point d'écrire un post, j'ai réussi (comme quoi c'est toujours quand on admet être perdu qu'on retrouve son chemin..)

Solution, pour les intéressés:
- Placer la <a> en position:relative
- Retirer le overflow:auto;
- et surement pleins d'autres changements qui font en sorte que maintenant ca marche (et que c'est un brin plus propre)

CSS

CODE

a.infobulle {
position:relative;
}

a.infobulle div {
display: none;
}

a.infobulle:hover div {
position: absolute;
display: block;
width:400px;

text-align: left;
text-decoration:none;
font-size:8pt;
font-weight: bold;
padding: 5px;
color: #FFDDAA;
border:1px solid #555599;
background-color:#000816;
}

.he_item{
margin: 5px auto 0px auto;
width:700px;
/*overflow:auto;*/
}
.he_leftbar{
float:left;
width:150px;

border:1px solid #555599;
background-color: #001632;
font-size:12px;
font-weight:bold;
text-align:left;
}
.he_rightbar{
float:left;
margin-left:5px;
width:535px;

border-top:1px solid #555599;
font-size:12px;
vertical-align: top;
text-align:justify;
}

HTML:

CODE

<div class="he_item" style="z-index:20;">
<div class="he_leftbar" id="gauche987">
<span style="float:left;">
De :
</span>
<div style="margin-left:50px;margin-top:5px;">
<div id="987_456">
<a href="#perso456" id="perso456">
NOM
<span style="margin-left:100px;" class="infobulle">
DESCRIPTION
</span>
</a>
</div>
</div>

<br />

<span style="float:left;">
A :
</span>
<div style="margin-left:30px;">
<div id="987_123">
<a href="#perso123" id="perso123" class="infobulle">
NOM
<div style="margin-left:100px;">
DESCRIPTION
</div>
</a>
</div>
</div>

<br /><span class="color_date">19/12/08 20h45</span>
</div>
<div class="he_rightbar" id="droite987">
MESSAGE
</div>
<div class="clearboth"></div>
</div>

--------------------

JFrançois	Ecrit le : Dimanche 01 Juin 2008 à 09h12
Newbie Groupe : Inscrits Messages : 1	Le z-index n'a de sens que lorsque le conteneur est en position absolue, voir relative... Foutue CSS hein

Sybler	Ecrit le : Dimanche 01 Juin 2008 à 20h27
Ouf Groupe : Membre Messages : 453	ouais, sauf que la position absolute est généralement par dessus la position relative non ? --------------------

« Sujets + anciens | Programmer | Sujets + récents »