28173 sujets

CSS et mise en forme, CSS3

[Pas Ok 11/11] Problème d'affichage d'une infobulle

Bonjour,

J'ai créé une petite infobulle relativement simple en CSS qui affiche un span au passage de la souris mais sous IE ça foire pour je ne sais quelle raison :s
Si vous pouviez m'aider Smiley smile
J'ai créé une page pour qu'on puisse visualiser le problème (sous FF c'est bon donc à regarder sous IE)
http://www.oldaryon.net/exemple-info.html

Merci beaucoup
Modifié par rels (11 Nov 2007 - 11:34)
Bonsoir,

Oui c'est déjà une partie de réglé et je t'en remercie mais il y a toujours le problème de la bulle qui se colle en haut à gauche de l'image...
Si j'utilise top et left, ça va me décaler la bulle sous FF alors qu'elle est bien mise Smiley decu

Merci
Bonjour,
J'ai tenté par tout les moyens de corriger ce bug mais je n'y arrive pas, sous FF on a donc la bulle qui se met à 2em à partir de je ne sais où et sous IE on a 2em à partir du haut gauche...
J'aimerais avoir les deux bulles à 2em du haut gauche sous les deux navigateurs.
J'ai réussi à avoir le résultat sur les deux navigateurs mais jamais en même temps, il y en a toujours un sous lequel ça ne va pas...

Le code CSS :

/*** De la disposition horizontale des images ***/

#sac ul {
	padding:0;
	margin:0;
	list-style:none;
}

#sac li {
	padding:0px;
	margin:0px;
	display:inline;
}

/*** De l'infobulle ***/

a.sacDetails {
    position:relative; 
    z-index:24;
	background-color:#ccc;
    color:#000;
    text-decoration:none;
}

a.sacDetails:hover {
	z-index:25;
	background-color:#FFF
}

a.sacDetails span {
	display: none;
}

a.sacDetails:hover span { 
	display:block; 
	position:absolute;
	width:15em;
	border:1px solid #6699cc;
	background-color:#eeeeee;
	color:#6699cc;
	text-align: justify;
	padding:1px;
	top:2em;
	left:2em;
}


Code HTML d'une image avec sa bulle :


<div id="sac">
  <ul>
    <li>
      <a href="/bag/porter/286.html" class="sacDetails">
      <img src="img/item/195.jpg" />
      <span><b>Potion de vie mineure (18)</b><br/>Vie : +100<br/>Niveau requis : 1<br/><br/><img src="img/shortBag.jpg" usemap="#act286" style="border:0;margin:0;padding:0;"/><map name="act286"><area shape="rect" coords="0,0,20,20" href="/bag/supprimer/286.html" alt="Supprimer" /><area shape="rect" coords="20,0,40,20" href="/bag/ranger/286.html" alt="Ranger" /></map></span>
       </a>
     </li>
  </ul>
</div>


Un tout grand merci Smiley smile
Salut,

Il faudrait peut être placer ton a.sacDetails en display: block; Smiley cligne
déjà pour qu'il ait la possibilité de contenir ton <span> lui même en display: block (une balise de type inline ne peut pas contenir de balise block) et lui donner un width qui avec son positionnement en relative sera le référent de ton positionnement en absolute... Sinon si tu le laisses en display: inline (valeur par défaut), il n'a pas de dimensions donc ton bloc référent ben c'est n'importe quoi
Smiley biggrin
Hello,
Je viens d'essayer de mettre en application ce que tu m'as expliquer (pas eu le temps cette semaine Smiley sweatdrop ) mais c'est pas encore ça, le relative du hover pour le span fait tout foirer Smiley decu

Alors mon nouveau CSS :
/*** Info Bulle - Sac ***/

a.details {
    position:relative; 
    z-index:24;
	background-color:#ccc;
    color:#000;
    text-decoration:none;
	display:block;
}

a.details:hover {
	z-index:25;
	background-color:#FFF
}

a.details span {
	display: none;
}

a.details:hover span { 
	display:block; 
	position:relative;
	margin-top:2px;
	width:15em;
	border:1px solid #6699cc;
	background-color:#eeeeee;
	color:#6699cc;
	font-size:12px;
	text-align: justify;
	padding:1px;
	opacity:0.85;
}


Il y a aussi un décalage de l' "Equipement" qui foire Smiley decu

Je sens qu'on touche au but Smiley lol

Merci pour votre aide !
Modifié par rels (09 Nov 2007 - 17:14)
Salut,

Mwoui... Si tu lisais les posts en réponse Smiley cligne 

a.details {
    position:relative; 
    z-index:24;
	height: 50px;
	width: 50px;
	background-color:#ccc;
    color:#000;
    text-decoration:none;
	display:block;
}

a.details:hover {
	z-index:25;
	background-color:#FFF
}

a.details span {
	display: none;
}

a.details:hover span { 
	display:block; 
	position:absolute;
	height: 75px;
	left: 0;
	bottom: -90px;
	width:15em;
	border:1px solid #6699cc;
	background-color:#eeeeee;
	color:#6699cc;
	font-size:12px;
	text-align: justify;
	padding:1px;
	opacity:0.85;
}


Et même avec un commentaire conditionnel sur la valeur du bottom pour ie6 tu devrais arriver au même rendu ... Smiley langue
Bonsoir et merci,

Oui oui j'ai lu, essayé de comprendre mais certains éléments m'ont dépassés...
J'ai fait exactement comme tu m'as dis, mais je reste avec un problème c'est que le nombre d'emplacement est variable et donc le "height" du sac va changer et que donc l'équipement ne s'affichera pas au bon endroit...
Je sais pas si je suis très clair Smiley confus
Re,

Je m'en doutais un peu,
Bon si tu as un height variable, cette méthode ne te permet pas pour un point de vue pratique de positionner ta bulle au dessus ou en dessous de ton lien. Il te reste donc droite ou gauche avec le soin de laisser un espace suffisant entre ta bulle et le lien initial pour stopper le rollover en cas de survol horizontal de tes items.( ici 15.7em)


a.details:hover span { 
	display:block; 
	position:absolute;
	left: -15.7em;
	top: 0px;
	width:15em;
	border:1px solid #6699cc;
	background-color:#eeeeee;
	color:#6699cc;
	font-size:12px;
	text-align: justify;
	padding:1px;
   -moz-opacity:0.85; /*Firefox*/
    filter : alpha(opacity=85);/*Internet Explorer*/
    opacity:0.85; /*Safari, Opera   et autres (s'ils gèrent)*/
}


PS: Tant qu'à être non valide, je t'ai ajouter de quoi gérer l'opacité pour ie, il m'en manque un que j'utilise rarement Smiley cligne
Merci Ghost,

A vrai dire je ne peux pas faire gauche et droite car, je ne sais pas si tu as remarqué mais il y a deux images dans ma bulle qui sont cliquablent... Et c'est pour ça que je tenais à une bulle en CSS sinon j'aurais pris un bête bulle en JS qui ne pose pas trop de problèmes...
Sinon peut être y a-t-il une solution en JS que je n'ai pas trouvée car il faut pouvoir se rendre dans la bulle et en ressortir...

J'espère être clair...

Merci
Sujet clos
Aller à