Forum TourDeJeu [Powered by Invision Power Board]

Version imprimable du sujet
Cliquez ici pour voir ce sujet dans son format original

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

Ecrit par: Sybler Dimanche 01 Juin 2008 à 01h49

[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

Ecrit par: Sybler Dimanche 01 Juin 2008 à 03h10

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>

Ecrit par: JFrançois Dimanche 01 Juin 2008 à 09h12

Le z-index n'a de sens que lorsque le conteneur est en position absolue, voir relative...
Foutue CSS hein

Ecrit par: Sybler Dimanche 01 Juin 2008 à 20h27

ouais, sauf que la position absolute est généralement par dessus la position relative non ?