Nyo The Neko
{ Spécialiste }
Messages : 245
| Le titre n'est pas très clair, mais je pense qu'une explication image le serait plus.
Voici l'infobulle: Et elle est sur [CE] forum et vue en naviguant sur Firefox.
Mon problème? eh bien le texte est coupé. On ne voit pas la fin du texte, et celui-ci ne retourne pas automatiquement à la ligne comme il le devrait. J'ai tout essayé, mais rien ne change! Que faire? Je vous passe donc le code de cette bulle + son CSS. Merci d'avance de l'aide que vous apporterez!
HTML: - Code:
-
<a href="http://shinobi-no-sekai.forumsactifs.com/haikei-f57/villages-organisations-t1171.htm#10403" class="infobulle"><img src="http://i67.servimg.com/u/f67/11/97/13/62/untitl14.png"> <div><b style="color: #5F0897">MEIUN</b><br/>Également connu sous le nom d'organisation du Destin, Meiun est une organisation criminelle dont les buts sont aussi mystérieux que l'île qui leur sert de repaire. Constituée de criminels de très haut rang, il y a très peu d'information sur l'organisation et ses membres disponibles, bien que tous les membres de l'organisation soient connus.<br/><b>Chef:</b> Sacha Miyuku <br/><b>Nombre:</b></div></a> CSS: - Code:
-
a.infobulle { position: relative; }
a.infobulle div { display: none; } a.infobulle:hover { background: none; z-index: 999;
} a.infobulle:hover div { max-width: 200px; text-align: center; overflow: hidden; display: inline; position: absolute; white-space: nowrap; top: 20px; left: 15px; background: #d7c6a8; color: black; padding: 5px; border: 2px solid #bc9e76; border-left: 2px solid #bc9e76; font-family: Verdana; font-size: 10px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; } |
Dernière édition par Nyo The Neko le Lun 03 Jan 2011, 12:39, édité 1 fois | |
|
Liliana
{ Membre actif }
Messages : 997
| Bonjour; En retirant le "white-space: nowrap;" de ton code CSS; ça empêchera ton texte de continuer et ça le forcera à retourner à la ligne en arrivant à la bordure de l'infobulle. Par contre, il faudra surement rajouter une taille à ton infobulle; dans cette partie - Code:
-
a.infobulle:hover div {width: Xpx;} | | |
|
Nyo The Neko
{ Spécialiste }
Messages : 245
| Je l'avait fait peu après avoir posté ce message et n'ai pas eût le temps d'envoyer un message disant que je l'avais fait. ^^" J'ai également vérifié la compatibilité avec les différents navigateurs et tout est bon
Merci tout de même pour l'aide apportée! ^^
Edit: J'ai édité le premier message et ai mit résolu, voilà =D | | |
|