Air.
{ Membre }
Messages : 221
| Bonjour bonjour.
Tout d'abord, voici mes codes : CSS
- Spoiler:
/* INFOBULLES */ a.infobulle { position: relative; }
a.infobulle span { display: none; /* ceci 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 */
} a.infobulle:hover span { display: inline; /* ceci 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é */ top: -20px; /* on positionne notre infobulle */ left: 30px;
background: #E0D6C7; /* arrière-plan de l'infobulle */ color: #7F746F; /* texte dans l'infobulle */ font-variant: normal; /* police normale normal */ text-transform: normal; padding: 3px; cursor: crosshair; border-right: 1px dotted #7F746F; border-left: 1px dotted #7F746F; border-top: 1px solid #7F746F; border-bottom: 1px solid #7F746F; border-radius-topleft: 15px; -moz-border-radius-topleft: 15px; -webkit-border-radius-topleft: 15px; border-radius-bottom-right: 15px; -moz-border-radius-bottomright: 15px; -webkit-border-radius-bottom-right: 15px; padding-left: 5px; padding-right: 5px; } HTML : - Code:
-
<center><a href="http://imaginart.forumactif.org/profile.forum?mode=viewprofile&u=1" class="infobulle"><img src="http://i31.servimg.com/u/f31/13/51/98/55/av_aer10.png" name="Aeryn" onmouseover="Aeryn.src='http://i31.servimg.com/u/f31/13/51/98/55/av_aer11.png'" onmouseout="Aeryn.src=''http://i31.servimg.com/u/f31/13/51/98/55/av_aer10.png" > <span><img src="http://i31.servimg.com/u/f31/13/51/98/55/staffm10.png"> <br><b><font color="#D41717">Aeryn</font></b> <br>Fondatrice <br><br><div><a href="http://imaginart.forumactif.org/profile.forum?mode=viewprofile&u=1" target="_blank">Profil</a></div><div><a href="http://imaginart.forumactif.org/msg.forum?mode=post&u=1">Contacter</a></div></center></span></a> Mon premier problème est que, lorsqu'on clique sur l'infobulle (ou l'image sur laquelle je mets l'infobulle), ça m'envoie directement sur le profil. Je sais bien que c'est à cause du premier a href mais j'aimerais bien l'enlever :/ Voyez par vous-même au pire : http://test-my-designs.forumactif.org/ Mon second, est que dans l'infobulle, les textes et les liens sont en majuscules alors que j'aimerais que ce soit écrit normalement <_< Je sais pas si le problème vient du small-caps que j'ai mis quelque part dans le CSS pour les a:hover.
Merci d'avance et bonne soirée |
Dernière édition par Air. le Sam 31 Juil 2010, 15:58, édité 1 fois | |
|
VPeybernes
{ Membre actif }
Messages : 563
| Bonjour. Le problème c'est que tu utilise le lien pour définir le bloc de ton infobulle. Utilise plutôt un div. Et attention à l'ordre de fermeture des balises. - Code:
-
<center> <div class="infobulle"> <a href="http://imaginart.forumactif.org/profile.forum?mode=viewprofile&u=1"><img src="http://i31.servimg.com/u/f31/13/51/98/55/av_aer10.png" name="Aeryn" onmouseover="Aeryn.src='http://i31.servimg.com/u/f31/13/51/98/55/av_aer11.png'" onmouseout="Aeryn.src=''http://i31.servimg.com/u/f31/13/51/98/55/av_aer10.png" /></a> <span> <img src="http://i31.servimg.com/u/f31/13/51/98/55/staffm10.png"> <br/><b><font color="#D41717">Aeryn</font></b> <br/>Fondatrice <br/><br/> <div> <a href="http://imaginart.forumactif.org/profile.forum?mode=viewprofile&u=1" target="_blank">Profil</a> </div> <div> <a href="http://imaginart.forumactif.org/msg.forum?mode=post&u=1">Contacter</a> </div> </span> </div> </center> Et remplace les a.infobulle par des div.infobulle dans la CSS | | |
|
Air.
{ Membre }
Messages : 221
| Ah d'accord. J'avais suivi le tutoriel de Lilypad, c'est pourquoi j'avais a.infobulle. Sinon MERCI BEAUCOUP ça marche maintenant *o* Par contre j'aimerais savoir s'il est possible d'aligner les deux liens (Profil, Contacter) sur la même ligne. Parce que je mets pas de < br> mais il y a quand même retour à la ligne :/ | | |
|
VPeybernes
{ Membre actif }
Messages : 563
| Chaque div entraine un retour à la ligne. Pour les aligner, il faut les mettre dans le même div, ou enlever les div. | | |
|
Air.
{ Membre }
Messages : 221
| Merci infiniment, tout marche nickel ♥
Vous pouvez classer =) | | |
|