Infobulle qui détruit tout Bouton_activeInfobulle qui détruit tout Bouton_hoverInfobulle qui détruit tout Fb-hoverInfobulle qui détruit tout Fb-active
C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Sous-forums en retour à la ligne
Infobulle qui détruit tout EmptyVen 24 Mai 2019, 17:59 par XeWuP

» Slideshow horizontal infini
Infobulle qui détruit tout EmptyJeu 16 Mai 2019, 20:22 par Cezzy

» [RPG] Fiche de présentation
Infobulle qui détruit tout EmptyJeu 02 Mai 2019, 15:19 par Joy_Remington

» Rapporter un bug
Infobulle qui détruit tout EmptyJeu 25 Avr 2019, 11:25 par Orange

» Barre(s) Hitskinienne
Infobulle qui détruit tout EmptySam 20 Avr 2019, 14:20 par @ngelEarth

» Effet pour vos sous-forums
Infobulle qui détruit tout EmptyVen 19 Avr 2019, 12:53 par XeWuP

» Pour faire des beaux titres de sous-forums
Infobulle qui détruit tout EmptyVen 19 Avr 2019, 12:52 par XeWuP

» [phpBB2] Arrondir le cadre du forum
Infobulle qui détruit tout EmptyVen 19 Avr 2019, 10:46 par @ngelEarth

Partagez
 

Infobulle qui détruit tout

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://www.pkmn-wrld.com/
Orkais
{ Membre }
{ Membre }

Féminin Messages : 13



Infobulle qui détruit tout Empty
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
MessageSujet: Infobulle qui détruit tout   Infobulle qui détruit tout EmptyLun 22 Oct 2012, 15:13
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Doare
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 544



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


Infobulle qui détruit tout Cssact11


Dernière édition par Doare le Lun 22 Oct 2012, 19:52, édité 1 fois
MessageSujet: Re: Infobulle qui détruit tout   Infobulle qui détruit tout EmptyLun 22 Oct 2012, 18:22
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://internationale-lpp.com/
Fire-Fly
{ Membre actif }
{ Membre actif }

Féminin Messages : 429



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




Infobulle qui détruit tout Cssact11
MessageSujet: Re: Infobulle qui détruit tout   Infobulle qui détruit tout EmptyLun 22 Oct 2012, 18:46
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.pkmn-wrld.com/
Orkais
{ Membre }
{ Membre }

Féminin Messages : 13



Infobulle qui détruit tout Empty
Merci Smile

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
MessageSujet: Re: Infobulle qui détruit tout   Infobulle qui détruit tout EmptyMer 24 Oct 2012, 16:45
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://enaevolare.fr
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2853



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


Infobulle qui détruit tout Signature_staff
Ne me vouvoyez pas, merci (même si vous avez 15 ans de moins que moi, j'veux pas le savoir)
MessageSujet: Re: Infobulle qui détruit tout   Infobulle qui détruit tout EmptyMer 24 Oct 2012, 17:14
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



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


Infobulle qui détruit tout Signature_staff
MessageSujet: Re: Infobulle qui détruit tout   Infobulle qui détruit tout EmptyDim 28 Oct 2012, 14:42
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Melone
{ Modérateur }
{ Modérateur }

Féminin Messages : 805



Infobulle qui détruit tout Empty
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 Cssact11
MessageSujet: Re: Infobulle qui détruit tout   Infobulle qui détruit tout EmptyVen 02 Nov 2012, 16:06
Revenir en haut Aller en bas
Contenu sponsorisé




Infobulle qui détruit tout Empty
MessageSujet: Re: Infobulle qui détruit tout   Infobulle qui détruit tout Empty
Revenir en haut Aller en bas
 

Infobulle qui détruit tout

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Infobulle qui détruit tout
» Marcher tout en étant bourré
» Tout savoir sur le GPS
» Bonsoir zot tout
» Hello tout le monde !!

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit