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
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!

Derniers sujets
» Système d'onglets simple et personnalisable
Infobulle qui détruit tout EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Infobulle qui détruit tout EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Infobulle qui détruit tout EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Infobulle qui détruit tout EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Infobulle qui détruit tout EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Infobulle qui détruit tout EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Infobulle qui détruit tout EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Infobulle qui détruit tout EmptySam 11 Fév 2023, 06:04 par Krager

Le Deal du moment :
SSD interne Crucial BX500 2,5″ SATA – 500 ...
Voir le deal
29.99 €

Partagez
 

Infobulle qui détruit tout

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://www.pkmn-wrld.com/
Orkais
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
Doare
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.


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
http://internationale-lpp.com/
Fire-Fly
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


MessageSujet: Re: Infobulle qui détruit tout   Infobulle qui détruit tout EmptyLun 22 Oct 2012, 18:46
Revenir en haut Aller en bas
http://www.pkmn-wrld.com/
Orkais
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
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



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.
MessageSujet: Re: Infobulle qui détruit tout   Infobulle qui détruit tout EmptyMer 24 Oct 2012, 17:14
Revenir en haut Aller en bas
Psycho
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
MessageSujet: Re: Infobulle qui détruit tout   Infobulle qui détruit tout EmptyDim 28 Oct 2012, 14:42
Revenir en haut Aller en bas
Melone
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 !
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

-
» Staf en infobulle , tout est décalé
» Infobulle! Tout le temp aussi compliqué :(
» Infobulle
» infobulle
» Infobulle

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 | Signaler un abus | Forum gratuit