Sujets similaires

Sujet: Infobulle qui détruit tout Lun 22 Oct 2012, 15:13

Bonjour à tous ! Smile

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 Razz

Sujet: Re: Infobulle qui détruit tout Lun 22 Oct 2012, 18:22

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

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.

Sujet: Re: Infobulle qui détruit tout Lun 22 Oct 2012, 18:46

(Doublée par Doare hihi Razz

)

Je te réfèrerais fortement, pour ajouter, à ce tuto: http://www.css-actif.com/t8017-creer-une-infobulle

Sujet: Re: Infobulle qui détruit tout Mer 24 Oct 2012, 16:45

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 ? Infobulle qui détruit tout 306373

Sujet: Re: Infobulle qui détruit tout Mer 24 Oct 2012, 17:14

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.

Sujet: Re: Infobulle qui détruit tout Dim 28 Oct 2012, 14:42

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 Infobulle qui détruit tout 926145

Sujet: Re: Infobulle qui détruit tout Ven 02 Nov 2012, 16:06

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 !

Infobulle qui détruit tout

Infobulle qui détruit tout

Sujets similaires

Sujets similaires

Partenaires Or