CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:  Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
|  Diadouce 
{ Membre }
 Messages : 30
 | Bonjour!
Alors j'ai un problème tout simple, mais comme je suis quand même débutante, je n'arrive pas à trouver la solution par moi-même. Donc, j'aimerais que l'image de mon infobulle (celle qui quand on passe la souris dessus, affiche les infos) aie un cadre. Mais j'ignore totalement comment faire, je sais même pas mettre un cadre sur une image toute seule alors hein x)
J'ai essayé de créer une class à partir d'un sujet que j'ai vu ici, mais quand je la mets le cadre va un peu n'importe où... Je ne sais pas trop où la positionner en fait, mais j'ai bien l'impression qu'il y a une façon plus simple de procéder!
J'ai également un deuxième problème, mes infobulles ne veulent pas se placer côte à côte. J'ai pourtant supprimer les < br > susceptibles de causer ce problème, mais je crois qu'il faudra chercher plus loin.
Merci de m'aider =3
| | |
|  | | Haribot' ♪
{ Membre hyper-actif }
 Messages : 5163
| Alors, pour ton 1er problème, met ceci dans le "a.infobulle:hover span" - Code:
-
border: 1px solid #000000; N'oublies pas de remplacer #000000 par ta couleur  Et pour le deuxième problème, peux-tu nous passer le Code HTML avec le CSS s'il-te-plaît ?  | | |
| | | | Diadouce
{ Membre }
Messages : 30
| Merci de ta réponse J'ai essayé de mettre la bordure mais elle ne s'affiche pas. Voilà pour mon CSS : - Spoiler:
J'ai changé le nom pour icone, car j'ai déjà une autre sorte d'infobulle. - Code:
-
a.icone {
position: relative;
}
a.icone span {
display: none; /* ceci masque l'infobulle */
}
a.icone:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
}
a.icone:hover span {
border:2px solid #77CCD4;
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: 5px; /* on positionne notre infobulle */
left: -25px;
background: #ffffff; /* arrière-plan de l'infobulle */
color: #77CCD4; text-align: center; /* texte dans l'infobulle */
padding: 3px;
/* bordures de votre infobulle*/
border: 1px dotted #256C8F;
border-left: 1px dotted #256C8F;
}
Edit: J'ai réussis à régler mon problème concernant les infobulles qui ne s'alignaient pas en les mettant dans un tableau. Mon code est donc devenu : - Spoiler:
- Code:
-
<div style="padding-left:10px;padding-right:10px"><div style="margin:auto;text-align:center;width:100%"> <table style="width: 100%; border-collapse:collapse;"> <tr> <td><div class=opacity><a class="icone"><img src="http://img20.imageshack.us/img20/1624/iprlayna.png"> <span><u>LAYNA TSUKIYO</u><br> Fondatrice<br> <br><div><a href="urlavenir" target="_blank">Contacter</a></div></span></a> </a></div> </td> <td><div class=opacity><a class="icone"><img src="http://img210.imageshack.us/img210/6930/iprtracy.png"> <span><u>TRACY HELENA</u><br> Admin<br> <br><div><a href="urlavenir" target="_blank">Contacter</a></div></span></a> </a></div> </td> <td><div class=opacity><a class="icone"><img src="http://img689.imageshack.us/img689/3791/ipryumichita.png"> <span><u>YUMICHITA <br>AYASEGAWA</u><br> Admin<br> <br><div><a href="urlavenir" target="_blank">Contacter</a></div></span></a> </a></div> </td> </tr> </table></div>
... au lieu de : - Spoiler:
Celui-ci était pour deux infobulles uniquement, alors que le code ci-dessus en contient trois. - Code:
-
<div class=opacity><a class="icone"><img src="http://img20.imageshack.us/img20/1624/iprlayna.png"> <span><u>LAYNA TSUKIYO</u><br> Fondatrice<br> <br><div><a href="urlavenir" target="_blank">Contacter</a></div></span></a> </a></div><div class=opacity><a class="icone"><img src="http://img210.imageshack.us/img210/6930/iprtracy.png"> <span><u>TRACY HELENA</u><br> Admin<br> <br><div><a href="urlavenir" target="_blank">Contacter</a></div></span></a> </a></div>
Mais voilà, comme dis plus haut, les cadres ne s'affichent pas et j'ignore pourquoi... | | |
| | | | Ikø' 
Pika'Ghøst
~ Maîtresse des pelles ~
Messages : 3193
| Bonjour~
Le problème est-il toujours d’actualité? | | |
| | | | Diadouce
{ Membre }
Messages : 30
| Oui, j'attends toujours une réponse | | |
| | | | Tech
{ Membre actif }
Messages : 1378
| Bonjour,
Où en est la demande ?
Le problème est-il toujours d'actualité ? | | |
| | | | Kaiji
Blanche-Neige
Messages : 5578
| Bonjour,
Aucune relance de la part du créateur du sujet ! Je considère donc ce problème comme étant résolu et je le déplace pour céder la place aux problèmes en cours.
Si vous avez d'autres questions, merci d'ouvrir un nouveau topic en respectant les règles de l'entraide.
| | |
| | | | Contenu sponsorisé
| | | | | |
Sujets similaires | |
|
| | Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|
|
