Placement de plusieurs images non liées sur QEEL

[Mila Roza]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://jesuisuneprincesse.forumactif.org

Description du problème

Bonjour,
Pour mon QEEL, j'aimerais mettre une image au-dessus de chaque groupe. J'ai réussi à les mettre, sauf que selon les ordinateurs, elles bougent et ne sont plus vraiment au-dessus du nom :/
Il faudrait obtenir ceci :

et que les images ne bougent pas d'un ordinateur à un autre
Voici mon template index-body :

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'" 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_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'" 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 id="QEEL">
      <!-- Bloc des Groupes -->
          <div class="groupes">
            <div class="Images_QEEL">
            <img class="IMG_Raiponce" src="http://img11.hostingpics.net/pics/583532RAIPONCE.png"/>
            <img class="IMG_Belle" src="http://img11.hostingpics.net/pics/524374BELLE.png"/>
            <img class="IMG_Ptit" src="http://img11.hostingpics.net/pics/834701PTITbiscuit.png"/>
            <img class="IMG_Cendrillon" src="http://img11.hostingpics.net/pics/311027CENDRILLON.png"/>
            <img class="IMG_Alice" src="http://img11.hostingpics.net/pics/904273ALICE.png"/>
            <img class="IMG_Aladin" src="http://img11.hostingpics.net/pics/186623ALADIN.png"/>
            </div>
            <a href="http://jesuisuneprincesse.forumactif.org/g1-raiponce" title="Description du Groupe"><font color="#BD8CA0">Raiponce</font></a>
            <a href="http://jesuisuneprincesse.forumactif.org/g2-belle" title="Description du Groupe"><font color="#C23232">Belle</font></a>
            <a href="http://jesuisuneprincesse.forumactif.org/g3-p-tit-biscuit" title="Description du Groupe"><font color="#E3A549">P'tit Biscuit</font></a>
            <a href="http://jesuisuneprincesse.forumactif.org/g4-cendrillon" title="Description du Groupe"><font color="#75BDA0">Cendrillon</font></a>
            <a href="http://jesuisuneprincesse.forumactif.org/g5-alice" title="Description du Groupe"><font color="#5B89D9">Alice</font></a>
            <a href="http://jesuisuneprincesse.forumactif.org/g6-aladin" title="Description du Groupe"><font color="#701D85">Aladin</font></a>
      </div>
      <!-- Fin du Bloc -->
          <table width="100%" cellspacing="0" cellpadding="2" border="0">
            <tr>
                <td width="50%" valign="top" align="justify" style="border-right: 2px solid #929191;">
                  <span class="gensmall">
                    {TOTAL_POSTS} <br/> {TOTAL_USERS} <!-- Messages Postés - Nombres de membres -->
                        <br />
                      {NEWEST_USER} <!-- Dernier Utilisateur enregistré -->
                        <br />
                      {TOTAL_USERS_ONLINE} <!-- Nombre d'utilisateurs en ligne (membres, invités, invisibles) -->
                        <br /> 
                      {LOGGED_IN_USER_LIST} <!-- Liste des membres en ligne -->
                  </span> 
                </td>

                <td width="50%" valign="top" align="justify;">
                                      <table>{L_CONNECTED_MEMBERS}</table>
                </td>
            </tr>
          </table> 
    </div>     
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script>
    FB.init({
      appId      : {switch_fb_index_login.FACEBOOK_APP_ID},
      cookie    : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_fb_index_login -->

Et mon CSS :

Code:

*HEADER FOND*

body {
background-repeat: no-repeat;
background-attachment: scroll;
}

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

*ENLEVER SOULIGN LIENS*

a:hover{text-decoration: none !important;}
a {text-decoration: none !important;}
a:link {text-decoration: none !important;}
a:visited {text-decoration: none !important;}

/*ALIGNEMENT TEXTE*/
.postbody {
    padding-left: 15px;
    padding-right: 25px;
    text-align:justify;
}

/*PSEUDOS PROFIL*/
.pseudo {
  padding-top : 5px
  font-family: AR ESSENCE
  font-size : 18px
  text-align : center
  letter-spacing: 2px;
  text-shadow: #501646 1px 1px 5px;
  padding-bottom : 5px
}

/*INFOS PROFIL*/

.statsprof { /* Les informations du profil */
    padding-top: 5px;
  font-family: Georgia
  font-size : 20px
  text-align : left
  letter-spacing: 2px;
    background-image: url(http://img11.hostingpics.net/pics/111131FONDCATE.png) ;
    width: 200px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    text-align:left;
    padding-right: 8px;
    padding-left: 8px;
    border: solid 2px #3E7963;
      repeat: none;
      align: center;
      margin-left: 5px;
      padding: 5px;
      padding-bottom: 5px;
}

.rang{-webkit-border-bottom-right-radius: 50px;
    -webkit-border-bottom-left-radius: 50px;
    -moz-border-radius-bottomright: 50px;
    -moz-border-radius-bottomleft: 50px;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
    margin: 5px;
      width: 150px;
      align: center;
    background-color: #E6E4E2;
      margin-left: 10px;
      padding-top: 10px;
      margin-top: -7px;
}

#profil_head /* L'encadrement général de ton profil et avatar */
    {padding-top: 5px;
    background-color: #696969;
    width: 235px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    text-align:justify;
    padding-right: 8px;
    padding-left: 8px;
   
}
   
.postdetails.poster-profile a img { /* L'avatar et son encadrement */
      -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    border: 5px solid #4b4747;
}

.cadreavatar {
    filter:alpha(opacity=50);
    -moz-opacity:0.7;
    opacity: 0.7;
}
.cadreavatar:hover {
    filter:alpha(opacity=100);
    -moz-opacity:1;
    opacity: 1;
}

/*ICONES PROFIL*/

.icones_profil {
  text-align:center;
}

/*QEEL*/

#QEEL {
  background: #E6E4E2;
  margin: auto;
  text-align: justify;
  width: 800px; /* Modifier la valeur pour changer la taille */
  padding: 5px;
  background-color: #E6E4E2;
    -webkit-border-radius:10px;
    -moz-border-radius: 10px ;
    border-radius:10px;
    border: 3px #E6E4E2 solid;
  }

.groupes {
  margin: auto;
  text-align: center;
  padding: 2px;
}

.groupes a {
  /* Marges pour écarter les liens les uns des autres */
  margin-left: 20px;
  margin-right: 20px;
  /* Styles du lien */
  text-transform: uppercase;
  font-family : AR ESSENCE;
  font-size: 20 px;
  font-weight: bolder;
}

.IMG_Raiponce {
  padding-right:15px;
  padding-left:5px;
  filter:alpha(opacity=50);
    -moz-opacity:0.7;
    opacity: 0.7;
}
.IMG_Raiponce:hover {
    filter:alpha(opacity=100);
    -moz-opacity:1;
    opacity: 1;
}
.IMG_Belle {
  padding-right:40px;
  padding-left:15px;
  filter:alpha(opacity=50);
    -moz-opacity:0.7;
    opacity: 0.7;
}
.IMG_Belle:hover {
    filter:alpha(opacity=100);
    -moz-opacity:1;
    opacity: 1;
}
.IMG_Ptit {
  padding-right:15px;
  padding-left:1px;
  filter:alpha(opacity=50);
    -moz-opacity:0.7;
    opacity: 0.7;
}
.IMG_Ptit:hover {
    filter:alpha(opacity=100);
    -moz-opacity:1;
    opacity: 1;
}
.IMG_Cendrillon {
  padding-left:30px;
  filter:alpha(opacity=50);
    -moz-opacity:0.7;
    opacity: 0.7;
}
.IMG_Cendrillon:hover {
    filter:alpha(opacity=100);
    -moz-opacity:1;
    opacity: 1;
}
.IMG_Alice {
  padding-right:1px;
  padding-left:45px;
  filter:alpha(opacity=50);
    -moz-opacity:0.7;
    opacity: 0.7;
}
.IMG_Alice:hover {
    filter:alpha(opacity=100);
    -moz-opacity:1;
    opacity: 1;
}
.IMG_Aladin {
  padding-right:1px;
  padding-left:25px;
  filter:alpha(opacity=50);
    -moz-opacity:0.7;
    opacity: 0.7;
}
.IMG_Aladin:hover {
    filter:alpha(opacity=100);
    -moz-opacity:1;
    opacity: 1;
}
/*POLICE CATEGORIES*/
 
.secondarytitle h2 {
  text-align: center; /*alignement du texte par rapport au bloc qui le contient */
  text-transform:uppercase; /* texte en petites majuscules */
  font-family: Merienda;
  font-size:24px;
}

/*POLICE FORUM*/

.forumlink {
  font-family : Sail;
  font-size : 20px;
}

/***MISE EN FORME DES CATÉGORIES : AFFICHER LES SOUS FORUMS EN COLONNE*[Début du CSS]***/

/* Ceci est la technique dite "clearfix" qui permet de forcer le conteneur des flottants à s'adapter à leur taille */
.BlocForum:after {
  display:table;
  content:"";
  clear:both;
}

/* Positionnement de la description des forums */
.DescForum {
  float:left; /* flottant à gauche */
  width:80%; /* largeur de 80% */
}

/* Positionnement de la liste des sous-forums */
.ListeSousForums {
  float:left; /* flottant à gauche */
  width:20%; /* largeur de 20% */
  font-size:0px;
}

/* Mise en page de la description des forums */

.DescForum > div {
  margin:2px 10px 2px 2px; /*marges extérieures, haut droite bas gauche*/
  background:#C0BBBE; /* couleur de fond */
  padding:5px; /* marges intérieures, entre le texte et le bord */
  text-align:justify; /* alignement du texte */
  /* des coins arrondis */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  /* un effet d'ombre */
  -webkit-box-shadow:1px 1px 2px 0px #000000;
  -moz-box-shadow:1px 1px 2px 0px #000000;
  box-shadow:1px 1px 2px 0px #000000;
}
.ListeSousForums a {
  display:block; /* on transforme les liens en blocs */
  background:#C0BBBE; /* couleur de fond */
  padding:2px 10px; /* marges internes haut/bas et droite/gauche */
  margin:2px 0; /*marges externes haut/bas et droite/gauche */
  /* des coins arrondis */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  /* un effet d'ombre */
  -webkit-box-shadow:1px 1px 2px 0px #000000;
  -moz-box-shadow:1px 1px 2px 0px #000000;
  box-shadow:1px 1px 2px 0px #000000;
  /* sans la virgule*/
  font-size:10px; /* indiquez la taille du texte des liens */
  padding :5px; /* on rajoute un espace après le lien */
}
  /* pour les navigateurs qui acceptent la pseudo-classe :last-child, on supprime l'espace final qui ne sert à rien */
.ListeSousForums a:last-child {
  padding-right:0px;
}
#cadre_haut {
   float: right;
        position: relative;
        margin-right: -200px;
        width: 200px;
        height: 100%;
        background: #E6E4E2;
}
#cadre_bas {
        float: right;
        margin-top: 45px;
        position: absolute;
        width: 200px;
        height: 100%;
}
.forumline{
    background-color: #E6E4E2;
    -webkit-border-radius:10px;
    -moz-border-radius: 10px ;
    border-radius:10px;
    border: 3px #E6E4E2 solid;
}
/*[fin du CSS]*MISE EN FORME DES CATÉGORIES : AFFICHER LES SOUS-FORUMS EN COLONNE*/

/***MESSAGE PAGE D'ACCUEIL***[Début du CSS]/

/*Titre*/

.titre {
   font-family : Sail;
   font-size : 40px;
   color : #501646;
   text-shadow : #703766 1px 1px 5px;
   text-align : center;
}

.legend {
   font-family : Georgia;
   font-size : 8px;
   color : #3E7963;
   text-align : center;
   margin-top : -10px
}

.titre2 {
     font-family: Georgia;
     font-size: 12px;
     color : #3E7963;
     padding: 1px;
     margin: auto;
     margin-bottom: 5px;
}


/*Concept*/

.block-concept {
   font-family : Georgia;
   text-align : justify;
   margin-right : 160px;
   margin-left : 160px;
}
/*Ligne*/
hr {
     border-style : dotted;
     border-color : #501646;
}

/*Liens*/

.lien {
   font-family : Merienda;
   font-size : 15px;
   color : #3E7963;
   text-align : center;
   padding : 1px
}

/*Staff*/

.block-staff {
    position: relative;
      z-index: 0;
}
.image {
   width: 100%;
   height: 100%;
}
.image img {
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
   -webkit-transition: all 1s ease; /* Safari et Chrome */
   -moz-transition: all 1s ease; /* Firefox */
   -ms-transition: all 1s ease; /* Internet Explorer 9 */
   -o-transition: all 1s ease; /* Opera */
   transition: all 1s ease;
}
.image:hover img {
/* L'image est grossie de 15% */
   -webkit-transform:scale(1.15); /* Safari et Chrome */
   -moz-transform:scale(1.15); /* Firefox */
   -ms-transform:scale(1.15); /* Internet Explorer 9 */
   -o-transform:scale(1.15); /* Opera */
   transform:scale(1.15);
}
/*Colonnes*/

.block-news, .block-membres, .block-information {
     width: 160px;
     height: auto;
}
.block-membres img, .thumbnail > div {
       -moz-transition: opacity 1s;
       -o-transition: opacity 1s;
       -webkit-transition: opacity 1s;
       -htm-transition: opacity 1s;
       transition: opacity 1s;
}
.block-membres img {
     width: 88px;
     height: 31px;
     padding: 1px;
     display : block;
     margin-right : auto;
     margin-left: auto;
     
 
     opacity: 0.5;
     -moz-opacity: 0.5;
     filter: alpha(opacity=50);
}
.block-membres img:hover {
     opacity: 1;
     -moz-opacity: 1;
     filter: alpha(opacity=100);
}
/***MESSAGE PAGE D'ACCUEIL***[Fin du CSS]/


/*Citations*/
.cadre {
    background-color : #f0f0f0;
    padding-top:10px;
    padding-bottom :10px;
    padding-right:10px;
    padding-left:10px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}
titre{
  font-size : 30px;
  font-family : Merienda;
  color : #a56154;
}
soustitre {
  font-size : 20px;
  font-family : AR ESSENCE;
  color : #767967;
}

Merci d'avance

[tupac]

Bonjour Mila Roza

J'ai placé vos images et le nom des groupes dans un tableau ce qui à pour effet de les centrer ,j'ai aussi modifié votre CSS.

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'" 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_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'" 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 id="QEEL">
      <!-- Bloc des Groupes -->
          <div class="groupes">
            <div class="Images_QEEL">
                                       
 <table style="width:800px;" align="center">
  <tr><td>
    <img class="IMG_Raiponce" src="http://img11.hostingpics.net/pics/583532RAIPONCE.png"/></br>
                <a href="http://jesuisuneprincesse.forumactif.org/g1-raiponce" title="Description du Groupe"><font color="#BD8CA0">Raiponce</font></a>
  </td>
  <td>
            <img class="IMG_Belle" src="http://img11.hostingpics.net/pics/524374BELLE.png"/></br>
            <a href="http://jesuisuneprincesse.forumactif.org/g2-belle" title="Description du Groupe"><font color="#C23232">Belle</font></a>   
  </td>
  <td>   
            <img class="IMG_Ptit" src="http://img11.hostingpics.net/pics/834701PTITbiscuit.png"/></br>
            <a href="http://jesuisuneprincesse.forumactif.org/g3-p-tit-biscuit" title="Description du Groupe"><font color="#E3A549">P'tit Biscuit</font></a>   
  </td>
  <td>   
            <img class="IMG_Cendrillon" src="http://img11.hostingpics.net/pics/311027CENDRILLON.png"/></br>
            <a href="http://jesuisuneprincesse.forumactif.org/g4-cendrillon" title="Description du Groupe"><font color="#75BDA0">Cendrillon</font></a>   
  </td>
  <td>   
            <img class="IMG_Alice" src="http://img11.hostingpics.net/pics/904273ALICE.png"/></br>
            <a href="http://jesuisuneprincesse.forumactif.org/g5-alice" title="Description du Groupe"><font color="#5B89D9">Alice</font></a>   
    </td>
  <td>   
            <img class="IMG_Aladin" src="http://img11.hostingpics.net/pics/186623ALADIN.png"/></br>
            <a href="http://jesuisuneprincesse.forumactif.org/g6-aladin" title="Description du Groupe"><font color="#701D85">Aladin</font></a>   
   
    </td></tr></table>
            </div>



      </div>
      <!-- Fin du Bloc -->
          <table width="100%" cellspacing="0" cellpadding="2" border="0">
            <tr>
                <td width="50%" valign="top" align="justify" style="border-right: 2px solid #929191;">
                  <span class="gensmall">
                    {TOTAL_POSTS} <br/> {TOTAL_USERS} <!-- Messages Postés - Nombres de membres -->
                        <br />
                      {NEWEST_USER} <!-- Dernier Utilisateur enregistré -->
                        <br />
                      {TOTAL_USERS_ONLINE} <!-- Nombre d'utilisateurs en ligne (membres, invités, invisibles) -->
                        <br /> 
                      {LOGGED_IN_USER_LIST} <!-- Liste des membres en ligne -->
                  </span> 
                </td>

                <td width="50%" valign="top" align="justify;">
                                      <table>{L_CONNECTED_MEMBERS}</table>
                </td>
            </tr>
          </table> 
    </div>     
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script>
    FB.init({
      appId      : {switch_fb_index_login.FACEBOOK_APP_ID},
      cookie    : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_fb_index_login -->

Votre CSS

Code:

/*QEEL*/

#QEEL {
  background: #E6E4E2;
  margin: auto;
  text-align: justify;
  width: 800px; /* Modifier la valeur pour changer la taille */
  padding: 5px;
  background-color: #E6E4E2;
    -webkit-border-radius:10px;
    -moz-border-radius: 10px ;
    border-radius:10px;
    border: 3px #E6E4E2 solid;
  }

.groupes {
  margin: auto;
  text-align: center;
  padding: 2px;
}

.groupes a {
  /* Marges pour écarter les liens les uns des autres */
  margin-left: 20px;
  margin-right: 20px;
  /* Styles du lien */
  text-transform: uppercase;
  font-family : AR ESSENCE;
  font-size: 20 px;
  font-weight: bolder;
}

.IMG_Raiponce {

  filter:alpha(opacity=50);
    -moz-opacity:0.7;
    opacity: 0.7;

}
.IMG_Raiponce:hover {
    filter:alpha(opacity=100);
    -moz-opacity:1;
    opacity: 1;
}


.IMG_Belle {

  filter:alpha(opacity=50);
    -moz-opacity:0.7;
    opacity: 0.7;

}
.IMG_Belle:hover {
    filter:alpha(opacity=100);
    -moz-opacity:1;
    opacity: 1;
}


.IMG_Ptit {

  filter:alpha(opacity=50);
    -moz-opacity:0.7;
    opacity: 0.7;
}
.IMG_Ptit:hover {
    filter:alpha(opacity=100);
    -moz-opacity:1;
    opacity: 1;
}


.IMG_Cendrillon {

  filter:alpha(opacity=50);
    -moz-opacity:0.7;
    opacity: 0.7;
}
.IMG_Cendrillon:hover {
    filter:alpha(opacity=100);
    -moz-opacity:1;
    opacity: 1;
}


.IMG_Alice {

  filter:alpha(opacity=50);
    -moz-opacity:0.7;
    opacity: 0.7;
}
.IMG_Alice:hover {
    filter:alpha(opacity=100);
    -moz-opacity:1;
    opacity: 1;
}


.IMG_Aladin {
  filter:alpha(opacity=50);
    -moz-opacity:0.7;
    opacity: 0.7;
}
.IMG_Aladin:hover {
    filter:alpha(opacity=100);
    -moz-opacity:1;
    opacity: 1;
}

[Mila Roza]

Bonsoir,
C'est parfait, pile ce que je voulais!! Merci beaucoup!!