Mes infobulles ont disparu

[Choupette9]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : En installant ma nouvelle version
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

Je fais face à un nouveau problème en ayant installé la nouvelle version de mon forum.
J'avais des codes pour les fiches de mes postes vacants qui fonctionnaient très bien, mais depuis que j'ai installé la nouvelle version, toutes les infobulles ont disparues et le texte se retrouve sous les icônes alors qu'il devrait normalement apparaître à l'intérieur d'un cadre lorsque l'on survole les icônes avec la souris comme c'est le cas sur l'image de ce forum : https://i.servimg.com/u/f19/09/03/40/28/ce_que10.jpg
Il n'y a que les infobulles de ma PA qui fonctionnent correctement mais elles n'ont rien à voir avec celles que j'avais pour les liens de mes postes vacants.

Pourriez-vous m'aider s'il vous plait ?
J'ai déjà installé la version sur mon forum officiel et je ne me suis aperçue de ce problème qu'après l'avoir installée, du coup tous mes membres peuvent le voir...

Voici ma fiche CSS :

Code:

body {
background-repeat: no-repeat;
  background-position: top center;
}


.lastpost-avatar {
float: left;
padding: 2px;
}
.lastpost-avatar img {
width: 50px;
height: 80px;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}


/* PAGE ACCUEIL FORME 1 */


th.secondarytitle h2 font {
    color: #6b6b6b !important;
    font-family: Perpetua Titling MT !important;
    font-size: 20px;
}


#f1_accueil
{
  width: 800px;
  height: 500px;
  margin: auto;
  background: url(http://image.noelshack.com/fichiers/2013/26/1372353069-acc.png);
  text-shadow: none !important;
}
#f1_accueil a
{
  color: #6B6B6B !important;
  text-shadow: none !important;
}
#f1_accueil a:hover
{
  color: #ffffff !important;
  text-shadow: none !important;
}
.f1_col1
{
  width: 300px;
  vertical-align: top;
}
.f1_contexte
{
  width: 220px;
  height: 300px;
  overflow: auto;
  margin-top: 100px;
  margin-left: 65px;
  text-align: justify;
  color: #6B6B6B;
  text-shadow: 1px 1px 0px #ffffff;
}
.f1_bloconglets
{
  margin-top: 80px;
}
.f1_onglet1, .f1_onglet2, .f1_onglet3
{
  display: inline-block;
  width: 110px;
  height: 50px;
}
.f1_onglet1
{
  margin-left: 50px;
  margin-right: 25px;
}
.f1_onglet2
{
  margin-right: 30px;
}
.f1_contenu1, .f1_contenu2, .f1_contenu3
{
  position: absolute;
  width: 0px;
  height: 220px;
  margin-top: 40px;
  padding-top: 40px;
  overflow: hidden;
  font-size: 11px;
  color: #6B6B6B;
}
.f1_contenu1
{
  margin-left: -10px;
}
.f1_contenu2
{
  margin-left: -149px;
}
.f1_contenu3
{
  margin-left: -294px;
}
.f1_onglet1:hover .f1_contenu1, .f1_onglet2:hover .f1_contenu2, .f1_onglet3:hover .f1_contenu3
{
  width: 400px;
}
.f1_liens
{
  display: block;
  text-align: center;
}
.f1_liens a
{
  font-size: 12px;
  font-weight: bold;
}
.f1_news, .f1_friends
{
  width: 200px;
  height: 200px;
  overflow: hidden;
  text-align: justify;
}
.f1_credits, .f1_topsites
{
  height: 150px;
  border-left: 1px solid #6B6B6B;
  margin-left: 5px;
  padding: 5px;
  text-align: center;
}

.f1_staff1
{
  display: block;
  width: 50px;
  height: 50px;
  background: url(http://fc04.deviantart.net/fs70/f/2010/058/1/1/__Eclair_Farron_Icon___by_Ultima_Memoria.png);
  margin-bottom: 20px;
  margin-top: 20px;
  border: 1px solid #6B6B6B;
}

.f1_staff2
{
  display: block;
  width: 50px;
  height: 50px;
  background: url(http://i79.servimg.com/u/f79/12/95/72/47/icones10.jpg);
  margin-bottom: 20px;
  margin-top: 20px;
  border: 1px solid #6B6B6B;
}

.f1_staff3
{
  display: block;
  width: 50px;
  height: 50px;
  background: url(http://image.noelshack.com/fichiers/2013/27/1372677434-aika.png);
  margin-bottom: 20px;
  margin-top: 20px;
  border: 1px solid #6B6B6B;
}



}

.f1_staffcontenu1, .f1_staffcontenu2, .f1_staffcontenu3
{
  position: absolute;
  width: 0px;
  height: 150px;
  background: #ffffff;
  margin-left: 80px;
  overflow: hidden;
}
.f1_staffcontenu2
{
  margin-top: -72px;
}
.f1_staffcontenu3
{
  margin-top: -144px;
}
.f1_staff1:hover .f1_staffcontenu1, .f1_staff2:hover .f1_staffcontenu2, .f1_staff3:hover .f1_staffcontenu3
{
  width: 300px;
  border: 1px solid #6B6B6B;
}

/* FIN PAGE ACCUEIL FORME 1 */


/* MISE EN FORME DES CATEGORIES ET FORUMS AVEC LES IMAGES */

.cate_titre
{
  clear: both;
  height: 100px;
  margin-top: 50px;
}

.catetitre_content
{
position: absolute;
z-index: 2;
display: block;
width: 950px;
margin-left: auto;
  margin-right: auto;
  margin-top: -40px;
text-align: center;
padding: 2px;
  border-bottom: 3px dotted #f0f0f0;
}
.catetitre
{
color: #6b6b6b;
font-family: arial;
font-size: 26px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 1px 1px 0px #000000;
}

.description
{
  display: block;
  width: 400px;
  margin: auto;
  height: 100px;
  overflow: hidden;
  border: 2px solid #9c9c9c;
  box-shadow: 1px 1px 1px #191817;
  -moz-box-shadow: 1px 1px 1px #191817;
  -htm-box-shadow: 1px 1px 1px #191817;
  -webkit-box-shadow: 1px 1px 1px #191817;
  -o-box-shadow: 1px 1px 1px #191817;
}
.description_contenu
{
  position: absolute;
  display: block;
  width: 391px;
  height: 91px;
  overflow: auto;
  background-color: #191817;
  font-size: 10px;
  color: #9c9c9c;
  text-align: justify;
  padding: 5px;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
  transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.description_contenu:hover
{
  opacity: 0.8;
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  filter: alpha(opacity=80);
  transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

/* -------- CATEGORIES ------ */

.bodylinewidth
{
width: 900px;
margin: auto;
}

.bodyline
{
background: url(IMAGE) top left no-repeat #;
border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
-htm-border-radius: 10px;
box-shadow: 3px 3px 3px #;
-moz-box-shadow: 3px 3px 3px #;
-o-box-shadow: 3px 3px 3px #;
-htm-box-shadow: 3px 3px 3px #
-webkit-box-shadow: 3px 3px 3px #;
border: 1px solid #;
}

#i_logo
{
margin-bottom: 20px;
}

#page-body
{
margin-top: 50px;
}


.forumline
{
max-width: 800px;
min-height: 100px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;
padding-right: 10px;
background-color: #FFFFFF;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
border-left: 8px solid #f0f0f0;
box-shadow: 2px 2px 2px #373737;
-moz-box-shadow: 2px 2px 2px #373737;
-o-box-shadow: 2px 2px 2px #373737;
-webkit-box-shadow: 2px 2px 2px #373737;
-htm-box-shadow: 2px 2px 2px #373737;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}


.table_head
{
width: 850px;
height: 88px;
margin: auto;
background: url(http://img11.hostingpics.net/pics/996201categorie01.jpg) top center no-repeat;
}
.table_body
{
width: 850px;
margin: auto;
background: url(http://img11.hostingpics.net/pics/122807categorie02.jpg) top center repeat-y;
}
.table_foot
{
width: 850px;
height: 129px;
margin: auto;
background: url(http://img11.hostingpics.net/pics/780236categorie04.jpg) bottom center no-repeat;
}

.cate
{
margin-top: -30px;
}
.titre
{
font-size: 18px;
font-variant: spall-caps;
letter-spacing: 2px;
text-shadow: 1px 1px 0px #4D3009;
}
.cate_body
{
width: 550px;
min-height: 100px;
margin-left: 6px;
margin-right: 6px;
margin-top: 4px;
margin-bottom: 4px;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 4px;
padding-right: 4px;
background-color: #dadada;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
border-left: 8px solid #f0f0f0;
box-shadow: 2px 2px 2px #373737;
-moz-box-shadow: 2px 2px 2px #373737;
-o-box-shadow: 2px 2px 2px #373737;
-webkit-box-shadow: 2px 2px 2px #373737;
-htm-box-shadow: 2px 2px 2px #373737;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
.cate_body:hover
{
background-color: #6b6b6b;
border-left: 8px solid #dadada;
}
.forumlink
{
display: block;
width: 300px;
text-align: center;
}
.forumlink a
{
color: #6b6b6b !important;
font-size: 14px;
font-weight: bold;
letter-spacing: 2px;
text-decoration: none !important;
text-shadow: 1px 1px 0px #828282;
border-bottom: 2px solid #4D3009;
}
.forumlink a:hover
{
color: #c7c7c7 !important;
text-shadow: 1px 1px 0px #c7c7c7;
text-decoration: none !important;
font-style: italic;
}
.illu_cate
{
float: left;
margin-right: 4px;
margin-bottom: 4px;
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(opacity=50);
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
-htm-transition: 1s;
}
.illu_cate:hover
{
float: left;
margin-right: 4px;
margin-bottom: 4px;
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
-htm-transition: 1s;
}
.description
{
display: block;
font-size: 10px;
color: #6b6b6b;
text-align: justify;
}
.liens_sousforum a
{
font-weight: bold;
}
.liens_sousforum a:hover
{
font-weight: bold;
text-decoration: none !important;
}
.stats_last
{
display: block;
width: 140px;
height: 70px;
margin-right: 5px;
background-color: #6b6b6b;
border: 1px solid #dadada;
box-shadow: 2px 2px 2px #373737;
-moz-box-shadow: 2px 2px 2px #373737;
-o-box-shadow: 2px 2px 2px #373737;
-webkit-box-shadow: 2px 2px 2px #373737;
-htm-box-shadow: 2px 2px 2px #373737;
padding: 4px;
font-size: 10px;
text-align: center;
}
.stats
{
display: block;
border-bottom: 1px dashed #828282;
font-size: 10px;
font-weight: bold;
padding-bottom: 2px;
margin-bottom: 2px;
}
.last a
{
text-transform: uppercase;
text-shadow: 1px 1px 0px #e4e4e4;
}
.last a:hover
{
text-decoration: none !important;
color: #828282 !important;
}

table
{
max-width: 800px;
margin: auto;
}



.row3Right
{
border: none !important;
}
.thHead
{
border: none !important;
}
.thCornerL, .thCornerR, .thTop
{
border: none !important;
}
.thLeft, .thRight
{
border-left: none !important;
border-right: none !important;
}
.catLeft, .catRight
{
border: none! important;
}
.catHead
{
border: none !important;
}
.catBottom
{
border: none !important;
}

/* ------ INFOBULLE ------ */

        a.info {
        position:relative;
        z-index:24;
        color:#000000;
        text-decoration:none
        }
       
        a.info:hover {
        z-index:25;
        background-color:#FFFFFF
        }
       
        a.info span {
        display: none
        }
       
        a.info:hover span {
        display:block;
        position:absolute;
        top:0px;
        left:0px;
        width:100px;
        border:1px solid #000000;
        background-color:#FFFFFF;
        color:#000000;
        font-weight:none;
        padding:5px;
        }

/*--------- BARRE DE NAVIGATION ------- /*

        .navig {
        position: absolute;
        top: 0px;
        width: 100%;
        background-color: #FFFFFF;
        border-bottom: 3px solid #000000;
        }



*/-----------QQEL-------/*

/* QEEL ONGLETS LATERAUX HOVER */

.qeelnu31_titre
{
  display: block;
  width: 800px;
  height: 100px;
  background-image: url(http://image.noelshack.com/fichiers/2013/27/1372676606-qqel.png);
  margin: auto;
}
#qeelnu31
{
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 5px;
  height: 200px;
  padding: 10px;
  background: #FFFFFF;
  border: 1px solid #6B6B6B;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -htm-border-radius: 10px;
  -webkit-border-radius: 10px;
  box-shadow: 0px 0px 5px #6B6B6B1;
  -moz-box-shadow: 0px 0px 5px #6B6B6B;
  -o-box-shadow: 0px 0px 5px #6B6B6B;
  -htm-box-shadow: 0px 0px 5px #6B6B6B;
  -webkit-box-shadow: 0px 0px 5px #6B6B6B;
}
#qeelnu31_content
{
  width: 750px;
  height: 200px;
  overflow: hidden;
}
#qeelnu31_links
{
  float: left;
}
.qeelnu31_link1, .qeelnu31_link2, .qeelnu31_link3
{
  width: 150px;
  height: 48px;
  margin-bottom: 2px;
  opacity: 0.6;
  -moz-opacity: 0.6;
  -khtml-opacity: 0.6;
  filter: alpha(opacity=60);
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeelnu31_link1
{
  background: url(http://image.noelshack.com/fichiers/2013/27/1372672686-24.png);
}
.qeelnu31_link2
{
  background: url(http://image.noelshack.com/fichiers/2013/27/1372672688-groupes.png);
}
.qeelnu31_link3
{
  background: url(http://image.noelshack.com/fichiers/2013/27/1372672681-h-b.png);
}
.qeelnu31_link1:hover, .qeelnu31_link2:hover, .qeelnu31_link3:hover
{
  opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
 
}
.qeelnu31_contenu1
{
  width: 750px;
  height: 200px;
  margin-left: 150px;
  background: #F0F0F0;
  border: 1px solid #f2eee9;
  box-shadow: 0px 0px 3px #c1b1a0;
  -moz-box-shadow: 0px 0px 3px #c1b1a0;
  -o-box-shadow: 0px 0px 3px #c1b1a0;
  -webkit-box-shadow: 0px 0px 3px #c1b1a0;
  -htm-box-shadow: 0px 0px 3px #c1b1a0;
  color: #6B6B6B;
}
.qeelnu31_contenu2
{
  position: absolute;
  width: 0px;
  height: 200px;
  margin-left: 150px;
  overflow: hidden;
  background: #F0F0F0;
  border: 1px solid #f2eee9;
  box-shadow: 0px 0px 3px #c1b1a0;
  -moz-box-shadow: 0px 0px 3px #c1b1a0;
  -o-box-shadow: 0px 0px 3px #c1b1a0;
  -webkit-box-shadow: 0px 0px 3px #c1b1a0;
  -htm-box-shadow: 0px 0px 3px #c1b1a0;
  color: #6B6B6B;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeelnu31_contenu3
{
  position: absolute;
  width: 0px;
  height: 200px;
  margin-left: 150px;
  margin-top: -50px;
  overflow: hidden;
  background: #F0F0F0;
  border: 1px solid #f2eee9;
  box-shadow: 0px 0px 3px #c1b1a0;
  -moz-box-shadow: 0px 0px 3px #c1b1a0;
  -o-box-shadow: 0px 0px 3px #c1b1a0;
  -webkit-box-shadow: 0px 0px 3px #c1b1a0;
  -htm-box-shadow: 0px 0px 3px #c1b1a0;
  color: #6B6B6B;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeelnu31_contenu4
{
  position: absolute;
  width: 0px;
  height: 200px;
  margin-left: 150px;
  margin-top: -100px;
  overflow: hidden;
  background: #F0F0F0;
  border: 1px solid #f2eee9;
  box-shadow: 0px 0px 3px #c1b1a0;
  -moz-box-shadow: 0px 0px 3px #c1b1a0;
  -o-box-shadow: 0px 0px 3px #c1b1a0;
  -webkit-box-shadow: 0px 0px 3px #c1b1a0;
  -htm-box-shadow: 0px 0px 3px #c1b1a0;
  color: #6B6B6B;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeelnu31_link1:hover .qeelnu31_contenu2, .qeelnu31_link2:hover .qeelnu31_contenu3,
.qeelnu31_link3:hover .qeelnu31_contenu4
{
  width: 650px;
  height: 200px;
  overflow: auto;
  opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeelnu31_contenu
{
  display: block;
  padding: 5px;
  color: #6B6B6B;
  font-size: 10px;
  text-align: justify;
}

.qeelnu31_stats
{
  font-size: 12px;
  text-shadow: -1px -1px 0px #6B6B6B;
  letter-spacing: 2px;
  font-weight: bold;
}
.usernu31_online
{
  display: block;
  font-size: 12px;
  text-shadow: -1px -1px 0px #6B6B6B;
  letter-spacing: 2px;
  font-weight: bold;
  text-align: center;
}
.gr1, .gr2, .gr3, .gr4, .gr5, .gr6, .gr7, .gr8, .gr9, .gr10, .gr11
{
  font-size: 18px;
  font-weight: bold;
  text-shadow: -1px -1px 0px #6B6B6B;
  text-transform: uppercase;
}
a.gr1
{
  color: #424242 !important;
}
.gr2
{
  color: #BB76C9 !important;
}
.gr3
{
  color: #FF0505 !important;
}
.gr4
{
  color: #4BD15F !important;
}
.gr5
{
  color: #FF600A !important;
}
.gr6
{
  color: #B5B51D !important;
}
.gr7
{
  color: #20C0FA !important;
}
.gr8
{
  color: #4FB397 !important;
}
.gr_description
{
  font-size: 10px;
  line-height: 9px;
  text-align: justify;
  color: #6B6B6B;
  text-shadow: 1px 1px 0px #;
}


/* -------- TABLEAU PAGE ACCUEIL ------ */

/*TITRES*/
.titr {
  font-family: Cookie; font-size: 55px;
  line-height: 80%; letter-spacing: 0px; position: relative; right: 9px;
  color:#D69E48;
  margin-top: -5px;
}

.titr2 {
  font-family: "Englebert"; line-height: 22px;
  margin-top:2px;
  letter-spacing: 0px;
  text-align: center;
  font-size: 15px;
  color: #CBB5B8;
}

.titr2:hover {
  color:white;
}

/*BLOC CONTEXTE*/
.catei {
  width: 205px;
  height: 225px;
  border: 2px solid #7996A2;
  background-color: #ffffff;
  border-radius: 2px 2px 2px 2px;
}

.cateititre {
  background-color:#7996A2;
  font-family: 'Redressed';
  color: #D5C5C8;
  font-size: 14px;
  text-align: center;}

.catei_description {
  position: relative;
  width: 200px;
  height: 205px;
  z-index: 1;
  margin-top: 2px;
  text-align: justify;
  font-size: 10px;
  font-family: arial;
  color: ;
  padding: 1px;
  overflow: auto;
}

/*BLOC STAFF*/
.q3 {
  background-color: #ffffff;
  border: 2px solid #7996A2;
  text-align:center;
  border-radius: 1px 1px 1px 1px;
  width: 740px;
  height: 100px;
}

/*SLIDE*/
.wow {
  font-family: georgia;
  opacity:0.0;
  font-size:12px;
  color: black;
  text-align: center;
  width: 110px;
  height: 80px;
  background-color:#7996A2;
  -webkit-transition: opacity .6s linear;
  -moz-transition: opacity .6s linear;
  -o-transition: opacity .6s linear;
}

.wow:hover {
  opacity: 1
}


/*TOP PARTENAIRE*/
.cad {
  width: 280px;
  height: 70px;
  border: 2px solid #7996A2;
  background-color: #ffffff;
  border-radius: 2px 2px 2px 2px;
}

.topS {
  color: #C2B496;
  font-size: 14px;
}

/*MEMBRE DU MOIS*/
.cadm {
  width: 280px;
  height: 140px;
  border: 2px solid #7996A2;
  background-color: #ffffff;
  border-radius: 2px 2px 2px 2px;
}

/*SLIDE*/
.wow2 {
  font-family: georgia;
  opacity:0.0; 
  font-size:12px;
  color: black;
  text-align: center;
  width: 130px;
  height: 50px;
  background-color:#7996A2;
  -webkit-transition: opacity .6s linear;
  -moz-transition: opacity .6s linear;
  -o-transition: opacity .6s linear;
}

.wow2:hover {
  opacity: 1
}

/*NEWS*/
.new {
  width: 230px;
  height: 220px;
  border: 2px solid #7996A2;
  background-color: #ffffff;
  border-radius: 2px 2px 2px 2px;
}

.cred {
  width: 225px;
  height: 200px;
  text-align: justify;
  font-size: 11px;
  font-family: arial;
  padding: 1px;
  overflow: auto;
}

.cate {
  width: 362px;
  height: 125px;
  overflow: hidden;
  border: 2px solid #7996A2;
  background-color: #ffffff;
  border-radius: 2px 2px 2px 2px;
}

/*PV&SCENARIOS*/
.q5{
  display: block;
  border: 2px solid #7996A2;
  background-color: #ffffff;
  text-align:center;
  padding:1px;
  border-radius: 2px 2px 2x 2x;
  width: 735px;
  height: 70px;
}

.wow3{
  font-family: georgia;
  opacity:0.0; 
  font-size:10px;
  color: black;
  text-align: center;
  width: 105px;
  height: 50px;
  background-color:#7996A2;
  -webkit-transition: opacity .6s linear;
  -moz-transition: opacity .6s linear;
  -o-transition: opacity .6s linear;
}

.wow3:hover {
  opacity: 1
}


.center {
  margin-right: -7px;
}

.cellule_pv0{
 margin-left: -345;
}
.cellule_pv1 {
  margin-left: -245;
}


/************* QEEL PAR PHANTASMAGORIA sur PRD *******/

.fond_qeel {background-color: #ffffff; width: 780px; }
.bloc_stat1{ background-color: #ebd8d0; border: 1px solid #cc9e8e; width: 250px; height: 130px; overflow: auto;
padding: 7px; font-size: 9px; line-heigh: 10px; text-align : justify;}
 .bloc_stat2 {background-color: #ebd8d0; border: 1px solid #cc9e8e; width: 520px; height: 50px; overflow: auto;
  padding: 7px; font-size: 9px; line-heigh: 10px; text-align : justify; margin-top: -2px;}
.groupe { text-transform : Capitalize; font-family: 'Engagement', cursive; text-shadow: 1px 1px 2px #fff;
  font-size: 18px; margin-top: -10px;}



Un grand merci d'avance !

[MlleAlys]

Bonjour,
vous avez dû retirer le css qui permettait la mise en forme de l'infobulle.
Serait-il possible d'avoir le lien du message où apparait le code, ou à défaut le code utilisé dans le message ?

[Choupette9]

Oui, voici le code utilisé pour faire la fiche :

Code:

<br><table style="background-color: #C8AE9D; vertical-align: top; border: 3px solid #9F7355; padding-left: 15px; padding-right: 15px; padding-bottom: 16px; -moz-border-radius: 40px;" width="800" align="center" cellpadding="0" cellspacing="0"><tbody><tr><td colspan="2"><font face="ballpark" size="6"><font style="color:#E8DED7;border-top: 5px none; -moz-border-radius: 60px 60px 60px 60px;text-align: center; padding-bottom: 2px; padding-top:8px;background-color: #9F7355; line-height: 30px; display: block;">Yuki Alena</font> </font></td></tr><tr><td><br>

<div style="vertical-align: top; border: 5px solid #9F7355; padding: 10px; width: 180px; height: 300px; -moz-border-radius: 40px; margin-right: 15px; margin-top:-30px;background-image: url('http://i39.servimg.com/u/f39/11/24/17/67/avatar21.jpg'); "></div><div style="font-size:10px;text-align:center;">[url=http://candids.nexgate.ch]© CRÉDIT - FICHE[/url]</div></td><td><font face="ballpark" size="5"><font style="color:#5B412F;line-height: 13px; display: block;text-align:center;">Description</font></font><table width="100%" bgcolor="#E8DED7"><tbody><tr><td align="left"></td></tr></tbody></table><table width="100%" bgcolor="#9F7355"><tbody><tr><td align="left"></td></tr></tbody></table>
[justify]<font style="color:#3C3C3C;font-family:georgia;font-size:13px;line-height:14px;">[b]Nom:[/b] ......
[b]Prénom:[/b] .....
[b]Age:[/b] ......
[b]Groupe:[/b] ......
[b]Pouvoir:[/b] ......
[b]Rang:[/b] ......
<select name="wxlmenu" size=1 style="font-family: arial; color: sienna; border: double Sienna;-moz-border-radius:8px; font-size: 12; padding:3px; background-color: Moccasin;"><div style="border: double #DC143C;"><option>TEXTE</option>
<option>TEXTE</option>
<option>TEXTE</option>
<option>TEXTE</option>
<option>TEXTE</option>
<option>TEXTE</option>
<option>TEXTE</option>
<option>TEXTE</option>
<option>TEXTE</option>
<option>TEXTE</option>
<option>TEXTE</option>
</font>[/justify]
<table><font face="ballpark" size="5"><font style="color:#5B412F;line-height: 13px; display: block;text-align:center;">Histoire</font></font><table width="100%" bgcolor="#E8DED7"><tbody><tr><td align="left"></td></tr></tbody></table><table width="100%" bgcolor="#9F7355"><tbody><tr><td align="left"></td></tr></tbody></table>
[justify]<font style="color:#3C3C3C;font-family:georgia;font-size:13px;line-height:14px;">
TEXTE HISTOIRE</font>[/justify]
<font face="ballpark" size="5"><font style="color:#5B412F;line-height: 13px; display: block;text-align:center;">Liens</font></font><table width="100%" bgcolor="#E8DED7"><tbody><tr><td align="left"></td></tr></tbody></table><table width="100%" bgcolor="#9F7355"><tbody><tr><td align="left"></td></tr></tbody></table><table border="0" align="center"><tr><td><div class="thumbnail"><img src="http://i39.servimg.com/u/f39/11/24/17/67/icone_23.png" style="width: 100px; height: 100px;" border="0" class="gradualfader" /><span><div class="tstaff"><b>Nom et prénom</b>TEXTE TEXTE TEXTE</a></div></td></span></div></td><td><div class="thumbnail"><img src="http://i39.servimg.com/u/f39/11/24/17/67/icone_10.jpg" style="width: 100px; height: 100px;" border="0" class="gradualfader" /><span><div class="tstaff"><b>Nom et prénom:</b> TEXTE TEXTE TEXTE</a></div></td></span></div></td><td><div class="thumbnail"><img src="http://i39.servimg.com/u/f39/12/31/53/69/icone_14.jpg" style="width: 100px; height: 100px;" border="0" class="gradualfader" /><span><div class="tstaff"><b>Nom et prénom:</b> TEXTE TEXTE TEXTE</a></div></td></span></div></td><td><div class="thumbnail"><img src="http://i39.servimg.com/u/f39/12/31/53/69/icone_10.png" style="width: 100px; height: 100px;" border="0" class="gradualfader" /><span><div class="tstaff"><b>Nom et prénom :</b>TEXTE TEXTE TEXTE</a></div></td></span></div></td><td><div class="thumbnail"><img src="http://i39.servimg.com/u/f39/11/24/17/67/icone_16.png" style="width: 100px; height: 100px;" border="0" class="gradualfader" /><span><div class="tstaff"><b>Nom et prénom :</b>TEXTE TEXTE TEXTE</a></div></td></span></div></td><td><div class="thumbnail"><img src="http://i39.servimg.com/u/f39/11/24/17/67/icone_10.png" style="width: 100px; height: 100px;" border="0" class="gradualfader" /><span><div class="tstaff"><b>Nom et prénom :</b>TEXTE TEXTE TEXTE</a></div></td></span></div></td></tr></table></td></tr></tbody></table>

[MlleAlys]

Pour le principe, vous avez une div de class .tstaff à l'intérieur d'un bloc de class .thumbnail
On veut que la div.tstaff soit cachée, et aparaisse au survol de .thumbnail
Et on veut également que la div.tsaff soit positionnée au dessus du reste, un positionnement absolu.

Voilà le code que ça peut donner après mise en forme de l'infobulle pour la rendre plus jolie :

Code:

/*début infobulle*/

.thumbnail {
  position: relative;  /*pour pouvoir positionner l infobulle par rapport à l image*/
  cursor: help;  /*curseur de la souris au survol*/
}
.thumbnail div.tstaff {
  position: absolute;  /*pour positionner l infobulle par rapport à l image*/
  top: 90px; /*position verticale de l infobulle*/
  left: -220px;  /*position horizontale de l infobulle*/
  background: rgb(200, 174, 157);  /*couleur de fond*/
  border: 2px solid rgb(159, 115, 85); /*bordure*/
  width: 300px;  /*largeur de l infobulle*/
  height: 200px;  /*hauteur de l infobulle*/
  padding: 5px; /*marge intérieure*/
  overflow: auto;  /*pour la barre de défilement*/
  z-index: 1;  /*pour que l infobulle reste au dessus des images*/
  border-radius: 5px; /*arrondi des coins*/
  box-shadow: 0 0 10px black;  /*effet d ombre*/
  display: none;  /*pour masquer l infobulle*/
}

.thumbnail:hover .tstaff {
  display: block;  /*pour afficher l infobulle au survol de thumbnail*/
}

/*fin infobulle*/

J'ai fait une mise en forme rapide modifiable bien sûr, les commentaires devraient vous y aider ^^

[Choupette9]

Waaaaaah merci beaucoouup ! J'ai testé et ça fonctionne à merveille ! Elle est encore plus jolie que la précédente !
Merci encore ^^