Infobulles en CSS écrasées sur le bord de la div

Bonsoir,

Souhaitant faire sur mon site des petites infobulles apparaissant au survol, j'ai suivi ce tutoriel.
Au début, aucun problème. Sauf que quand j'ai voulu centrer le span (infobulle) par rapport au lien survolé, le span du premier de ces liens s'est retrouvé écrasé contre le bord de la div parent.

http://nsa28.casimages.com/img/2011/07/01//110701073941330540.png

Y'a t'il un moyen de corriger ce problème sans avoir à décaler les liens vers la droite ? J'ai essayé avec les z-index mais sans succès.

#skills a.info:hover span{ 

    display:block; 
    position:absolute;
    top:2em; left:-6.7em; width:15em;
    border:1px solid #000000;
    background-color:#ffffff; 
    color:#000000;
    text-align: justify;
    font-weight:none;
    padding: 5px;
    font-family : Tahoma;
    font-size : 11px; 
    text-align : center;
   /* z-index : 3;*/
    
    }
    

Merci !
Modifié par osef_ (01 Jul 2011 - 20:01)

Salut,

#skills a.info:hover span{  
 
    display:block;  
    [b]position:absolute;[/b]
    top:2em; left:-6.7em; width:15em; 
    border:1px solid #000000; 
    background-color:#ffffff;  
    color:#000000; 
    text-align: justify; 
    font-weight:none; 
    padding: 5px; 
    font-family : Tahoma; 
    font-size : 11px;  
    text-align : center; 
   /* z-index : 3;*/ 
    } 

Faudrait regarder de ce côté là, il n'y a aucun décalage de spécifié par rapport à la gauche, donc il est normal que ton span se place à gauche du dernier parent positionné. A savoir que là on sait pas trop car tu ne nous as pas vraiment aidé en nous donnant plus de code (page html ET css complète, ou mieux une page en ligne).

<div id="skills">
        <ul>
          <li><a href="" class="info"><img src="images/Logos/logo_photoshop.png" alt="Photoshop"/><span><b>Adobe Photoshop</b><br/>Retouche numérique<br/>Photographie<br/>Webdesign</span></a></li>
          <li><a href="" class="info"><img src="images/Logos/logo_illustrator.png" alt="Illustrator"/><span><b>Adobe Illustrator</b><br/>Illustration<br/>P.A.O<br/>Typographie</span></a></li>
          <li><a href="" class="info"><img src="images/Logos/logo_indesign.png" alt="InDesign"/><span><b>Adobe InDesign</b><br/>P.A.O</span></a></li>
          <li><a href="" class="info"><img src="images/Logos/logo_premiere.png" alt="Premiere"/><span><b>Adobe Premiere Pro</b><br/>Edition/Montage vidéo</span></a></li>
          <li><a href="" class="info"><img src="images/Logos/logo_dreamweaver.png" alt="Dreamweaver"/><span><b>Adobe Dreamweaver</b><br/>Webdesign<br/>Programmation</span></a></li>
          <li><a href="" class="info"><img src="images/Logos/logo_flash.png" alt="Flash"/><span><b>Adobe Flash</b><br/>Webdesign<br/>Programmation AS2/AS3</span></a></li>
          <li><a href="" class="info"><img src="images/Logos/logo_prog.png" alt="Programmation"/><span><b>Programmation</b><br/>XHTML/CSS<br/>PHP<br/>JavaScript</span></a></li>
          <li><a href="" class="info"><img src="images/Logos/logo_html5.png" alt="HTML5"/><span><b>Programmation<br/> [Work In Progress..]</b><br/>HTML5/Javascript<br/>Canvas<br/>Webfonts</span></a></li>
          <li><a href="" class="info"><img src="images/Logos/logo_3dsmax.png" alt="3DSmax"/><span><b>Autodesk 3DSMax</b><br/>Images de synthèse 3D<br/>Architecture</span></a></li>
          <li><a href="" class="info"><img src="images/Logos/logo_modo.png" alt="Luxology Modo"/><span><b>Luxology Modo</b><br/>Images de synthèse 3D<br/>Architecture</span></a></li>
        </ul>
        <p>

				</p>
      </div>

#skills {
margin-top : 50px;
background : url(images/competences.png) no-repeat;
padding-top : 80px;
padding-bottom : 10px;
}

#skills li {
float : left;
margin : -10px 10px 0 0;
  
}

#skills ul {
list-style: none outside none;
margin : 15px 30px 0 0;

}

#skills a.info{
    position:relative; 


    color:#000;
    text-decoration:none;
    }

#skills a.info:hover{
z-index:25; 

}

#skills a.info span{
display: none;
}

#skills a.info:hover span{ 
/*le contenu de la balise span ne 
sera visible que pour l'état a:hover */
 display:block; 
 position:absolute;
    
    
    top:2em; left:-6.7em; width:15em;
    border:1px solid #000000;
    background-color:#ffffff; 
    color:#000000;
    text-align: justify;
    font-weight:none;
    padding: 5px;
    font-family : Tahoma;
    font-size : 11px; 
    text-align : center;
    z-index : 3;
    
    }
    

Mon left : -6.7em ne décale pas par rapport à la gauche ?

bon déja, ca

list-style: none outside none;

ca sert à rien. none ca suffit on a pas besoin de savoir que l'indentation sera en dehors du bloc vu que tu lui dit de pas en faire...

Ensuite, tu n'aurais pas, à tout hasard, un bloc situé à gauche qui cacherait cette info bulle et qui serait avec un z-index plus fort ?

sinon essaye de mettre un overflow:visible sur #skill, #skill ul
pour voir

Je suis étonné que le absolute ne suffise pas..
Modifié par ptitvincent (11 Jul 2011 - 14:25)

Merci pour le tuto, ça m'a aidé beaucoup pour mon projet.

J'ai essayé overflow:visible; sur #skills, #skills ul et #skills a.info:hover span, mais ça ne change rien.

Ensuite non je n'ai pas de bloc sur la gauche, l'espace est dû à un width fixé sur la div qui "contient" les éléments de mon site. Je pense que le problème vient de là, que le span se bute à la limite de la div conteneur. Mais dans ce cas, c'est bizarre qu'un z-index sur le span n'arrange pas le problème ...
J'ai peur de toucher au width, sous peine de décentrer tout mon site.

passe tout le code s'il te plait

EDIT :Résolu
Modifié par osef_ (22 Jul 2011 - 23:42)

Personne ?
Modifié par osef_ (22 Jul 2011 - 20:08)

Ok bah voila c'est résolu. C'est grâce à ma chérie (qui sait réfléchir, elle) qu'on a trouvé la solution : décaler le ul de quelques px. Tout simplement.