Petite personalisation

Salut,
Je souhaiterais avoir ma PA qui ressemble a ça:

Spoiler:

Pour cela voici:
CSS:

Code:

.onglet
        {
                display:inline-block;
                margin-left:3px;
                margin-right:3px;
                padding:3px;
                border:1px dashed white;
                cursor:pointer;
        }
        .onglet_0
        {
                background:#d3d3d1;
                border-bottom:1px dashed white;
        }
        .onglet_1
        {
                background:#d3d3d1;
                border-bottom:1px dashed white;
                padding-bottom:4px;
        }
        .contenu_onglet
        {
                background-color:#d3d3d1;
                border:0px dashed white;
                margin-top:-1px;
                padding:5px;
                display:none;
        }

td.row1{
background-image: url('http://s2.noelshack.com/old/up/fond-9807fd0661.png');
}
td.row2{
background-image: url('http://s2.noelshack.com/old/up/fond-9807fd0661.png');
}
td.row3{
background-image: url('http://s2.noelshack.com/old/up/fond-9807fd0661.png');
}






  body {
  background-repeat: no-repeat;
  }



/* Liens en Petites Majuscules */


a {
font-variant: small-caps;
}

tr.post span.gensmall { display: none; }

/* Spoilers arrondis */





/*Arrondissement des bords du forum */

textarea, .textarea.post, input.post {
-moz-border-radius:10px;
}

.postdetails poster-profil{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

/* Centrer Profils Messages */

.postbody .user { text-align: center; }

/* Barre de Navigation */




body { cursor: crosshair }
a:hover { cursor:ne-resize; }






.groupes{
background-color:#ffffff;border: 1px #http://forum.forumactif.com/forum.htmD0D0D0 dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
font-size:12px;font-weight: bold;text-align:center;
text-decoration: none !important;
}





a {font-variant: small-caps;}
.forumline{-moz-border-radius:15px;}
.bodyline {-moz-border-radius:40px;}

a.forumlink:hover, a.forumlink:hover:visited{
background-color: #a7a7a3;
border-left: 9px solid #90908a;
border-right: 9px solid #90908a;
-moz-border-radius:6px;}

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






I{border-bottom:none; color:#fbfbfb;text-decoration: none
}


.bodyline{ -moz-border-radius: 6px;}


textarea, .textarea.post, input.post {
-moz-border-radius:4px;
}


.forumline{
border: 3px #ffffff
double;
}

.bodyline {
-moz-border-radius:4px;
}

.forumline{
background-color: #ffffff;
-moz-border-radius: 6px ;
border: 3px double #ffffff ;
}

a.forumlink{
-moz-border-radius: 7px 7px 7px 7px;
background-color: #d3d3d1;
border-bottom: 5px double #ffffff;
color:#ffffff;
font-family: sans-serif;
font-size: 12px;
font-weight: lighter;
letter-spacing: 1px;
display:block;
text-align: center;
}


a.forumlink:hover{
color:rgb(189,103,89);
font-family: georgia;
font-size: 12px;
font-weight: lighter;
letter-spacing: 1px;
text-align: center;}


----------------------------


.quote{
width: 200px;
font-family: Courier,Courier New,sans-serif;
color: #ADA59A;
background-color: #e8e0d6;
border: #e8e0d6;
border-style: solid;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}

.code{
width: 200px;
font-family: Courier,Courier New,sans-serif;
color: #ADA59A;
background-color: #e8e0d6;
border: #e8e0d6;
border-style: solid;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}






a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a { text-decoration: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover { background-color: #ffffff; }
a:hover{text-transform:none;}



/* PA */


.marge{
padding-left: 6px;
padding-right: 6px;
}


/* EFFET OPACITE */

.opacity{
filter:alpha(opacity=50);
-moz-opacity:0.5;opacity: 0.5;
}

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





/* Infobulles de la PA */

a.infobulle {
  position: relative;
}

a.infobulle span {
  display: none; /* ceci masque l'infobulle */
}
a.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}
a.infobulle:hover span {
  display: inline; /* ceci affiche l'infobulle */
  position: absolute;

  white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

  top: 5px; /* on positionne notre infobulle */
  left: 15px;

  background: #ded7ce; /* arrière-plan de l'infobulle */

  color: #ada59a; /* texte dans l'infobulle */
  padding: 4px;

  /* bordures de votre infobulle*/
  border: 1px solid #ccc7c0;
  border-left: 3px solid #ccc7c0;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
}



/*PA par Alu' pour Never-Utopia*/

#PA {background: #E0E0E0;font-size:10px; background-position: right top;}
.titrePA{font-size:16px; font-family: Georgia, cursive; color:#006699;}
#case4{vertical-align:top;}
#case5{width:600px;}


#navigation {width:169px; height:105px;}
#navigation a{text-decoration: none; color: #006699;}

.lienfonce {
  display:inline-block;
  background:#BDBDBD;
  width:100%;
  text-indent: 7px;
  }
.lienclair{
  display:inline-block;
  background:#D8D8D8;
  width:100%;
  text-indent: 7px;
  }

#annonces {
  height:111px;
  width: 159px;
  overflow:auto;
  padding:5px;
  font-family: cursive;
  font-size: 9px;
  background-color: #DADADA;
  }

#annonces em, #defilant em {color:#006699;}

#case2{
  position:relative;
  width:221px;
  height:226px;
  overflow:hidden;
  padding:0;
}
#defilant{
  position:relative;
  width:211px;
  height:216px;
  margin-top: -3px;
  overflow: auto;
  padding:5px;
  background-color: #DADADA;
}
#imagePA{
  position: absolute;
  top:0;
  left: 0;
  width:221px;
  height:226px;
  background-color:gray;
  -moz-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

#case2:hover > #imagePA{margin-left: -221px;}

#contextePA{
  width: 183px;
  height: 110px;
  padding: 5px;
  overflow: auto;
  margin-bottom: 15px;
  background-color: #DADADA;
  }

.infostaff{
  position:absolute;
  top:-20;
  left:40px;
  opacity:0;
  visibility: hidden;
  height: 50px;
  width: 130px;
  background:#DADADA;
  background-position: left top;
  text-align: center;
  padding:10px;
  text-decoration: italic;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -moz-box-shadow: 0px 0px 2px 0px #656565;
  -webkit-box-shadow: 0px 0px 2px 0px #656565;
  -o-box-shadow: 0px 0px 2px 0px #656565;
  box-shadow: 0px 0px 2px 0px #656565;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=2);
  }

.staffPA:hover > .infostaff{opacity:1; visibility: visible;}
.infostaff em{color: #870808; font-size: 14px;}
.infostaff a{color: black; text-decoration: none;}

.staffPA {
  position:relative;  
  height: 30px;
  width: 30px;
  margin:5px;
  background-color: grey;
  border-radius: 50%;
}
.staffPA img{border-radius: 50%; overflow:hidden; height: 30px; width: 30px;}
#footerPA {font-variant:small-caps; font-size: 9px; color: grey;}
/*Profil avec rotation par
Alumine pour Never-Utopia*/

#profilmembre {
  position:relative;
  height: 400px;/*hauteur de l'avatar*/
  width: 200px;/*largeur de l'avatar*/
  margin: 10px auto;
}

.avatars {
  position: absolute;
  top: 0;
  left: 0;
  background:grey;
  width: 100%;
  height: 100%;
  z-index:3;
  transform: rotate (-3deg);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -webkit-transition:all 1s;
  -moz-transition:all 1s;
  -o-transition:all 1s;
  -ms-transition:all 1s;
  transition:all 1s;
  -moz-box-shadow: 2px 2px 5px -2px #595959;
  -webkit-box-shadow: 2px 2px 5px -2px #595959;
  -o-box-shadow: 2px 2px 5px -2px #595959;
  box-shadow: 2px 2px 5px -2px #595959;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#595959, Direction=134, Strength=5);
}

.avatar img: {width:100%; height: 100%;}

.infoprofil {
  position: absolute;
  top: 0;
  left: 0;
  padding:15px;
  width: 170px;/* hauteur de l'avatar moins 2x 15px de padding*/
  height: 370px;/*idem largeur*/
  z-index:0;
  background-image:url(http://i55.servimg.com/u/f55/18/43/14/28/i_back10.gif);/*image de fond des infos du profil*/
  color: grey;
  font-size: 13px;
  overflow: auto;
  transform: rotate (-3deg);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -webkit-transition:all 1s;
  -moz-transition:all 1s;
  -o-transition:all 1s;
  -ms-transition:all 1s;
  transition:all 1s;
  -moz-box-shadow: 2px 2px 5px -2px #595959;
  -webkit-box-shadow: 2px 2px 5px -2px #595959;
  -o-box-shadow: 2px 2px 5px -2px #595959;
  box-shadow: 2px 2px 5px -2px #595959;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#595959, Direction=134, Strength=5);
}

.infoprofil a {color: #3F2941;}/* couleur de "envoyer un mp"*/

#profilmembre:hover > .avatars {
  opacity: 0;
  filter: alpha(opacity=0);
  visibility: hidden;
  z-index:1;
  transform: rotate (0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
}

#profilmembre:hover > .infoprofil {
  transform: rotate (0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
}

.pseudo{
  display: block;
  height: 1em;
  width: 170px;
  padding:10px;
  margin: auto;
  margin-top: -10px;
  font-size: 18px;/*taille du pseudo*/
  font-family: Georgia, cursive;
  border: 3px double grey;
  text-align:center;
  z-index: 2;
  position:relative;
  background: lightgrey;
  background-image:url(http://i55.servimg.com/u/f55/18/43/14/28/i_back10.gif);
  -moz-box-shadow: 2px 2px 5px -2px #595959;
  -webkit-box-shadow: 2px 2px 5px -2px #595959;
  -o-box-shadow: 2px 2px 5px -2px #595959;
  box-shadow: 2px 2px 5px -2px #595959;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#595959, Direction=134, Strength=5);
}
.rang {
  position:relative;
  margin:-75px auto 0px;/* marges de l'image de rang (haut côtés bas)*/
  z-index:3;
  text-align:center;
}
/* catégories a onglets */

        /*onglets catégories*/
        #cat-onglets {
          margin: 15px auto;
          text-align: center; }
        
        .co-item {
          background: #D7D7D4;
          color: #478DAD;
          border: 1px solid  #D7D7D4;
          display: inline;
          cursor: pointer;
          margin: 5px;
          padding: 0px;
          border-radius: 1px;
        }
        
        .co-item:hover{
          background: #D7D7D4;
          border: 1px solid #D7D7D4;
          color:#478DAD;
          display: inline;
          cursor: pointer;
          margin:  5px;
          padding: 0px;
          border-radius: 1px;
        }
        
        .co-actif {
          background: #D7D7D4;
          color: #478DAD;
          border:0px solid #D7D7D4; }

/* fin categories à onglets */
/* CATEGORIES AUX DESCRIPTIONS CACHEES */


.cate
{
  width: 600px;
  height: 150px;
  overflow: hidden;
  border: 2px solid #000000;
  background-color: #ffffff;
}
.cate_img
{
  position: relative;
  z-index: 2;
  width: 600px;
  height: 150px;
  margin-left: 0px;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
.cate:hover .cate_img
{
margin-left: 600px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
.cate_description
{
  position: relative;
  z-index: 1;
  width: 600px;
  height: 150px;
  margin-top: -120px;
  text-align: center;
  font-size: 15px;
  color: #8c8c8c;
  padding: 2px;
  overflow: auto;
}
/* FIN CATEGORIES AUX DESCRIPTIONS CACHEES */
/***** DÉBUT CATÉ *******/
/* Permet de retirer le fond du titre de catégorie */
.secondarytitle {
  background: none;
}

/* Permet de mettre de l'espace entre les sous-forums et retirer le fond de table */
.cat-table .forumline .row1, .cat-table .forumline .row2, .cat-table .forumline .row3, .cat-table .forumline .row3Right {
  background: none;
  padding-bottom: 50px;
}

/* Retire les fond de tables derrières les sous-forums */
.cat-table td.row1, .cat-table td.row3.over:hover {
    background: none;
}

/* Retire les fond de tables derrières les sous-forums */
.cat-table td.row1.over:hover, .cat-table td.row2 {
    background: none;
}

/* Contour des sous-forums */
.contour_gris_cat {
  width: 730px;
  height: 260px;
  margin: auto;
  overflow: hidden;
  border-radius: 20px;
  /* Couleur de fond des sous-forums */
  background-color: #999999;
}

 /* Placement des liens et titres du sous-forum */
.forumlink {
  margin-left: 30px;
  margin-top: 10px;
  width: 425px;
  height: 25px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 50px;
  background-color: #CCCCCC;
  text-align: center;
}

/* Effet sur les liens de sous-forums */
a.forumlink {
  margin: 0;
  font-size: 18px;
  transition: all ease 1s;
}

/* Au passage de la souris */
a.forumlink:hover,a.forumlink:link, a.forumlink:focus {
  text-decoration:none !important;
  font-size: 18px;
  transition: all ease 1s;
}

/* Mise en place des trois parties */
.cate_bas {
  width: 100%;
  padding-top: 15px;
  padding-left: 10px;
}

/* Bloc de description des catégories */
.descript_caté_entoure {
  width: 350px;
  height: 190px;
  float: left;
  overflow: hidden;
  border-radius: 10px;
  margin-right: 10px;
  /* Couleur de fond */
  background-color: #666666;
}

/* Lien vers les sous-forums */
.liens_ss_forum {
  width: 120px;
  height: 170px;
  float: left;
  /* Alignement */
  text-align: center;
  border-radius: 10px;
  padding: 10px;
  margin-left: 10px;
  margin-right: 15px;
  /* Couleur de fond */
  background-color: #666666;
}

/* Effet sur les liens vers les sous-forums */
.liens_ss_forum a {
  letter-spacing: 1px;
  transition: all ease 1s;
}

/* Effet au passage de la souris */
.liens_ss_forum a:hover {
  letter-spacing: 3px;
  text-decoration:none !important;
  transition: all ease 1s;
}

/* Positionnement du dernier message  */
.position_messages_cat {
  float: left;
  width: 150px;
  height: 170px;
  position: relative;
  margin-left: 10px;
}
  
/* Positionnement de l'image des derniers messages */
.new_images {
  position: absolute;
  top: -30px;
  left: 7px;
}

/* Transformer l'image en rond */
.new_images img {
  border-radius: 50%;
}

/* Mise en forme du dernier message */
.last_mess_nyo {
  position: absolute;
  top: 60px;
  left: 0;
  padding-top: 45px;
  width: 150px;
  height: 85px;
  border-radius: 10px;
  /* Couleur de fond */
  background-color: #666666;
  text-align: center;
}
/***** FIN CATÉ *******/

    /* -------------------------------- QEEL -------------------------------- */

    /*** MISE EN FORME LIENS AU SURVOL ***/
    a:hover {
      text-decoration: none !important;
    }

    /*** MISE EN FORME FONT DU QEEL ***/
    .fond_qeel {
      width: 780px;
      border-radius: 0px 0px 25px 25px;
      background-color: #E4E4E4;
      margin: auto;
      height: 600px;
      position: relative;
      overflow: hidden;
    }

    /*** MISE EN FORME TITRE PRINCIPAL ***/
    .titre_principal {
      color: #2D5A57;
      font-family: georgia;
      font-size: 28;
      letter-spacing: 5px;
      text-align: center;
    }

    /*** MISE EN FORME SOUS-TITRE "Et à qui se fier ?" ***/
    .titre_secondaire {
      color: #C7BBC1;
      font-family: georgia;
      font-size: 14px;
      text-align: center;
    }

    /*** MISE EN FORME BLOC STATISTIQUES ***/
    .bloc_stat {
      background-color: #F0F0F0;
      padding: 15px;
      width: 200px;
      height: 150px;
      overflow: auto;
      font-size: 11px;
      border: 2px solid #CACACA;
      text-align: justify;
      color: #515151;
      position: absolute;
      left: 3em;
      z-index: 1;
    }

    /*** MISE EN FORME BLOC DES GROUPES ***/
    .bloc_groupes {
      background-color: #F0F0F0;
      padding: 15px;
      width: 420px;
      height: 50px;
      overflow: auto;
      font-size: 20px;
      border: 2px solid #CACACA;
      text-align: center;
      font-family: 'Six Caps', sans-serif;
      position: absolute;
      left: 14.5em;
      z-index: 1;
    }

    /*** MISE EN FORME BLOC DES CONNECTES LES 24H ***/
    .bloc_connectes {
      background-color: #F0F0F0;
      padding: 15px;
      width: 420px;
      height: 50px;
      overflow: auto;
      font-size: 20px;
      border: 2px solid #CACACA;
      text-align: center;
      font-family: 'Six Caps', sans-serif;
      position: absolute;
      left: 14.5em;
      z-index: 1;
    }

    /*** COULEUR ET TRANSPARENCE DU FOND DES 24H ***/
    #kaboum .row1 {
      background-color : transparent;
    }

    #kaboum span.gensmall {
      color: #515151;
    }

    /*** MISE EN FORME DES TITRES (simple + survol) ***/
    .titre_bloc {
      font-family: 'Dancing Script', cursive;
      font-size: 24px;
      font-weight: bold;
      color: #B0C3AB;
      position: absolute;
      z-index: 2;
      margin-top: -18px;
    }

    .titre_bloc:hover {
      color: #2D5A57;
    }

    /*** GROUPES A ONGLETS ***/
    /* Mise en forme des noms de groupe */
    .groupe_onglet {
      display: inline-block;
      padding: 10px;
    }

    /* Mise en forme du bloc en transparence de description */
    .contenu_groupe_onglet {
      padding: 15px;
      display: none;
      width: 315px;
      height: 115px;
      overflow: auto;
      font-size: 11px;
      color: #414141;
      text-align: justify;
      background-color: #CBC4C2;
      position: absolute;
      top: 14em;
      left: 21em;
      filter: alpha(opacity = 50);
      opacity: 0.5;
    }

    /* Mise en forme des liens */
    .contenu_groupe_onglet a{
      text-decoration: none !important;
    }

    /*** MISE EN FORME DES CREDITS ***/
    .credits {
      text-align: right;
      margin-right: 10px;
      font-size: 9px;
    }

    .credits a{
      color: #B0C3AB;
    }

    /* -------------------------------- FIN QEEL -------------------------------- */
/* Description des forums */
.description_contenu {
    opacity: 0;
    transition: all 0.6s;
    background: rgba(255,255,255,0.8);
}

.description_contenu:hover {
    opacity: 1;
}
/* centrage vertical*/
.liens_ss_forum > span {
    display: block;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);  
}
/* centrage des descriptions */
    .description_contenu { display: table; };
    .description_contenu div { display: table-cell; vertical-align: middle; }
/* fin centrage des descriptions*/

La PA:

Code:

<table id="PA" style="background-image: url();">
                                                                   
   <tbody>
                                                                              
      <tr>
                                                                                         
         <td id="case1">
                                                                                                    
            <div id="navigation">
                                                                    <span class="titrePA">Barre de Navigation</span><br />          <a href="http://academie-mitsushima.forumsrpg.com/t21-regles-du-forum" class="lienfonce">Règlement du Forum</a><br />          <a href="http://academie-mitsushima.forumsrpg.com/t23-description-des-groupes" "="" class="lienclair">Groupes</a><br />          <a href="http://academie-mitsushima.forumsrpg.com/t22-histoire" class="lienfonce">Contexte</a><br />          <a href="http://academie-mitsushima.forumsrpg.com/f6-vestibule" class="lienclair">Inscription</a><br />          <a href="http://academie-mitsushima.forumsrpg.com/t24-reglement-de-l-ecole#37" class="lienfonce">Règlement de l'école</a><br />          <a href="http://academie-mitsushima.forumsrpg.com/f5-predefinis" class="lienclair">Abscence</a><br />          <a href="http://academie-mitsushima.forumsrpg.com/f5-predefinis" class="lienfonce">Journal intime</a><br />                                                
            </div>
                                                                                                    
            <div id="annonces">
                                                                    <span class="titrePA">Annonces</span><br />          <em>00.00.2014</em> Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet                                                    
               <hr />
                                                                    <em>00.00.2014</em> Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet                                                    
               <hr />
                                                                    <em>00.00.2014</em> Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet                                                    
               <hr />
                                                                    <em>00.00.2014</em> Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet                                                    
               <hr />
                                                                                                           
            </div>
                                                                                                
         </td>
                                                                                         
         <td id="case2">
                                                                                                    
            <div id="defilant">
                                                                    <span class="titrePA">Evènement</span><br />          <em></em>     Actuellement aucun événement en cours. Soyer patient il arrivera.                                        
            </div>
                                                                                                    
            <div id="imagePA" style="background-image:url(http://i39.servimg.com/u/f39/17/40/38/75/yuuich10.jpg)">
                                                                                                 
            </div>
                                                                                                
         </td>
                                                                                         
         <td rowspan="2">
                                                                                                    
            <div class="staffPA">
                                                                    <img src="http://i39.servimg.com/u/f39/18/43/14/28/13800510.jpg" />                                                    
               <div class="infostaff" style="background-image:url(ADRESSE DE VOTRE IMAGE); position: absolute; top: -5px; left:40px;" ;="">
                                                                <em>Inconnu</em><br />Prédéfinis<br <br="" /><a href="http://academie-mitsushima.forumsrpg.com/t18-predefinis-je-voudrais-juste-etre-normal">PROFIL</a>                                          
               </div>
                                                                                                           
            </div>
                                                                                                      
            <div class="staffPA">
                                                                    <img src="http://i39.servimg.com/u/f39/18/43/14/28/13780510.jpg" />                                                    
               <div class="infostaff" style="background-image:url(ADRESSE DE VOTRE IMAGE)" ;="">
                                                                <em>Hiro</em><br />Prédéfinis<br <br="" /><a href="http://academie-mitsushima.forumsrpg.com/t11-le-president-du-comite-de-discipline">PROFIL</a>                                          
               </div>
                                                                                                           
            </div>
                                                                                                    
            <div class="staffPA">
                                                                    <img src="http://i39.servimg.com/u/f39/18/43/14/28/watamo10.jpg" />                                                    
               <div class="infostaff" style="background-image:url(ADRESSE DE VOTRE IMAGE)" ;="">
                                                                <em>Kuroki Tomoki</em><br />Prédéfinis<br <br="" /><a href="http://academie-mitsushima.forumsrpg.com/t16-predefinis-kuroki-tomoko">PROFIL</a>                                          
               </div>
                                                                                                           
            </div>
                                                                                                    
            <div class="staffPA">
                                                                    <img src="http://i39.servimg.com/u/f39/18/43/14/28/armstr10.png" />                                                    
               <div class="infostaff" style="background-image:url(ADRESSE DE VOTRE IMAGE)" ;="">
                                                                <em>Armstrong Alex</em><br />Prédéfinis<br <br="" /><a href="http://academie-mitsushima.forumsrpg.com/t17-predefinis-alex-poing-de-fer">PROFIL</a>                                          
               </div>
                                                                                                           
            </div>
                                                                                                    
            <div class="staffPA">
                                                                    <img src="http://i39.servimg.com/u/f39/18/43/14/28/sans_t10.png" />                                                    
               <div class="infostaff" style="background-image:url(ADRESSE DE VOTRE IMAGE)" ;="">
                                                                <em>Inconnu</em><br />Prédéfinis<br <br="" /><a href="ADRESSE DU LIEN PROFIL">PROFIL</a>                                          
               </div>
                                                                                                           
            </div>
                                                                                                    
            <div class="staffPA">
                                                                    <img src="http://i39.servimg.com/u/f39/18/43/14/28/sans_t10.png" />                                                    
               <div class="infostaff" style="background-image:url(ADRESSE DE VOTRE IMAGE)" ;="">
                                                                <em>Inconnu</em><br />Prédéfinisi<br <br="" /><a href="ADRESSE DU LIEN PROFIL">PROFIL</a>                                          
               </div>
                                                                                                           
            </div>
                                                                                                    
            <div class="staffPA">
                                                                    <img src="http://i39.servimg.com/u/f39/18/43/14/28/sans_t10.png" />                                                    
               <div class="infostaff" style="background-image:url(ADRESSE DE VOTRE IMAGE); position: absolute; top: -35px; left:40px;" ;="">
                                                                <em>Inconnu</em><br />Prédéfinis<br <br="" /><a href="ADRESSE DU LIEN PROFIL">PROFIL</a>                                          
               </div>
                                                                                                           
            </div>
                                                                                                
         </td>
                                                                                         
         <td id="case4" rowspan="2">
                                                            <span class="titrePA">Contexte</span>                                                
            <div id="contextePA">
                                                          Voila déjà plusieurs décennies que l'homme développe de nouvelles capacités. La réalité dépasse maintenant la fiction. Pourquoi ? Tout simplement parce que l homme a appris à utiliser certaines facultés et « pouvoirs ». Cela ne c est pas fait d un coup. Au contraire l’évolution c'est produite sur plusieurs générations. Cela explique pourquoi des parents n’ont qu’un instinct un peu évolué ; leurs enfants eux arrivent a deviner certaines choses…Des enfants plus développés arrivent a contrôler des objets ou encore utiliser leur corps pour créer des éléments. Entre télékinésie et télépathie la palette des dons se développe au fur et a mesure des descendances.                                              
            </div>
                                                                                                    
            <center>
                                                                  <<span class="titrePA">Votez pour nous !</span><br />        <a href="ADRESSE DU LIEN"><img src="http://i39.servimg.com/u/f39/18/43/14/28/sans-t15.gif" /></a><a href="ADRESSE DU LIEN"><img src="http://i39.servimg.com/u/f39/18/43/14/28/sans-t15.gif" /></a><a href="ADRESSE DU LIEN"><img src="http://i39.servimg.com/u/f39/18/43/14/28/sans-t15.gif" /></a>                                    
            </center>
                                                                        
         </td>
                                                                                                                     
      </tr>
                                                      
      <tr id="footerPA">
                                                                 
         <td colspan="2">
                                                Tous droits réservés. Forum optimisé pour Chrome. <span style="font-size: 7px; color: gray;">Never-Utopia</span>                              
         </td>
                                                             
      </tr>
                                                  
   </tbody>
</table>
              
<table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;">
                           
   <tbody>
                              
      <tr>
                                 
         <td>
                         <iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"> </iframe>            
         </td>
                                 
         <td style="vertical-align: bottom;">
                         <img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onclick="document.getElementById('chatboxpop').style.display=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'block':'none';this.src=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png':'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png';" />            
         </td>
                                 
      </tr>
                              
   </tbody>
</table>
 

J'aimerai également que se code du libre service puisse correspondre a mon forum car je n'est pas de bannière a proprement parler et du coup le code ne marche pas avec. (Bannière est le fond du forum)
Lien pour le code: https://www.never-utopia.com/t46727-image-de-fond-s-adaptant-a-toutes-les-resolutions

Merci par avance pour le travaille apporter.

Petit petit qui veux un cookie?

Personne pour un cookie ou deux?

Coucou :)

Je n'ai pas le temps de faire toute la personnalisation, mais comme personne ne répond... Je suppose que c'est toujours mieux que rien :p ? On va le faire petit à petit ensemble donc

Première chose, on va forcer le tableau à prendre toute la largeur, pour cela tu vas trouver le CSS de #PA et lui mettre une largeur de 100% :
On remplace :

Code:

#PA {background: #E0E0E0;font-size:10px; background-position: right top;}

Par :

Code:

#PA {
    background: #E0E0E0;
    font-size:10px;
    width: 100%;
}

Étant donné que tu n'as pas d'image de fond, j'ai supprimé la ligne en rapport avec le background

Je te remercie de prendre le temps de faire cette personnalisation.
Je tiens aussi a dire que j'ai fait les modification que tu as mise.
Encore merci

On va ajouter la 4ème colonne, juste après cette partie là du code :

Code:

<td id="case4" rowspan="2">
                                                <span class="titrePA">Contexte</span>                                             
<div id="contextePA">
                                            Voila déjà plusieurs décennies que l'homme développe de nouvelles capacités. La réalité dépasse maintenant la fiction. Pourquoi ? Tout simplement parce que l homme a appris à utiliser certaines facultés et « pouvoirs ». Cela ne c est pas fait d un coup. Au contraire l’évolution c'est produite sur plusieurs générations. Cela explique pourquoi des parents n’ont qu’un instinct un peu évolué ; leurs enfants eux arrivent a deviner certaines choses…Des enfants plus développés arrivent a contrôler des objets ou encore utiliser leur corps pour créer des éléments. Entre télékinésie et télépathie la palette des dons se développe au fur et a mesure des descendances.                                           
</div>
                                                                                     
<center>
                                                    <span class="titrePA">Votez pour nous !</span><br />        <a href="ADRESSE DU LIEN"><img src="http://i39.servimg.com/u/f39/18/43/14/28/sans-t15.gif" /></a><a href="ADRESSE DU LIEN"><img src="http://i39.servimg.com/u/f39/18/43/14/28/sans-t15.gif" /></a><a href="ADRESSE DU LIEN"><img src="http://i39.servimg.com/u/f39/18/43/14/28/sans-t15.gif" /></a>                                 
</center>
                                                         
</td>


Code:

<td class="case_partenaires">Partenaires</td>

Pour l'instant c'est très peu de code, on ajoutera au fur et à mesure.

Ensuite dans le CSS on va ajouter ceci pour les tailles :

Code:

#case1, #case2, #case4, #case_partenaires {
    width: 25%;
}

Je précise que n'importe quelle personne peut venir filer un coup de main dans le topic, je ne prends pas "officiellement" en charge la personnalisation -^-^-

Ah d'accord, je te préviens que j'ai fait les modification.

Top top :)

Dans le CSS, on remplace :

Code:

#navigation {
    height: 105px;
    width: 169px;
}

En enlevant la ligne width: 169px;

Même chose ici :

Code:

#annonces {
  height:111px;
  width: 159px;
  overflow:auto;
  padding:5px;
  font-family: cursive;
  font-size: 9px;
  background-color: #DADADA;
  }


On enlève la ligne: width: 159px;

On continue avec les largeurs à enlever...
Ici :

Code:


#contextePA {
    background-color: #dadada;
    height: 110px;
    margin-bottom: 15px;
    overflow: auto;
    padding: 5px;
    width: 183px;
}

On enlève width: 183px;

Pour la case partenaires, tu peux déjà en ajouter en mettant à la place du texte "Partenaires" ceci :

Code:

<span class="titrePA">Partenaires</span>
<a href="ADRESSE DU LIEN"><img src="IMAGE" alt="NOM FORUM"/></a>

Puis en mettant les images de ton choix ^-^

C'est fait.
J'ai mis le nombre de partenaire que je voulais. J'aimerai qu'elle soit sous forme de colone comme illustrée dans la demande.
Merci beaucoup

Je suis trop bête, c'est une div à mettre, pas une span

Code:

<span class="titrePA">Partenaires</span>

Devient :

Code:

<div class="titrePA">Partenaires</div>

Ensuite pour la mise en forme en colonne, je pense que comme ça ça devrait être mieux :

Code:

/* partenaires PA */
.case_partenaires a {
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 11px;
    width: 45%;
}

.case_partenaires a img {
    width: 100%;
}

Euh pour la mise en colonne c'est bien en CSS. Si c'est le cas ça ne marche pas alors. Et j'ai constater que lorsque je touche au annonce celle ci monte sur les lien de dessus.
Comme ceci:

Spoiler:

J'ai encore une autre petite demande.
J'essaye de mettre cette fiche de pub:https://www.never-utopia.com/t50688-en-rouge-et-noir
Mais quand je change l'image en haut j'ai toute la fiche qui est déformer. Pourrais tu m’éclairais sur ce que je fait mal.

Oups, pour les colonnes, si tu rajoutes ceci, est ce que c'est mieux ?

Code:

.case_partenaires {
  width: 260px;
}

Pour les annonces, si tu enlèves ceci de ton CSS, peux tu me dire si le problème part ?

Code:

#navigation {
  height: 105px;
}

Pour la fiche, je te conseille d'ouvrir un autre topic en expliquant ton problème, avec une capture d'écran et un lien où on peut regarder ♥

Désoler mais ni l'un ni l'autre ne marche je te met le CSS que j'ai. J'ai peut être mal placer les codes.

Code:

.onglet
        {
                display:inline-block;
                margin-left:3px;
                margin-right:3px;
                padding:3px;
                border:1px dashed white;
                cursor:pointer;
        }
        .onglet_0
        {
                background:#d3d3d1;
                border-bottom:1px dashed white;
        }
        .onglet_1
        {
                background:#d3d3d1;
                border-bottom:1px dashed white;
                padding-bottom:4px;
        }
        .contenu_onglet
        {
                background-color:#d3d3d1;
                border:0px dashed white;
                margin-top:-1px;
                padding:5px;
                display:none;
        }

td.row1{
background-image: url('http://i18.servimg.com/u/f18/18/43/14/28/fqc_bm13.jpg');
}
td.row2{
background-image: url('http://i18.servimg.com/u/f18/18/43/14/28/fqc_bm13.jpg');
}
td.row3{
background-image: url('http://i18.servimg.com/u/f18/18/43/14/28/fqc_bm13.jpg');
}






  body {
  background-repeat: no-repeat;
  }



/* Liens en Petites Majuscules */


a {
font-variant: small-caps;
}

tr.post span.gensmall { display: none; }

/* Spoilers arrondis */





/*Arrondissement des bords du forum */

textarea, .textarea.post, input.post {
-moz-border-radius:10px;
}

.postdetails poster-profil{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

/* Centrer Profils Messages */

.postbody .user { text-align: center; }

/* Barre de Navigation */







.groupes{
background-color:#ffffff;border: 1px #http://forum.forumactif.com/forum.htmD0D0D0 dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
font-size:12px;font-weight: bold;text-align:center;
text-decoration: none !important;
}





a {font-variant: small-caps;}
.forumline{-moz-border-radius:15px;}
.bodyline {-moz-border-radius:40px;}

a.forumlink:hover, a.forumlink:hover:visited{
background-color: #d3d3d1;
border-left: 9px solid #90908a;
border-right: 9px solid #90908a;
-moz-border-radius:6px;}

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






I{border-bottom:none; color:#fbfbfb;text-decoration: none
}


.bodyline{ -moz-border-radius: 6px;}


textarea, .textarea.post, input.post {
-moz-border-radius:4px;
}


.forumline{
border: 3px #ffffff
double;
}

.bodyline {
-moz-border-radius:4px;
}

.forumline{
background-color: #ffffff;
-moz-border-radius: 6px ;
border: 3px double #ffffff ;
}

a.forumlink{
-moz-border-radius: 7px 7px 7px 7px;
background-color: #d3d3d1;
border-bottom: 5px double #ffffff;
color:#ffffff;
font-family: sans-serif;
font-size: 12px;
font-weight: lighter;
letter-spacing: 1px;
display:block;
text-align: center;
}


a.forumlink:hover{
color:rgb(189,103,89);
font-family: georgia;
font-size: 12px;
font-weight: lighter;
letter-spacing: 1px;
text-align: center;}


----------------------------


.quote{
width: 200px;
font-family: Courier,Courier New,sans-serif;
color: #000000;
background-color: #e8e0d6;
border: #e8e0d6;
border-style: solid;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}

.code{
width: 500px;
font-family: Courier,Courier New,sans-serif;
color: #000000;
background-color: #e8e0d6;
border: #e8e0d6;
border-style: solid;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}






a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a { text-decoration: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover { background-color: #D7D7D4; }
a:hover{text-transform:none;}



/* PA */


.marge{
padding-left: 6px;
padding-right: 6px;
}

/* EFFET OPACITE */

.opacity{
filter:alpha(opacity=50);
-moz-opacity:0.5;opacity: 0.5;
}

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





/* Infobulles de la PA */

a.infobulle {
  position: relative;
}

a.infobulle span {
  display: none; /* ceci masque l'infobulle */
}
a.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}
a.infobulle:hover span {
  display: inline; /* ceci affiche l'infobulle */
  position: absolute;

  white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

  top: 5px; /* on positionne notre infobulle */
  left: 15px;

  background: #ded7ce; /* arrière-plan de l'infobulle */

  color: #ada59a; /* texte dans l'infobulle */
  padding: 4px;

  /* bordures de votre infobulle*/
  border: 1px solid #ccc7c0;
  border-left: 3px solid #ccc7c0;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
}



/*PA par Alu' pour Never-Utopia*/
#case1, #case2, #case4, #case_partenaires {
    width: 25%;
}
#PA {
    background: #E0E0E0;
    font-size:10px;
    width: 100%;
}
.titrePA{font-size:16px; font-family: Georgia, cursive; color:#006699;}
#case4{vertical-align:top;}
#case5{width:600px;}


#navigation {height:105px;}
#navigation a{text-decoration: none; color: #006699;}
#navigation {
  height: 105px;
}
.lienfonce {
  display:inline-block;
  background:#BDBDBD;
  width:100%;
  text-indent: 7px;
  }
.lienclair{
  display:inline-block;
  background:#D8D8D8;
  width:100%;
  text-indent: 7px;
  }

#annonces {
  height:111px;
  overflow:auto;
  padding:10px;
  font-family: cursive;
  font-size: 9px;
  background-color: #DADADA;
  }

#annonces em, #defilant em {color:#006699;}

#case2{
  position:relative;
  width:221px;
  height:226px;
  overflow:hidden;
  padding:0;
}
#defilant{
  position:relative;
  width:211px;
  height:216px;
  margin-top: -3px;
  overflow: auto;
  padding:5px;
  background-color: #DADADA;
}
#imagePA{
  position: absolute;
  top:0;
  left: 0;
  width:221px;
  height:226px;
  background-color:gray;
  -moz-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

#case2:hover > #imagePA{margin-left: -221px;}

#contextePA{
  height: 110px;
  padding: 5px;
  overflow: auto;
  margin-bottom: 15px;
  background-color: #DADADA;
  }

.infostaff{
  position:absolute;
  top:-20;
  left:40px;
  opacity:0;
  visibility: hidden;
  height: 50px;
  width: 130px;
  background:#DADADA;
  background-position: left top;
  text-align: center;
  padding:10px;
  text-decoration: italic;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -moz-box-shadow: 0px 0px 2px 0px #656565;
  -webkit-box-shadow: 0px 0px 2px 0px #656565;
  -o-box-shadow: 0px 0px 2px 0px #656565;
  box-shadow: 0px 0px 2px 0px #656565;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=2);
  }

.staffPA:hover > .infostaff{opacity:1; visibility: visible;}
.infostaff em{color: #870808; font-size: 14px;}
.infostaff a{color: black; text-decoration: none;}

.staffPA {
  position:relative; 
  height: 30px;
  width: 30px;
  margin:5px;
  background-color: grey;
  border-radius: 50%;
}
.staffPA img{border-radius: 50%; overflow:hidden; height: 30px; width: 30px;}
#footerPA {font-variant:small-caps; font-size: 9px; color: grey;}
/*Profil avec rotation par
Alumine pour Never-Utopia*/

#profilmembre {
  position:relative;
  height: 400px;/*hauteur de l'avatar*/
  width: 200px;/*largeur de l'avatar*/
  margin: 10px auto;
}

.avatars {
  position: absolute;
  top: 0;
  left: 0;
  background:grey;
  width: 100%;
  height: 100%;
  z-index:3;
  transform: rotate (-3deg);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -webkit-transition:all 1s;
  -moz-transition:all 1s;
  -o-transition:all 1s;
  -ms-transition:all 1s;
  transition:all 1s;
  -moz-box-shadow: 2px 2px 5px -2px #595959;
  -webkit-box-shadow: 2px 2px 5px -2px #595959;
  -o-box-shadow: 2px 2px 5px -2px #595959;
  box-shadow: 2px 2px 5px -2px #595959;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#595959, Direction=134, Strength=5);
}

.avatar img: {width:100%; height: 100%;}

.infoprofil {
  position: absolute;
  top: 0;
  left: 0;
  padding:15px;
  width: 170px;/* hauteur de l'avatar moins 2x 15px de padding*/
  height: 370px;/*idem largeur*/
  z-index:0;
  background-image:url(http://i55.servimg.com/u/f55/18/43/14/28/i_back10.gif);/*image de fond des infos du profil*/
  color: grey;
  font-size: 13px;
  overflow: auto;
  transform: rotate (-3deg);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -webkit-transition:all 1s;
  -moz-transition:all 1s;
  -o-transition:all 1s;
  -ms-transition:all 1s;
  transition:all 1s;
  -moz-box-shadow: 2px 2px 5px -2px #595959;
  -webkit-box-shadow: 2px 2px 5px -2px #595959;
  -o-box-shadow: 2px 2px 5px -2px #595959;
  box-shadow: 2px 2px 5px -2px #595959;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#595959, Direction=134, Strength=5);
}

.infoprofil a {color: #3F2941;}/* couleur de "envoyer un mp"*/

#profilmembre:hover > .avatars {
  opacity: 0;
  filter: alpha(opacity=0);
  visibility: hidden;
  z-index:1;
  transform: rotate (0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
}

#profilmembre:hover > .infoprofil {
  transform: rotate (0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
}

.pseudo{
  display: block;
  height: 1em;
  width: 170px;
  padding:10px;
  margin: auto;
  margin-top: -10px;
  font-size: 18px;/*taille du pseudo*/
  font-family: Georgia, cursive;
  border: 3px double grey;
  text-align:center;
  z-index: 2;
  position:relative;
  background: lightgrey;
  background-image:url(http://i55.servimg.com/u/f55/18/43/14/28/i_back10.gif);
  -moz-box-shadow: 2px 2px 5px -2px #595959;
  -webkit-box-shadow: 2px 2px 5px -2px #595959;
  -o-box-shadow: 2px 2px 5px -2px #595959;
  box-shadow: 2px 2px 5px -2px #595959;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#595959, Direction=134, Strength=5);
}
.rang {
  position:relative;
  margin:-75px auto 0px;/* marges de l'image de rang (haut côtés bas)*/
  z-index:3;
  text-align:center;
}
/* catégories a onglets */

        /*onglets catégories*/
        #cat-onglets {
          margin: 15px auto;
          text-align: center; }
       
        .co-item {
          background: #D7D7D4;
          color: #478DAD;
          border: 1px solid  #D7D7D4;
          display: inline;
          cursor: pointer;
          margin: 5px;
          padding: 0px;
          border-radius: 1px;
        }
       
        .co-item:hover{
          background: #D7D7D4;
          border: 1px solid #D7D7D4;
          color:#478DAD;
          display: inline;
          cursor: pointer;
          margin:  5px;
          padding: 0px;
          border-radius: 1px;
        }
       
        .co-actif {
          background: #D7D7D4;
          color: #478DAD;
          border:0px solid #D7D7D4; }

/* fin categories à onglets */
/* CATEGORIES AUX DESCRIPTIONS CACHEES */


.cate
{
  width: 600px;
  height: 150px;
  overflow: hidden;
  border: 2px solid #000000;
  background-color: #ffffff;
}
.cate_img
{
  position: relative;
  z-index: 2;
  width: 600px;
  height: 150px;
  margin-left: 0px;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
.cate:hover .cate_img
{
margin-left: 600px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
.cate_description
{
  position: relative;
  z-index: 1;
  width: 600px;
  height: 150px;
  margin-top: -120px;
  text-align: center;
  font-size: 15px;
  color: #8c8c8c;
  padding: 2px;
  overflow: auto;
}
/* FIN CATEGORIES AUX DESCRIPTIONS CACHEES */
/***** DÉBUT CATÉ *******/
/* Permet de retirer le fond du titre de catégorie */
.secondarytitle {
  background: none;
}

/* Permet de mettre de l'espace entre les sous-forums et retirer le fond de table */
.cat-table .forumline .row1, .cat-table .forumline .row2, .cat-table .forumline .row3, .cat-table .forumline .row3Right {
  background: none;
  padding-bottom: 50px;
}

/* Retire les fond de tables derrières les sous-forums */
.cat-table td.row1, .cat-table td.row3.over:hover {
    background: none;
}

/* Retire les fond de tables derrières les sous-forums */
.cat-table td.row1.over:hover, .cat-table td.row2 {
    background: none;
}

/* Contour des sous-forums */
.contour_gris_cat {
  width: 730px;
  height: 260px;
  margin: auto;
  overflow: hidden;
  border-radius: 20px;
  /* Couleur de fond des sous-forums */
  background-color: #999999;
}

 /* Placement des liens et titres du sous-forum */
.forumlink {
  margin-left: 30px;
  margin-top: 10px;
  width: 425px;
  height: 25px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 50px;
  background-color: #CCCCCC;
  text-align: center;
}

/* Effet sur les liens de sous-forums */
a.forumlink {
  margin: 0;
  font-size: 18px;
  transition: all ease 1s;
}

/* Au passage de la souris */
a.forumlink:hover,a.forumlink:link, a.forumlink:focus {
  text-decoration:none !important;
  font-size: 18px;
  transition: all ease 1s;
}

/* Mise en place des trois parties */
.cate_bas {
  width: 100%;
  padding-top: 15px;
  padding-left: 10px;
}

/* Bloc de description des catégories */
.descript_caté_entoure {
  width: 350px;
  height: 190px;
  float: left;
  overflow: hidden;
  border-radius: 10px;
  margin-right: 10px;
  /* Couleur de fond */
  background-color: #666666;
}

/* Lien vers les sous-forums */
.liens_ss_forum {
  width: 120px;
  height: 170px;
  float: left;
  /* Alignement */
  text-align: center;
  border-radius: 10px;
  padding: 10px;
  margin-left: 10px;
  margin-right: 15px;
  /* Couleur de fond */
  background-color: #666666;
}

/* Effet sur les liens vers les sous-forums */
.liens_ss_forum a {
  letter-spacing: 1px;
  transition: all ease 1s;
}

/* Effet au passage de la souris */
.liens_ss_forum a:hover {
  letter-spacing: 3px;
  text-decoration:none !important;
  transition: all ease 1s;
}

/* Positionnement du dernier message  */
.position_messages_cat {
  float: left;
  width: 150px;
  height: 170px;
  position: relative;
  margin-left: 10px;
}
 
/* Positionnement de l'image des derniers messages */
.new_images {
  position: absolute;
  top: -30px;
  left: 7px;
}

/* Transformer l'image en rond */
.new_images img {
  border-radius: 50%;
}

/* Mise en forme du dernier message */
.last_mess_nyo {
  position: absolute;
  top: 60px;
  left: 0;
  padding-top: 45px;
  width: 150px;
  height: 85px;
  border-radius: 10px;
  /* Couleur de fond */
  background-color: #666666;
  text-align: center;
}
/***** FIN CATÉ *******/

    /* -------------------------------- QEEL -------------------------------- */

    /*** MISE EN FORME LIENS AU SURVOL ***/
    a:hover {
      text-decoration: none !important;
    }

    /*** MISE EN FORME FONT DU QEEL ***/
    .fond_qeel {
      width: 780px;
      border-radius: 0px 0px 25px 25px;
      background-color: #E4E4E4;
      margin: auto;
      height: 600px;
      position: relative;
      overflow: hidden;
    }

    /*** MISE EN FORME TITRE PRINCIPAL ***/
    .titre_principal {
      color: #2D5A57;
      font-family: georgia;
      font-size: 28;
      letter-spacing: 5px;
      text-align: center;
    }

    /*** MISE EN FORME SOUS-TITRE "Et à qui se fier ?" ***/
    .titre_secondaire {
      color: #C7BBC1;
      font-family: georgia;
      font-size: 14px;
      text-align: center;
    }

    /*** MISE EN FORME BLOC STATISTIQUES ***/
    .bloc_stat {
      background-color: #F0F0F0;
      padding: 15px;
      width: 200px;
      height: 150px;
      overflow: auto;
      font-size: 11px;
      border: 2px solid #CACACA;
      text-align: justify;
      color: #515151;
      position: absolute;
      left: 3em;
      z-index: 1;
    }

    /*** MISE EN FORME BLOC DES GROUPES ***/
    .bloc_groupes {
      background-color: #F0F0F0;
      padding: 15px;
      width: 420px;
      height: 50px;
      overflow: auto;
      font-size: 20px;
      border: 2px solid #CACACA;
      text-align: center;
      font-family: 'Six Caps', sans-serif;
      position: absolute;
      left: 14.5em;
      z-index: 1;
    }

    /*** MISE EN FORME BLOC DES CONNECTES LES 24H ***/
    .bloc_connectes {
      background-color: #F0F0F0;
      padding: 15px;
      width: 420px;
      height: 50px;
      overflow: auto;
      font-size: 20px;
      border: 2px solid #CACACA;
      text-align: center;
      font-family: 'Six Caps', sans-serif;
      position: absolute;
      left: 14.5em;
      z-index: 1;
    }

    /*** COULEUR ET TRANSPARENCE DU FOND DES 24H ***/
    #kaboum .row1 {
      background-color : transparent;
    }

    #kaboum span.gensmall {
      color: #515151;
    }

    /*** MISE EN FORME DES TITRES (simple + survol) ***/
    .titre_bloc {
      font-family: 'Dancing Script', cursive;
      font-size: 24px;
      font-weight: bold;
      color: #B0C3AB;
      position: absolute;
      z-index: 2;
      margin-top: -18px;
    }

    .titre_bloc:hover {
      color: #2D5A57;
    }

    /*** GROUPES A ONGLETS ***/
    /* Mise en forme des noms de groupe */
    .groupe_onglet {
      display: inline-block;
      padding: 10px;
    }

    /* Mise en forme du bloc en transparence de description */
    .contenu_groupe_onglet {
      padding: 15px;
      display: none;
      width: 315px;
      height: 115px;
      overflow: auto;
      font-size: 11px;
      color: #FFFFFF;
      text-align: justify;
      background-color: #666666;
      position: absolute;
      top: 14em;
      left: 21em;
      filter: alpha(opacity = 50);
      opacity: 0.6;
    }

    /* Mise en forme des liens */
    .contenu_groupe_onglet a{
      text-decoration: none !important;
    }

    /*** MISE EN FORME DES CREDITS ***/
    .credits {
      text-align: right;
      margin-right: 10px;
      font-size: 9px;
    }

    .credits a{
      color: #B0C3AB;
    }

    /* -------------------------------- FIN QEEL -------------------------------- */
/* Description des forums */
.description_contenu {
    opacity: 0;
    transition: all 0.6s;
    background: rgba(255,255,255,0.8);
}

.description_contenu:hover {
    opacity: 1;
}
/* centrage vertical*/
.liens_ss_forum > span {
    display: block;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); 
}
/* centrage des descriptions */
    .description_contenu { display: table; };
    .description_contenu div { display: table-cell; vertical-align: middle; }
/* fin centrage des descriptions*/

/* Logo transparent*/
#i_logo {
    display: block;
    height: 415px;
  background-position: center top;
}

/******************************************************* DÉBUT Sujets *******************************************************/

/*Bloc des sujets*/
.sujets {
  margin: auto;
  margin-bottom: 10px;
  background-color: #D7D7D4;
  border: 2px solid #D7D7D4;
  padding-bottom: 15px;
  width: 850px;
}
/*Titre du bloc des sujets*/
.sujets_top_title {
  display: block;
  background-image: url('');
  width: 750px;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 5px;
  font-family: 'Great Vibes';
  font-size: 36px;
  text-shadow: 0px 0px 5px #000000;
  color: #000000;
  font-weight: normal;
  letter-spacing: 1px;
}

/*Liste des sujets*/
.sujets_list {
  width: 760px;
  margin: auto;
  padding: 10px;
  padding-bottom: 0px;
  background-image: url('');
  text-align: left;
  color: #000000;
}

/*Polices des éléments hors sujets*/
.sujets_font {
  font-size: 12px;
  font-family: georgia;
  color: #000000;
}

/*Chaque sujet*/
.sujet {
  position: relative;
  width: 740px;
  margin-bottom: 10px;
  background-color: #8F8F8F;
  border: 1px solid #8F8F8F;
  font-size: 12px;
  font-family: georgia;
}

/*Type de sujet*/
.sujet_type {
  position: absolute;
  width: 740px;
  text-align: center;
  top: -7px;
  left: 0px;
  text-shadow: 1px 1px 1px #000000;
}

/*Titre du sujet*/
a.sujetlink {
  font-family: georgia;
  font-size: 15px;
  text-shadow: 1px 1px 1px #000000;
  color: #000000!important;
  font-style: italic;
  font-weight: normal;
  letter-spacing: 2px;
  padding-bottom: 5px;
  text-decoration: none;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}
/*Titre du sujet survolé*/
a.sujetlink:hover {
  text-decoration: none!important;
  letter-spacing: 4px;
}

/*Auteurs des sujets*/
.sujet_auteur a strong, .sujet_last_auteur a strong, .sujet_auteur a, .sujet_last_auteur a {
  font-size: 12px!important;
  font-weight: normal!important;
  font-family: georgia!important;
}

/******************************************************* FIN SUJETS *******************************************************/
/* partenaires PA */
.case_partenaires a {
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 11px;
}

.case_partenaires a img {
    width: 100%;
}
/* Sauvegarde en cours*/
.btn-loader {
  background: #a00000;
  color: #fff;
  text-shadow: 1px 0 0 rgba(0,0,0,.2)
}

Allez courage
Je sais que c'est long ><
J'avoue que je ne suis pas une grande fan des personnalisations donc je ne passe pas tout mon temps dessus  

----
Alors dans le CSS on ajoute:

Code:

.case_partenaires {
  width: 260px;
  vertical-align: top;
}

----
On remplace :

Code:

.case_partenaires a {
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 11px;
}

Par :

Code:

.case_partenaires a {
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 2%;
    width: 45%;
}

------
On enlève ceci :

Code:

#navigation {height:105px;}

Et ceci :

Code:

#navigation {
  height: 105px;
}

Je mets juste les verbes en gras pour être sûr, car je crois que dans mon ancien message tu as ajouté un morceau au lieu de l'enlever ♥

Super tout marche parfaitement.
Je pense pouvoir dire que je peux clôturé le sujet.
Encore mille fois merci pour ton aide.