Forum décalé dès qu'il y a une résolution différente de 1400x1050

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

Résolu Forum décalé dès qu'il y a une résolution différente de 1400x1050

Message par Doupi le Lun 23 Juin 2014 - 15:43

Bonjour,

je rencontre un problème sur mon forum dont voici l'adresse : http://testwhorunstheworld.forumgratuit.be/

En effet, j'ai choisi d'entourer mon forum d'un fond malheureusement cela ne marche correctement que pour de grandes tailles d'écran :

Voici la version ok :


Mais quand je teste (à l'aide de ce site : http://www.supportduweb.com/testeur-resolution-site-taille-ecran-page-test-screen-resolution-size.html) sur de plus petites résolutions d'écran, rien ne se place correctement. Le forum se trouve complètement décalé sur la droite (voir la barre en bas).

Par exemple ici sur un écran de 1024x768 :


et sur un de 800x600 :


J'ai bien entendu des templates de modifier mais je ne peux les afficher dans ce message.

Mon CSS:
Spoiler:
Code:
/**** Catégories ****/
    /* CONFIGURATION DE FORUMLINE  */
    .cateforum { 
      margin-bottom: 15px;
      padding: 10px;
      background: #92B1DE;
      border: 5px none #7D0057;
      -moz-box-shadow:  0 0 8px 0 #072654;
      -webkit-box-shadow:  0 0 8px 0 #072654;
      box-shadow:  0 0 8px 0 #072654;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      -khtml-border-radius: 10px;
      border-radius: 10px;
    }

.img_cat{
width: 50px;
height:50px;
padding-right:10px;
margin-top: -15px;}

/* TITRE CATEGORIE */
 .cate_titre {
      width: 90%;
  margin-top: -40px;
  margin-bottom:15px;
  margin-left:5%;
      background-color: #600544;
      box-shadow: 2px 2px 10px #072654;
    -moz-box-shadow: 2px 2px 10px #072654;
      -webkit-box-shadow: 2px 2px 10px #072654;
        -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      -khtml-border-radius: 10px;
      border-radius: 10px;
    }   

    .cate_titre h2 {
      font-size: 25px;
      font-family: 'Pacifico', cursive;
      color: #ECBC6B;
      padding-left:10%;
    }

span.forumlink {
  line-height: 38px;
  vertical-align: middle;
  display: block;
  margin: 0;
  text-align: center;
  width: 100%;
  min-width: 250px;
}
/*Titre Forum */

.forumtit {background: #ECBC6B;   
      border : 1px solid #600544;
      -moz-border-radius: 15px 15px 0px 0px ;
      -webkit-border-radius: 15px 15px 0px 0px ;
      border-radius:  15px 15px 0px 0px ;
 
    }
    /* LIENS TITRE DU FORUM */
    a.forumlink{
      text-shadow: 1px 0px 2px  #000;
      letter-spacing: 6px;
      font-size: 17px;
    }

.sousforum {
font-size: 14px;
font-weight:bold;}

    /* DESCRIPTION */
    .cell_tfa_des{
      background : #FFE7D5;
      padding:10px;
      margin: 0 auto;
      border : 1px solid #600544;
      -moz-border-radius: 0px 0px 15px 15px;
      -webkit-border-radius:  0px 0px 15px 15px;
      border-radius: 0px 0px 15px 15px;
    }
    .la_description span.genmed img{
    margin: 5px;
    }
    /*  DERNIERS SUJETS */
    .dernier_messages{
      background : #FFE7D5;
      background-position: bottom;
      padding: 7px;
      padding-left: 28px;
      margin: 0 auto;
      height: 50px;
      border : 1px solid #600544;
      -moz-border-radius: 15px 15px 0px 0px ;
      -webkit-border-radius: 15px 15px 0px 0px ;
      border-radius:  15px 15px 0px 0px ;
    }
    /* EMPLACEMENT DE L ICONE NEW/NO-NEW/CLOS  */
    .icone_cat{
      position: absolute;
      float: left;
  height:38px;
      margin-left: -2%;
      margin-top: 1px;
    }
    /* TEXTES CELLULES SOUS-FORUMS ET NOMBRE DE SUJETS-MESSAGES */
    .text-tfa_cell .gensmall{
      font: 11px Arial;
      color: #052F6D;
      text-shadow: 0px 0 1px #000;
    }
    .text-tfa_cell .gensmall img{
      vertical-align: middle;
    }
/***** end catégories ***/


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

/* BLOC CONTENANT TOUT LE QEEL */
#all_qeel {
  margin: 10px auto 40px;
  padding: 0;
  width: 750px;
}
/* BLOC CONTENANT LE TITRE DU QEEL */
#d-title{
  width:750px;
  position: relative;
  z-index: 999;
  margin: 0 auto -40px;
  padding: 0;
  text-align: center;
}
/* TITRE DU QEEL */
#d-title h1{
  width:100%;
  margin: 0 auto;
  padding: 0;
  font-family: 'Lovers Quarrel', cursive;
  font-size:80px;
  font-weight: normal;
  text-align: center;
  letter-spacing: 3;
  color:#072654;
  text-shadow: 0 0 3px #000;
}

/* BLOC PRINCIPAL */
#tfa_qeel{
  width: 750px;
  margin: 10px auto;
  padding: 8px 0;
  position: relative;
  background: #92B1DE;
  -moz-border-radius: 30px;
  -webkit-border-radius:30px;
  border-radius: 30px;
  -moz-box-shadow:0px 0px 4px #fff;
  -webkit-box-shadow: 0px 0px 4px #fff;
  box-shadow: 0px 0px 4px #fff;
}
/* DEUXIEME BLOC POUR BORDURE */
#tfa_one-bloc{
  width:98%;
  margin: auto;
  padding: 0;
  border: 2px dotted #fff;
  position: relative;
  -moz-border-radius: 25px;
  -webkit-border-radius:25px;
  border-radius: 25px;
  font: 15px Trochut;
  color: #600544 !important;
}

/* ----- BLOC STATISTIQUES ----- */
.tfa_d-container{
  float: left;
  width: 45%;
  height: 230px;
  margin-top: 35px;
  margin-left: 3%;
  padding: 0;
  background: #6086BF;
  -moz-border-radius: 20px;
  -webkit-border-radius:20px;
  border-radius: 20px;
  box-shadow: 0 0 2px #000;
}
/* 2EME BLOC POUR BORDURE */
.d-content{
  width:96%;
  margin: 10px auto;
  padding: 0;
  border: 2px dotted #600544;
  position: relative;
  -moz-border-radius: 15px;
  -webkit-border-radius:15px;
  border-radius: 15px;
  position: relative;
}
/* TITRE STATISTIQUES */
.d-content h2{
 position: absolute;
  top: -55px;
  font-family: 'Lovers Quarrel', cursive;
  font-size: 60px;
  font-weight: normal;
  width: 100%;
  color: #600544;
  text-shadow: 0 0 4px #fff;
  text-align: left;
  margin: 0 0 0 25px;
  padding: 0;
}
/* CONTENU STATISTIQUES */
.d-content .in_d-content{
 position: relative;
  width: 96%;
  margin: auto;
  padding: 5px 0;
}

/* ------ BLOC DE DROITE ------ */
.tfa_d-container2{
  float: right;
  width: 45%;
  height: 230px;
  margin-top: 35px;
  margin-right: 3%;
  padding: 0;
  background: #6086BF;
  -moz-border-radius: 20px;
  -webkit-border-radius:20px;
  border-radius: 20px;
  box-shadow: 0 0 2px #000000;
}
/* TITRE GROUPE */
.tfa_d-container2 h2{
 position: absolute;
  top: -55px;
  right: 20px;
  font-family: 'Lovers Quarrel', cursive;
  font-weight: normal;
  font-size: 60px;
  width: 100%;
  color: #600544;
  text-shadow: 0 0 4px #fff;
  text-align: right;
  margin: 0 15px 0 0;
  padding: 0;
}
/* CONTENEUR GROUPE */
.in_d-content2{
 position: relative;
  width: 300px;
  height: 186px;
  margin: auto;
  padding: 10px 0;
}
.in_d-content2 p{
  font: 15px Trochut;
}

/* --------- LES GROUPES ---------- */

/* BLOC GROUPE */
.d-transition-tfa{
  position: relative;
  float: left;
  height: 80px;
  margin: auto;
  overflow: hidden;
  width: 100px;
  text-align: center;
  vertical-align: middle;
}
/* CONTENU BLOC GROUPE */
.d-block_transition{
  background: #1f495e;
  width: 100px;
  height: 80px;
  position: absolute;
  top: 0;
  left: 0;
  color: #9C9C9C !important;
  opacity: 0;
  -webkit-transition: all 1.0s ease; /* pour navigateur webkit */
  -moz-transition: all 1.0s ease; /* pour navigateur mozilla */
  -o-transition: all 1.0s ease; /* pour navigateur opera */
  transition: all 1.0s ease; /* pour les navigateurs récents */
}
/* BLOC GROUPE AU SURVOL */
.d-block_transition:hover {
  opacity: 0.8;
}
/* IMAGE (icône) DU GROUPE */
.d-transition-tfa img {
vertical-align: middle;
}
/* NOM DU GROUPE */
.d-block_transition h3{
color: #e7c064;
font: 12px italic verdana;
border-bottom: 1px dotted #e19f2d;
text-align: center;
width: 96%;
margin: 0 auto;
padding: 0;
}
/* TEXTE GROUPE */
.d-block_transition span{
display: block;
font-size: 12px;
color: #ffffff;
text-align: center;
width: 96%;
margin: 0 auto;
padding: 0;
}
/* LIEN GROUPE */
.d-block_transition a{
  font-size: 13px;
  color: #64e776;
  text-decoration: none;
}

/* ------ LES DERNIERS CONNECTES -------- */
.tfa_d-container3{
  position: relative;
  float: left;
  width: 45%;
  margin-left:3%;
  padding: 0;
}
#bloc_bas_qeel{
  position: absolute;
  left: 5%;
  width: 88%;
  margin: 0 auto;
  padding: 0;
  z-index: 999;
}
#derniers_connectes{
  background: #6086BF;
  position: relative;
  height: 0;
  overflow: hidden;
  color: #600544;
  -moz-border-radius: 0 0 9px 9px;
  -webkit-border-radius: 0 0 9px 9px;
  border-radius: 0 0 9px 9px;
  -webkit-transition: all 1.2s ease; /* pour navigateur webkit */
  -moz-transition: all 1.2s ease; /* pour navigateur mozilla */
  -o-transition: all 1.2s ease; /* pour navigateur opera */
  transition: all 1.2s ease; /* pour les navigateurs récents */
}
#open_derniers_connectes{
  background: #6086BF;
  position: relative;
  width: 150px; 
  display: block;
  margin: 0 auto;
  padding: 3px;
  font-size: 13px;
  color: #600544 !important;
  text-align: center;
  -moz-border-radius: 0 0 9px 9px;
  -webkit-border-radius: 0 0 15px 15px;
  border-radius: 0 0 15px 15px;
}
#bloc_bas_qeel:hover #derniers_connectes{
  height: 80px;
  padding: 3px;
}
#conect-content{
  width: 94%;
  margin: auto;
  height: 76px;
  overflow-y: auto;
}
#derniers_connectes #TFAd6 .row1{
  background: transparent;
}

/* ------ LES ANNIVERSAIRES -------- */
.tfa_d-container4{
  position: relative;
  float: right;
  width: 45%;
  margin-right:3%;
  padding: 0;
}
.bloc_bas_qeel{
  position: absolute;
  left: 5%;
  width: 88%;
  margin: 0 auto;
  padding: 0;
  z-index: 3;
}
#d_anniversaires{
  background: #6086BF;
  position: relative;
  height: 0;
  overflow: hidden;
  color: #600544;
  -moz-border-radius: 0 0 9px 9px;
  -webkit-border-radius: 0 0 9px 9px;
  border-radius: 0 0 9px 9px;
  -webkit-transition: all 1.2s ease; /* pour navigateur webkit */
  -moz-transition: all 1.2s ease; /* pour navigateur mozilla */
  -o-transition: all 1.2s ease; /* pour navigateur opera */
  transition: all 1.2s ease; /* pour les navigateurs récents */
}
#open_anniversaires{
  background:  #6086BF;
  position: relative;
  width: 150px; 
  display: block;
  margin: 0 auto;
  padding: 3px;
  font-size: 13px;
  color: #600544 !important;
  text-align: center;
  -moz-border-radius: 0 0 9px 9px;
  -webkit-border-radius: 0 0 15px 15px;
  border-radius: 0 0 15px 15px;
}
.bloc_bas_qeel:hover #d_anniversaires{
  height: 80px;
  padding: 3px;
}
#anniv-content{
  width: 94%;
  margin: auto;
  height: 76px;
  overflow-y: auto;
}
/* SUPRESSION DU FOND DE ROW1 */
#anniv-content table td.row1{
  background: transparent !important;
}

/* ------ INFORMATION ------- */
#tfa_d-bas{
  width: 94%;
  margin: 40px auto 10px;
  padding: 5px 0;
  background: #6086BF;
  -moz-border-radius: 20px;
  -webkit-border-radius:20px;
  border-radius: 20px;
  box-shadow: 0 0 2px #000;
}
/* TITRE INFORMATION */
#tfa_d-bas h2{
 position: absolute;
  width: 80%;
  font-family: 'Lovers Quarrel', cursive;
  font-size: 60px;
  width: 100%;
  color: #600544;
  text-shadow: 0 0 4px #fff;
  text-align: center;
  top: -62px;
  margin: 10px auto 0;
  padding: 0;
}
/* 2EME BLOC POUR LA BORDURE */
#tfa_d-bas .d-content{
  width:98%;
  margin: auto;
  padding:0;
  border: 2px dotted #600544;
  position: relative;
  -moz-border-radius: 15px;
  -webkit-border-radius:15px;
  border-radius: 15px;
  position: relative;
}
/* CONTENU INFORMATION */
#tfa_d-bas .in_d-content{
 position: relative;
  width: 98%;
  margin: auto;
  padding: 5px 0;
}
/* LIENS DANS INFORMATION */
#tfa_d-bas .in_d-content a{
color: #600544;
}

/* BLOC BAS GAUCHE */
#bas_d-gauche{
  position: relative;
  width: 40%;
  float: left;
  margin: 0;
  padding: 0;
}
/* BLOC BAS DROITE */
#bas_d-droite{
  position: relative;
  width: 60%;
  float: right;
  margin: 0;
  padding: 0;
}
/* PARAGRAPHE DU BLOC DE DROITE */
#bas_d-droite p{
  width: 96%;
  margin: 5px auto 0;
  padding: 0;
  font: 15px Trochut;
  color: #600544;
}

/* ----- BLOC TRANSITION BAS GAUCHE ----- */
#bloc_part_qeel { 
  height: 90px;
  width: 96%;
  margin: 3px 0 0 0;
  padding: 0;
  position: relative;
  font: Bold 15px Trochut;
  color: #ff5900;
}
/* CONFIGURATION DE LA LISTE avant */
#bloc_part_qeel ul:before { 
  content: ""; 
  position: absolute; 
  z-index: 100; 
  background: #375D81; 
  height: 100%; 
  width: 110px; 
  margin : 0 auto; 
  padding: 0; 
  border-radius: 10px; 
  -moz-border-radius: 10px; 
  -webkit-border-radius: 10px; 
  -moz-box-shadow:0px 0px 2px #000;
  -webkit-box-shadow: 0px 2px 4px #000;
  box-shadow: 0px 0px 2px #000;
}
/* LISTE */
#bloc_part_qeel ul { 
  position: relative; 
  list-style: none; 
  width: 110px; 
  padding:0px; 
  margin: 0; 
}
/* ELEMENT DE LA LISTE */
#bloc_part_qeel ul li { 
  height: 30px; 
  width: 110px;
  margin: 0 auto;
  padding: 0;
}
/* LIENS MENU */
#bloc_part_qeel ul li a.info_link { 
  position: absolute; 
  z-index: 110; 
  font-weight: bold; 
  color: #fff; 
  font-size: 16px;
  margin: 0; 
  padding-left: 10px; 
  display: block; 
  width: 100px; 
  height: 30px; 
  text-decoration: none;   
  text-shadow: 0 1px 0 #000; 
}
a.info_link:hover {
  text-decoration: none; 
}
/* BLOC CONTENEUR */
#bloc_part_qeel ul li div { 
  width: 100px; 
  height: 80px; 
  padding: 0; 
  background: rgba(31,73,94,0.6); 
  overflow: hidden; 
  color: white; 
  position: absolute; 
  top: 5px; 
  left: 0; 
  z-index: 50; 
  opacity: 0;
  margin: 0;
  padding: 0;
  -moz-transition: 1s left, 1s width, 1s opacity; 
  -webkit-transition: 1s left, 1s width, 1s opacity; 
  -o-transition: 1s left, 1s width, 1s opacity;
}
/* BLOC CONTENEUR AU SURVOL */
#bloc_part_qeel ul li:hover div {
  left:110px;
  opacity: 1; 
  width: 160px; 
  background: rgba(31,73,94,0.6); 
  -moz-transition: 1s left, 1s width, 1s opacity; 
  -webkit-transition: 1s left, 1s width, 1s opacity; 
  -o-transition: 1s left, 1s width, 1s opacity;
}
/*l PARAGRAPHE */
#bloc_part_qeel ul li div p {       
  width: 96%; 
  overflow: hidden;
  margin: 3px auto 0;
  paddign: 0;
  font: 13px Trochut;
  color: #ffffff;
  text-shadow: 0 1px 0 #000;
}

/***** End QEEL *****/

/***** Mise en forme message dans sujets ****/
        .icon_online {
          position:absolute;
          margin-top: 15px;
          margin-left:-75px;
        }

.mess{
background: #FFE7D5;
text-align:left;
border :2px solid #8f8466;
      border-radius: 20px;
      -moz-border-radius: 20px;
      -o-border-radius: 20px;
      -htm-border-radius: 20px;
      -webkit-border-radius: 20px;
padding: 10px;
margin-top: 1px !important;
min-height: 35px;
width: 98%}

.profil
    {
      width: 95%; /* Ne pas toucher */
      padding: 0px;
      padding-top: 10px;
      padding-bottom: 10px; /* Ne pas toucher */
      -moz-box-shadow: inset 1px 1px 10px #000000;
      -webkit-box-shadow: inset 1px 1px 10px #000000;
      box-shadow: inset 1px 1px 10px #000000;
      -o-box-shadow: inset 1px 1px 10px #000000;
      -htm-box-shadow: inset 1px 1px 10px #000000;
      background-color: #92B1DE;
      border: 2px solid #600544;
      border-radius: 50px;
      -moz-border-radius: 50px;
      -o-border-radius: 50px;
      -htm-border-radius: 50px;
      -webkit-border-radius: 50px;
    }

    .optionsmodo
    {
      width: 60%; /* Ne pas toucher */
      background-color: #92B1DE;
      border: 2px solid #600544;
      -moz-box-shadow: 1px 1px 10px #000000;
      -webkit-box-shadow: 1px 1px 10px #000000;
      box-shadow: 1px 1px 10px #000000;
      -o-box-shadow: 1px 1px 10px #000000;
      -htm-box-shadow: 1px 1px 10px #000000;
      border-radius: 30px 30px 0px 0px;
      -moz-border-radius: 30px 30px 0px 0px;
      -o-border-radius: 30px 30px 0px 0px;
      -htm-border-radius: 30px 30px 0px 0px;
      -webkit-border-radius: 30px 30px 0px 0px;
    }

    .boitegauche
    {float:left;
  background: #FFE7D5;
      border: 2px solid #600544;
      text-align: center; /* Ne pas toucher */
      padding-bottom: 15px;  /* Ne pas toucher */
      margin: 10px;  /* Ne pas toucher */
      -moz-box-shadow: inset 1px 1px 10px #000000;
      -webkit-box-shadow: inset 1px 1px 10px #000000;
      box-shadow: inset 1px 1px 10px #000000;
      -o-box-shadow: inset 1px 1px 10px #000000;
      -htm-box-shadow: inset 1px 1px 10px #000000;
      border-radius: 50px;
      -moz-border-radius: 50px;
      -o-border-radius: 50px;
      -htm-border-radius: 50px;
      -webkit-border-radius: 50px;
    }

    .infoss
    {
      border-top: 2px solid #600544;
      border-bottom: 2px solid #600544;
      margin: 0px; /* Ne pas toucher */
      margin-top: 10px; /* Ne pas toucher */
      margin-bottom: 10px; /* Ne pas toucher */
      -moz-box-shadow: 0px 0px 10px #000000;
      -webkit-box-shadow: 0px 0px 10px #000000;
      box-shadow: 0px 0px 10px #000000;
      -o-box-shadow: 0px 0px 10px #000000;
      -htm-box-shadow: 0px 0px 10px #000000;
    }

    .ssoptions
    {
      width: 60%; /* Ne pas toucher */
      background-color: #92B1DE;
      border: 2px solid #600544;
      -moz-box-shadow: 1px 1px 10px #000000;
      -webkit-box-shadow: 1px 1px 10px #000000;
      box-shadow: 1px 1px 10px #000000;
      -o-box-shadow: 1px 1px 10px #000000;
      -htm-box-shadow: 1px 1px 10px #000000;
      border-radius: 0px 0px 30px 30px;
      -moz-border-radius: 0px 0px 30px 30px;
      -o-border-radius: 0px 0px 30px 30px;
      -htm-border-radius: 0px 0px 30px 30px;
      -webkit-border-radius: 0px 0px 30px 30px;
    }

      /*Profil masqué*/
    .profilmasque
    {
      transform: all; /* Ne pas toucher */
      -moz-transform: all; /* Ne pas toucher */
      -o-transform: all; /* Ne pas toucher */
      -htm-transform: all; /* Ne pas toucher */
      -webkit-transform: all; /* Ne pas toucher */
      transition: 1s; /* Ne pas toucher */
      -moz-transition: 1s; /* Ne pas toucher */
      -o-transition: 1s; /* Ne pas toucher */
      -htm-transition: 1s; /* Ne pas toucher */
      -webkit-transition: 1s; /* Ne pas toucher */
      padding: 10px; /* Ne pas toucher */
      overflow: hidden; /* Ne pas toucher */
      height: 18px; /* Entrez la valeur de font-size dans .titreprofil */
      text-align: center;
    }

    .profilmasque:hover
    {
      transform: all; /* Ne pas toucher */
      -moz-transform: all; /* Ne pas toucher */
      -o-transform: all; /* Ne pas toucher */
      -htm-transform: all; /* Ne pas toucher */
      -webkit-transform: all; /* Ne pas toucher */
      transition: 1s; /* Ne pas toucher */
      -moz-transition: 1s; /* Ne pas toucher */
      -o-transition: 1s; /* Ne pas toucher */
      -htm-transition: 1s; /* Ne pas toucher */
      -webkit-transition: 1s; /* Ne pas toucher */
      padding: 10px; /* Ne pas toucher */
      overflow: hidden; /* Ne pas toucher */
      height: 150px; /* Dépend de la quantité d'informations que vous voulez mettre, n'hésitez pas à le réduire ou l'agrandir */
    }

    .titreprofil
    {
      font-size: 23px;
      text-shadow: 1px 1px 2px #000000;
    }
  .signaturemasque
    {
      transform: all; /* Ne pas toucher */
      -moz-transform: all; /* Ne pas toucher */
      -o-transform: all; /* Ne pas toucher */
      -htm-transform: all; /* Ne pas toucher */
      -webkit-transform: all; /* Ne pas toucher */
      transition: 1s; /* Ne pas toucher */
      -moz-transition: 1s; /* Ne pas toucher */
      -o-transition: 1s; /* Ne pas toucher */
      -htm-transition: 1s; /* Ne pas toucher */
      -webkit-transition: 1s; /* Ne pas toucher */
      padding: 5px; /* Ne pas toucher */
      overflow: hidden; /* Ne pas toucher */
      height: 23px; /* Entrez la valeur de font-size dans .titreprofil */
      text-align: center;
    }

    .signaturemasque:hover
    {
      transform: all; /* Ne pas toucher */
      -moz-transform: all; /* Ne pas toucher */
      -o-transform: all; /* Ne pas toucher */
      -htm-transform: all; /* Ne pas toucher */
      -webkit-transform: all; /* Ne pas toucher */
      transition: 1s; /* Ne pas toucher */
      -moz-transition: 1s; /* Ne pas toucher */
      -o-transition: 1s; /* Ne pas toucher */
      -htm-transition: 1s; /* Ne pas toucher */
      -webkit-transition: 1s; /* Ne pas toucher */
      padding: 5px; /* Ne pas toucher */
      overflow: hidden; /* Ne pas toucher */
      height: 300px; /* Dépend de la quantité d'informations que vous voulez mettre, n'hésitez pas à le réduire ou l'agrandir */
    }

    .titresignature
    {
      font-size: 23px;
      text-shadow: 1px 1px 2px #000000;
    }

/***** End mise en forme message ***/

/****Page d'accueil ***/
#all_tfa_accueil {
    margin: 0 auto;
    padding: 0;
    position: relative;
    text-align: left;
    width: 768px;
}

.font_bas {
    margin: 10px auto;
    padding: 0;
    position: relative;
    text-align: left;
    width: 768px;
}
#ptit_dern {
    float: right;
    margin: 0;
    padding: 0;
    width: 40%;
}
#bordure_sombre {
    background: none repeat scroll 0 0 #92B1DE;
    border: 4px solid #600544;
    margin: 6px 0;
    padding: 0;
    width: 290px;
}
.tasco_content2 {
    background: none repeat scroll 0 0 #92B1DE;
    border-bottom: 1px solid #600544;
    border-top: 1px solid #600544;
    color: #1E5C95;
    margin: 0;
    text-align: center;
    width: 290px;
}
.tasco_content2 span {
    padding: 5px;
}
#tasco_btou {
    float: left;
    margin: 5px auto;
    padding: 0;
    position: relative;
    width: 60%;
}
#tfa_part_bas {
    background: none repeat scroll 0 0 #92B1DE;
    border-radius: 15px;
    box-shadow: 2px 2px 5px #600544;
    margin: 0 auto;
    padding: 0;
    position: relative;
    width: 100%;
}
#tfa_news {
    background: none repeat scroll 0 0 #92B1DE;
    border: 4px solid #600544;
    margin: auto;
    width: 430px;
}
#tfa_news div {
    background: none repeat scroll 0 0 #FFE7D5;
    border-bottom: 1px solid #000000;
    border-top: 1px solid #DFDFDF;
    color: #00191C;
    font: 14px Arial;
    margin: 0;
    padding: 5px;
    width: 430px;
}
#tfa_news div:first-letter {
    color: #ECBC6B;
    font: bold 15px Arial;
}
.fleche {
    float: right;
    height: 16px;
    margin-right: 7px;
    vertical-align: middle;
    width: 14px;
}
#tfa_news ul {
    margin: 0;
    padding: 0;
}
#tfa_news li {
    margin: 0;
    padding: 0;
}
.tfa_title_gauche {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #600544;
    border-color: #600544 #600544 -moz-use-text-color;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 1px medium;
    bottom: -4px;
    color: #ECBC6B;
    font-family: Verdana;
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 -1px 40px;
    padding: 3px;
    position: relative;
    text-shadow: 0 1px 1px #000000;
}
.tfa_title_droite {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #600544;
    border-color: #600544 #600544 -moz-use-text-color;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 1px medium;
    color: #ECBC6B;
    float: right;
    font-family: Verdana;
    font-size: 15px;
    font-weight: 500;
    margin: 0 40px -1px 0;
    padding: 3px;
    text-shadow: 0 1px 1px #000000;
}
/**** End page d'accueil ****/

/**** Barre-menu supérieure ***/

div.wrapper {
    clear: both;
    margin: auto;
    width: 80%;
}
div#menuHaut {
    height: 50px;
    line-height: 50px;
    width: 100%;
}
div#menuHaut div#adage {
    float: left;
    padding-left: 50px;
    width: 450px;
}
div#menuHaut div#adage p {
    font-size: 10pt;
    font-style: italic;
    margin: 0;
}
div#menuHaut div#navHaut {
    float: left;
    padding-top: 4px;
    width: 550px;
}
div#menuHaut div#navHaut a {
    margin-right: 20px;
}
div#menuHaut div#navHaut img {
    height: 36px;
    transition: transform 0.9s ease 0s;
    width: 71px;
}
div#menuHaut div#navHaut img:hover {
    transform: rotate(20deg);
}
div#menuHaut div#navHaut #actif img {
    transform: rotate(20deg);
}

/**** End barre-menu supérieure ****/

/***** Encadrement du forum ****/
table.bodylinewidth td.bodyline{
  margin-top:-100px; /* à modifier si ça ne vous convient pas */
  width:98%;
  margin-left: auto;
  margin-right: auto;
  }

#fd_haut{
  width:80%;
  height: 260px;
  background-color: #FFE7D5;
  border-left: 6px blue double;
  border-right: 6px blue double;
  border-top: 6px blue double;
  margin:auto;
  border-radius: 10px 10px 0px 0px;
}
#ttgeant{
margin:auto;
  text-shadow: 2px 2px 4px black;
  font-size: 46px;
  font-family:impact;
  width:450px;
 
}
#fd_milieu{
  width:80%;
  background-color: #FFE7D5;
  border-left: 6px blue double;
  border-right: 6px blue double;
  background-repeat:repeat-y;
  background-position:center;
  margin:auto;
}

#fd_bas{
  width:80%;
  height: 100px;
  background-color: #FFE7D5;
  border-left: 6px blue double;
  border-right: 6px blue double;
  border-bottom: 6px blue double;
  background-repeat:no-repeat;
  background-position:center top;
  margin: auto;
 
  border-radius: 0px 0px 10px 10px;
}

body{
  margin:0;
  padding:0;
  width:100%;
  }

/***** Entête ****/

div#header {
    height: 250px;
  margin:auto;
    padding-bottom: 10px;
    width: 880px;
}
div#header p.maj {
    font-size: 8pt;
}
div#header div#illu {
    float: left;
    height: 250px;
    width: 450px;
}
div#header div#hg {
    float: left;
    font-size: 10pt;
    font-style: italic;
    height: 250px;
    width: 420px;
}
div#header div#hg blockquote {
    margin: 33px 0 0 70px;
}
div#header div#hg blockquote p {
    text-align: left;
}
div#header div#hg blockquote p#sign {
    margin: 4px 40px 0 0;
    text-align: right;
}
div#header div#hg > div {
    clear: both;
    margin: 6px 0;
    width: 100%;
}
div#header div#hg > div div#rs {
    float: left;
    width: 150px;
}
div#header div#hg > div div#rs div#logoRs {
    text-align: right;
    width: 100%;
}
div#header div#hg > div div#rs div#logoRs img {
    height: 32px;
    margin: 0 5px;
    width: 32px;
}
div#header div#hg > div div#infoWrw {
    float: right;
    font-size: 10pt;
    font-style: normal;
    width: 180px;
}

/**** End Entête ****/

/****** Fin encadrement du forum ***/

/***** LISTE SUJETS ******/
    /* MISE EN FORME DES LISTES DE SUJETS */

    .bloc_sujets
    {
      width: 100%;
      margin: auto;
      background: #92B1DE;
      border: 1px solid #600544;
      box-shadow: 0px 0px 3px #2E4566;
      -o-box-shadow: 0px 0px 3px #2E4566;
      -moz-box-shadow: 0px 0px 3px #2E4566;
      -webkit-box-shadow: 0px 0px 3px #2E4566;
      -htm-box-shadow: 0px 0px 3px #2E4566;
      padding: 5px;
    }
    .sujets
    {
      background: #FFE7D5;
      border: 1px dotted #2E4566;
      padding: 3px;
    }
    .topictitle
    {
      font-variant: small-caps;
      font-size: 12px;
    }
    .sujets_auteur
    {
      display: block;
      width: 200px;
      font-size: 11px;
    }
    .sujet_last
    {
      display: block;
      width: 180px;
      height: 40px;
      background: #FFE7D5;
      border-left: 3px solid #2E4566;
      border-right: 3px solid #2E4566;
      padding-top: 10px;
      font-size: 11px;
    }
    .sujets_stats
    {
      width: 90%;
      text-align: right;
      margin-bottom: 5px;
    }
    .sujets_stats_contenu
    {
      font-size: 10px;
      color: #600544;
    }
/***** ENd liste sujets ****/

/*******mise en page spéciale jeux *****/
.img {
border:dashed 1px #375D81;
margin-left: 50px;
margin-right: 50px;
widht:800px;
heigth:auto;
}
.title {
border-bottom: solid 2px #375D81;
border-left: solid 2px #375D81;
color: #234CA5;
font-family: Serif;
font-weight: bold;
text-align: left;
margin-left: 10px;
margin-right: 100px;
font-size: 26px;
padding-left: 10px;
padding-bottom: 5px;
}

.bigtitle{
background: #C4D7ED;
border: dashed 4px #375D81;
color: #234CA5;
font-family: Serif;
font-weight: bold;
text-align: center;
margin-left: 100px;
margin-right: 100px;
font-size: 28px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.corpus {
background: #C4D7ED;
border: dashed 3px #375D81;
color: #234CA5;
font-family: Serif;
text-align: left;
font-size: 16px;
padding: 20px;
margin-right: 50px;
margin-left: 50px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.table{background: #C4D7ED;
color: #234CA5;
font-family: Serif;
text-align: left;
font-size: 14px;
margin-right: 60px;
margin-left: 60px;
width: 800px;}
/*****end mise en page spéciale jeux*****/

/*******mise en page spéciale cursus*****/
.title_cursus{
border-bottom: solid 2px #234CA5;
border-left: solid 2px #234CA5;
color: #234CA5;
font-family: Serif;
font-weight: bold;
text-align: left;
margin-left: 10px;
margin-right: 100px;
font-size: 26px;
padding-left: 10px;
padding-bottom: 5px;
}
.title2_cursus{
border-bottom: dashed 1px #234CA5;
border-left: solid 2px #234CA5;
color: #234CA5;
font-family: Serif;
font-weight: bold;
text-align: left;
margin-left: 10px;
margin-right: 100px;
font-size: 20px;
padding-left: 10px;
padding-bottom: 5px;
}
.title3_cursus{
background: #FCFAE1;
border: dashed 2px #234CA5;
color: #234CA5;
font-family: Serif;
font-weight: bold;
text-align: left;
margin-left: 50px;
margin-right: 400px;
font-size: 18px;
padding-top:5px;
padding-left: 10px;
padding-bottom: 5px;
}
.title4_cursus{
border-bottom: dashed 2px #234CA5;
color: #234CA5;
font-family: Serif;
font-weight: bold;
text-align: left;
margin-left: 50px;
margin-rigt: 400px;
font-size: 18px;
padding-top:5px;
padding-left: 10px;
padding-bottom: 5px;

.bigtitle_cursus{
background: #E1E6FA;
border: dashed 4px #234CA5;
color: #375D81;
font-family: Serif;
font-weight: bold;
text-align: center;
margin-left: 150px;
margin-right: 150px;
font-size: 28px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.corpus_cursus{
background: #E1E6FA;
border: dashed 3px #234CA5;
color: #375D81;
font-family: Serif;
text-align: left;
font-size: 16px;
padding: 20px;
margin-right: 50px;
margin-left: 50px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.corpus2_cursus{
background: #E1E6FA;
border: dashed 1px #234CA5;
color: #234CA5;
font-family: Serif;
text-align: left;
font-size: 16px;
padding: 20px;
margin-right: 60px;
margin-left: 60px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.texte_cursus{
background: #FCFAE1;
border: dashed 1px #234CA5;
color: #234CA5;
font-family: Serif;
text-align: left;
font-size: 18px;
padding: 5px;
margin-right: 400px;
margin-left: 50px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.table_cursus{background: #ffda8c;
color: #375D81;
font-family: Serif;
text-align: left;
font-size: 14px;
margin-right: 60px;
margin-left: 60px;
width: 600px;}
/*****end mise en page spéciale cursus*****/
/*******mise en page spéciale règlement*****/

.title_rglmt {
border-bottom: solid 2px #E1E6FA;
border-left: solid 2px #E1E6FA;
color: #375D81;
font-family: Serif;
font-weight: bold;
text-align: left;
margin-left: 10px;
margin-right: 100px;
font-size: 26px;
padding-left: 10px;
padding-bottom: 5px;
}

.bigtitle_rglmt{
background: #E1E6FA;
border: dashed 4px #375D81;
color: #375D81;
font-family: Serif;
font-weight: bold;
text-align: center;
margin-left: 100px;
margin-right: 100px;
font-size: 28px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.corpus_rglmt {
background: #E1E6FA;
border: dashed 3px #375D81;
color: #375D81;
font-family: Serif;
text-align: left;
font-size: 16px;
padding: 20px;
margin-right: 50px;
margin-left: 50px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

/*****end mise en page spéciale règlement*****/
/****** Animations Halloween ****/

.titrehalloween{
  border-bottom: 2px dotted #FF5B2B;
  margin: 10px;
  text-align: center;
  font-size: 20px;
  color: #FC7F3C;
  padding: 10px;
}

.titre2halloween {border-bottom: 2px solid #FF5B2B;
  margin-left: 14px;
  padding-left: 60px;
  font-size:16px;
  color: #FC7F3C;
  width: 300px;
  height: 35px;
  padding-top:5px;
  background-image: url('http://62.img.v4.skyrock.net/5826/81385826/pics/3120442673_1_7_eDjwRkkQ.gif') ;
    background-repeat: no-repeat;
    background-position: center left;
}

.corpushalloween {
  -moz-border-radius: 90px 0 90px  0;
-webkit-border-radius: 90px 0 90px 0;
border-radius: 90px 0 90px 0;
border: 3px solid #FF483D;
  background-image: url('http://images2.layoutsparks.com/1/168694/happy-halloween-orange-colour.jpg');
  background-repeat: no repeat;
  background-attachement: fixed;
  background-size:cover;
  color: #FCFAE1;
    text-align:justify;
  padding:25px;
  margin:auto;
  width: 650px;
  font-size: 14px;
 
}

/*** Mise en page spoilers ****/
.titrespoiler {
border-bottom: solid 2px #E1E6FA;
border-left: solid 2px #E1E6FA;
color: #375D81;
font-family: Serif;
font-weight: bold;
text-align: left;
margin-left: 10px;
margin-right: 100px;
font-size: 26px;
padding-left: 10px;
padding-bottom: 5px;
}

#spoiler{
background: #E1E6FA;
border: dashed 4px #375D81;
color: #375D81;
font-family: Serif;
font-weight: bold;
text-align: center;
margin-left: 100px;
margin-right: 100px;
font-size: 28px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.textespoiler {
background: #E1E6FA;
border: dashed 3px #375D81;
color: #375D81;
font-family: Serif;
text-align: left;
font-size: 16px;
padding: 20px;
margin-right: 50px;
margin-left: 50px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

/*** ENd mise en page spoiler ***/

/***** Mise en page présentation *****/
#fondp1{-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border:2px #52251C solid;
background-color:#FDEDC0;
width:470px;}

#pseudop1{font-family:'Georgia';
font-variant:small-caps;
text-shadow:1px 1px 1px white;
font-color:#38040C;
font-size:40px;
border-bottom:1px #52251C dashed;}
      
#presp1{margin-left:+160px;
font-family:'The Girl Next Door';
font-size:18px;color:#4A2612}

.tit1p1{font-family:'Miniver';
text-shadow:1px 1px 1px white;
font-size:18px;
color:#4A2612;
text-align:justify;
margin-left:100px;}

.tit2p1{font-family:'Miniver';
text-shadow:1px 1px 1px white;
font-size:18px;
color:#4A2612;
margin-right:110px;
text-align:right;
margin-top:-5px;}

.mot1p1{margin-top:-5px;
border-radius:15px;
 -moz-border-radius:15px;
 -webkit-border-radius:15px;
 background-color:#EFEFEE;
 padding:5px;
 border:1px brown dashed;
 width:350px;
 text-align:justify;
 font-family:'Georgia';
 font-size:12px;}
 
.mot2p{text-shadow:1px 1px 1px white;
font-variant:small-caps;
letter-spacing:1px;
word-spacing:1px;
padding:5px;}

/****** End mise en page présentation ****/

Pouvez-vous m'aider ?

Merci d'avance.  Very Happy 


Dernière édition par Doupi le Ven 27 Juin 2014 - 11:24, édité 1 fois

Doupi
**

Messages : 56
Inscrit(e) le : 24/09/2012

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

Résolu Re: Forum décalé dès qu'il y a une résolution différente de 1400x1050

Message par Doupi le Lun 23 Juin 2014 - 15:47

Mes templates modifiés :

Index_body :
Spoiler:
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'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.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">{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">{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'" v="2" 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="all_qeel">
    <!-- TITRE QEEL -->
<div id="d-title"><h1> Qui Est En Ligne ?</h1></div>
<div id="tfa_qeel">
  <div id="tfa_one-bloc">
    <img width="110" src="http://i45.servimg.com/u/f45/11/95/30/70/p612.png" style="position: absolute; top: 20px; right: -56px;" alt="" />
    <!-- BLOC DE GAUCHE(statistiques) -->
    <div class="tfa_d-container">
      <div class="d-content">
        <h2>Statistiques</h2>
        <div class="in_d-content">
          <img style="width: 90px; float:left; margin: 0 0 0 -40px;" src="http://i45.servimg.com/u/f45/11/95/30/70/c710.png" alt="statistiques" />
          Te voila enfin ! Nous t'attendions avec impatience !             
          <!-- NOMBRE DE MEMBRES -->
          <div id="TFAd3">{TOTAL_USERS}
            <script type="text/javascript">
              document.getElementById('TFAd3').innerHTML=document.getElementById('TFAd3').innerHTML.replace(/Nous avons /,"Dans ce petit espace, nous avons au total, ");
              document.getElementById('TFAd3').innerHTML=document.getElementById('TFAd3').innerHTML.replace(/membres enregistrés/,"fans de FF. ");
              document.getElementById('TFAd3').innerHTML=document.getElementById('TFAd3').innerHTML.replace(/membre enregistré/,"fan. ");
            </script>
          </div>       
       
          <!-- NOMBRE DE MESSAGES -->
          <div id="TFAd2">{TOTAL_POSTS}
            <script type="text/javascript">
              document.getElementById('TFAd2').innerHTML=document.getElementById('TFAd2').innerHTML.replace(/Nos membres ont posté un total de /,"Des fans hyper actifs, puisqu'ils ont envoyé, ");
              document.getElementById('TFAd2').innerHTML=document.getElementById('TFAd2').innerHTML.replace(/messages/,"messages et fictions.");
            </script>
          </div>       
       
          <!-- DERNIER UTILISATEUR ENREGISTRE -->
          <div id="TFAd4">{NEWEST_USER}
            <script type="text/javascript">
              document.getElementById('TFAd4').innerHTML=document.getElementById('TFAd4').innerHTML.replace(/L'utilisateur enregistré le plus récent est /,"Le dernier fan à franchir nos portes est : ");
            </script> . Nous lui souhaitons tous la bienvenue !
          </div>
 
          <!-- UTILISATEURS EN LIGNE -->
          <span id="TFAd">{TOTAL_USERS_ONLINE}</span>
          <script type="text/javascript">
            document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/Il y a en tout /,"En ce moment, il y a ");
            document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/utilisateurs en ligne/,"fans connectés, dont  ");
            document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/utilisateur en ligne/,"fan actuellement connecté dont  ");
            document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/Enregistrés/,"fans  ");
            document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/Enregistré/,"fan  ");
            document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/Invisible et/,"mystérieux fan et  ");
            document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/Invisibles et/,"mystérieux fans et  ");
            document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/Invités/,"futurs fans. ");
            document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/Invité/,"futur fan.  ");
          </script>           

        </div>
      </div>
    </div>
 
    <!-- BLOC DE DROITE (groupes) -->     
    <div class="tfa_d-container2">
      <div class="d-content">
        <h2>Les couples</h2>
        <div class="in_d-content2">                                   
          <!-- DEBUT GROUPES AVEC TRANSITIONS -->
          <br />       
          <!-- INFOBULLE GROUPE 1 -->
          <div class="d-transition-tfa">
            <img width="80"  src="http://i73.servimg.com/u/f73/15/62/82/10/faberr10.png" alt="Faberry" />
            <div class="d-block_transition"> 
              <h3>Faberry</h3>
              <span>
                On y retrouve les fans de ces deux forces de caractère<br />             
                <a href="http://faberritana.superforum.fr/g5-faberry">Lien vers le groupe</a>
              </span>
            </div>
          </div>
          <!-- INFOBULLE GROUPE 2 -->
          <div class="d-transition-tfa">
            <img width="80"  src="http://i73.servimg.com/u/f73/15/62/82/10/britta11.png" alt="Brittana" />
            <div class="d-block_transition"> 
              <h3>Brittana</h3>
              <span>
                Pour les fans de ces deux artistes douées<br />             
                <a href="http://faberritana.superforum.fr/g6-brittana">Lien vers le groupe</a>
              </span>
            </div>
          </div>         
          <!-- INFOBULLE GROUPE 3 -->
          <div class="d-transition-tfa">
            <img width="80"  src="http://i73.servimg.com/u/f73/15/62/82/10/quinta10.png" alt="Quintana" />
            <div class="d-block_transition"> 
              <h3>Quintana</h3>
              <span>
                Pour les fans de ce couple explosif à l'écran<br />             
                <a href="http://faberritana.superforum.fr/g4-quintana">Lien vers le groupe</a>
              </span>
            </div>
          </div> 
       
          <br />       
          <br style="clear:both;" />
          <!-- INFOBULLE GROUPE 4 -->
          <div class="d-transition-tfa">
            <img width="80"  src="http://i73.servimg.com/u/f73/15/62/82/10/pezber10.png" alt="PezBerry" />
            <div class="d-block_transition"> 
              <h3>PezBerry</h3>
              <span>
                Pour les fans de ces deux brunes<br />             
                <a href="http://faberritana.superforum.fr/g7-pezberry">Lien vers le groupe</a>
              </span>
            </div>
          </div>
          <!-- INFOBULLE GROUPE 5 -->
          <div class="d-transition-tfa">
            <img width="80" src="http://i73.servimg.com/u/f73/15/62/82/10/faberr11.png" alt="Faberritana" />
            <div class="d-block_transition"> 
              <h3>Faberritana</h3>
              <span>
                Pour les fans ne souhaitant pas choisir, les neutres<br />             
                <a href="http://faberritana.superforum.fr/g3-faberritana">Lien vers le groupe</a>
              </span>
            </div>
          </div>   
          <!-- INFOBULLE GROUPE 6 -->
          <div class="d-transition-tfa">
            <img width="80" src="http://i73.servimg.com/u/f73/15/62/82/10/karley10.png" alt="Karley" />
            <div class="d-block_transition"> 
              <h3>Karley</h3>
              <span>
                Pour ce nouveau couple hot en Fanfictions<br />             
                <a href="lien-groupe">http://faberritana.superforum.fr/g8-karley</a>
              </span>
            </div>
          </div> 
          <!-- FIN INFOBULLES AVEC TRANSITIONS DES GROUPES -->
          <img style="width: 100px; position: absolute; right: -60px; bottom: -60px;" src="http://ageheureux.a.g.pic.centerblog.net/mouton-noir.gif" alt="" />       
          <p style="10px Arial;"> Et bien d'autres possibilités encore sur : <a href="http://faberritana.superforum.fr/groups"> <stromg>▶</stromg></a></p>       
          <div style="clear:both;"></div>
        </div>     
      </div>   
    </div> 
 
    <!-- DERNIERS CONNECTES --> 
    <div class="tfa_d-container3"> 
      <div id="bloc_bas_qeel">
          <div id="derniers_connectes">
            <div id="conect-content">
            <span id="TFAd5">{LOGGED_IN_USER_LIST}</span>
            <script type="text/javascript">
              document.getElementById('TFAd5').innerHTML=document.getElementById('TFAd5').innerHTML.replace(/Utilisateurs enregistrés/,"Les fans parcourant le forum :");</script>
            <table id="TFAd6">{L_CONNECTED_MEMBERS}                         
              <script type="text/javascript">document.getElementById('TFAd6').innerHTML=document.getElementById('TFAd6').innerHTML.replace(/Membres connectés/,"Les derniers fans à s'être connectés :  ");</script>
            </table>
            </div>       
          </div>
        <span id="open_derniers_connectes">Voir les derniers connectés <stromg>▼</stromg></span>     
      </div> 
    </div>
 
    <!-- ANNIVERSAIRES --> 
    <div class="tfa_d-container4">
      <div class="bloc_bas_qeel">
          <div id="d_anniversaires">
            <div id="anniv-content">
              <table>
                {L_WHOSBIRTHDAY_TODAY}
                <span id="TFA2p0">
                  {L_WHOSBIRTHDAY_WEEK}
                  <script type="text/javascript">document.getElementById('TFA2p0').parentNode.innerHTML=document.getElementById('TFA2p0').parentNode.innerHTML.replace(/Membres fêtant leur anniversaire aujourd'hui/,"Les fans fêtant leur anniversaire aujourd'hui sont").replace(/Membres fêtant leur anniversaire dans les ([0-9]+) prochains jours/,"Fans fêtant leur anniversaire dans les 7 prochains jours").replace(/Aucun membre ne fête son anniversaire aujourd'hui/,"Aucun fan ne fête son anniversaire aujourd'hui").replace(/Aucun membre ne fête son anniversaire dans les ([0-9]+) prochains jours/,"Aucun fan ne fête son anniversaire dans les 7 prochains jours");</script>
                </span>
              </table>
            </div>
          </div>
        <span id="open_anniversaires">Voir les anniversaires <stromg>▼</stromg></span>
      </div>
    </div> 
    <div style="clear:both;"></div>
 
      <img width="100" src="http://sunday-evenings.s.u.pic.centerblog.net/a90194fe.png" style="position: absolute; bottom: 100px; left: -42px;" alt="" /> 
   
    <!-- BLOC INFORMATIONS -->
    <div id="tfa_d-bas">   
      <div class="d-content">
        <h2>Informations</h2>         
        <div class="in_d-content">       
            <!-- BLOC TRANSITION DE GAUCHE -->
            <div id="bas_d-gauche">
              <img height="90" src="http://i45.servimg.com/u/f45/11/95/30/70/p513.png" style="position: absolute; right: 0; top: 4px;" alt="" />
              <div id="bloc_part_qeel">   
              <ul>
                <li>
                  <a style="margin-top: 3px;" class="info_link" href="http://faberritana.superforum.fr/f1-le-secretariat">Futur fan ?</a>
                  <div>
                    <p>
                      Tu souhaites devenir l'un de nos fans ?
                      Il suffit de te présenter : <a href="http://faberritana.superforum.fr/f1-le-secretariat"> Secrétariat </a>,
                      après avoir lu le réglement pour voir le forum s'ouvrir à toi.                   
                    </p>
                  </div>
                </li>

                <li>
                  <a class="info_link" href="http://faberritana.superforum.fr/f48-espace-formation">Formations</a>
                  <div>
                  <p>
                    Les formations sont là pour aider auteur et lecteur à s'améliorer, n'oublie pas de t'inscrire pour profiter de tous les avantages qu'offre le forum. 
                  </p>
                  </div>
                </li>

                <li>
                  <a class="info_link" href="http://faberritana.superforum.fr/t1624-on-recherche-pour-faire-fonctionner-le-forum">Postuler</a>
                  <div>
                  <p>
                    Tu souhaites aider la communauté ? Tu penses avoir l'âme d'un dirigeant ?
                    Fais ta demande ici : <a href="http://faberritana.superforum.fr/t1624-on-recherche-pour-faire-fonctionner-le-forum"> Postuler</a>
                  </p>
                  </div>
                </li>
              </ul>     
              </div>
            </div>
            <!-- BLOC DE DROITE -->
            <div id="bas_d-droite">
              <p>
                Le forum a été créé le 3 juin 2012.             
                Toute reproduction totale ou partielle est totalement interdite.
                Merci de respecter le travail d'autrui.                   
                Les histoires appartiennent aux membres, et nous remercions
                les forums d'entraides, entre autres Thèmes FA.
                <img style="width: 140px; position: absolute; right: -60px; bottom: 0;" src="http://i45.servimg.com/u/f45/11/95/30/70/s10.png" alt="" />
              </p>           
            </div>         
            <div style="clear:both;"></div>   
                         
        </div>     
      </div>   
    </div>
    <img width="120" src="http://lafannette.l.a.pic.centerblog.net/bb6jdogv.gif" style="position: absolute; bottom: -60px; left: 170px;" alt="" />
  </div>
</div>
 
</div>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
   <tr>
      <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NEW_POSTS}</span></td>
      <td></td>
      <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
      <td>&nbsp;&nbsp;</td>
      <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
      <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
   </tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
   appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true,
   oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

Index Box :
Spoiler:
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <!-- END switch_user_logged_in -->
      </td>
   </tr>
</table><br />
    <!-- BEGIN catrow -->
    <!-- BEGIN tablehead -->
    <table class="cateforum" width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr>       
        <td>
      <!-- DEBUT TITRE CATEGORIE -->
          <div style="vertical-align: middle;" class="cate_titre">{catrow.tablehead.L_FORUM}</div>
          <!-- FIN TITRE CATEGORIE -->   
          <div style="clear: both;"></div>
        </td>
      </tr>
    <!-- END tablehead -->
      <!-- BEGIN forumrow -->
      <tr>
        <td>  <!-- DEBUT ICONE NEW/NO-NEW/CLOS -->
              <div class="icone_cat"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
              <!-- FIN ICONE NEW/NO-NEW/CLOS -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="38" align="center" >                                                           
                    <tr >                                                     
                      <td align="center" height="38" class="forumtit">                                                           
                        <h{catrow.forumrow.LEVEL} class="hierarchy">                         
                        <span class="forumlink">                 
                            <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />             
                        </span>                     
                      </h{catrow.forumrow.LEVEL}>                                   
                      </td>     
                
                      <td class="text-tfa_cell" align="center" height="30" colspan="2"> 
                        <span class="gensmall">contient &nbsp
                          <span style="color: #ECBC6B; font-weight: bold;">{catrow.forumrow.POSTS}</span> messages dans &nbsp
                          <span style="color: #ECBC6B; font-weight: bold;">{catrow.forumrow.TOPICS}</span> sujets.</span>                   
                    </td>                 
                    </tr>
  <tr>
            <td width="75%" class="cell_tfa_des">                                       
              <div class="la_description">
                  <div>                     
                    <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>                                                                               
                  </div> 
<div> <span class="sousforum">
                      {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}   
                      </span> </div>             
                <div class="modo" style="width:100%;">           
                    <span class="gensmall">   
                    <!-- BEGIN switch_moderators_links -->           
                      {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}   
                      <!-- END switch_moderators_links -->         
                    </span>                             
                </div>                         
              </div>     
    </td> <td width="2%"></td>
        <td  width="23%" style="min-width: 160px; vertical-align: bottom;">
              <div class="dernier_messages"> 
                <span class="gensmall">{catrow.forumrow.LAST_POST}</span>               
              </div>       
            </td>
               </tr></table>
      </td>
    </tr>
    <!-- END forumrow -->
    <!-- BEGIN catfoot -->
    <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
    </tr>
    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
    </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->    <link href='http://fonts.googleapis.com/css?family=Carrois+Gothic+SC|Vampiro+One' rel='stylesheet' type='text/css'>

Overall Footer End :
Spoiler:
Code:
<!-- BEGIN html_validation -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table>
   <tr>
      <td>
         <div>
            <div>
               <div>
<!-- END html_validation -->
               </div>
            </div>
            <!-- BEGIN switch_footer_links -->
            <div align="center">
               <div class="gen">
                  <!-- BEGIN footer_link -->
                     <!-- BEGIN switch_separator -->&nbsp;|&nbsp;<!-- END switch_separator -->
                     <a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
                  <!-- END footer_link -->
               </div>
            </div>
            <!-- END switch_footer_links -->
         </div>
         {PROTECT_FOOTER}
      </td>
   </tr>
</table>
</div>
<div id="fd_bas"></div>
<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({appId: '{switch_facebook_login.FACEBOOK_APP_ID}', status: true, cookie: true, xfbml: true, oauth: true});
//]]>
</script>
<!-- END switch_facebook_login -->

<!-- BEGIN switch_facebook_logout_TMP -->
<script type="text/javascript">
//<![CDATA[
FB.Event.subscribe('auth.logout', function(response) {
   if ($('a#logout'))
   {
      var lien_redir = $('a#logout').attr('href');

      if ($('a#logout').attr('href') && $('a#logout').attr('href') != '')
      {
         document.location.href = 'http://{switch_facebook_logout.SERVER_NAME}/' + lien_redir;
      }
   }
});

$(document).ready( function() {
   $('a#logout').click( function() {
      FB.logout();
   } );
});
//]]>
</script>
<!-- END switch_facebook_logout_TMP -->

<script type="text/javascript">
//<![CDATA[
   fa_endpage();
//]]>
</script>

</body>
</html>

Overall Header :
Spoiler:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
          <link href='http://fonts.googleapis.com/css?family=Leckerli+One|Clicker+Script|Mystery+Quest' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Miniver' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Lovers+Quarrel' rel='stylesheet' type='text/css'>
  <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {
         var w_cont = $('#fa_ticker_container').width();

         if (w_cont > 0)
         {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">//<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         if(pm != null) { pm.focus(); }
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         $(document).ready(function() {            
            Ticker.start({
               height : {switch_ticker.HEIGHT},
               spacing : {switch_ticker.SPACING},
               speed : {switch_ticker.SPEED},
               direction : '{switch_ticker.DIRECTION}',
               pause : {switch_ticker.STOP_TIME}
            });
         });
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}
  <div id="menuHaut"><div class="wrapper"><div id="adage"><p>«Who Run The World, Quelques fanfictions conjuguées au féminin.»</p>
</div><div id="navHaut"><a href="http://whoruntheworld.superforum.fr/h16-magazine"><img alt="Plan du Site" src="http://i39.servimg.com/u/f39/17/56/20/09/coolte24.png"></a>
<a href="http://whoruntheworld.superforum.fr/f4-la-boite-aux-lettres"><img alt="News" src="http://i39.servimg.com/u/f39/17/56/20/09/coolte22.png"></a>
<a href="http://whoruntheworld.superforum.fr/c3-storybrooke"><img alt="Tutoriels" src="http://i39.servimg.com/u/f39/17/56/20/09/coolte25.png"></a>
<a href="http://whoruntheworld.superforum.fr/c7-auditorium"><img alt="Fanfictions" src="http://i39.servimg.com/u/f39/17/56/20/09/coolte27.png"></a>
<a href="/forum"><img alt="Forum" src="http://i39.servimg.com/u/f39/17/56/20/09/forum_11.png"></a></div></div></div>
  <div id="fd_haut"><div id="header"><div onclick="document.location.href='http://whoruntheworld.superforum.fr/'" id="illu"><!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center --></div>
<div id="hg"><blockquote><p>Who Run The World est une communauté qui s'intéresse aux fanfictions autour de couples lesbiennes (ou bi).
Dans ce but, nous organisons aussi des concours, préparons des "tutoriels", donnons des conseils, ... pour se lancer dans le monde merveilleux des fanfictions.</p><p id="sign">Le Staff</p>
</blockquote><div><div id="rs"><p>Rejoignez-nous sur :</p>
<div id="logoRs"><a href="http://whoruntheworld.superforum.fr/chatbox/index.forum"><img alt="Rejoins-nous sur le t'chat" src="http://i39.servimg.com/u/f39/17/56/20/09/coolte30.png"></a>
<a href="http://www.facebook.com/"><img alt="Rejoins-nous sur Facebook" src="http://i39.servimg.com/u/f39/17/56/20/09/coolte28.png"></a>
<a href="https://plus.google.com/102858778006234290334/posts/FhDAtbRd6A6"><img alt="Suis-nous sur Google +" src="http://i39.servimg.com/u/f39/17/56/20/09/coolte29.png"></a></div></div><div id="infoWrw"><p>Ouverture du forum le 03/06/2012<br>Pour nous contacter : <a href="mailto:vandoorenlaura@gmail.com">whoruntheworld@gmail.com</a>
<br></p></div></div></div></div></div>
<div id="fd_milieu">
   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>

            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</body>
</html>
<!-- END html_validation -->

J'en ai d'autres aussi mais je pense que le problème doit provenir d'un de ceux-ci.

Doupi
**

Messages : 56
Inscrit(e) le : 24/09/2012

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

Résolu Re: Forum décalé dès qu'il y a une résolution différente de 1400x1050

Message par Doupi le Mar 24 Juin 2014 - 17:40

Up personne pour me donner une piste sur ce qui pourrait ne pas aller ? Merci

Doupi
**

Messages : 56
Inscrit(e) le : 24/09/2012

http://whoruntheworld.superforum.fr/forum
Doupi a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Forum décalé dès qu'il y a une résolution différente de 1400x1050

Message par AenigmA le Mar 24 Juin 2014 - 18:20

Bonsoir,
Ton problème est cette partie qui doit être mal codée

Spoiler:
Code:
<div id="header"><div id="illu" onclick="document.location.href='http://whoruntheworld.superforum.fr/'"><a href="/"><img vspace="1" border="0" alt="Forum test" id="i_logo" src="http://i39.servimg.com/u/f39/17/56/20/09/propos10.png"></a><br></div><div id="hg"><blockquote><p>Who Run The World est une communauté qui s'intéresse aux fanfictions autour de couples lesbiennes (ou bi). Dans ce but, nous organisons aussi des concours, préparons des "tutoriels", donnons des conseils, ... pour se lancer dans le monde merveilleux des fanfictions.</p><p id="sign">Le Staff</p></blockquote><div><div id="rs"><p>Rejoignez-nous sur :</p><div id="logoRs"><a href="http://whoruntheworld.superforum.fr/chatbox/index.forum"><img src="http://i39.servimg.com/u/f39/17/56/20/09/coolte30.png" alt="Rejoins-nous sur le t'chat"></a><a href="http://www.facebook.com/"><img src="http://i39.servimg.com/u/f39/17/56/20/09/coolte28.png" alt="Rejoins-nous sur Facebook"></a><a href="https://plus.google.com/102858778006234290334/posts/FhDAtbRd6A6"><img src="http://i39.servimg.com/u/f39/17/56/20/09/coolte29.png" alt="Suis-nous sur Google +"></a></div></div><div id="infoWrw"><p>Ouverture du forum le 03/06/2012<br>Pour nous contacter : <a href="mailto:********@gmail.com">*******@gmail.com</a><br></p></div></div></div></div>

Si tu l'enlèves provisoirement tu verras que c'est correct le reste.
Code donc par table cette partie
Ou prends exemple du qeel de tfa que tu utilises pour coder en div, ça te fera un point de repère.

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forum décalé dès qu'il y a une résolution différente de 1400x1050

Message par Doupi le Mar 24 Juin 2014 - 19:22

Merci pour cette piste, je vais m'y mettre tout de suite. Very Happy

Doupi
**

Messages : 56
Inscrit(e) le : 24/09/2012

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

Résolu Re: Forum décalé dès qu'il y a une résolution différente de 1400x1050

Message par Doupi le Ven 27 Juin 2014 - 10:51

J'ai essayé et cela marche bien pour la première partie mais à partir de l'illustration, cela se complique. Personne pour me donner un coup de pouce ?

Voici le code modifié :
Code:
  <table id="menuHaut">
  <tr class="wrapper">
  <td id="adage">«Who Run The World, Quelques fanfictions conjuguées au féminin.»</td>
<td id="navHaut">
<a href="http://whoruntheworld.superforum.fr/h16-magazine"><img alt="Plan du Site" src="http://i39.servimg.com/u/f39/17/56/20/09/coolte24.png" /></a>
<a href="http://whoruntheworld.superforum.fr/f4-la-boite-aux-lettres"><img alt="News" src="http://i39.servimg.com/u/f39/17/56/20/09/coolte22.png" /></a>
<a href="http://whoruntheworld.superforum.fr/c3-storybrooke"><img alt="Tutoriels" src="http://i39.servimg.com/u/f39/17/56/20/09/coolte25.png" /></a>
<a href="http://whoruntheworld.superforum.fr/c7-auditorium"><img alt="Fanfictions" src="http://i39.servimg.com/u/f39/17/56/20/09/coolte27.png" /></a>
<a href="/forum"><img alt="Forum" src="http://i39.servimg.com/u/f39/17/56/20/09/forum_11.png" /></a></td>
</tr></table>
  <div id="fd_haut">
  <table id="header"><tr>
  <td onclick="document.location.href='http://whoruntheworld.superforum.fr/'" id="illu" rowspan="2"><!-- BEGIN switch_logo_left -->
                  <div><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></div>
                  <!-- END switch_logo_left -->
                  <div align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center --></div></td>
<td id="hg" colspan="2">
<p>Who Run The World est une communauté qui s'intéresse aux fanfictions autour de couples lesbiennes (ou bi).
Dans ce but, nous organisons aussi des concours, préparons des "tutoriels", donnons des conseils, ... pour se lancer dans le monde merveilleux des fanfictions.</p><p id="sign">Le Staff</p>
</td></tr>
<tr>
<td id="rs"><p>Rejoignez-nous sur :</p>
<div id="logoRs"><a href="http://whoruntheworld.superforum.fr/chatbox/index.forum"><img alt="Rejoins-nous sur le t'chat" src="http://i39.servimg.com/u/f39/17/56/20/09/coolte30.png" /></a>
<a href="http://www.facebook.com/"><img alt="Rejoins-nous sur Facebook" src="http://i39.servimg.com/u/f39/17/56/20/09/coolte28.png" /></a>
<a href="https://plus.google.com/102858778006234290334/posts/FhDAtbRd6A6"><img alt="Suis-nous sur Google +" src="http://i39.servimg.com/u/f39/17/56/20/09/coolte29.png" /></a>
</div>
</td>
<td id="infoWrw"><p>Ouverture du forum le 03/06/2012<br />Pour nous contacter : <a href="mailto:vandoorenlaura@gmail.com">whoruntheworld@gmail.com</a>
<br /></p></td>
</tr>
</table>
</div>
Edit: et le CSS :
Code:
/***** Entête ****/

table#header {
    height: 250px;
  margin:auto;
    padding-bottom: 10px;
    width: 800px;
}
table#header p.maj {
    font-size: 8pt;
}
table#header td#illu {
    height: 250px;
    width: 450px;
}
table#header td#hg {
    font-size: 10pt;
    font-style: italic;
    height: 250px;
    width: 340px;
}

table#header td#hg p {
    text-align: left;
}
table#header td#hg p#sign {
    margin: 4px 40px 0 0;
    text-align: right;
}

table#header td#rs {
    width: 150px;
}
table#header td#rs div#logoRs {
    text-align: right;
    width: 100%;
}
table#header td#rs div#logoRs img {
    height: 32px;
    margin: 0 5px;
    width: 32px;
}
table#header td#infoWrw {
    font-size: 10pt;
    font-style: normal;
    width: 180px;
}

/**** End Entête ****/

J'ai maintenant la barre de navigation qui se superpose au reste.
Merci

Doupi
**

Messages : 56
Inscrit(e) le : 24/09/2012

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

Résolu Re: Forum décalé dès qu'il y a une résolution différente de 1400x1050

Message par AenigmA le Ven 27 Juin 2014 - 11:55

Bonjour,
Je pense que tu y arrives là, fais attention aux padding et margin left et right que l'on oublie souvent pour le total Smile


AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA 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