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! |
| Infobulle qui détruit tout | |
| Orkais
{ Membre }
Messages : 13
| Bonjour à tous ! Voilà, je suis en train de faire un nouveau thème pour mon forum, et je n'arrive pas à faire des infobulles correctement. Lien du forum test : http://xpokemon.forumotion.com/#accueil2 Les problèmes : Normalement, les images des administrateurs etc... sont les une à côté des autres, par catégories. Ensuite; l'infobulle s'affiche loin, très loin... de l'image. Les codes : Le HTML [Une partie de la PA donc] - Code:
-
<A HREF="http://pokemon.forumotion.com/u2"><div class="infobulle"><img src="http://image.noelshack.com/fichiers/2012/41/1350131748-mind.png" border="0" alt="" /><span>Mind<br> Administrateur</span></div></a></div></span><div id="image"><A HREF="http://pokemon.forumotion.com/u1645"><div class="infobulle"><img src="http://image.noelshack.com/fichiers/2012/41/1350131748-orkais.png" border="0" alt="" /><span>Orkaïs<br> Lost in Wonderland ♫</span></div></a></div></span><div id="image"><A HREF="http://pokemon.forumotion.com/u2050"><div class="infobulle"><img src="http://image.noelshack.com/fichiers/2012/41/1350131748-ray.png" border="0" alt="" /><span>Ray'<br> Administrateur</span></div></a></div></span><br><br><div id="titrestaff"><a href="http://www.pkmn-wrld.com/g11-moderateurs" class="postlink" target="_blank" rel="nofollow">Les modérateurs de PW</a><div id="image"><br><div id="image"><A HREF="http://pokemon.forumotion.com/u4295"><div class="infobulle"><img src="http://image.noelshack.com/fichiers/2012/41/1350131748-vito.png" border="0" alt="" /><span>Vitopya<br> Modérateur</span></div></a></div><div id="image"><A HREF="http://pokemon.forumotion.com/u22"><div class="infobulle"><img src="http://image.noelshack.com/fichiers/2012/41/1350131748-lelex.png" border="0" alt="" /><span>Lelex<br> Vieux Faucheur</span></div></a></div></div></span><br><br><div id="titrestaff"><a href="http://pokemon.forumotion.com/g50-ranger-pokemon" class="postlink" target="_blank" rel="nofollow">Les rangers de PW</a></div><div id="image"><A HREF="http://pokemon.forumotion.com/u10536"><div class="infobulle"><img src="http://image.noelshack.com/fichiers/2012/41/1350132013-besette.png" border="0" alt="" /><span>Besette<br> Ranger Pokemon</span></div></a></div></span><div id="image"><A HREF="http://pokemon.forumotion.com/u9146"><div class="infobulle"><img src="http://image.noelshack.com/fichiers/2012/41/1350132013-luxinio.png" border="0" alt="" /><span>Luxinio <br> Ranger Pokemon</span></div></a></div></span><div id="image"><A HREF="http://pokemon.forumotion.com/u1203"><div class="infobulle"><img src="http://image.noelshack.com/fichiers/2012/41/1350132013-nexus.png" border="0" alt="" /><span>Nexus <br> Cookie Master</span></div></a> Le CSS - Code:
-
.infobulle span { position : relative; border-top: 2px double #fff; border-right: 5px solid #fff; border-bottom: 2px double #fff; border-left: 5px solid #fff; top : auto; left : auto; width : 136px; background-color: #A7C6D6; display : none; }
.infobulle:hover span{ display:block; border-top: 2px double #fff; border-right: 5px solid #fff; border-bottom: 2px double #fff; border-left: 5px solid #fff; top : auto; left : auto; width : 136px; overflow : visible; background-color: #A7C6D6; } Voilà, si quelqu'un pouvait m'aider... Merci d'avance | | |
| | | Doare
{ Spécialiste }
Messages : 544
| Premier point : tu utilises mal les classes et identifiants. Un identifiant ne peut être utilisé qu'une seule fois. Tu en réutilises deux en particulier plusieurs fois : "titrestaff" et "image". Ce devrait être des classes, pas des identifiants. Remplace-moi vite tout ça ! @_@ Second point : pourquoi as-tu une div "image" qui englobe un lien qui englobe une div "infobulle" qui englobe l'image et le span qui se trouve être la vraie infobulle ? Je vais t'avouer que tout ceci n'est pas très logique. Tu pourrais avoir, beaucoup plus simplement : - Code:
-
<div class="image"> <img src="http://image.noelshack.com/fichiers/2012/41/1350131748-orkais.png" border="0" alt="" /> <a class="infobulle" href="http://pokemon.forumotion.com/u1645">Orkaïs<br> Lost in Wonderland ♫</a> </div> Pour que tes div "image" s'alignent les unes à côté des autres, donne-leur tout bonnement une largeur précise (celle de l'image, par exemple), et la propriété display:inline-block; . Du côté des propriétés, tu sembles t'être un peu mélangé dans l'utilisation de la propriété position , essentielle pour les infobulles. Dans les faits, il faut : - appliquer un position:relative; au parent de l'infobulle (dans ton cas, "image") ; - appliquer un position:absolute; à l'infobulle ("infobulle"). Et puis ajouter éventuellement les propriétés top et left pour personnaliser le positionnement de l'infobulle par rapport à son image. Attention, "auto" n'est pas une valeur valide pour ces propriétés. Pour le style de "infobulle", inutile de répéter deux fois le même code entre les états caché et affiché. Le style n'a besoin d'être déclaré qu'une seule fois. En soi, les seules choses dont tu as besoin dans ta déclaration .image:hover .infobulle , ce sont display:block; et z-index: 99; , pour afficher l'infobulle au survol et s'assurer qu'elle se place au dessus du reste. |
Dernière édition par Doare le Lun 22 Oct 2012, 19:52, édité 1 fois | |
| | | Fire-Fly
{ Membre actif }
Messages : 429
| (Doublée par Doare hihi ) Je te réfèrerais fortement, pour ajouter, à ce tuto: http://www.css-actif.com/t8017-creer-une-infobulle | | |
| | | Orkais
{ Membre }
Messages : 13
| Merci Donc, j'ai bien réussit avec les images etc (en faisant un mélange de tout, car je n'y arrivais pas tout à fait avec ce que tu avais proposé, mais bon. Et j'ai honte pour l'erreur div/class), mais encore une fois, lorsque je passe le curseur sur l'image, l'infobulle apparaît loin, et dès que je tente de mettre les propriétés top et left, elles disparaissent totalement... - Code:
-
.infobulle span { position:absolute; border-top: 2px double #fff; border-right: 5px solid #fff; border-bottom: 2px double #fff; border-left: 5px solid #fff; width : 136px; background-color: #A7C6D6; display : none; margin-top: 8px; margin-left: 400px; }
.infobulle:hover span{ display:block; z-index: 99; } - Code:
-
<div id="staff">
<div class="titrestaff"><a href="http://www.pkmn-wrld.com/g10-administrateurs" class="postlink" target="_blank" rel="nofollow">Les administrateurs de PW</a></div>
<div class="image"><A HREF="http://pokemon.forumotion.com/u2"><div class="infobulle"><img src="http://image.noelshack.com/fichiers/2012/41/1350131748-mind.png" border="0" alt="" /> <span>Mind<br> Administrateur</span></div></a></div>
<div class="image"><A HREF="http://pokemon.forumotion.com/u1645"><div class="infobulle"><img src="http://image.noelshack.com/fichiers/2012/41/1350131748-orkais.png" border="0" alt="" /> <span>Orkaïs<br> Lost in Wonderland ?</span></div></a></div>
<div class="image"><A HREF="http://pokemon.forumotion.com/u2050"><div class="infobulle"><img src="http://image.noelshack.com/fichiers/2012/41/1350131748-ray.png" border="0" alt="" /> <span>Ray'<br> Administrateur</span></div></a></div>
<br><br>
<div class="titrestaff"><a href="http://www.pkmn-wrld.com/g11-moderateurs" class="postlink" target="_blank" rel="nofollow">Les modérateurs de PW</a></div>
<div class="image"><A HREF="http://pokemon.forumotion.com/u4295"><div class="infobulle"><img src="http://image.noelshack.com/fichiers/2012/41/1350131748-vito.png" border="0" alt="" /> <span>Vitopya<br> Modérateur</span></div></a></div>
<div class="image"><A HREF="http://pokemon.forumotion.com/u22"><div class="infobulle"><img src="http://image.noelshack.com/fichiers/2012/41/1350131748-lelex.png" border="0" alt="" /> <span>Lelex<br> Vieux Faucheur</span></div></a></div>
<br><br>
<div class="titrestaff"><a href="http://pokemon.forumotion.com/g50-ranger-pokemon" class="postlink" target="_blank" rel="nofollow">Les rangers de PW</a></div>
<div class="image"><A HREF="http://pokemon.forumotion.com/u10536"><div class="infobulle"><img src="http://image.noelshack.com/fichiers/2012/41/1350132013-besette.png" border="0" alt="" /> <span>Besette<br> Ranger Pokemon</span></div></a></div>
<div class="image"><A HREF="http://pokemon.forumotion.com/u9146"><div class="infobulle"><img src="http://image.noelshack.com/fichiers/2012/41/1350132013-luxinio.png" border="0" alt="" /> <span>Luxinio <br> Ranger Pokemon</span></div></a></div>
<div class="image"><A HREF="http://pokemon.forumotion.com/u1203"><div class="infobulle"><img src="http://image.noelshack.com/fichiers/2012/41/1350132013-nexus.png" border="0" alt="" /> <span>Nexus <br> Cookie Master</span></div></a></div>
</div> Le topic proposé par Fire-Fly ne m'a pas tellement aidé :/ Encore un petit peu d'aide s'il vous plait ? | | |
| | | 'Christa
Lostmindy
Messages : 2856
| Hello,
En effet, le tutoriel ne semble pas t'avoir aidé, puisque ton CSS n'a rien à voir. Le principe d'un tutoriel est qu'il soit juste (et celui là a été corrigé récemment), pourquoi donc persistes-tu à utiliser un code incomplet et faux ?
Ton erreur réside dans le fait que les positionnements sont faux, c'est l'infobulle qui doit être en position absolue, et elle doit l'être par rapport à son conteneur (ergo le texte ou l'image que l'on survole). Ici on voit que le conteneur est en position absolue, et même qu'il n'a aucune spécification de positionnement, tandis que l'infobulle en soi n'a pas le moindre positionnement.
Mon conseil est donc que tu reprennes ce tutoriel à la lettre près et que petit à petit tu modifies jusqu'à obtenir le résultat que tu veux sur ton forum. | | |
| | | Psycho
Psychopathe
Messages : 3407
| Bonjour, bonsoir ! Je viens aux nouvelles : ton problème est-il toujours d'actualité ?Si nous n'avons pas de réponse dans 4 jours, il sera considéré comme résolu ! Merci de ta compréhension | | |
| | | Melone
{ Modérateur }
Messages : 805
| Bonsoir !
Comme Psycho avait demandé une réponse dans 4 jours et que maintenant, cela en fait 5, je considère le problème abandonné. Si jamais il se trouve que non, merci de contacter un modérateur pour le ré-ouvrir ou créer un nouveau sujet.
Bonne soirée ! | | |
| | | Contenu sponsorisé
| | | | | Infobulle qui détruit tout | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|