CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:  Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! | |  Ito 
{ Membre }
 Messages : 54
 | Bonjour les copains,
J'ai encore rencontrée un petit problémes en essayant de construire une infobulle à introduire dans un sujet. Affaire très délicate selon moi. Alors ;
- Spoiler:
Alors dèjà, nous avons l'apparition d'une deuxiéme "bulle" indésirable, qui casse tout le système, & puis le fond de la bulle n'a pas de couleur, elle est transparente. (Deuxième cas réglée.)
Alors code CSS ;
- Spoiler:
a.imginfo {
position:relative;
}
a.imginfo span {
display:none;
}
a.imginfo:hover {
z-index: 999;
background: none; /* correction d'un bug IE */
}
a.imginfo:hover span {
display: block; /* ceci affiche l'infobulle */
position: absolute;
background:#ffffff;
border: 3px solid dimgray;
border-left: 3px solid dimgray;
-moz-border-radius:10px;
left:15px;
padding:3px;
position:absolute;
top:5px;
width:120px;
}
& Code HTML :
- Spoiler:
- Code:
-
<a class="imginfo"><img src="http://s2.noelshack.com/old/up/image_13-9565fefb95.png" alt="" border="0"> <span> [color=Dimgrey] [justify] [font=Tahoma] [size=9]Machin chouette est un chouette bonhomme il connait machin depuis un laps de temps, d'ailleurs il font encore parfois crac crac boum en cachette. [/size][/font] [/justify][/color] </span></a>
Merci d'avance ~ | | |
|  | | Wayumi
{ Membre }
Messages : 88
| Je crois mais comme je suis débutant je te conseille pas de m'écouter mais je pense c'est à cause du "span" dans ton code css essaye de retiré. | | |
| | | | Radimir
{ Membre actif }
 Messages : 459
| Bonsoir ! Merci Wayumi pour ton aide et oui c'est bien ça , c'est le span qu'il faut enlever , ce qui donne =) - Code:
-
<a class="imginfo"><img src="http://s2.noelshack.com/old/up/image_13-9565fefb95.png" alt="" border="0"> [color=Dimgrey] [justify] [font=Tahoma] [size=9]Machin chouette est un chouette bonhomme il connait machin depuis un laps de temps, d'ailleurs il font encore parfois crac crac boum en cachette. [/size][/font] [/justify][/color] </a> | | |
| | | | Ito
{ Membre }
Messages : 54
| Merci beaucoup. Par contre, je rencontre un autre problème, l'infobulle n'est plus collée à la case. =/
- Spoiler:
| | |
| | | | Radimir
{ Membre actif }
Messages : 459
| Il faut éditer les valeurs qui la mettent en place à savoir le top qui est à 5 px dans notre cas Test With this : [Top] - Code:
-
a.imginfo:hover span {
display: block; /* ceci affiche l'infobulle */
position: absolute;
background:#ffffff;
border: 3px solid dimgray;
border-left: 3px solid dimgray;
-moz-border-radius:10px;
left:15px;
padding:3px;
position:absolute;
top:3px;
width:120px;}
|
Dernière édition par Radimir le Ven 03 Déc 2010, 18:40, édité 1 fois | |
| | | | Ito
{ Membre }
Messages : 54
| | | | | Radimir
{ Membre actif }
Messages : 459
| Fallait modifier la taille pour avoir ce que tu veux , mais ce n'est pas grave =) , dis moi si cela te va ^^ - Code:
-
a.imginfo:hover span {
display: block; /* ceci affiche l'infobulle */
position: absolute;
background:#ffffff;
border: 3px solid dimgray;
border-left: 3px solid dimgray;
-moz-border-radius:10px;
left:15px;
padding:3px;
position:absolute;
top:-5px;
width:120px;} | | |
| | | | Ito
{ Membre }
Messages : 54
| Merci ça marche  . Sauf que, sans raison apparente, ils se mettent (les icones) l'un en-dessous des autres. Il n'y a pourtant pas de br ni un nombre incalculable d'espace. êé - Spoiler:
- Code:
-
<a class="imginfo"><img src="http://s2.noelshack.com/old/up/image_13-9565fefb95.png" > [color=Dimgrey] [justify] [font=Tahoma] [size=9]Machin chouette est un chouette bonhomme il connait machin depuis un laps de temps, d'ailleurs il font encore parfois crac crac boum en cachette. [/size][/font] [/justify][/color] </a> <a class="imginfo"><img src="http://s2.noelshack.com/old/up/image_13-9565fefb95.png"> [color=Dimgrey] [justify] [font=Tahoma] [size=9]Machin chouette est un chouette bonhomme il connait machin depuis un laps de temps, d'ailleurs il font encore parfois crac crac boum en cachette. [/size][/font][/justify][/color] </a> <a class="imginfo"><img src="http://s2.noelshack.com/old/up/image_13-9565fefb95.png"> [color=Dimgrey] [justify] [font=Tahoma] [size=9]Machin chouette est un chouette bonhomme il connait machin depuis un laps de temps, d'ailleurs il font encore parfois crac crac boum en cachette. [/size][/font] [/justify][/color] </a> <a class="imginfo"><img src="http://s2.noelshack.com/old/up/image_13-9565fefb95.png" > [color=Dimgrey] [justify] [font=Tahoma] [size=9]Machin chouette est un chouette bonhomme il connait machin depuis un laps de temps, d'ailleurs il font encore parfois crac crac boum en cachette. [/size][/font] [/justify][/color] </a> <a class="imginfo"><img src="http://s2.noelshack.com/old/up/image_13-9565fefb95.png"> [color=Dimgrey] [justify] [font=Tahoma] [size=9]Machin chouette est un chouette bonhomme il connait machin depuis un laps de temps, d'ailleurs il font encore parfois crac crac boum en cachette. [/size][/font] [/justify][/color] </a>
Je ne comprends vraiment pas sur le coup, soit j'ai fait une erreur tellement bête que je m'en rend pas compte, soit dieu m'en veut. ôo
Je suis vraiment désolée, de vous causer des problèmes tout bête à cette heure-ci. | | |
| | | | Radimir
{ Membre actif }
Messages : 459
| Pour plusieurs donc , on remet le Span xD Hop [Et c'est mon boulot , cela ne me dérange aucunement  ] CSS - Code:
-
a.imginfo {
position:relative;
display: inline;
}
a.imginfo span {
display:none;
}
a.imginfo:hover {
z-index: 999;
background: none; /* correction d'un bug IE */}
a.imginfo:hover span {
display: inline; /* ceci affiche l'infobulle */
position: absolute;
background:#ffffff;
border: 3px solid dimgray;
border-left: 3px solid dimgray;
-moz-border-radius:10px;
left:-3px;
padding:3px;
position:absolute;
top:-5px;
width:120px;} HTML - Code:
-
<a class="imginfo"><img src="http://s2.noelshack.com/old/up/image_13-9565fefb95.png" ><span>[color=Dimgrey] [justify] [font=Tahoma] [size=9]Machin chouette est un chouette bonhomme il connait machin depuis un laps de temps, d'ailleurs il font encore parfois crac crac boum en cachette. [/size][/font] [/justify][/color] </span> </a> <a class="imginfo"><img src="http://s2.noelshack.com/old/up/image_13-9565fefb95.png"><span> [color=Dimgrey] [justify] [font=Tahoma] [size=9]Machin chouette est un chouette bonhomme il connait machin depuis un laps de temps, d'ailleurs il font encore parfois crac crac boum en cachette. [/size][/font][/justify][/color] </span> </a> <a class="imginfo"><img src="http://s2.noelshack.com/old/up/image_13-9565fefb95.png"><span> [color=Dimgrey] [justify] [font=Tahoma] [size=9]Machin chouette est un chouette bonhomme il connait machin depuis un laps de temps, d'ailleurs il font encore parfois crac crac boum en cachette. [/size][/font] [/justify][/color] </span> </a> <a class="imginfo"><img src="http://s2.noelshack.com/old/up/image_13-9565fefb95.png" ><span> [color=Dimgrey] [justify] [font=Tahoma] [size=9]Machin chouette est un chouette bonhomme il connait machin depuis un laps de temps, d'ailleurs il font encore parfois crac crac boum en cachette. [/size][/font] [/justify][/color] </span> </a> <a class="imginfo"><img src="http://s2.noelshack.com/old/up/image_13-9565fefb95.png"><span> [color=Dimgrey] [justify] [font=Tahoma] [size=9]Machin chouette est un chouette bonhomme il connait machin depuis un laps de temps, d'ailleurs il font encore parfois crac crac boum en cachette. [/size][/font] [/justify][/color] </span> </a> | | |
| | | | Ito
{ Membre }
Messages : 54
| Ça marche. Mille fois merci.
On peut donc locker le sujet. <D | | |
| | | | Contenu sponsorisé
| | | | | |
Sujets similaires | |
|
| | Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|
