un rien trop large... l'espace totale du carrousel ne doit pas excéder 850px de large mais sinon, c'est parfait ^^ l'ordre des blocs n'est pas si important du moment que tout y est ^^

Je peux juste te demander une petite chose ? J'ai oublié de le préciser sur mon schéma pas mais est-ce qu'il serait possible que l'espace image sous les anniversaires puisse contenir du texte ? Ainsi je pourrai y ajouter les crédits... Normalement il y a la place dans la PA mais vu que l'espace est assez restreint, je pense plutôt les ajouter en détail dans le QEEL.

Salut!

C'est ajouté pour l'image. Sinon, j'avais mal compris pour les dimensions (je pensais que c'était 850x450 pour chaque bloc, pas max pour tout), cela devrait être mieux maintenant :
http://forum-test-5.forum-canada.com/

C'est parfait ^^ merci beaucoup ^^

Alors voilà les codes :

CSS :

Code:

/* QEEL CAROUSEL - NEVERUTOPIA */
#qeelespace_top
{
  height: 50px;
  text-align: center;
}
/*Titre en haut du qeel*/
#qeelespace_top a
{
  font-family: 'Covered By Your Grace', cursive;
  font-size: 42px;
  font-weight: bold;
  color: #A12D2D;
  text-shadow: -1px -1px 0px #ffffff, 1px -1px 0px #ffffff, -1px 1px 0px #ffffff, 1px 1px 0px #ffffff;
  text-decoration: none!important;
}
/*Titre survolé*/
#qeelespace_top a:hover
{
  color: #CA0101;
  text-decoration: none!important;
}
#qeelespace_carousel
{
  position: relative;
  width: 850px;
  margin: auto;
  height: 350px;
  padding: 10px 0px;
  color: #434343 !important;
  /* pour modifier la couleur du texte dans la PA pensez a modifier ou enlever la ligne ci dessus */
}
.qeellien1 /* FONCTIONNEMENT CAROUSEL - NE PAS MODIFIER */
{
  position: absolute;
  z-index: 999;
  display: none;
}
.qeellien2, .qeellien3, .qeellien4, #qeeltarget2:target .qeellien1, #qeeltarget3:target .qeellien1, #qeeltarget4:target .qeellien1
/* FONCTIONNEMENT CAROUSEL - NE PAS MODIFIER */
{
  position: absolute;
  z-index: 999;
  display: block;
  width: 100%;
  height: 100%;
}

#qeelcarousel_1 /* design du bloc 1 - bloc devant par defaut */
{
  position: absolute;
  z-index: 3;
  width: 640px;
  height: 350px;
  left: 50%;
  margin-left: -320px;
  margin-top: 0px;
  background-image:linear-gradient(#ffffff, #ED907E);
  background-image:-moz-linear-gradient(#ffffff, #ED907E);
  background-image:-o-linear-gradient(#ffffff, #ED907E);
  background-image:-htm-linear-gradient(#ffffff, #ED907E);
  background-image:-webkit-linear-gradient(#ffffff, #ED907E);
  background-color: #ED907E;
  border: 1px solid #ED907E;
  box-shadow: 0px 0px 5px #595959;
  overflow: hidden;
  -webkit-transition: 500ms;
  transition: 500ms;
}
#qeelcarousel_2 /* design du bloc 2 - bloc a droite par defaut */
{
  position: absolute;
  z-index: 2;
  width: 300px;
  height: 150px;
  left: 50%;
  margin-left: 120px;
  margin-top: 100px;
  background-image:linear-gradient(#ffffff, #EDD37E);
  background-image:-moz-linear-gradient(#ffffff, #EDD37E);
  background-image:-o-linear-gradient(#ffffff, #EDD37E);
  background-image:-htm-linear-gradient(#ffffff, #EDD37E);
  background-image:-webkit-linear-gradient(#ffffff, #EDD37E);
  background-color: #EDD37E;
  border: 1px solid #EDD37E;
  box-shadow: 0px 0px 5px #595959;
  overflow: hidden;
  -webkit-transition: 500ms;
  transition: 500ms;
}
#qeelcarousel_3 /* design du bloc 3 - bloc a gauche par defaut */
{
  position: absolute;
  z-index: 2;
  width: 300px;
  height: 150px;
  left: 50%;
  margin-left: -420px;
  margin-top: 100px;
  background-image:linear-gradient(#ffffff, #7EAEED);
  background-image:-moz-linear-gradient(#ffffff, #7EAEED);
  background-image:-o-linear-gradient(#ffffff, #7EAEED);
  background-image:-htm-linear-gradient(#ffffff, #7EAEED);
  background-image:-webkit-linear-gradient(#ffffff, #7EAEED);
  background-color: #7EAEED;
  border: 1px solid #7EAEED;
  box-shadow: 0px 0px 5px #595959;
  overflow: hidden;
  -webkit-transition: 500ms;
  transition: 500ms;
}
#qeelcarousel_4 /* design du bloc 4 - bloc derriere et donc invisible par defaut */
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 150px;
  left: 50%;
  margin-left: -170px;
  margin-top: 10px;
  background-image:linear-gradient(#ffffff, #CC7EED);
  background-image:-moz-linear-gradient(#ffffff, #CC7EED);
  background-image:-o-linear-gradient(#ffffff, #CC7EED);
  background-image:-htm-linear-gradient(#ffffff, #CC7EED);
  background-image:-webkit-linear-gradient(#ffffff, #CC7EED);
  background-color: #CC7EED;
  border: 1px solid #CC7EED;
  box-shadow: 0px 0px 5px #595959;
  overflow: hidden;
  -webkit-transition: 500ms;
  transition: 500ms;
}

/* FONCTIONNEMENT CAROUSEL - NE PAS MODIFIER */
#qeeltarget1:target #qeelcarousel_1, #qeeltarget2:target #qeelcarousel_2, #qeeltarget3:target #qeelcarousel_3,
#qeeltarget4:target #qeelcarousel_4
{
  position: absolute;
  z-index: 3;
  width: 640px;
  height: 350px;
  left: 50%;
  margin-left: -320px;
  margin-top: 0px;
  -webkit-transition: 500ms;
  transition: 500ms;
}
/* FONCTIONNEMENT CAROUSEL - NE PAS MODIFIER */
#qeeltarget1:target .qeellien1, #qeeltarget2:target .qeellien2, #qeeltarget3:target .qeellien3, #qeeltarget4:target .qeellien4
{
  display: none;
}
/* FONCTIONNEMENT CAROUSEL - NE PAS MODIFIER */
#qeeltarget1:target #qeelcarousel_2, #qeeltarget2:target #qeelcarousel_4, #qeeltarget3:target #qeelcarousel_1,
#qeeltarget4:target #qeelcarousel_3
{
  position: absolute;
  z-index: 2;
  width: 300px;
  height: 150px;
  left: 50%;
  margin-left: 120px;
  margin-top: 100px;
  overflow: hidden;
  -webkit-transition: 500ms;
  transition: 500ms;
}
/* FONCTIONNEMENT CAROUSEL - NE PAS MODIFIER */
#qeeltarget1:target #qeelcarousel_3, #qeeltarget2:target #qeelcarousel_1, #qeeltarget3:target #qeelcarousel_4,
#qeeltarget4:target #qeelcarousel_2
{
  position: absolute;
  z-index: 2;
  width: 300px;
  height: 150px;
  left: 50%;
  margin-left: -420px;
  margin-top: 100px;
  overflow: hidden;
  -webkit-transition: 500ms;
  transition: 500ms;
}
/* FONCTIONNEMENT CAROUSEL - NE PAS MODIFIER */
#qeeltarget1:target #qeelcarousel_4, #qeeltarget2:target #qeelcarousel_3, #qeeltarget3:target #qeelcarousel_2,
#qeeltarget4:target #qeelcarousel_1
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 150px;
  left: 50%;
  margin-left: -170px;
  margin-top: 10px;
  overflow: hidden;
  -webkit-transition: 500ms;
  transition: 500ms;
}

.qeelcarousel_1_content /* apparition progressive du contenu - ne pas modifier */
{
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition: 500ms 500ms;
  transition: 500ms 500ms;
}
/* apparition progressive du contenu - ne pas modifier */
.qeelcarousel_2_content, .qeelcarousel_3_content, .qeelcarousel_4_content, #qeeltarget2:target .qeelcarousel_1_content,
#qeeltarget3:target .qeelcarousel_1_content, #qeeltarget4:target .qeelcarousel_4_content
{
  position: relative;
  z-index: 1;
  width: 640px;
  height: 350px;
  overflow: hidden;
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transition: 500ms 500ms;
  transition: 500ms 500ms;
}
/* apparition progressive du contenu - ne pas modifier */
#qeeltarget1:target .qeelcarousel_1_content, #qeeltarget2:target .qeelcarousel_2_content, #qeeltarget3:target .qeelcarousel_3_content,
#qeeltarget4:target .qeelcarousel_4_content
{
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition: 500ms 500ms;
  transition: 500ms 500ms;
}

/*Blocs blancs*/
.qeel_bloc {
  margin: 20px;
  height: 268px;
  background: #ffffff;
  padding: 5px;
  border: 1px solid #E0E1E0;
  text-align: justify;
  color: #949494;
  font-family: 'Verdana';
  font-size: 13px;
  overflow: auto;
}
/*Titre de bloc*/
.qeel_subtitle {
  font-family: 'Covered By Your Grace', cursive;
  font-size: 32px;
  font-weight: bold;
  height: 30px;
  text-align: center;
}
/*Bloc blancs du bloc2*/
.qeelcarousel_2_content .qeel_bloc {
  float: left;
  width: 282px;
  margin-right: 0px;
  text-align: center;
}
/*Espaces entre les blocs du bloc2*/
.qeelcarousel_2_content .qeel_bloc:nth-child(2) {
  margin-right: 10px;
  overflow: hidden;
}
.qeelcarousel_2_content .qeel_bloc:nth-child(3) {
  margin-left: 0px;
  overflow: hidden;
}
/*Nom des groupes*/
.qeelonglet {
  display: block;
  font-size: 18px;
  height: 38px;
  padding: 15px 3px 0px 3px;
  margin-bottom: 1px;
  text-align: center;
  background: #E9E8E8;
  font-weight: bold;
  text-transform: uppercase;
}
.qeelonglet a {
  color: #A12D2D!important;
}
/*Nom du Groupe actif*/
.qeelonglet_1 {
  background: #F3BBBB;
}
.qeelonglet_1 a {
  color: #CA0101!important;
}
.qeelonglet a,
.qeelonglet a:hover {
  text-decoration: none!important;
}
/*Description des groupes*/
.contenu_qeelonglet {
  position: relative;
  width: 282px;
  height: 268px;
  display: none;
  text-align: justify;
}
/*Images des groupes*/
.contenu_qeelonglet .qeel_img_group {
  width: 282px;
  height: 268px;
}
/*Descriptions des groupes*/
.qeel_desc {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 272px;
  height: 258px;
  background: rgb(255,255,255);
  background: rgba(255,255,255,0.9);
  padding: 5px;
  overflow: auto;
  -webkit-transition: 0,5s;
  transition: 0.5s;
  opacity: 0;
}
/*Descriptions des groupes au survol*/
.contenu_qeelonglet:hover .qeel_desc {
  opacity: 1;
}

/*Bloc 3*/
.qeelcarousel_3_content .qeel_bloc {
  height: 123px;
  margin-bottom: 10px;
}
/*Bloc sous anniv*/
.qeel_anniv_bas {
  margin: auto;
  position: relative;
  height: 123px;
  width: 588px;
  background: #ffffff;
  padding: 5px;
  border: 1px solid #E0E1E0;
  text-align: justify;
  font-family: 'Verdana';
  font-size: 13px;
  overflow: auto;
}
/*Image sous anniversaire*/
.qeel_img_anniv {
  display: block;
  margin: auto;
  height: 123px;
  width: 588px;
}
/*Texte sous anniv*/
.qeel_anniv_texte {
  position: absolute;
  top: 5px;
  left: 5px;
  height: 113px;
  width: 578px;
  background: rgb(255,255,255);
  background: rgba(255,255,255,0.9);
  padding: 5px;
  color: #949494;
  overflow: auto;
  -webkit-transition: 0,5s;
  transition: 0.5s;
  opacity: 0;
}
/*Texte au survol*/
.qeel_anniv_bas:hover .qeel_anniv_texte {
  opacity: 1;
}

/*Bloc 4*/
.qeelcarousel_4_content .qeel_bloc {
  text-align: center;
}
/*Partenaires bloc4*/
.qeelcarousel_4_content .qeel_bloc a {
  display: inline-block;
  margin: 0px 2px 2px 0px;
}
/*Images des partenaires*/
.qeelcarousel_4_content .qeel_bloc img {
  opacity: 0.8;
}
/*Images des partenaires survolés*/
.qeelcarousel_4_content .qeel_bloc img:hover {
  opacity: 1;
}

/*Rendre la police normale pour les annivs et les membres connectés des 24h*/
#connlist .row1, #qeelbirthday .row1 {
  padding: 0px;
  background: transparent;
  text-align: justify;
  color: #949494;
  font-family: 'Verdana';
  font-size: 13px;
}
/*Rendre la police normale pour les annivs et les membres connectés des 24h*/
#connlist .gensmall, #qeelbirthday .gensmall {
  color: #949494;
  font-family: 'Verdana';
  font-size: 13px;
}

Template index body, entre les "BEGIN disable viewonline" et "END disable viewonline" (Si tu as le template par défaut, cela veut dire que tu remplace les lignes 174 à 220 par ceci) :

Code:

<script type="text/javascript">
        //<!--
                function change_qeelonglet(name)
                {
                        document.getElementById('qeelonglet_'+anc_qeelonglet).className = 'qeelonglet_0 qeelonglet';
                        document.getElementById('qeelonglet_'+name).className = 'qeelonglet_1 qeelonglet';
                        document.getElementById('contenu_qeelonglet_'+anc_qeelonglet).style.display = 'none';
                        document.getElementById('contenu_qeelonglet_'+name).style.display = 'block';
                        anc_qeelonglet = name;
                }
        //-->
</script>
<link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace" rel="stylesheet" />
<div id="qeeltarget1">
  <div id="qeeltarget2">
    <div id="qeeltarget3">
      <div id="qeeltarget4">
        <div id="qeelespace_top">
          <a href="{U_VIEWONLINE}" rel="nofollow">Qui se cache dans l'ombre ?</a>
        </div>
        <div id="qeelespace_carousel">
         
          <!-- ZONE 1 - DEFAUT -->
          <div id="qeelcarousel_1">
            <a href="#qeeltarget1" class="qeellien1"></a>
            <div class="qeelcarousel_1_content">
              <div class="qeel_subtitle">Statistiques</div>
              <div class="qeel_bloc">
                Bienvenue à<span id="newuser">{NEWEST_USER}</span> !
                <div id="loggedlist">{LOGGED_IN_USER_LIST}</div>
                <table id="connlist" cellspacing="0">{L_CONNECTED_MEMBERS}</table>
              </div>
            </div>
          </div>
         
          <!-- ZONE 2 -->
          <div id="qeelcarousel_2">
            <a href="#qeeltarget2" class="qeellien2"></a>
            <div class="qeelcarousel_2_content">
              <div class="qeel_subtitle">Groupes</div>
              <div class="qeel_bloc">
                <span class="qeelonglet_1 qeelonglet" id="qeelonglet_Groupe1" onmouseover="javascript:change_qeelonglet('Groupe1');">
                  <a style="color: #000000;">Groupe 1</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe2" onmouseover="javascript:change_qeelonglet('Groupe2');">
                  <a style="color: #000000;">Groupe 2</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe3" onmouseover="javascript:change_qeelonglet('Groupe3');">
                  <a style="color: #000000;">Groupe 3</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe4" onmouseover="javascript:change_qeelonglet('Groupe4');">
                  <a style="color: #000000;">Groupe 4</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe5" onmouseover="javascript:change_qeelonglet('Groupe5');">
                  <a style="color: #000000;">Groupe 5</a>
                </span>
              </div>
              <div class="qeel_bloc">
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe1">
                  <img class="qeel_img_group" src="https://www.photos-de-chat.fr/wp-content/uploads/2015/04/tigre-swag-tumblr.jpg" alt="Image du groupe 1" />
                  <div class="qeel_desc">
                    Description du groupe 1
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe2">
                  <img class="qeel_img_group" src="https://s-media-cache-ak0.pinimg.com/564x/a4/48/44/a44844f0fd65b494696c9b96ccecb181.jpg" alt="Image du groupe 2" />
                  <div class="qeel_desc">
                    Description du groupe 2
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe3">
                  <img class="qeel_img_group" src="https://secure.static.tumblr.com/e14b937ad6f579e5e157ec5ddc3e1b02/kq0jpbh/9AVnhgn56/tumblr_static_filename_640_v2.jpg" alt="Image du groupe 3" />
                  <div class="qeel_desc">
                    Description du groupe 3
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe4">
                  <img class="qeel_img_group" src="https://s-media-cache-ak0.pinimg.com/564x/2b/90/64/2b9064544998f4cd04babfd5d0bfb1f4.jpg" alt="Image du groupe 4" />
                  <div class="qeel_desc">
                    Description du groupe 4
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe5">
                  <img class="qeel_img_group" src="https://secure.static.tumblr.com/3da637658501645215e9b99140cfabbf/bijvfp6/EMrn178i1/tumblr_static_1622596_588348514573170_1437931207_n.jpg" alt="Image du groupe 5" />
                  <div class="qeel_desc">
                    Description du groupe 5
                  </div>
                </div>
              </div>
              <div class="clear"></div>
            </div>
          </div>
         
          <!-- ZONE 3 -->
          <div id="qeelcarousel_3">
            <a href="#qeeltarget3" class="qeellien3"></a>
            <div class="qeelcarousel_3_content">
              <div class="qeel_subtitle">Anniversaires</div>
              <div class="qeel_bloc">
                <table id="qeelbirthday" cellspacing="0">
                  {L_WHOSBIRTHDAY_TODAY}
                  {L_WHOSBIRTHDAY_WEEK}
                </table>
              </div>
              <div class="qeel_anniv_bas">
                <img class="qeel_img_anniv" src="http://www.mindblowingpicture.com/wp_highres/minimalism/WP9HA2Z5.jpg" alt="machin" />
                <div class="qeel_anniv_texte">
                  Texte texte texte
                </div>
              </div>
            </div>
          </div>
         
          <!-- ZONE 4 -->
          <div id="qeelcarousel_4">
            <a href="#qeeltarget4" class="qeellien4"></a>
            <div class="qeelcarousel_4_content">
              <div class="qeel_subtitle">Partenaires</div>
              <div class="qeel_bloc">
                <a href="#" target="_blank"><img src="http://img4.hostingpics.net/pics/460747partenaires.png" alt="Partenaire 1" /></a>
                <a href="#" target="_blank"><img src="http://img4.hostingpics.net/pics/460747partenaires.png" alt="Partenaire 2" /></a>
                <a href="#" target="_blank"><img src="http://img4.hostingpics.net/pics/460747partenaires.png" alt="Partenaire 3" /></a>
                <a href="#" target="_blank"><img src="http://img4.hostingpics.net/pics/460747partenaires.png" alt="Partenaire 4" /></a>
                <a href="#" target="_blank"><img src="http://img4.hostingpics.net/pics/460747partenaires.png" alt="Partenaire 5" /></a>
                <a href="#" target="_blank"><img src="http://img4.hostingpics.net/pics/460747partenaires.png" alt="Partenaire 6" /></a>
                <a href="#" target="_blank"><img src="http://img4.hostingpics.net/pics/460747partenaires.png" alt="Partenaire 7" /></a>
                <a href="#" target="_blank"><img src="http://img4.hostingpics.net/pics/460747partenaires.png" alt="Partenaire 8" /></a>
                <a href="#" target="_blank"><img src="http://img4.hostingpics.net/pics/460747partenaires.png" alt="Partenaire 9" /></a>
                <a href="#" target="_blank"><img src="http://img4.hostingpics.net/pics/460747partenaires.png" alt="Partenaire 10" /></a>
                <a href="#" target="_blank"><img src="http://img4.hostingpics.net/pics/460747partenaires.png" alt="Partenaire 11" /></a>
                <a href="#" target="_blank"><img src="http://img4.hostingpics.net/pics/460747partenaires.png" alt="Partenaire 12" /></a>
              </div>
            </div>
          </div>
         
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");
</script>
    <script type="text/javascript">
        //<!--
                var anc_qeelonglet = 'Groupe1';
                change_qeelonglet(anc_qeelonglet);
        //-->
    </script>

Terrible !!! C'est génial, merci beaucoup, c'est installé et ça marche comme sur des roulettes.



Je clôture donc ma demande ici.