Skwatt'
{ Membre }
Messages : 23
| Bonjour,
Pour un forum où je suis co-admin, je dois réaliser une fiche de présentation où la présence d'infobulle est requise pour plus de clarté. Seulement, un petit problème se pose. Et comme des images valent mieux que des mots ... ^^
- Spoiler:
De plus, j'aimerai que les icones se place l'une à côté de l'autre mais je pense que pour ça, c'est un autre problème ... ^^"
Voici le CSS :
- Code:
-
/* INFOBUL */
p { font-size : 1.1em; /* Définition de la taille de la police de nos paragraphes */ }
/* Rend invisible tout notre bloc span */ a.info_bulle span { position : absolute; top : -2000em; left : -2000em; width : 1px; height : 1px; overflow : hidden; background : #ffffff; /* Définition du fond, sinon on a le même que notre lien */ border : background-color: #D9D1B2; -moz-border-radius: 5px 5px 14px 14px ; border-bottom: 6px #060361 solid; border-top: 2px #060361 dotted; border-right: 2px #060361 dotted; border-left: 2px #060361 dotted; /* Définition des bordures */ }
a.info_bulle { color : #2F368A; text-decoration : none; padding : 2px 16px 2px 2px; /*Définition des marges intérieures de notre lien */ /* Définition de l'arrière plan de notre lien */ background : transparent url('comment.gif') no-repeat right center; position : relative; /* Indispensable pour le bon positionnement de l'info-bulle */ } a.info_bulle:hover { border : 0; /* ligne qui corrige le bug d'IE6 et inférieur */ }
/* Rend visible tout notre bloc span et lui attribue une taille */ a.info_bulle:hover span, a.info_bulle:focus span, a.info_bulle:active span { top : auto; left : auto; width : auto; height : auto; overflow : visible; }
Et le code du message :
- Code:
-
[list][table border="0"][tr][td][color=black] [table][tr][td style="background-color: #000000" span class="arrondi"][b]Ascendance :[/b] <a id="info_bulle" class="info_bulle" href="UNE URL SI IL FAUT"><img src="http://i33.servimg.com/u/f33/09/03/76/30/taille11.png"> <span> <center> <img src="URL IMAGE">
<b>NOM DU CHEVAL </b>
BLABLA</center>
</span> </a> <a id="info_bulle" class="info_bulle" href="UNE URL SI IL FAUT"><img src="http://i33.servimg.com/u/f33/09/03/76/30/taille11.png"> <span> <center> <img src="URL IMAGE">
<b>NOM DU CHEVAL </b>
BLABLA</center>
</span> </a> [/td][/tr][/table] [/color][/td][td][list] [color=black][font=Georgia] [table][tr][td style="background-color: #000000" span class="arrondi"] [b]Descendance :[/b] <a id="info_bulle" class="info_bulle" href="UNE URL SI IL FAUT"><img src="http://i33.servimg.com/u/f33/09/03/76/30/taille11.png"> <span> <center> <img src="URL IMAGE">
<b>NOM DU CHEVAL </b>
BLABLA</center>
</span> </a> <a id="info_bulle" class="info_bulle" href="UNE URL SI IL FAUT"><img src="http://i33.servimg.com/u/f33/09/03/76/30/taille11.png"> <span> <center> <img src="URL IMAGE">
<b>NOM DU CHEVAL </b>
BLABLA</center>
</span> </a>[/td][/tr][/table] [/list][/font][/color][/td][/tr][/table][/list]
L'adresse du forum est http://ranch-nom.forum-actif.net et j'utilise Firefox
Cordialement, Ŧrusŧ |
Dernière édition par Ŧrusŧ le Mer 28 Juil 2010, 18:56, édité 1 fois | |
|
Edelweiss
{ Membre }
Messages : 105
| Coucou,
Dans ta class "a.info_bulle span" rajoute - Code:
-
z-index:999; . | | |
|
Skwatt'
{ Membre }
Messages : 23
| Merci beaucoup, ça fonctionne
Problème résolus ^^ | | |
|