Infobulle qui se decalle

[akito73]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://parselmouth.forumactif.org/

Description du problème

Bonjour!

J'ai un probleme avec mon infobulle. Sur mon forum (que voici http://parselmouth.forumactif.org/) j'ai mis en place un systeme d'infobulle dans le qui est en ligne pour la description des groupes. j'ai un petit cadre en dessous des groupes dans lequel je voudrais que l'infobulle tienne, mais pour les infobulles des autres groupes, celle ci de deplace tout le temps... et je voudrais qu'elle reste a la meme place pour tous les groupes.

Comment faire?

Je vous remercie d'avance.

[Alzufen]

Bonjour,

un conseil pour rendre les choses plus facile, tu devrais mettre tes "span" hors de tes liens de groupe, leur attribué une class, et pareil pour chaque groupe, ensuite, tu lies le survol de la première class à la deuxième avec entre les deux un ~, comme ceci :

Code:

.Ta1erClass:hover ~ .Ta2ndClass

Tu entoureras ensuite les groupes d'une div qui aura pour hauteur maximum celle du groupe et qui sera en position relative, tu feras pareil pour l'infobulle qui sera aussi en position relative et aura pour hauteur la hauteur maximum d'une infobulle. Ensuite, tu mettra chaque infobulle en position absolute, avec comme propriété "top: 0" ils se retrouveront donc toutes tout en haut en dessous des groupes, si tu veux la mettre plus bas il te suffira d'augmenter la taille du "top" en pixel

Si tu me fournis le code des légendes de ton QEEL ou carrément le template je peux te le faire si tu veux

[akito73]

Oh merci ca serait sympa, car j'ai pas tout compris ce que tu as dit xD

Voici le css :



et le template:




Merci beaucoup encore, c'est enormément gentil de ta part!!!!

[Alzufen]

Petite question, tu as voulu faire quoi avec ça ?

Code:

  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));

Parce que "background-image" et "linear-gradient" sont pas compatible ^^'

[akito73]

Euh, c'est un code que j'ai pris sur un site qui expliquait comment faire des infobulles... donc j'ai juste copié collé le code en fait T_T

Parce que eux sur leur site ils ont fait des infobulles en degradé et tout (en CSS3) je pense c'est pour ca qu'il y a ca

[Alzufen]

Ca me paraissait juste étrange qu'on utilise "background-image" et non "background-color" car généralement background-image est suivant d'un lien url d'une image donc bon... Mais en fait c'est marche avec les deux, vraiment chelou cette propriété... Mais à toi, elle te sert à quelque chose du coup ? ^^

[akito73]

Ba non a moi du coup c'est vrai que ca me sert pas, et j'ai pas pensé à l'enlever donc du coup c'est en trop haha...

[Alzufen]

Ce que j'aime pas avec les codes en libre services, c'est qu'ils donnent les codes mais sans explication, et le soucis c'est que la plus part des préfixes (-préfixe-) utilisés ne sont plus utiles... Genre à la limite on pourrait mettre "-webkit-gradient-linear" au cas où pour les mobiles (et encore), mais sinon pour les navigateurs ça marche avec tous depuis pas mal de temps... XD Tellement de préfixes inutiles qui allongent le code pour pas grand chose

[akito73]

Ba ouais c'est ca le truc... et encore sur le site en question ils ont parlé d'autres trucs en montrant genre les resultats, mais en ne disant pas les explications et après ils ont parlé encore d'autres trucs, et PAF ils te balancent le code xD

[Alzufen]

C'est comme ça que tu veux tes infobulles ? http://t-alzufen.forumactif.org/

[akito73]

Oui voila c'est ca

après faut juste que ca apparaisse dans le cadre en dessous ou y'a marqué "les groupes" (il se voit pas beaucoup je sais xD) mais au pire ca je peux essayer de le faire si t'as la flemme, c'est deja gentil d'avoir fait ca

[Alzufen]

J'ai pas la flemme, j'ai 50 milles onglets d'ouvert, je suis plus à ça près mais... C'est pas qu'il se voit pas beaucoup, c'est qu'il se voit pas du tout tu veux dire ! Le seul truc que je vois c'est le texte "Les groupes" et la bordure tout en bas assez espacé du texte... Faut tout descendre, les noms des groupes compris ou juste l'infobulle ?

Tu peux pas avec un logiciel de Graph me montrer où ça doit aller ? Même si c'est juste avec une flèche ou autre hein, un truc à la con que je comprenne juste où est le "cadre" XD

[akito73]

C'est juste l'infobulle qu'il faut descendre en dessous

[Alzufen]

Comme ci comme ça ?

[akito73]

OMG <3<3<3<3<3 c'est exactement ca!!!!

[Alzufen]

Donc du coup, le template :

Code:

{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- BEGIN message_admin_titre -->
<tr>
   <td class="catHead" height="28">
      <span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span>
   </td>
</tr>
<!-- END message_admin_titre -->
<!-- BEGIN message_admin_txt -->
<tr>
   <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">
         {message_admin_index.message_admin_txt.MES_TXT}
      </div>
   </td>
</tr>
<!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->
<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
   <tr>
      <td class="row1" align="center">
         <table border="0" cellspacing="0" cellpadding="0">
         <tr>
            <td>
               <span class="genmed">{L_USERNAME}:</span>&nbsp;
            </td>
            <td>
               <input class="post" type="text" size="10" name="username"/>&nbsp;
            </td>
            <td>
               <input class="radio" type="checkbox" name="autologin" {autologin_checked}/>
               <span class="gensmall">{L_AUTO_LOGIN}</span>&nbsp;
            </td>
         </tr>
         <tr>
            <td>
               <span class="genmed">{L_PASSWORD}:</span>&nbsp;
            </td>
            <td>
               <input class="post" type="password" size="10" name="password"/>&nbsp;
            </td>
            <td>
               {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}"/>
            </td>
         </tr>
         </table>
      </td>
   </tr>
   </table>
   <!-- END switch_fb_connect_no -->
   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
   <tr>
      <td valign="top" width="100%" class="row1" align="center">
         <table width="100%">
         <tr>
            <td width="55%" valign="middle" align="right">
               <table class="right">
               <tr>
                  <td>
                     <span class="genmed">{L_USERNAME}:</span>&nbsp;
                  </td>
                  <td>
                     <input class="post" type="text" size="10" name="username"/>&nbsp;
                  </td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {autologin_checked}/>
                     <span class="gensmall">{L_AUTO_LOGIN}</span>&nbsp;
                  </td>
               </tr>
               <tr>
                  <td>
                     <span class="genmed">{L_PASSWORD}:</span>&nbsp;
                  </td>
                  <td>
                     <input class="post" type="password" size="10" name="password"/>&nbsp;
                  </td>
                  <td>
                     {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}"/>
                  </td>
               </tr>
               </table>
            </td>
            <td width="10%" align="center" valign="middle">
               <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
            </td>
            <td width="35%" class="align_gauche">
               <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
            </td>
         </tr>
         </table>
      </td>
   </tr>
   </table>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_header -->
 {CHATBOX_TOP} {BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
   <td width="50%" valign="top">
      <!-- BEGIN switch_user_logged_in -->
      <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
      <!-- END switch_user_logged_in -->
      <!-- BEGIN switch_delete_cookies -->
      <br/><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
      <!-- END switch_delete_cookies -->
   </td>
   <td width="50%" align="right">
      <span class="gensmall">
      <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br/>
      <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br/>
      <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
      <!-- BEGIN switch_on_index -->
      <!-- BEGIN switch_delete_cookies -->
      <br/><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
      <!-- END switch_delete_cookies -->
      <!-- END switch_on_index -->
      </span>
   </td>
</tr>
</table>
<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
   <tr>
      <td class="row1" align="center">
         <table border="0" cellspacing="0" cellpadding="0">
         <tr>
            <td>
               <span class="genmed">{L_USERNAME}:</span>&nbsp;
            </td>
            <td>
               <input class="post" type="text" size="10" name="username"/>&nbsp;
            </td>
            <td>
               <input class="radio" type="checkbox" name="autologin" {autologin_checked}/>
               <span class="gensmall">{L_AUTO_LOGIN}</span>&nbsp;
            </td>
         </tr>
         <tr>
            <td>
               <span class="genmed">{L_PASSWORD}:</span>&nbsp;
            </td>
            <td>
               <input class="post" type="password" size="10" name="password"/>&nbsp;
            </td>
            <td>
               {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}"/>
            </td>
         </tr>
         </table>
      </td>
   </tr>
   </table>
   <!-- END switch_fb_connect_no -->
   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
   <tr>
      <td valign="top" width="100%" class="row1" align="center">
         <table width="100%">
         <tr>
            <td width="55%" valign="middle">
               <table class="right">
               <tr>
                  <td>
                     <span class="genmed">{L_USERNAME}:</span>&nbsp;
                  </td>
                  <td>
                     <input class="post" type="text" size="10" name="username"/>&nbsp;
                  </td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {autologin_checked}/>
                     <span class="gensmall">{L_AUTO_LOGIN}</span>&nbsp;
                  </td>
               </tr>
               <tr>
                  <td>
                     <span class="genmed">{L_PASSWORD}:</span>&nbsp;
                  </td>
                  <td>
                     <input class="post" type="password" size="10" name="password"/>&nbsp;
                  </td>
                  <td>
                     {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}"/>
                  </td>
               </tr>
               </table>
            </td>
            <td width="10%" align="center" valign="middle">
               <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
            </td>
            <td width="35%" class="align_gauche">
               <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
            </td>
         </tr>
         </table>
      </td>
   </tr>
   </table>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_footer -->
<!-- BEGIN disable_viewonline -->
<div class="qeel_titre">
</div>
<div class="qeel">
   <table class="qeel_table">
   <tr>
      <td>
         <div class="colonne">
            <span class="qeel_contenu">
            <br/>
            <span id="totalu"> {TOTAL_USERS}
            <script type="text/javascript">document.getElementById('totalu').innerHTML=document.getElementById ('totalu').innerHTML.replace(/Nous avons/,"Il y a actuellement");</script>
            <script type="text/javascript">document.getElementById('totalu').innerHTML=document.getElementById ('totalu').innerHTML.replace(/membre enregistré/,"élèves à Poudlard.");</script>
            <script type="text/javascript">document.getElementById('totalu').innerHTML=document.getElementById ('totalu').innerHTML.replace(/membres enregistrés/,"élèves à Poudlard.");</script>
            </span><span id="totalp"> {TOTAL_POSTS}
            <script type="text/javascript">document.getElementById('totalp').innerHTML=document.getElementById ('totalp').innerHTML.replace(/Nos membres ont posté un total de/,"Ceux-ci travaillent dur, puisqu'ils ont rédigé un total de");</script>
            <script type="text/javascript">document.getElementById('totalp').innerHTML=document.getElementById ('totalp').innerHTML.replace(/messages/,"parchemins depuis leur arrivée à l'école. ");</script>
            </span><br/><br/><span id="kumao">{TOTAL_USERS_ONLINE}</span>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Il y a en tout/,"Il y a d'ailleurs");</script>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/utilisateurs en ligne ::/," élèves qui se baladent dans les couloirs en ce moment-même:");</script>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/utilisateur en ligne ::/," élèves qui se baladent dans les couloirs en ce moment-même::");</script>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Enregistré,/," sont en classe,");</script>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Enregistrés,/," sont en classe,");</script>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Invisible et/,"  fantômes  et");</script>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Invisibles et/," fantômes  et");</script>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Invités/," a Pré-Au-Lard.");</script>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Invité/," a Pré-Au-Lard.");</script>
            </span><span id="newu"> {NEWEST_USER}
            <script type="text/javascript">document.getElementById('newu').innerHTML=document.getElementById ('newu').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier élève a avoir été réparti est ");</script>
            </span><br/><br/>
            <div class="enligne">
               <span id="kumao1">{LOGGED_IN_USER_LIST}</span>
               <script type="text/javascript">document.getElementById('kumao1').innerHTML=document.getElementById('kumao1').innerHTML.replace(/Utilisateurs enregistrés/,"Les élèves actuellement présents sont");</script>
            </div>
         </div>
      </td>
      <td>
         <div class="colonne2">
            <span class="qeel_contenu">
            <table>
             {L_CONNECTED_MEMBERS}
            </table>
            </span>
         </div>
      </td>
   </tr>
   </table>
   <div class="groupesposition">
      <a href="http://parselmouth.forumactif.org/g8-gryffondor" class="tooltip1">
      <hl1>Gryffondor</hl1>
      </a><br/>
      <a href="http://parselmouth.forumactif.org/g4-serpentard" class="tooltip2">
      <hl2>Serpentard</hl2>
      </a><br/>
      <a href="http://parselmouth.forumactif.org/g6-serdaigle" class="tooltip3">
      <hl3>Serdaigle</hl3>
      </a><br/>
      <a href="http://parselmouth.forumactif.org/g9-poufsouffle" class="tooltip4">
      <hl4>Poufsouffle</hl4>
      </a><br/>
      <a href="http://parselmouth.forumactif.org/g5-personnel" class="tooltip5">
      <hl5>Personnel de l'école</hl5>
      </a>
      <div class="legend_descri">
         <div class="tooltip1">
            en cours de creatiooooonnnnnnnnnnnnnn
         </div>
         <div class="tooltip2">
            en cours de creatiooooonnnnnnnnnnnnnn
         </div>
         <div class="tooltip3">
            en cours de creatiooooonnnnnnnnnnnnnn
         </div>
         <div class="tooltip4">
            en cours de creatiooooonnnnnnnnnnnnnn
         </div>
         <div class="tooltip5">
            en cours de creatiooooonnnnnnnnnnnnnn
         </div>
      </div>
   </div>
</div>
<!-- END disable_viewonline -->
 {CHATBOX_BOTTOM}
<table style="position: fixed; bottom: 50px; left: 0px;z-index:10000;">
<tr>
   <td>
      <iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 650px; height: 320px; display: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border-bottom: #e6ddd1; border-top: #e6ddd1;" marginwidth="0" marginheight="0" frameborder="0">
      </iframe>
   </td>
   <td style="vertical-align: bottom;">
      <img src="http://image.noelshack.com/fichiers/2015/07/1424021438-ouvrirchatbox.png" onclick="document.getElementById('chatboxpop').style.display=(this.src=='http://image.noelshack.com/fichiers/2015/07/1424021438-ouvrirchatbox.png')?'block':'none';this.src=(this.src=='http://image.noelshack.com/fichiers/2015/07/1424021438-ouvrirchatbox.png')?'http://image.noelshack.com/fichiers/2015/07/1424021438-fermerchatbox.png':'http://image.noelshack.com/fichiers/2015/07/1424021438-ouvrirchatbox.png';"/>
   </td>
</tr>
</table>
<br clear="all"/>
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
<tr>
   <td align="center" width="20">
      <img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}"/>
   </td>
   <td>
      <span class="gensmall">{L_NEW_POSTS}</span>
   </td>
   <td>
   </td>
   <td align="center" width="20">
      <img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}"/>
   </td>
   <td>
      <span class="gensmall">{L_NO_NEW_POSTS}</span>
   </td>
   <td>
   </td>
   <td align="center" width="20">
      <img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}"/>
   </td>
   <td>
      <span class="gensmall">{L_FORUM_LOCKED}</span>
   </td>
</tr>
</table>
<!-- END switch_legend -->
 {AUTO_DST}
<!-- BEGIN switch_fb_index_login -->
<div id="fb-root">
</div>
<script type="text/javascript">
//<![CDATA[
FB.init({
  appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true,
  oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

Et le css :

Code:

/*infobulle*/
.groupesposition a {
   position:relative;
   display:inline-block;
   text-decoration:none;
   color:#222;
}
.legend_descri {
   position:relative;
   top:80px;
}
.legend_descri div {
   visibility:hidden;
   position:absolute;
   top:0;
   left:50%;
   margin-left:-102px;
   z-index:999;
   width:180px;
   padding:10px;
   border:2px solid #ccc;
   opacity:.9;
   background:#ddd;
   border-radius:4px;
   box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset;
   text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.tooltip1:hover ~ .legend_descri .tooltip1,.tooltip2:hover ~ .legend_descri .tooltip2,.tooltip3:hover ~ .legend_descri .tooltip3,.tooltip4:hover ~ .legend_descri .tooltip4,.tooltip5:hover ~ .legend_descri .tooltip5 {
   visibility:visible;
}
.legend_descri div:before,.legend_descri div:after {
   content:"";
   position:absolute;
   z-index:999;
   bottom:-7px;
   left:50%;
   margin-left:-8px;
   border-top:8px solid #ddd;
   border-left:8px solid transparent;
   border-right:8px solid transparent;
   border-bottom:0;
}
.legend_descri div:before {
   border-top-color:#ccc;
   bottom: -8px;
}
/* qui est en ligne */
.qeel {
   background:url("http://image.noelshack.com/fichiers/2015/09/1424649970-qui-est-en-ligne2.png") no-repeat;
   width:750px;
   height:400px;
   text-align:justify;
   font-size:11px;
   border-top:5px solid #e6ddd1;
   border-bottom:5px solid #e6ddd1;
   border-radius:7px;
   margin:auto;
}
.colonne {
   position:absolute;
   width:195px;
   height:215px;
   overflow:auto;
   margin-top:105px;
   margin-left:53px;
}
.colonne2 {
   position:absolute;
   width:195px;
   height:215px;
   overflow:auto;
   margin-top:105px;
   margin-left:495px;
}
HL1,HL2,HL3,HL4,HL5 {
   font-size:13px;
   letter-spacing:1px;
   font-family:'Slabo 27px',sans-serif;
   text-transform:uppercase;
   text-shadow:0px 1px 0px white;
}
HL1 {
   color:#D12227;
}
HL2 {
   color:#72A372;
}
HL3 {
   color:#5F6CAD;
}
HL4 {
   color:#E0B526;
}
HL5 {
   color: #8A5A5A;
}
/* infobulles groupes */
.groupesposition {
   position:absolute;
   z-index:1;
   width:250px;
   height:350px;
   overflow:auto;
   margin-top:75px;
   margin-left:245px;
   text-align: center;
}

[akito73]

Merci!

C'est exactement ce que je voulais et ca rend impec sur mon forum aussi!

Merci énormément pour ton aide Alzufen !

Problème résolé