Réglages code pour QEEL

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

Résolu Réglages code pour QEEL

Message par Azya le Jeu 28 Mar 2013 - 15:31

bonjour à tous,

voilà, j'ai récupérer un code pour mon QEEL sur Thème FA. J'essaie vainement d'y apporter une petite modification




Comme vous pouvez voir sur l'image, en haut se trouve une bulle : Statiques

J'essaie de mettre une autre partie à côté : Sujets actifs/Top20 qui se trouve intégré dans la bulle Bonus

Je vous remets le HT non modifié

Code:
<!-- BEGIN disable_viewonline -->

<!-- IMAGE DU HAUT -->
<div id="haut_du_qeel" style="width: 100%; text-align: center;"><img src="http://fr.quozpowa.com/QuozUpload/20349135071364474959catQEEL.png" alt="" /></div>
<!-- DEBUT CODE DES ONGLETS -->

<div id="qeel_TFA_block">

<!-- BOUTON DU HAUT -->

    <div class="tfa_boutons" id="haut_boutons" >
        <a href="#" onclick="Monter_Cacher('my_qeel_1'); return false"><span class="qeel_span"> Statistiques </span></a>
  </div>

<!-- BOUTON DE GAUCHE -->

    <div class="tfa_boutons" id="gauche_boutons">
        <a href="#" onclick="Monter_Cacher('my_qeel_2'); return false"><span class="qeel_span"> Groupes </span></a>
  </div>

<!-- BOUTON DE DROITE -->

    <div class="tfa_boutons"  id="droite_boutons">
        <a href="#" onclick="Monter_Cacher('my_qeel_3'); return false"><span class="qeel_span">Qui est là ?</span></a>
  </div>

<!-- DEBUT DU BLOC DE CONTENU -->

 <div  id="container_tfa_my_qeel">

<!-- CONTENU DU PREMIER ONGLET - STATISTIQUES -->

    <div id="my_qeel_1">
        <div class="contenty_tfa">
            <div class="my_tfa_qeel_content">
     
<div id="TFA12">{TOTAL_POSTS} 
<script type="text/javascript">
document.getElementById('TFA12').innerHTML=document.getElementById('TFA12').innerHTML.replace(/Nos membres ont posté un total de /,"Nos employés ont posté un total de, ");
</script> </div>
<br />
<div id="TFA13">{TOTAL_USERS} 
<script type="text/javascript">
document.getElementById('TFA13').innerHTML=document.getElementById('TFA13').innerHTML.replace(/Nous avons /,"L'entreprise compte, ");
document.getElementById('TFA13').innerHTML=document.getElementById('TFA13').innerHTML.replace(/membres enregistrés/,"employés. ");
document.getElementById('TFA13').innerHTML=document.getElementById('TFA13').innerHTML.replace(/membre enregistré/,"employé. ");
</script> </div>
<div id="TFA14">{NEWEST_USER}
<script type="text/javascript">
document.getElementById('TFA14').innerHTML=document.getElementById('TFA14').innerHTML.replace(/L'utilisateur enregistré le plus récent est /,"Le dernier arrivant s'appelle : ");
</script> </div> 
<br />
<span id="TFA0">{TOTAL_USERS_ONLINE}</span>
<script type="text/javascript">
document.getElementById('TFA0').innerHTML=document.getElementById('TFA0').innerHTML.replace(/Il y a en tout /,"Nous comptons en tout  ");
document.getElementById('TFA0').innerHTML=document.getElementById('TFA0').innerHTML.replace(/utilisateurs en ligne/,"personnes actuellement en ligne  ");
document.getElementById('TFA0').innerHTML=document.getElementById('TFA0').innerHTML.replace(/utilisateur en ligne/,"personne actuellement en ligne  ");
document.getElementById('TFA0').innerHTML=document.getElementById('TFA0').innerHTML.replace(/Enregistrés/,"employés ");
document.getElementById('TFA0').innerHTML=document.getElementById('TFA0').innerHTML.replace(/Enregistré/,"employé ");
document.getElementById('TFA0').innerHTML=document.getElementById('TFA0').innerHTML.replace(/Invisible et/,"caché et  ");
document.getElementById('TFA0').innerHTML=document.getElementById('TFA0').innerHTML.replace(/Invisibles et/,"cachés et  ");
document.getElementById('TFA0').innerHTML=document.getElementById('TFA0').innerHTML.replace(/Invités/,"visiteurs. ");
document.getElementById('TFA0').innerHTML=document.getElementById('TFA0').innerHTML.replace(/Invité/,"visiteur.  ");
</script>
<br />
<span id="TFA17">{RECORD_USERS}</span>
    <script type="text/javascript">document.getElementById('TFA17').innerHTML=document.getElementById('TFA17').innerHTML.replace(/Le record du nombre d'utilisateurs en ligne est de/,"
L'entreprise a battu tous ses records avec un nombre d'employés actifs de :");</script>

          </div>
        </div>
    </div>
 
<!-- CONTENU DU DEUXIEME ONGLET - GROUPES -->

    <div id="my_qeel_2">
        <div class="contenty_tfa">   
            <div class="my_groupes">

                <div class="my_groupes_gauche">
                    <ul>
                          <li><a href="#lien_groupe" style="color: #AB0000;">Groupe 1</a></li>
                          <li><a href="#lien_groupe" style="color: #859C00;">Groupe 2</a></li>
                          <li><a href="#lien_groupe" style="color: #0395A8;">Groupe 3</a></li>
                          <li><a href="#lien_groupe" style="color: #647A4C;">Groupe 4</a></li>
                  </ul>
              </div>

                <div class="my_groupes_droite">
                    <ul>
                          <li><a href="#lien_groupe" style="color: #805C00;">Groupe 5</a></li>
                          <li><a href="#lien_groupe" style="color: #7D3DA8;">Groupe 6</a></li>
                          <li><a href="#lien_groupe" style="color: #BA045C;">Groupe 7</a></li>
                          <li><a href="#lien_groupe" style="color: #333333;">Groupe 8</a></li>
                    </ul>
              </div>
                  <div style="clear:both;"></div>
          </div>
        </div>
  </div>

<!-- CONTENU DU TROISIEME ONGLET - QUI EST LA -->

    <div id="my_qeel_3">
        <div class="contenty_tfa"> 
              <div id="who_is_qeel">
                    <div id="who_is_gauche">
                        <div class="who_is_hauteur">
                          <span id="TFA15">{LOGGED_IN_USER_LIST}</span>
      <script type="text/javascript">document.getElementById('TFA15').innerHTML=document.getElementById('TFA15').innerHTML.replace(/Utilisateurs enregistrés/,"Employés présents en ce moment");</script>
                      </div>
                    </div>

                    <div id="who_is_droite">
                        <div class="who_is_hauteur">
                          <table id="TFA16">{L_CONNECTED_MEMBERS}
    <script type="text/javascript">document.getElementById('TFA16').innerHTML=document.getElementById('TFA16').innerHTML.replace(/Membres connectés/,"Employés qui étaient présents");</script>
</table>
                        </div>
                  </div>
                <div style="clear:both;"></div>
          </div>
        </div>
    </div>

<!-- CONTENU DU QUATRIEME ONGLET - ANNIVERSAIRES  -->

    <div id="my_qeel_4">
      <div class="contenty_tfa">
        <div class="who_anniversaire">
          <div class="who_anniversaire_hauteur">
<!-- LES ANNIVERSAIRES -->
<table>
    {L_WHOSBIRTHDAY_TODAY}
  <span id="TFA20">
      {L_WHOSBIRTHDAY_WEEK}
    <script type="text/javascript">document.getElementById('TFA20').parentNode.innerHTML=document.getElementById('TFA20').parentNode.innerHTML.replace(/Membres fêtant leur anniversaire aujourd'hui/,"Les employés fêtant leur anniversaire aujourd'hui sont").replace(/Membres fêtant leur anniversaire dans les ([0-9]+) prochains jours/,"Les employés fêtant bientôt leur anniversaire").replace(/Aucun membre ne fête son anniversaire aujourd'hui/,"Aucun employé ne fête son anniversaire aujourd'hui").replace(/Aucun membre ne fête son anniversaire dans les ([0-9]+) prochains jours/,"Aucun employé ne fête son anniversaire dans les prochains jours");</script>
  </span>
</table>

<br clear="all" />
          </div>
      </div>
    </div>

  </div>

<!-- FIN DU BLOC DE CONTENU -->
 
  <!-- CONTENU DE CINQUIÈME ONGLET - BONUS  -->

    <div id="my_qeel_5">
        <div class="contenty_tfa">
          <div id="bonus_content">

      <div id="tfa_partenaire_haut">
                  <h2>Nos meilleurs partenaires</h2>
        <!-- BOUTONS AVANT-APRES -->

        <span id="prev4"><img src="http://i45.servimg.com/u/f45/11/95/30/70/prev10.png" alt="prev" /></span>
        <span id="next4"><img src="http://i45.servimg.com/u/f45/11/95/30/70/next10.png" alt="next" /></span> 

          <!-- SLIDE PARTENAIRES -->
           
          <div id="slide_tfa_partenaires">
 
          <!-- ICI TU METS LES ADRESSES ET  BANNIERES -->

              <a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/513.jpg" alt="" /> </a>       
              <a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/315.jpg" alt="" /> </a>         
              <a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/222.jpg" alt="" /> </a>         
              <a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/416.jpg" alt="" /> </a>         
              <a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/121.jpg" alt="" /> </a>
                                           
          </div>
            <h2>Sujets actifs, meilleurs posteurs</h2>
         
            <div id="member_actif">
              <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>
              </span>
          </div>
      </div>           
              <div style="clear:both;"></div>
          </div>
        </div>
    </div>
  <div style="clear:both;"></div>
  </div>

<!-- FIN DU BLOC DE CONTENU -->

<!-- BOUTON DU BAS -->

      <div class="tfa_boutons" id="bas_boutons">
        <a href="#" onclick="Monter_Cacher('my_qeel_4'); return false"><span class="qeel_span"> Anniversaires</span></a>   
        <a href="#" onclick="Monter_Cacher('my_qeel_5'); return false"><span class="qeel_span"> Bonus</span></a>
      </div>

 </div>

<!-- FIN CODE DES ONGLETS -->
 
  <div style="clear:both;"></div>

<!-- END disable_viewonline -->
    <script type="text/javascript">
      //<![CDATA[
    function Monter_Cacher(id)
    {
        for(var i=1;i<=5;i++)
        {
            document.getElementById('my_qeel_'+i).style.display='none';
        }
        if(document.getElementById(id).style.display =='none')
        {
            document.getElementById(id).style.display = 'block';
        }
    }
    Monter_Cacher('my_qeel_1');
//]]>
</script>

Le CSS que j'avais commencé à modifier pour l'adapter à mes besoins surtout au niveau des tailles et de la couleur mais à part cela, je n'y pas touché
Code:

/* ---------------- QEEL -------------- */
#qeel_TFA_block #haut_boutons{
width: 100%;
margin: 0 auto;
text-align: center;
background-position: center;
}
/* SUPPRESSION DES MARGES POUR TOUS LES BOUTONS */
#my_qeel_1, #my_qeel_2, #my_qeel_3, #my_qeel_4,#my_qeel_5, #my_qeel_6{
margin: 0;
padding: 0;
}

/* CONTENEUR */
#qeel_TFA_block{
position: relative;
width: 1000px;
text-align: center;
margin: 0 auto;
padding: 0;
top: 5px;
bottom: 25px; 
}

/* PLACER LES BOUTONS */
#qeel_TFA_block #haut_boutons a{
width: 180px;
margin: 0 auto;
text-align: center;
background-position: center;
position: relative;
top: 10px;
z-index: 3;
}
#qeel_TFA_block #gauche_boutons a{
width: 140px;
position: absolute;
top: 130px;
left: 0;
z-index: 3;
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
#qeel_TFA_block #droite_boutons a{
width: 140px;
position: absolute;
top: 130px;
right: 0;
z-index: 3;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
#qeel_TFA_block #bas_boutons a{
width: 200px;
margin: 0;
position: relative;
top: -10px;
z-index: 3;
}

/* STYLE DES BOUTONS */
.tfa_boutons a{
margin: 0px;
padding: 7px;
text-decoration: none;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png')no-repeat transparent;
border: 2px solid #b39975;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius:60px;
-moz-text-shadow: 0px 1px 0px #000;
-webkit-text-shadow: 0px 1px 0px #000;
text-shadow: 0px 1px 0px #000;
}

/* TEXTE DES BOUTONS */
.tfa_boutons a .qeel_span{
color: #e50016;
font-size: bold;
font: 18px Verdana;
letter-spacing:2px;
text-decoration: none;
}

/* BOUTONS AU SURVOL */
.tfa_boutons a:hover{
border: 2px solid #477aa5;
text-decoration: none !important;
}

/* BLOC DE CONTENU */
#container_tfa_my_qeel{
position: relative;
background-position: center;
text-align: left;
margin: 0 auto;
padding: 0;
background: url('http://fr.quozpowa.com/QuozUpload/70639728381364473212fondQEEL.png') transparent;
height: 250px;
width: 845px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius:20px;
border: 3px solid #b39975;
}
#TFA0, #TFA12, #TFA13, #TFA14, #TFA15, #TFA16, #TFA17, #TFA20{
text-align: center;
font: 16px Arial;
font-weight: bold;
color: #001634;
}
#TFA16{
background-color: transparent;
}
.contenty_tfa p{
font: 14px Arial;
color: #68aee9;
padding: 3px;
margin: 0 auto;
padding-top: 40px;
text-align: center;
}

/* STATISTIQUES */
.my_tfa_qeel_content{
width: 450px;
text-align: center;
margin: 0 auto;
padding: 0;
padding-top: 30px;
font: 16px Arial;
font-weight: bold;
color: #001634;
-moz-text-shadow: 0px 1px 0px #a1c9ff;
-webkit-text-shadow: 0px 1px 0px #a1c9ff;
text-shadow: 0px 1px 0px #a1c9ff;
}

/* TEXTES */
.my_tfa_qeel_content span{
width: 100%;
text-align: center;
font: 14px Arial;
font-weight: bold;
color:#000;
}
.my_tfa_qeel_content td{
text-align: center;
font: 14px Arial;
font-weight: bold;
color: 000;
}
.my_tfa_qeel_content td .row1{
background: transparent;
text-align: center;
font: 14px Arial;
font-weight: bold;
color: #000;
}
.my_tfa_qeel_content .row1 span{
text-align: center;
font: 14px Arial;
font-weight: bold;
}

/* GROUPES */
.my_groupes{
width: 500px;
height: 215px;
margin: 0 auto;
padding: 0;
padding-top: 30px;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png')no-repeat transparent;
}
.my_groupes ul{
margin: 0;
padding: 0;
}
.my_groupes_gauche{
width: 190px;
float: left;
margin: 0 auto;
padding: 0;
}
.my_groupes_droite{
width: 190px;
float: right;
margin: 0 auto;
padding: 0;
}
.my_groupes_gauche li, .my_groupes_droite li{
list-style: none;
width: 190px;
height: 30px;
background:url('http://fr.quozpowa.com/QuozUpload/87749156631364476082fondgrp.png') no-repeat transparent;
text-align: center;
margin-bottom: 5px;
padding: 0;
padding-top:6px;
}
.my_groupes_gauche li a, .my_groupes_droite li a{
font: 18px Verdana;
text-decoration: none;
-moz-text-shadow: 0px 1px 0px #000;
-webkit-text-shadow: 0px 1px 0px #000;
text-shadow: 0px 1px 0px #000;
}
.my_groupes_gauche li a:hover, .my_groupes_droite li a:hover{
text-transform: uppercase;
text-decoration: none !important;
}

/* ONGLET ANNIVERSAIRES */

.who_anniversaire{
width: 510px;
margin: auto;
margin-top: 20px;
border: 2px solid #b39975;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png') no-repeat transparent;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
.who_anniversaire_hauteur{
width: 480px;
margin: auto;
height: 190px;
overflow-y: auto;
margin: 10px auto;
}

/* ONGLET QUI EST LA */

#who_is_qeel{
width: 560px;
position: relative;
margin: 0 auto;
padding: 0;
padding-top: 20px;
}
#who_is_gauche{
width: 260px;
border: 2px solid #b39975;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png') no-repeat transparent;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
float: left;
margin: 0 auto;
text-align: left;
}
#who_is_droite{
width: 260px;
border: 2px solid #b39975;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png') no-repeat transparent;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
float: right;
margin: 0 auto;
text-align: left;
}
.who_is_hauteur{
width:240px;
margin: 0 auto;
height: 190px;
overflow-y: auto;
margin: 10px auto;
}

/* ------ ONGLET BONUS --------- */

#bonus_content{
width: 95%;
position: relative;
margin: auto;
padding: 0;
}

/* LES PARTENAIRES */

#tfa_partenaire_haut{
position: relative;
width: 100%;
margin:auto;
padding: 0;
text-align: center;
}
#tfa_partenaire_haut h2{
color: #4e91c8;
font: 18px Verdana;
letter-spacing:1px;
-moz-text-shadow: 0px 1px 0px #000;
-webkit-text-shadow: 0px 1px 0px #000;
text-shadow: 0px 1px 0px #000;
}
#tfa_partenaire_haut h2:first-letter{
color: #780014 !important;
font-weight: bold;
font-size: 20px;
}

/* SLIDE PARTENAIRE HAUT */

#slide_tfa_partenaires {
width: 468px;
height: 60px;
margin: auto;
padding: 0;
position: relative;
overflow: hidden;
}

/* LIEN SLIDE */
#slide_tfa_partenaires a {
text-decoration: none;
}

/* BANIERES DU SLIDE */
#slide_tfa_partenaires a img {
width: 468px;
height: 60px;
margin: auto;
padding: 0;
}

/* PLACER LES ICONES AVANT-APRES */
#prev4 {
position: absolute;
top: 52px;
left: 10px;
cursor: pointer;
}
#next4 {
position: absolute;
top: 52px;
right: 10px;
cursor: pointer;
}
#member_actif{
width: 350px;
border: 2px solid #072a54;
background: url(http://i45.servimg.com/u/f45/11/95/30/70/2420.png);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
margin: 5px auto 0;
padding: 5px;
}
#member_actif a.gensmall {
color: #000;
text-decoration: none;
font: 14px Arial;
}

Et le code java
Code:
jQuery(document).ready( function(){
jQuery(".tfa_boutons a").hover(function() {
jQuery(this).animate({ backgroundColor: "#91dae5"}, 600);
},
function() {
jQuery(this).animate({ backgroundColor: "#286cb8"}, 400);
});
jQuery(".my_groupes_gauche li").hover(function() {
jQuery(this).animate({ backgroundColor: "#91dae5"}, 600);
},
function() {
jQuery(this).animate({ backgroundColor: "#286cb8"}, 400);
});
jQuery(".my_groupes_droite li").hover(function() {
jQuery(this).animate({ backgroundColor: "#91dae5"}, 600);
},
function() {
jQuery(this).animate({ backgroundColor: "#286cb8"}, 400);
});
jQuery("a .qeel_span").hover(function() {
jQuery(this).animate({ color: "#0056e5"}, 400);
},
function() {
jQuery(this).animate({ color: "#e50016"}, 500);
});
jQuery(".bas-tfagroup a.lien_bas_group").hover(function() {
jQuery(this).animate({ color: "#0087e5"}, 400);
},
function() {
jQuery(this).animate({ color: "#e50016"}, 500);
});
jQuery('.opacite_8').each(function() {
jQuery(this).css('opacity', 0.6);
jQuery(this).hover(function() {
jQuery(this).stop().animate({ opacity: 1.0 }, 700);
},
function() {
jQuery(this).stop().animate({ opacity: 0.7 }, 700);
          });
        });
jQuery('#slide_tfa_partenaires').cycle({
    fx: 'fade',
    speed:  '2500',
    pause:  '0',
    next:  '#next4',
    prev:  '#prev4'
});
});

J'arrive bien à le séparer du bloc Bonus mais ensuite je n'arrive à créer un bloc : Sujets actifs/Top20 pour le mettre à l'intérieur

vous pouvez le voir ici : ffftest

Merci pour votre aide


Dernière édition par Azya le Dim 31 Mar 2013 - 11:04, édité 2 fois

Azya
***

Féminin
Messages : 151
Inscrit(e) le : 21/10/2011

http://www.plumesmots.com/
Azya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réglages code pour QEEL

Message par Azya le Ven 29 Mar 2013 - 14:37

bonjour à tous,

En reprenant mon code après une bonne nuit de repos, j'ai réussi à mettre mes petites bulles comme je voulais
Par contre, j'ai un sérieux problème au niveau du réglage du CSS ou du HT, je n'en sais rien du tout à vrai dire
J'ai le contenu de ma bulle groupes dans toutes les autres bulles du moins il est toujours visible alors qu'il ne devrait pas l'être


Pour plus de commodité pour retravailler mon QEEL, j'ai modifié les noms aussi bien dans le java que dans le CSS

Voilà le HT
Code:
<!-- BEGIN disable_viewonline -->
<div id="HQEEL" style="width: 100%; text-align: center;"><img src="http://fr.quozpowa.com/QuozUpload/20349135071364474959catQEEL.png" alt="" /></div>
<div id="TtQeel">
<!-- BOUTON DU HAUT -->
<div class="boutons" id="hboutons" >
<a href="#" onclick="Monter_Cacher('my_qeel_1'); return false"><span class="qeel_span"> Les données FFFistes </span></a>
<a href="#" onclick="Monter_Cacher('my_qeel_2'); return false"><span class="qeel_span"> Quel FFFiste est présent ? </span></a>
</div>
<!-- BOUTON DE GAUCHE -->
<div class="boutons" id="gauboutons">
<a href="#" onclick="Monter_Cacher('my_qeel_3'); return false"><span class="qeel_span">Partenaires</span></a>
</div>
<!-- BOUTON DE DROITE -->
<div class="boutons"  id="dboutons">
<a href="#" onclick="Monter_Cacher('my_qeel_4'); return false"><span class="qeel_span">Sujets actifs/Top20</span></a>
</div>
<!-- DEBUT CONTENU -->
<div  id="container_my_qeel">
<!--MY QEEL1:Les données FFFistes -->
 <div id="my_qeel_1">
 <div class="contenty">
 <div class="my_qeel_content">
<div id="totposts">{TOTAL_POSTS} 
<script type="text/javascript">
document.getElementById('totposts').innerHTML=document.getElementById('totposts').innerHTML.replace(/Nos membres ont posté un total de /,"Les FFFistes sont très prolixes et ont posté à tout va un total de ");
</script> </div>
<br />
<div id="totus">{TOTAL_USERS} 
<script type="text/javascript">
document.getElementById('totus').innerHTML=document.getElementById('totus').innerHTML.replace(/Nous avons /,"FFFiste compte à ce jour ");
document.getElementById('totus').innerHTML=document.getElementById('totus').innerHTML.replace(/membres enregistrés/,"FFfistes. ");
document.getElementById('totus').innerHTML=document.getElementById('totus').innerHTML.replace(/membre enregistré/,"FFFiste. ");
</script> </div>
<div id="Newus">{NEWEST_USER}
<script type="text/javascript">
document.getElementById('Newus').innerHTML=document.getElementById('Newus').innerHTML.replace(/L'utilisateur enregistré le plus récent est /,"Le dernier FFFiste avoir rejoint nos  terres se nomme ");
</script> </div> 
<br />
<span id="totuson">{TOTAL_USERS_ONLINE}</span>
<script type="text/javascript">
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Il y a en tout /,"Actuellement, en ligne, nous sommes ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/utilisateurs en ligne/,"Futurs FFFistes en herbe ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/utilisateur en ligne/,"Futur FFFiste en herbe ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Enregistrés/,"FFFistes ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Enregistré/,"FFFiste");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Invisible et/,"Illustre inconnu et ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Invisibles et/,"Illustres inconnus et  ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Invités/,"Hôtes de passage qui ont décidé de camper un peu plus longtemps. ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Invité/,"Hôte de passage qui a décidé de camper un plus longtemps.  ");
</script>
<br />
<span id="Recordus">{RECORD_USERS}</span>
<script type="text/javascript">document.getElementById('Recordus').innerHTML=document.getElementById('Recordus').innerHTML.replace(/Le record du nombre d'utilisateurs en ligne est de/,"Le nombre de FFFistes à être ensemble est de ");</script>
</div>
</div>
</div>
<!-- MY QEEL2:Quels(lle(s)) FFFiste(s) est(sont) présent(s) ? -->
<div id="my_qeel_2">
<div class="contenty"> 
<div id="quiqeel">
<div id="quig">
<div class="quih">
<span id="presents">{LOGGED_IN_USER_LIST}</span>
<script type="text/javascript">document.getElementById('presents').innerHTML=document.getElementById('presents').innerHTML.replace(/Utilisateurs enregistrés/,"FFFistes présents sur leurs Terres ");</script>
</div>
</div>
<div id="quidr">
<div class="quih">
<table id="membconnec">{L_CONNECTED_MEMBERS}
<script type="text/javascript">document.getElementById('membconnec').innerHTML=document.getElementById('membconnec').innerHTML.replace(/Membres connectés/,"FFFistes qui sont passées sur leurs Terres");</script>
</table>
</div>
</div>
 <div style="clear:both;"></div>
</div>
</div>
 </div>
 <!-- MY QEEL3:Partenaires  -->
<div id="my_qeel_3">
<div class="contenty">
 <div id="bonus">
 <div id="parthaut">
 <h2>Nos partenaires</h2>
 <!-- BOUTONS AVANT-APRES -->
 <span id="prev4"><img src="http://i45.servimg.com/u/f45/11/95/30/70/prev10.png" alt="prev" /></span>
 <span id="next4"><img src="http://i45.servimg.com/u/f45/11/95/30/70/next10.png" alt="next" /></span> 
 <!-- SLIDE PARTENAIRES -->
 <div id="slidepart">
  <!--  LES ADRESSES ET  BANNIERES -->
 <a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/513.jpg" alt="" /> </a>       
 <a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/315.jpg" alt="" /> </a>         
 <a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/222.jpg" alt="" /> </a>         
 <a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/416.jpg" alt="" /> </a>         
 <a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/121.jpg" alt="" /> </a>                                       
 </div>
 <h2>Nos nouveaux partenaires</h2>
</div>           
<div style="clear:both;"></div>
</div>
</div>
</div>
 <!-- MY QEEL4:Sujets actifs/Top20 -->
<div id="my_qeel_4">
<div class="contenty">
 <div id="sujets actifs">
<div id="member_actif">
 <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>
</span>
 </div>
<div style="clear:both;"></div>
</div>
</div>
</div>
 <!-- MY QEEL5 - ANNIVERSAIRES  -->
 <div id="my_qeel_5">
 <div class="contenty">
 <div class="anniversaire">
 <div class="anniversaireh">
<!-- LES ANNIVERSAIRES -->
<table>
{L_WHOSBIRTHDAY_TODAY}
<span id="anni">
{L_WHOSBIRTHDAY_WEEK}
<script type="text/javascript">document.getElementById('anni').parentNode.innerHTML=document.getElementById('anni').parentNode.innerHTML.replace(/Membres fêtant leur anniversaire aujourd'hui/,"Les employés fêtant leur anniversaire aujourd'hui sont").replace(/Membres fêtant leur anniversaire dans les ([0-9]+) prochains jours/,"Les employés fêtant bientôt leur anniversaire").replace(/Aucun membre ne fête son anniversaire aujourd'hui/,"Aucun employé ne fête son anniversaire aujourd'hui").replace(/Aucun membre ne fête son anniversaire dans les ([0-9]+) prochains jours/,"Aucun employé ne fête son anniversaire dans les prochains jours");</script>
</span>
</table>
<br clear="all" />
</div>
</div>
</div>
</div>
 <!-- MYQEEL:Groupes 6-->
 <div id="my_qeel_6">
 <div class="contenty">   
 <div class="groupes">
<div class="groupesg">
<ul>
<li><a href="#lien_groupe" style="color: #AB0000;">Groupe 1</a></li>
<li><a href="#lien_groupe" style="color: #859C00;">Groupe 2</a></li>
<li><a href="#lien_groupe" style="color: #0395A8;">Groupe 3</a></li>
<li><a href="#lien_groupe" style="color: #647A4C;">Groupe 4</a></li>
</ul>
</div>
<div class="groupesd">
<ul>
<li><a href="#lien_groupe" style="color: #805C00;">Groupe 5</a></li>
<li><a href="#lien_groupe" style="color: #7D3DA8;">Groupe 6</a></li>
<li><a href="#lien_groupe" style="color: #BA045C;">Groupe 7</a></li>
<li><a href="#lien_groupe" style="color: #333333;">Groupe 8</a></li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<!-- BOUTON DU BAS -->
<div class="boutons" id="bboutons">
<a href="#" onclick="Monter_Cacher('my_qeel_5'); return false"><span class="qeel_span"> Anniversaires</span></a>   
<a href="#" onclick="Monter_Cacher('my_qeel_6'); return false"><span class="qeel_span"> Groupes</span></a>
</div>
 </div>
<!-- FIN CODE DES ONGLETS -->
  <div style="clear:both;"></div>
<!-- END disable_viewonline -->
    <script type="text/javascript">
      //<![CDATA[
    function Monter_Cacher(id)
    {
        for(var i=1;i<=5;i++)
        {
            document.getElementById('my_qeel_'+i).style.display='none';
        }
        if(document.getElementById(id).style.display =='none')
        {
            document.getElementById(id).style.display = 'block';
        }
    }
    Monter_Cacher('my_qeel_1');
//]]>
</script>

Le CSS que j'ai modifié avec les noms du HT
Code:

/* ---------------- QEEL -------------- */
#TtQeel #hboutons{
width: 100%;
margin: 0 auto;
text-align: center;
background-position: center;
}
/* SUPPRESSION DES MARGES POUR TOUS LES BOUTONS */
#my_qeel_1, #my_qeel_2, #my_qeel_3, #my_qeel_4,#my_qeel_5,#my_qeel_6{
margin: 0;
padding: 0;
}
/* CONTENEUR */
#TtQeel{
position: relative;
width: 1000px;
text-align: center;
margin: 0 auto;
padding: 0;
top: 5px;
bottom: 25px; 
}

/* PLACER LES BOUTONS */
#TtQeel #hboutons a{
width: 180px;
margin: 0 auto;
text-align: center;
background-position: center;
position: relative;
top: 10px;
z-index: 3;
}
#TtQeel #gauboutons a{
width: 140px;
position: absolute;
top: 130px;
left: 0;
z-index: 3;
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
#TtQeel #dboutons a{
width: 140px;
position: absolute;
top: 130px;
right: 0;
z-index: 3;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
#TtQeel #bboutons a{
width: 200px;
margin: 0;
position: relative;
top: -10px;
z-index: 3;
}
/* STYLE DES BOUTONS */
.boutons a{
margin: 0px;
padding: 7px;
text-decoration: none;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png')no-repeat transparent;
border: 2px solid #b39975;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius:60px;
-moz-text-shadow: 0px 1px 0px #000;
-webkit-text-shadow: 0px 1px 0px #000;
text-shadow: 0px 1px 0px #000;
}

/* TEXTE DES BOUTONS */
.boutons a .qeel_span{
color: #e50016;
font-size: bold;
font: 18px Verdana;
letter-spacing:2px;
text-decoration: none;
}

/* BOUTONS AU SURVOL */
.boutons a:hover{
border: 2px solid #477aa5;
text-decoration: none !important;
}

/* BLOC DE CONTENU */
#container_my_qeel{
position: relative;
background-position: center;
text-align: left;
margin: 0 auto;
padding: 0;
background: url('http://fr.quozpowa.com/QuozUpload/70639728381364473212fondQEEL.png') transparent;
height: 250px;
width: 845px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius:20px;
border: 3px solid #b39975;
}
#totposts, #totus, #Newus, #presents, #Recordus, #membconnec, #totuson, #anni{
text-align: center;
font: 16px Arial;
font-weight: bold;
color: #001634;
}
#membconnec{
background-color: transparent;
}
.contenty p{
font: 14px Arial;
color: #68aee9;
padding: 3px;
margin: 0 auto;
padding-top: 40px;
text-align: center;
}
/* SUJETS ACTIFS */
.sujets actifs{
width: 510px;
margin: auto;
margin-top: 20px;
border: 2px solid #b39975;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png') no-repeat transparent;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
/* STATISTIQUES */
.my_qeel_content{
width: 450px;
text-align: center;
margin: 0 auto;
padding: 0;
padding-top: 30px;
font: 16px Arial;
font-weight: bold;
color: #001634;
-moz-text-shadow: 0px 1px 0px #a1c9ff;
-webkit-text-shadow: 0px 1px 0px #a1c9ff;
text-shadow: 0px 1px 0px #a1c9ff;
}

/* TEXTES */
.my_qeel_content span{
width: 100%;
text-align: center;
font: 14px Arial;
font-weight: bold;
color:#000;
}
.my_qeel_content td{
text-align: center;
font: 14px Arial;
font-weight: bold;
color: 000;
}
.my_qeel_content td .row1{
background: transparent;
text-align: center;
font: 14px Arial;
font-weight: bold;
color: #000;
}
.my_qeel_content .row1 span{
text-align: center;
font: 14px Arial;
font-weight: bold;
}

/* GROUPES */
.groupes{
width: 500px;
height: 215px;
margin: 0 auto;
padding: 0;
padding-top: 30px;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png')no-repeat transparent;
overflow-y: auto; 
}
.groupes ul{
margin: 0;
padding: 0;
}
.groupesg{
width: 190px;
float: left;
margin: 0 auto;
padding: 0;
}
.groupesd{
width: 190px;
float: right;
margin: 0 auto;
padding: 0;
}
.groupesg li, .groupesd li{
list-style: none;
width: 190px;
height: 30px;
background:url('http://fr.quozpowa.com/QuozUpload/87749156631364476082fondgrp.png') no-repeat transparent;
text-align: center;
margin-bottom: 5px;
padding: 0;
padding-top:6px;
}
.groupesg li a, .groupesd li a{
font: 18px Verdana;
text-decoration: none;
-moz-text-shadow: 0px 1px 0px #000;
-webkit-text-shadow: 0px 1px 0px #000;
text-shadow: 0px 1px 0px #000;
}
.groupesg li a:hover, .groupesd li a:hover{
text-transform: uppercase;
text-decoration: none !important;
}

/* ONGLET ANNIVERSAIRES */

.anniversaire{
width: 510px;
margin: auto;
margin-top: 20px;
border: 2px solid #b39975;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png') no-repeat transparent;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
.anniversaireh{
width: 480px;
margin: auto;
height: 190px;
overflow-y: auto;
margin: 10px auto;
}

/* ONGLET QUI EST LA */
#quiqeel{
width: 560px;
position: relative;
margin: 0 auto;
padding: 0;
padding-top: 20px;
}
#quig{
width: 260px;
border: 2px solid #b39975;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png') no-repeat transparent;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
float: left;
margin: 0 auto;
text-align: left;
}
#quidr{
width: 260px;
border: 2px solid #b39975;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png') no-repeat transparent;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
float: right;
margin: 0 auto;
text-align: left;
}
.quih{
width:240px;
margin: 0 auto;
height: 190px;
overflow-y: auto;
margin: 10px auto;
}

/* ------ ONGLET BONUS --------- */

#bonus{
width: 95%;
position: relative;
margin: auto;
padding: 0;
}
/* LES PARTENAIRES */
#parthaut{
position: relative;
width: 100%;
margin:auto;
padding: 0;
text-align: center;
}
#parthaut h2{
color: #4e91c8;
font: 18px Verdana;
letter-spacing:1px;
-moz-text-shadow: 0px 1px 0px #000;
-webkit-text-shadow: 0px 1px 0px #000;
text-shadow: 0px 1px 0px #000;
}
#parthaut h2:first-letter{
color: #780014 !important;
font-weight: bold;
font-size: 20px;
}

/* SLIDE PARTENAIRE HAUT */
#slidepart{
width: 468px;
height: 60px;
margin: auto;
padding: 0;
position: relative;
overflow: hidden;
}
/* LIEN SLIDE */
#slidepart a {
text-decoration: none;
}
/* BANIERES DU SLIDE */
#slidepart a img {
width: 468px;
height: 60px;
margin: auto;
padding: 0;
}
/* PLACER LES ICONES AVANT-APRES */
#prev4 {
position: absolute;
top: 52px;
left: 10px;
cursor: pointer;
}
#next4 {
position: absolute;
top: 52px;
right: 10px;
cursor: pointer;
}

Et le java avec les noms modifiés
Code:
jQuery(document).ready( function(){
jQuery(".boutons a").hover(function() {
jQuery(this).animate({ backgroundColor: "#91dae5"}, 600);
},
function() {
jQuery(this).animate({ backgroundColor: "#286cb8"}, 400);
});
jQuery(".groupesg li").hover(function() {
jQuery(this).animate({ backgroundColor: "#91dae5"}, 600);
},
function() {
jQuery(this).animate({ backgroundColor: "#286cb8"}, 400);
});
jQuery(".groupesd li").hover(function() {
jQuery(this).animate({ backgroundColor: "#91dae5"}, 600);
},
function() {
jQuery(this).animate({ backgroundColor: "#286cb8"}, 400);
});
jQuery("a .qeel_span").hover(function() {
jQuery(this).animate({ color: "#0056e5"}, 400);
},
function() {
jQuery(this).animate({ color: "#e50016"}, 500);
});
jQuery(".bas-tfagroup a.lien_bas_group").hover(function() {
jQuery(this).animate({ color: "#0087e5"}, 400);
},
function() {
jQuery(this).animate({ color: "#e50016"}, 500);
});
jQuery('.opacite_8').each(function() {
jQuery(this).css('opacity', 0.6);
jQuery(this).hover(function() {
jQuery(this).stop().animate({ opacity: 1.0 }, 700);
},
function() {
jQuery(this).stop().animate({ opacity: 0.7 }, 700);
          });
        });
jQuery('#slidepart').cycle({
    fx: 'fade',
    speed:  '2500',
    pause:  '0',
    next:  '#next4',
    prev:  '#prev4'
});
});

L'adresse de mon forum test
ForumtestFFF

Azya
***

Féminin
Messages : 151
Inscrit(e) le : 21/10/2011

http://www.plumesmots.com/
Azya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réglages code pour QEEL

Message par Azya le Sam 30 Mar 2013 - 20:48

Bonsoir à tous
J'ai presque réussi, mon contenu n'apparait plus dans les autres parties mais juste mes bulles du bas : Anniversaire et groupes
donc si quelqu'un peut m'aider parce que là je patauge sévère pour voir ce qui me manque

Mon HT
Code:
<!-- BEGIN disable_viewonline -->
<div id="HQEEL" style="width: 100%; text-align: center;"><img src="http://fr.quozpowa.com/QuozUpload/20349135071364474959catQEEL.png" alt="" /></div>
<div id="TtQeel">
<!-- BOUTON DU HAUT -->
<div class="boutons" id="hboutons" >
<a href="#" onclick="Monter_Cacher('bul1'); return false"><span class="qeel_span"> Les données FFFistes </span></a>
<a href="#" onclick="Monter_Cacher('bul2'); return false"><span class="qeel_span"> Quel FFFiste est présent? </span></a>
</div>
<!-- BOUTON DE GAUCHE -->
<div class="boutons" id="gauboutons">
<a href="#" onclick="Monter_Cacher('bul3'); return false"><span class="qeel_span">Partenaires</span></a>
</div>
<!-- BOUTON DE DROITE -->
<div class="boutons"  id="dboutons">
<a href="#" onclick="Monter_Cacher('bul4'); return false"><span class="qeel_span">Sujets actifs/Top20</span></a>
</div>
<!-- DEBUT CONTENU -->
<div  id="contenantbul">
<!--BUL1:Les données FFFistes -->
 <div id="bul1">
 <div class="ensemble">
 <div class="stat">
<div id="totposts">{TOTAL_POSTS} 
<script type="text/javascript">
document.getElementById('totposts').innerHTML=document.getElementById('totposts').innerHTML.replace(/Nos membres ont posté un total de /,"Les FFFistes sont très prolixes et ont posté à tout va un total de, ");
</script> </div>
<br />
<div id="totus">{TOTAL_USERS} 
<script type="text/javascript">
document.getElementById('totus').innerHTML=document.getElementById('totus').innerHTML.replace(/Nous avons /,"FFFiste compte à ce jour ");
document.getElementById('totus').innerHTML=document.getElementById('totus').innerHTML.replace(/membres enregistrés/,"FFfistes. ");
document.getElementById('totus').innerHTML=document.getElementById('totus').innerHTML.replace(/membre enregistré/,"FFFiste. ");
</script> </div>
<div id="Newus">{NEWEST_USER}
<script type="text/javascript">
document.getElementById('Newus').innerHTML=document.getElementById('Newus').innerHTML.replace(/L'utilisateur enregistré le plus récent est /,"Le dernier FFFiste avoir rejoint nos  terres se nomme");
</script> </div> 
<br />
<span id="totuson">{TOTAL_USERS_ONLINE}</span>
<script type="text/javascript">
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Il y a en tout /,"Actuellement, en ligne, nous sommes ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/utilisateurs en ligne/,"Futurs FFFistes en herbe à visiter nos terres");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/utilisateur en ligne/,"Futur FFFiste en herbe à visiter nos terres");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Enregistrés/,"FFFistes ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Enregistré/,"FFFiste");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Invisible et/,"Illustre inconnu et ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Invisibles et/,"Illustres inconnus et  ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Invités/,"Hôtes de passage qui ont décidé de camper un peu plus longtemps. ");
document.getElementById('totuson').innerHTML=document.getElementById('totuson').innerHTML.replace(/Invité/,"Hôte de passage qui a décidé de camper un plus longtemps.  ");
</script>
<br />
<span id="Recordus">{RECORD_USERS}</span>
<script type="text/javascript">document.getElementById('Recordus').innerHTML=document.getElementById('Recordus').innerHTML.replace(/Le record du nombre d'utilisateurs en ligne est de/,"Le nombre de FFFistes à être ensemble est de ");</script>
</div>
</div>
</div>
<!-- BUL2:Quel FFFiste est présent ? -->
<div id="bul2">
 <div class="ensemble"> 
<div id="quiqeel">
<div id="quig">
<div class="quih">
<span id="presents">{LOGGED_IN_USER_LIST}</span>
<script type="text/javascript">document.getElementById('presents').innerHTML=document.getElementById('presents').innerHTML.replace(/Utilisateurs enregistrés/,"FFFistes présents sur leurs Terres ");</script>
</div>
</div>
<div id="quidr">
<div class="quih">
<table id="membconnec">{L_CONNECTED_MEMBERS}
<script type="text/javascript">document.getElementById('membconnec').innerHTML=document.getElementById('membconnec').innerHTML.replace(/Membres connectés/,"FFFistes qui sont passées sur leurs Terres");</script>
</table>
</div>
</div>
 <div style="clear:both;"></div>
</div>
</div>
 </div>
 <!-- BUL3:Partenaires  -->
<div id="bul3">
 <div class="ensemble">
 <div id="partenaires">
 <div id="parthaut">
 <h2>Nos partenaires</h2>
 <!-- BOUTONS AVANT-APRES -->
 <span id="prec4"><img src="http://i45.servimg.com/u/f45/11/95/30/70/prev10.png" alt="prev" /></span>
 <span id="next4"><img src="http://i45.servimg.com/u/f45/11/95/30/70/next10.png" alt="next" /></span> 
 <!-- SLIDE PARTENAIRES -->
 <div id="slidepart">
  <!--  LES ADRESSES ET  BANNIERES -->
 <a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/513.jpg" alt="" /> </a>       
 <a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/315.jpg" alt="" /> </a>         
 <a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/222.jpg" alt="" /> </a>         
 <a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/416.jpg" alt="" /> </a>         
 <a href="#"><img class="opacite_8" src="http://i45.servimg.com/u/f45/11/95/30/70/121.jpg" alt="" /> </a>                                       
 </div>
 <h2>Nos nouveaux partenaires</h2>
</div>           
<div style="clear:both;"></div>
</div>
</div>
</div>
 <!-- BUL4:Sujets actifs/Top20 -->
<div id="bul4">
<div class="ensemble">
 <div id="sujetsactifs">
 <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>
</span>
 </div>
<div style="clear:both;"></div>
</div>
</div>
 <!-- BUL5 - ANNIVERSAIRES  -->
 <div id="bul5">
 <div class="ensemble">
 <div class="anniversaire">
 <div class="anniversaireh">
<!-- LES ANNIVERSAIRES -->
<table>
{L_WHOSBIRTHDAY_TODAY}
<span id="anni">
{L_WHOSBIRTHDAY_WEEK}
<script type="text/javascript">document.getElementById('anni').parentNode.innerHTML=document.getElementById('anni').parentNode.innerHTML.replace(/Membres fêtant leur anniversaire aujourd'hui/,"Les employés fêtant leur anniversaire aujourd'hui sont").replace(/Membres fêtant leur anniversaire dans les ([0-9]+) prochains jours/,"Les employés fêtant bientôt leur anniversaire").replace(/Aucun membre ne fête son anniversaire aujourd'hui/,"Aucun employé ne fête son anniversaire aujourd'hui").replace(/Aucun membre ne fête son anniversaire dans les ([0-9]+) prochains jours/,"Aucun employé ne fête son anniversaire dans les prochains jours");</script>
</span>
</table>
<br clear="all" />
</div>
</div>
</div>
</div>
 <!-- BUL6:Groupes-->
 <div id="bul6">
 <div class="ensemble">   
 <div class="groupes">
<div class="groupesg">
<ul>
<li><a href="#lien_groupe" style="color: #AB0000;">Groupe 1</a></li>
<li><a href="#lien_groupe" style="color: #859C00;">Groupe 2</a></li>
<li><a href="#lien_groupe" style="color: #0395A8;">Groupe 3</a></li>
<li><a href="#lien_groupe" style="color: #647A4C;">Groupe 4</a></li>
</ul>
</div>
<div class="groupesd">
<ul>
<li><a href="#lien_groupe" style="color: #805C00;">Groupe 5</a></li>
<li><a href="#lien_groupe" style="color: #7D3DA8;">Groupe 6</a></li>
<li><a href="#lien_groupe" style="color: #BA045C;">Groupe 7</a></li>
<li><a href="#lien_groupe" style="color: #333333;">Groupe 8</a></li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<!-- BOUTON DU BAS -->
<div class="boutons" id="bboutons">
<a href="#" onclick="Monter_Cacher('bul5'); return false"><span class="qeel_span"> Anniversaires</span></a>   
<a href="#" onclick="Monter_Cacher('bul6'); return false"><span class="qeel_span"> Groupes</span></a>
</div>
 </div>
<!-- FIN CODE DES ONGLETS -->
  <div style="clear:both;"></div>
<!-- END disable_viewonline -->
    <script type="text/javascript">
      //<![CDATA[
    function Monter_Cacher(id)
    {
        for(var i=1;i<=6;i++)
        {
            document.getElementById('bul'+i).style.display='none';
        }
        if(document.getElementById(id).style.display =='none')
        {
            document.getElementById(id).style.display = 'block';
        }
    }
    Monter_Cacher('bul1');
//]]>
</script>


Mon CSS
Code:
/*|__________ INDEX_BODY__________*/
/*--- QEEL---*/
/*Ossature*/
#TtQeel{
position: relative;
width: 1000px;
text-align: center;
margin: 0 auto;
padding: 0;
top: 5px;
bottom: 25px; 
}
#TtQeel #hboutons{
width: 100%;
margin: 0 auto;
text-align: center;
background-position: center;
}
#bul1, #bul2, #bul3, #bul4, #bul5, #bul6{
margin: 0;
padding: 0;
}

/*Boutons*/
#TtQeel #hboutons a{
width: 180px;
margin: 0 auto;
text-align: center;
background-position: center;
position: relative;
top: 10px;
z-index: 3;
}
#TtQeel #gauboutons a{
width: 140px;
position: absolute;
top: 130px;
left: 0;
z-index: 3;
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
#TtQeel #dboutons a{
width: 140px;
position: absolute;
top: 130px;
right: 0;
z-index: 3;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
#TtQeel #bboutons a{
width: 200px;
margin: 0;
position: relative;
top: -10px;
z-index: 3;
}
.boutons a{
margin: 0px;
padding: 7px;
text-decoration: none;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png')no-repeat transparent;
border: 2px solid #b39975;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius:60px;
-moz-text-shadow: 0px 1px 0px #000;
-webkit-text-shadow: 0px 1px 0px #000;
text-shadow: 0px 1px 0px #000;
}
.boutons a .qeel_span{
color: #e50016;
font-size: bold;
font: 18px Verdana;
letter-spacing:2px;
text-decoration: none;
}
.boutons a:hover{
border: 2px solid #477aa5;
text-decoration: none !important;
}

/*Bulles*/
#contenantbul{
position: relative;
background-position: center;
text-align: left;
margin: 0 auto;
padding: 0;
background: url('http://fr.quozpowa.com/QuozUpload/70639728381364473212fondQEEL.png') transparent;
height: 250px;
width: 845px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius:20px;
border: 3px solid #b39975;
}
#totposts, #totus, #Newus, #presents, #Recordus, #membconnec, #totuson, #anni{
text-align: center;
font: 16px Arial;
font-weight: bold;
color: #001634;
}
#membconnec{
background-color: transparent;
}
.ensemble p{
font: 14px Arial;
color: #68aee9;
padding: 3px;
margin: 0 auto;
padding-top: 40px;
text-align: center;
}
/* Les données FFFistes*/
.stat{
width: 450px;
text-align: center;
margin: 0 auto;
padding: 0;
padding-top: 30px;
font: 16px Arial;
font-weight: bold;
color: #001634;
-moz-text-shadow: 0px 1px 0px #a1c9ff;
-webkit-text-shadow: 0px 1px 0px #a1c9ff;
text-shadow: 0px 1px 0px #a1c9ff;
}
.stat span{
width: 100%;
text-align: center;
font: 14px Arial;
font-weight: bold;
color:#000;
}
.stat td{
text-align: center;
font: 14px Arial;
font-weight: bold;
color: 000;
}
.stat td .row1{
background: transparent;
text-align: center;
font: 14px Arial;
font-weight: bold;
color: #000;
}
.stat .row1 span{
text-align: center;
font: 14px Arial;
font-weight: bold;
}

/* Sujets actifs,Top20*/
#sujetsactifs{
width: 350px;
border: 2px solid #072a54;
background: url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png');
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
margin: 5px auto 0;
padding: 5px;
}
#sujetsactifs a.gensmall {
color: #000;
text-decoration: none;
font: 14px Arial;
}

/*Groupes*/
.groupes{
width: 500px;
height: 215px;
margin: 0 auto;
padding: 0;
padding-top: 30px;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png')no-repeat transparent;
overflow-y: auto; 
}
.groupes ul{
margin: 0;
padding: 0;
}
.groupesg{
width: 190px;
float: left;
margin: 0 auto;
padding: 0;
}
.groupesd{
width: 190px;
float: right;
margin: 0 auto;
padding: 0;
}
.groupesg li, .groupesd li{
list-style: none;
width: 190px;
height: 30px;
background:url('http://fr.quozpowa.com/QuozUpload/87749156631364476082fondgrp.png') no-repeat transparent;
text-align: center;
margin-bottom: 5px;
padding: 0;
padding-top:6px;
}
.groupesg li a, .groupesd li a{
font: 18px Verdana;
text-decoration: none;
-moz-text-shadow: 0px 1px 0px #000;
-webkit-text-shadow: 0px 1px 0px #000;
text-shadow: 0px 1px 0px #000;
}
.groupesg li a:hover, .groupesd li a:hover{
text-transform: uppercase;
text-decoration: none !important;
}

/* Anniversaires*/
.anniversaire{
width: 510px;
margin: auto;
margin-top: 20px;
border: 2px solid #b39975;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png') no-repeat transparent;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
.anniversaireh{
width: 480px;
margin: auto;
height: 190px;
overflow-y: auto;
margin: 10px auto;
}

/*Qui est là*/
#quiqeel{
width: 560px;
position: relative;
margin: 0 auto;
padding: 0;
padding-top: 20px;
}
#quig{
width: 260px;
border: 2px solid #b39975;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png') no-repeat transparent;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
float: left;
margin: 0 auto;
text-align: left;
}
#quidr{
width: 260px;
border: 2px solid #b39975;
background:url('http://fr.quozpowa.com/QuozUpload/51082294061364297729fondsuj.png') no-repeat transparent;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
float: right;
margin: 0 auto;
text-align: left;
}
.quih{
width:240px;
margin: 0 auto;
height: 190px;
overflow-y: auto;
margin: 10px auto;
}

/* Partenaires*/
#partenaires{
width: 95%;
position: relative;
margin: auto;
padding: 0;
}
#parthaut{
position: relative;
width: 100%;
margin:auto;
padding: 0;
text-align: center;
}
#parthaut h2{
color: #4e91c8;
font: 18px Verdana;
letter-spacing:1px;
-moz-text-shadow: 0px 1px 0px #000;
-webkit-text-shadow: 0px 1px 0px #000;
text-shadow: 0px 1px 0px #000;
}
#parthaut h2:first-letter{
color: #780014 !important;
font-weight: bold;
font-size: 20px;
}
/* Slidepart */
#slidepart{
width: 468px;
height: 60px;
margin: auto;
padding: 0;
position: relative;
overflow: hidden;
}
#slidepart a {
text-decoration: none;
}
#slidepart a img {
width: 468px;
height: 60px;
margin: auto;
padding: 0;
}
/*Flèches */
#prec4 {
position: absolute;
top: 52px;
left: 10px;
cursor: pointer;
}
#next4 {
position: absolute;
top: 52px;
right: 10px;
cursor: pointer;
}
/*|__________ FIN INDEX_BODY__________*/

Et le javascript

Code:
jQuery(document).ready( function(){
jQuery(".boutons a").hover(function() {
jQuery(this).animate({ backgroundColor: "#91dae5"}, 600);
},
function() {
jQuery(this).animate({ backgroundColor: "#286cb8"}, 400);
});
jQuery(".groupesg li").hover(function() {
jQuery(this).animate({ backgroundColor: "#91dae5"}, 600);
},
function() {
jQuery(this).animate({ backgroundColor: "#286cb8"}, 400);
});
jQuery(".groupesd li").hover(function() {
jQuery(this).animate({ backgroundColor: "#91dae5"}, 600);
},
function() {
jQuery(this).animate({ backgroundColor: "#286cb8"}, 400);
});
jQuery("a .qeel_span").hover(function() {
jQuery(this).animate({ color: "#0056e5"}, 400);
},
function() {
jQuery(this).animate({ color: "#e50016"}, 500);
});
jQuery(".bas-group a.lien_bas_group").hover(function() {
jQuery(this).animate({ color: "#0087e5"}, 400);
},
function() {
jQuery(this).animate({ color: "#e50016"}, 500);
});
jQuery('.opacite_8').each(function() {
jQuery(this).css('opacity', 0.6);
jQuery(this).hover(function() {
jQuery(this).stop().animate({ opacity: 1.0 }, 700);
},
function() {
jQuery(this).stop().animate({ opacity: 0.7 }, 700);
          });
        });
jQuery('#slidepart').cycle({
    fx: 'fade',
    speed:  '2500',
    pause:  '0',
    next:  '#next4',
    prec:  '#prec4'
});
});

Merci pour l'aide que vous pourrez me fournir

Azya
***

Féminin
Messages : 151
Inscrit(e) le : 21/10/2011

http://www.plumesmots.com/
Azya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réglages code pour QEEL

Message par Scoubifitz le Dim 31 Mar 2013 - 9:29

bonjour,

il manque un "div" de fermeture juste avant la balise "BOUTON DU BAS" ...

Hi

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réglages code pour QEEL

Message par Azya le Dim 31 Mar 2013 - 11:03

Bonjour Scoubifitz,

merci de ton coup d’œil, c'est nickel ! Je vais pouvoir régler tout cela tranquillement maintenant
Thanks

Azya
***

Féminin
Messages : 151
Inscrit(e) le : 21/10/2011

http://www.plumesmots.com/
Azya a été remercié(e) par l'auteur de ce sujet.

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


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