Placement de plusieurs images non liées sur QEEL

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

Résolu Placement de plusieurs images non liées sur QEEL

Message par Mila Roza le Ven 11 Déc 2015 - 14:09

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 Smile
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 Smile


Dernière édition par Mila Roza le Sam 12 Déc 2015 - 19:33, édité 1 fois

Mila Roza
Nouveau membre

Messages : 21
Inscrit(e) le : 28/10/2015

http://jesuisuneprincesse.forumactif.org
Mila Roza a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Placement de plusieurs images non liées sur QEEL

Message par tupac le Sam 12 Déc 2015 - 12:35

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;
}

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Placement de plusieurs images non liées sur QEEL

Message par Mila Roza le Sam 12 Déc 2015 - 19:33

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

Mila Roza
Nouveau membre

Messages : 21
Inscrit(e) le : 28/10/2015

http://jesuisuneprincesse.forumactif.org
Mila Roza 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