Problème avec une infobulle

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème avec une infobulle

Message par Coryanthe Mar 28 Mai 2019 - 8:56

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 28/05/2019
Lien du forum : http://protestantsreformes.forumactif.com/

Description du problème

Bonjour,
Je rencontre un problème avec une infobulle de mon forum. Elle se trouve sur l'image du forum "Evenements et rencontres". J'aimerais que le texte qui se trouve dessus ainsi que l'image passe au-dessus du texte et des images des forums qui se trouveraient en-dessous.
Voici le code CSS :
Code:
/* Bulles */
.pa_infobulle {
     display: inline-block;
   margin: 1%;
}

.pa_infobulle > div {
        margin: 0 0 0 -57px;
        opacity: 0;
        position: absolute;
        transform: scale(0.3) rotate(-45deg);
        transition: all .3s linear;
        visibility: hidden;
}


.pa_infobulle:hover > div {
  opacity: 1;
        visibility: visible;
        transform: scale(1) rotate(0deg);
}

.pa_contenu_bulle {
        background: #f1ded9;
        padding: 2%;
        text-align: center;
  position:absolute;
}

.pa_contenu_bulle {
        background: #fff;
        padding: 2%;
        text-align: center;
        margin-top: 5px;
        font-size: 10px;
}

.pa_contenu_bulle h4 {
     text-transform: uppercase;
}

Et le code HTML :
Code:
<table>
   <tbody></tbody>
 <tr style="">
 
 <td>
 
 <div class="pa_infobulle">
                      <img src="https://www.zupimages.net/up/19/22/c9d6.jpg" />                      
 <div>
                                        
 <div class="pa_contenu_bulle">
                                            
 <h4>
              Les Noces de Cana              
 </h4>
              Paolo Veronese <img src="https://zupimages.net/up/19/22/gm54.jpg" alt="" />              
 </div>
  
 </div>
 </div>
 
 </td>
 
 <td>
 Si vous voulez organiser un événement ou une rencontre, venez en parler ici.
 </td>
  
 </tr><tbody></tbody>
</table>

J'ai bien mis "position:absolute;" mais cela ne fonctionne pas. Quelqu'un saurait-il m'aider ?

Merci d'avance,
Coryanthe


Dernière édition par Coryanthe le Mar 28 Mai 2019 - 10:11, édité 1 fois
Coryanthe

Coryanthe
Nouveau membre

Messages : 26
Inscrit(e) le : 22/05/2019

http://protestantsreformes.forumactif.com/
Coryanthe a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Problème avec une infobulle

Message par Tite-May Mar 28 Mai 2019 - 10:08

Bonjour Smile

Pour simplement faire passer l'image au dessus, il faut lui dire Smile
Il faut ajouter ceci :
Code:
    z-index: 2;
Ici :
Code:
.pa_infobulle > div {
    margin: 0 0 0 -57px;
    opacity: 0;
    position: absolute;
    transform: scale(0.3) rotate(-45deg);
    transition: all .3s linear;
    visibility: hidden;
}

Ce qui donne :
Code:
  .pa_infobulle > div {
    margin: 0 0 0 -57px;
    opacity: 0;
    position: absolute;
    transform: scale(0.3) rotate(-45deg);
    transition: all .3s linear;
    visibility: hidden;
z-index: 2;
}
avatar

Tite-May
****

Féminin
Messages : 214
Inscrit(e) le : 13/08/2012

http://tambouille-raleuses.forumactif.com/
Tite-May a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec une infobulle

Message par Coryanthe Mar 28 Mai 2019 - 10:11

Merci beaucoup ! ça marche Very Happy
Bonne journée à vous,
Coryanthe
Coryanthe

Coryanthe
Nouveau membre

Messages : 26
Inscrit(e) le : 22/05/2019

http://protestantsreformes.forumactif.com/
Coryanthe a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum