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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par anais06300 le Dim 14 Aoû 2011 - 19:13

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 Confused . Est-ce que vous pourriez m'aider et me dire ce qui cloche?
Merci d'avance. Very Happy

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

anais06300
Nouveau membre

Messages : 3
Inscrit(e) le : 14/08/2011

http://impetuous-world.forumgratuit.org/
anais06300 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: probleme de css pour infobulle personnalisée dans les descriptions de sous-catégories

Message par Invité le Mar 16 Aoû 2011 - 17:30

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
N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse Wink

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é
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: probleme de css pour infobulle personnalisée dans les descriptions de sous-catégories

Message par Milouze14 le Mar 16 Aoû 2011 - 17:40

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 Wink .

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 Wink ?

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4577
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: probleme de css pour infobulle personnalisée dans les descriptions de sous-catégories

Message par Milouze14 le Mar 16 Aoû 2011 - 17:53

Re Wink ,

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 Wink

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4577
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: probleme de css pour infobulle personnalisée dans les descriptions de sous-catégories

Message par Alex Fowl le Mar 16 Aoû 2011 - 17:57

Bonjour,

Merci d'éviter les doubles posts !
N'oubliez pas la fonction :editer: ! Smile

Je vous invite à lire :

A bientôt sur ForumActif Smile

Alex Fowl
+ Hyperactif +

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

http://www.aidactif.fr
Alex Fowl a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: probleme de css pour infobulle personnalisée dans les descriptions de sous-catégories

Message par Milouze14 le Mar 16 Aoû 2011 - 18:01

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 Wink .
a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4577
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: probleme de css pour infobulle personnalisée dans les descriptions de sous-catégories

Message par anais06300 le Mar 16 Aoû 2011 - 19:04

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! Very Happy
Quoi qu'il en soit merci! et remerci! Very Happy
Cordialement.

anais06300
Nouveau membre

Messages : 3
Inscrit(e) le : 14/08/2011

http://impetuous-world.forumgratuit.org/
anais06300 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: probleme de css pour infobulle personnalisée dans les descriptions de sous-catégories

Message par Alex Fowl le Mar 16 Aoû 2011 - 19:20

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 résolu
  • 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 Smile

Alex Fowl
+ Hyperactif +

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

http://www.aidactif.fr
Alex Fowl a été remercié(e) par l'auteur de ce sujet.

Résolu Re: probleme de css pour infobulle personnalisée dans les descriptions de sous-catégories

Message par anais06300 le Mar 16 Aoû 2011 - 19:45

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

anais06300
Nouveau membre

Messages : 3
Inscrit(e) le : 14/08/2011

http://impetuous-world.forumgratuit.org/
anais06300 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum