probleme de css pour infobulle personnalisée dans les descriptions de sous-catégories

[anais06300]

Bonjour,
Je viens de me lancer dans le CSS et le HTML et je ne suis pas très douée... Donc j'ai essayé de mettre une image en description de sous-catégorie et de mettre une infobulle personnalisée quand on passe la souris dessus. j'ai donc mis ce code:

Code:

<style>
a.infobulle:hover{
 display: inline;
 position: absolute;
 white-space: nowrap;
 top: 30px;
 left: 30px;
 background: black;
 color: aqua;
 padding: 0px;
 border: 3px solid white;
}
<a target='_blank' title="
Capitale de l'Empire d'Orion, Cherny est une très grande ville, le berceau du commerce, grouillante de monde, une ville vivante et dynamique. En plein cœur de la ville, imposant et majestueux à la hauteur de ses occupants, se dresse l'immense château impérial, lieu de vie de l'impératrice et de sa famille." href='http://imageshack.us/photo/my-images/233/2233282.jpg/' class="infobulle"><img src='http://img233.imageshack.us/img233/9823/2233282.jpg' border='0'/></a>
</style>

et rien ne s'affiche. C'est le néant total. Alors je ne sais vraiment pas quoi faire . Est-ce que vous pourriez m'aider et me dire ce qui cloche?
Merci d'avance.

Edit: désolé j'ai oublié de mettre l'adresse de mon site... C'est http://impetuous-world.forum-canada.net/

[Invité]

Bonjour et Bienvenue sur le Forum des Forums Forumactif Vu que vous êtes nouveau, voici quelques sujets importants : Sécurité : mail de fondation - Ce qu'il ne faut pas faire Questions/Réponses fréquentes - Listing Trucs et astuces - Listing La fonction Rechercher La FAQ de Forumactif.com N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse

Bonjour,
Vos balises style sont placées autour de votre image, ce qui l'empêche de s'afficher. Si vous ne concervez que:

Code:

<a target='_blank' title="
Capitale de l'Empire d'Orion, Cherny est une très grande ville, le berceau du commerce, grouillante de monde, une ville vivante et dynamique. En plein cœur de la ville, imposant et majestueux à la hauteur de ses occupants, se dresse l'immense château impérial, lieu de vie de l'impératrice et de sa famille." href='http://imageshack.us/photo/my-images/233/2233282.jpg/' class="infobulle"><img src='http://img233.imageshack.us/img233/9823/2233282.jpg' border='0'/></a>

Cela fonctionne. Il n'est pas possible de modifier l'apparence de l'attribut "title". Si vous souhaitez une infobulle personnalisée, il faut vous orienter vers un autre style de code.

Cordialement.

[Invité]

Salut anais06300,


Tu veux avoir cette image dans la description des forums?
c'est logique que tu ne puisses voir de changement
ta CSS contient du html .

Et les balise d'ouverture et fermeture ne sont pas requises
<style> et </style>


As tu autres class dans ta CSS stp?
Bref d'autres mots ?

a++

[Invité]

Re ,

alors essayes ceci:





Dans la description du forum concerné colle ceci:
Le chemin:

Général/Forum/Catégories et forum/Le forum concerné

Code:

<a href="#" class="infobulle"><img src="http://img233.imageshack.us/img233/9823/2233282.jpg" border="0"><span>Capitale de l'Empire d'Orion, Cherny est une très grande ville,<br> le berceau du commerce, grouillante de monde, une ville vivante et dynamique. <br>En plein cœur de la ville, imposant et majestueux à la hauteur de ses occupants, <br>se dresse l'immense château impérial, lieu de vie de l'impératrice et de sa famille.</span></a>

Colles ceci dans ta feuille de style

Le chemin:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Code:


/* =====Infobulle=======  */
a.infobulle
{
  position: relative;
  text-decoration: none;

}
a.infobulle span
{
  display: none; /* on masque l'infobulle */
}
a.infobulle:hover
{
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
  cursor: pointer; /* on change le curseur par défaut en curseur d'aide */
}
a.infobulle:hover span

{
  display: inline; /* on affiche l'infobulle */
  position: absolute;
  white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
font-size:12px;
  color: #333333;
background-color: #f9d5cb;
  padding: 3px;
  border: 2px solid #AAAF7B;
-moz-border-radius-: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-ô-border-radius:10px;
-khtml-border-radius:10px;
bottom: 90px; /* on positionne notre infobulle */
left:18%;
width:500px;
height: 100px;
}
/* =====fin=======  */

Valides ta feuille de style

a++

[Alex Fowl]

Bonjour, Merci d'éviter les doubles posts ! N'oubliez pas la fonction ! Je vous invite à lire : - Règles générales du forum - Charte de ce forum A bientôt sur ForumActif

[Invité]

Salut Alex Fowl,
désolé mais nos messages ce sont croisés et je ne vois
pas l'intérêt de revenir sur un message précédent pour avoir une aide .
a++

[anais06300]

Bonjour milouze14,
MERCI!! Ça marche super bien, c'est super gentil de m'avoir aidé, surtout que j'étais totalement perdue! Heureusement qu'il y a des gens comme toi pour aider les paumés comme moi!
Quoi qu'il en soit merci! et remerci!
Cordialement.

[Alex Fowl]

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif

[anais06300]

Rebonjour,
Désolé. Voilà c'est fait!