Mise en page des templates qui saute

[Etilya]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis ce matin, le 06 juin 2017
Lien du forum : http://monde-etilya.forumactif.org/

Description du problème

Bonjour !

Tout d'abord merci de vous intéresser à mon problème. Je vais essayer d'être claire et concise.
Ce matin je mettais en page mon forum test pour un projet de design. Tout allait bien jusqu'à ce que... la mise en page fasse des siennes. Je ne comprends absoluement pas pourquoi, vu que je n'ai pas touché au CSS, alors qu'il semble en fait ne plus compter pour le QEEL et pour le bandeau latéral (et l'id #right pour les derniers sujets), ainsi que pour .bodyline, qui a repris sa couleur d'origine, alors que je l'avais mise en blanc transparent. owo

Au début j'avais ça :


et je me retrouve avec l'image ci-dessus, et pour vous illustrer le haut de la page actuel :


Je vous donne mon css : (je conserve le css de précédents codes, celui que j'utilise actuellement c'est CODE DU DERNIER ORDRE, + quelques modifs des balises de forumactif)

Code:

/* IMAGE DE FOND DU FORUM*/
body{
  background: url('https://img15.hostingpics.net/pics/351023Bannire5.png'), url('https://img4.hostingpics.net/pics/511389blackthread.png');
  background-repeat: no-repeat, repeat;
  background-position:top center, center center;
}
/* FIN */

/*FIN*/

.menu_toolbar{
text-align:center;
position:fixed;
background-color:#37363D;
width:100%;
z-index:10;
padding:5px;
top:0px;
left:0px;
border-bottom: solid 2px #212025;
  height: 30px;
}

.menu_toolbar a
{
font-family: 'Overlock SC', cursive;
font-size:15pt;
}

 
.forumline{
  width: 100%;
  margin: auto;
 
}

table.bodylinewidth {
position: relative;
top: -15px;
}

.bodyline {/* cadre intérieur du forum */
border-right: 0px solid #000000;
border-bottom: 0px solid #000000;
border-left: 0px solid #000000;
  padding: 10px;
  background-color: rgba(255,255,255,.3)!important;
  margin-bottom:-20px;
}

.row3Right
{
border: none !important;
}
.thHead
{
border: none !important;
}
.thCornerL, .thCornerR, .thTop
{
border: none !important;
}
.thLeft, .thRight
{
border-left: none !important;
border-right: none !important;
}
.catLeft, .catRight
{
border: none! important;
}
.catHead
{
border: none !important;
}
.catBottom
{
border: none !important;
}

/*Liens*/
a { text-decoration: none; }

-RETRAIT : ce CSS pose de nombreux problèmes - { display: none; }

a.mainmenu{
padding-left: 2px;
padding-right: 2px;
  margin-bottom: 15px;
background-color: #oooooo;
text-decoration: none;
text-align: center;
color:  #ffffff;
}
a.mainmenu:hover{
  color: #677178;
}

.mainmenu img {display: none;}

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


/* MISE EN PAGE DES POSTS */
.postbody{
  text-align:justify;
  padding: 10px;
  margin: 5px;
}

textarea, .textarea.post, input.post, .liteoption, .mainoption{/*liteoption=bouton prévisualisation, mainoption=envoyer*/
-moz-border-radius:0px;
  border-radius: 0px;
-webkit-border-radius: 0px;
}

.input.post, .textarea.post, .liteoption, .mainoption{
  font-family: Overlock SC;
  border: 1px solid black;
}

.liteoption:hover, .mainoption:hover{
  background: white;
  color:#1a1a1a;
}

.button2{
-moz-border-radius:0px;
  border-radius: 0px;
-webkit-border-radius: 0px;
}

.code {
background-color: #a98c51; /* couleur noire du fond */
border-radius: 0px; /* tous les côtés sont arrondis */
-moz-border-radius: 0px; /* tous les côtés sont arrondis */
-webkit-border-radius: 0px; /* tous les côtés sont arrondis */
color: #000000; /* couleur du texte blanche */
padding: 5px;
}

.selectCode {float:right; text-transform: uppercase; cursor:pointer;}

.quote {
background-color: #a98c51; /* couleur noire du fond */
border-radius: 0px; /* tous les côtés sont arrondis */
-moz-border-radius: 0px; /* tous les côtés sont arrondis */
-webkit-border-radius: 0px; /* tous les côtés sont arrondis */
color: #000000; /* couleur du texte blanche */
padding: 5px;
}

.spoiler_closed{
background-color: #a98c51; /* couleur noire du fond */
border-radius: 0px; /* tous les côtés sont arrondis */
-moz-border-radius: 0px; /* tous les côtés sont arrondis */
-webkit-border-radius: 0px; /* tous les côtés sont arrondis */
color: #000000; /* couleur du texte blanche */
padding: 3px;
}

.spoiler_content{
background-color: #a98c51; /* couleur noire du fond */
border-radius: 0px; /* tous les côtés sont arrondis */
-moz-border-radius: 0px; /* tous les côtés sont arrondis */
-webkit-border-radius: 0px; /* tous les côtés sont arrondis */
color: #000000; /* couleur du texte blanche */
padding: 5px;
}
/* FIN DE LA MISE EN PAGE DES POSTS */



/***************************************************************************************************************************************
***************************************************** CODES IMITHEOS ******************************************************************/

/************************************************************ CATEGORIES BY KURU *****************************************************/
.cat_cadre {
  color: #5e435c;
  width: 750px;
  background: #dccdc3;
  position: relative;
  height: 200px;
  margin: auto;
}

.vavabox {
  margin-left: -10px;
  width: 120px;
  height: 192px;
  background: #ffffff;
  box-shadow: 0px 0px 4px dimgrey;
  position: absolute;
  top: 4px;
}

.vavabox img{
  width:120px;
  height: 192px;
}

.vava {
  transition: 0.5s ease all;
  width: 120px;
  opacity: 0.6;
  -webkit-filter: grayscale(1);
  filter: grayscale(1)
}

.vavabox:hover .vava {
  opacity: 1;
  -webkit-filter: grayscale(0);
  filter: grayscale(0)
}

.titres_forums {
  padding-left: 20px;
  width: 400px;
  height: 40px;
  text-align: left;
  top: 5px;
  left: 125px;
  position: absolute;
  z-index:5;
}

.titres_forums > a{
  color: #db3678 !important;
  font-size: 30px;
  font-family:'Amatic SC', cursive;
  font-weight: bold;
  text-decoration: none;
}

.ssfofo_cadre {
  position: absolute;
  left: 50px;
  margin-left: 20px;
  height: 160px;
  width: 400px;
  top: 10px;
}

.ss-fofo {
  background: #d7727c;
  height: 150px;
  width: 200px;
  transition: all ease 0.5s;
  position: absolute;
  left: 70px;
  z-index: 1;
  margin-top: 35px;
}

.ss-fofo > img {
  margin-left: -10px;
 
}

.ss-fofo:hover {
  width: 300px
}

.ss-fofos {
  width: 90px;
  padding-top: 10px;
  padding-bottom: 10px;
  height: 130px;
  overflow: hidden;
  font-size: 10px;
  line-height: 95%;
  font-family: georgia;
  position: absolute;
  margin-top: -150px;
  margin-left: 100px;
  transition: all ease 0.5s
}

.ss-fofo > img+div+img {
  float: right;
  margin-right: -10px;
}

.ss-fofo:hover .ss-fofos{
  margin-left: 210px;
}

.ss-fofos_slide{
  margin-left: 210PX;
}

.descri {
    font-size: 11px;
    height: 150px;
    left: 0;
    line-height: 95%;
    margin-left: 170px;
    position: absolute;
    right: 220px;
    text-align: justify;
    top: 35px;
    width: 310px;
}

.img-descr {
  height: 148px;
  width: 198px;
  box-shadow: 0px 0px 4px dimgrey;
  border: 1px solid dimgrey;
  position: absolute;
  left: -100px;
  top: 0px;
  z-index: 3;
  transition: all ease 0.5s
}

.ss-fofo:hover + .descri .img-descr, .img-descr:hover{
  -webkit-filter: saturate(2);
  filter: saturate(2);
}

.texte {
  position: absolute;
  width: 190px;
  height: 150px;
  right: 0px;
  overflow: auto;
  z-index:0;
 
}

.cat_stats {
  height: 150px;
  width: 190px;
  background: url('http://i.imgur.com/xyAi3eF.png');
  position: absolute;
  right: 5px;
  top: 35px;
}

.cat_stats > div {
  text-align: center;
  font-size: 11px;
  line-height: 95%;
  height: 100px;
  margin-top: 0px;
  width: 150px;
}

.cat_stats > div > img{
  margin-top: 10px;
  margin-bottom: 5px;
}

/****************************************************** CATEGORIES BY KURU - END *****************************************************/


/*************************************************** QEEL BY KURU ********************************************************************/
.nbr_posts {
  width: 150px;
  height: 100px;
  background: #d7727c;
  font-family: georgia;
  text-transform: uppercase;
  text-align: center;
  font-size: 20px;
  line-height: 95%;
  display: table-cell;
  vertical-align: middle;
}

.groupe1 {
  width: 180px;
  height: 40px;
  font-family: 'Amatic SC', cursive;
  font-size: 60px;
  text-align: center;
  line-height: 45px;
  color: #DFBB75;
  Otext-shadow: 1px 1px 0px white;
  letter-spacing: 22px;
}

.groupe2 {
  width: 180px;
  height: 40px;
  font-family: 'Amatic SC', cursive;
  font-size: 60px;
  text-align: center;
  line-height: 45px;
  color: #8dbeca;
  Otext-shadow: 1px 1px 0px white;
}

.groupe3 {
  width: 180px;
  height: 40px;
  font-family: 'Amatic SC', cursive;
  font-size: 60px;
  text-align: center;
  line-height: 45px;
  color: #C71585;
  Otext-shadow: 1px 1px 0px white;
  letter-spacing: -2px;
}

.groupe4 {
  width: 180px;
  height: 40px;
  font-family: 'Amatic SC', cursive;
  font-size: 60px;
  text-align: center;
  line-height: 45px;
  color: #459E9E;
  Otext-shadow: 1px 1px 0px white;
  letter-spacing: 2px;
}

.imgqeel {
  height: 100px;
  width: 150px;
  box-shadow: 0px 0px 4px dimgrey;
  border: 1px solid dimgrey;
  margin-left: 10px;
  position: absolute;
  z-index: 3;
  transition: all ease 0.5s;
}

.imgqeel:hover {
  -webkit-filter: saturate(2);
  filter: saturate(2);
}

.eff1 {
  height: 90px;
  width: 180px;
  background: #e2dedb;
  font-family: georgia;
  text-transform: uppercase;
  text-align: center;
  font-size: 60px;
  line-height: 95%;
  margin-top: 220px;
  position: relative;
  transform: scale(0);
  transition: all ease 0.5s;
  color: #5e435c;
  letter-spacing: 0px;
  padding-top: 10px;
}

.groupe1:hover .eff1 {
  transform: scale(1);
}

.eff2 {
  height: 90px;
  width: 180px;
  background: #e2dedb;
  font-family: georgia;
  text-transform: uppercase;
  text-align: center;
  font-size: 60px;
  line-height: 95%;
  margin-top: 160px;
  position: relative;
  transform: scale(0);
  transition: all ease 0.5s;
  color: #5e435c;
  letter-spacing: 0px;
  padding-top: 10px;
}

.groupe2:hover .eff2 {
  transform: scale(1);
}

.eff3 {
  height: 90px;
  width: 180px;
  background: #e2dedb;
  font-family: georgia;
  text-transform: uppercase;
  text-align: center;
  font-size: 60px;
  line-height: 95%;
  margin-top: 100px;
  position: relative;
  transform: scale(0);
  transition: all ease 0.5s;
  color: #5e435c;
  letter-spacing: 0px;
  padding-top: 10px;
}

.groupe3:hover .eff3 {
  transform: scale(1);
}

.eff4 {
  height: 90px;
  width: 180px;
  background: #e2dedb;
  font-family: georgia;
  text-transform: uppercase;
  text-align: center;
  font-size: 60px;
  line-height: 95%;
  margin-top: 40px;
  position: relative;
  transform: scale(0);
  transition: all ease 0.5s;
  color: #5e435c;
  letter-spacing: 0px;
  padding-top: 10px;
}

.groupe4:hover .eff4 {
  transform: scale(1);
}

.connexions_48h td.row1{
  background: none;
}

.anniv td.row1{
  background: none;
}

/***************************************************** QEEL BY KURU - FIN ***********************************************************/

/*************************************************************************************************************************************
****************************************** CODE IMITHEOS - FIN **********************************************************************/

/******************************************** COMMANDE LG - CATEGORIES BY ETILYA ****************************************************/
.ecat_titre{/* mise en forme des titres des catégories */
  text-align: center;
  margin: auto;
  margin-top: 25px;
  font: 30px 'Oswald', sans-serif;
  text-transform: uppercase;
  color: #4f4f4f;
}

.ecat_titre > div{/* petite barre horizontale en dessous du titre des catégories */
  border-top: 1px solid #D9736F;
  margin: auto;
  width: 200px;
  margin-bottom: 15px;
}

.ecat_titre > span {
  color: #D9736F;
}

.ecat_cadre{/* cadre des catégories */
  position: relative;
  margin: auto;
  width: 900px;
  height: 150px;
  margin-bottom: 10px;
  background: #E3E4E5;
}

.ecat_descri{/* cadre de la partie "description" */
  position: absolute;
  top: 20px;
  left: 25px;
  width: 550px;
}

.ecat_descri div:first-child{/* cadre des image New/No-New/Lock */
  position: absolute;
  width: 200px;
  height: 110px;
  background: #84A1BF;
}

.ecat_descri div:last-child{/* Texte de la description */
  position: absolute;
  right: 0px;
  width: 300px;
  height:110px;
  padding: 5px;
  box-sizing: border-box;
  border: 1px solid #D9736F;
  overflow: auto;
  text-align: justify;
  font-size: 13px;
}

.ecat_fofo{/* positionnement des forums */
  position: absolute;
  right: 0px;
  top: 0px;
}

.ecat_fofo div:first-child{/* Cadre des titres et statistiques des forums */
  position: absolute;
  right: 15px;
  top: 15px;
  width: 300px;
  box-sizing: border-box;
  text-align: center;
  font-size: 13px;
}

.ecat_fofo div div:first-child{/* Positionnement des nombres de messages et sujets */
  position: absolute;
  left:10px;
  top: 10px;
  width: 150px;
  font-size: 13px;
  z-index: 0px;
}

.ecat_titre-fofo{/* Titres des forums */
  text-transform: uppercase;
  color: #D9736F;
  font: 20px 'Oswald', sans-serif;
  border-bottom: 1px solid #D9736F;
  text-align: right;
  z-index: 1;
}

.ecat_ss-fofos{/* positionnement des sous-forums */
  position: absolute;
  bottom: 25px;
  right: 15px;
  width: 290px;
  font-size: 11px;
  color: #D9736F;
  z-index: 0px;
}
/******************************* COMMANDE LG - CATEGORIES BY ETILYA- FIN ***********************************************************/

/********************************* COMMANDE LG - QEEL BY ETILYA ***********************************************************************/
.eqeel_cadre{/*cadre des catégories */
  width: 900px;
  height: 260px;
  margin: auto;
  margin-top: 50px;
  position: relative;
  background: #E3E4E5;
}

.eqeel_nb{/* nombre de messages et nombres de membres */
  width: 100px;
  height: 100px;
  background: #D6625D;
  color: #fff;
  margin-bottom: 5px;
  box-sizing: border-box;
  padding: 25px 15px;
  text-align: center;
}

.eqeel_stats{/* Cadre des statistiques */
  position: absolute;
  top: 0px;
  left: 110px;
}

.eqeel_stats > span, .eqeel_groupes, .eqeel_new{/* Mise en forme des titres */
  display: block;
  text-transform: uppercase;
  font: 1.5em 'Oswald', sans-serif;
}

#details{/* Titre " x Connectés dont... " */
  color: #D9736F;
}

#online{/* Titre "Utilisateur enregistrés" */
  color: #4F4F4F;
  border-right: 1px solid #D9736F;
  width: 270px;
}

#last_48h{/* Titre "48h dernières heures */
  color: #4F4F4F;
  border-right: 1px solid #D9736F;
  width: 270px;
  position: absolute;
  top: 34px;
  left: 280px;
}

.eqeel_stats div{/* cadre des listes de membre */
  border-right: 1px solid #D9736F;
  width: 265px;
  height: 140px;
  overflow: auto;
  position: absolute;
  text-align: justify;
  padding-right: 5px;
  word-wrap: break-word;
}

.en_ligne{/* positionnement des membres en ligne */
  font-size: 11px;
  padding-top: 7px;
}

.eqeel_stats > div+span+div{/* positionnement de la liste des membres 48h */
  left: 280px;
}

.eqeel_new{/* Positionnement du dernier membre enregistré */
  position: absolute;
  right: 30px;
  top: 80px;
  width: 170px;
  text-align: center;
  color: #4F4F4F;
}

.eqeel_groupes{/* positionnement des groupes */
  position: absolute;
  width: 900px;
  color:#D9736F;
  text-align: center;
  bottom: 0px;
}

#gp_1{
  color: #62A0D6;
}

#gp_2{
  color: #63D66D;
}

#gp_3{
  color: #C762D6;
}

#gp_4{
  color:#D9736F;
}

#gp_5{
  color: #D6C65D;
}

.eqeel_stats td.row1{/* correction de l'arrière-plan des 48h */
  background: none;
}

/* Partie partenariats + liens messages */
.eqeel_footer{/* cadre du footer contenant les partenaires et les liens automatique */
  margin: auto;
  position: relative;
  width: 900px;
  height: 160px;
  margin-top: 100px;
  margin-bottom: 20px;
}

.partos{
  position: absolute;
  width: 700px;
  margin: auto;
  height: 160px;
}

.partos img{
  width: 50px;
  height: 50px;
}

.stats_msg{/* Liste des liens de navigation (top 20 des posteurs, etc) */
  position: absolute;
  right: 0px;
  top: 0px;
  padding-right: 5px;
  font: 13px 'Oswald', sans-serif;
  border-right: 1px solid #D9736F;
  text-align: right;
  text-transform: uppercase;
  line-height: 25px;
  width: 200px;
  height: 150px;
  box-sizing: border-box;
}

.stats_msg > a{
  color: #4F4F4F;
}
/************************************** COMMANDE LG - QEEL BY ETILYA - FIN *************************************************************/

/*** ONGLETS LAETOLIA ***/
.contenu_onglet {
  position: relative;
  width: 266px;
  height: 110px;
  background: #ffcc99;
  border: 5px solid #996633;
  box-sizing: border-box;
  color: #996666;
  text-align: center;
  display: none;
}

.contenu_onglet tr{
  height: 70px;
}

.pseudo {
  font-weight: bold;
  text-align: center;
  width: 130px;
}

.infos {
  width: 120px;
  text-align: left;
}

.liens-PV{
  display: block;
  position: absolute;
  bottom: 0px;
  text-align: center;
  width: 266px;
}

.img-cadre {
  margin-top: 10px;
}

.img-cadre img {
  width: 50px;
}

.onglet {
  cursor: pointer;
}

.onglet_0 {
  -webkit-filter: saturate(0);
  -moz-filter: saturate(0);
  filter: saturate(0);
  transition: all ease 0.5s;
}

.onglet_1 {
  -webkit-filter: saturate(1);
  -moz-filter: saturate(1);
  filter: saturate(1);
  transition: all ease 0.5s;
}
/**** FIN ***/

.marquee{
  background: url('https://img4.hostingpics.net/pics/610082darkwall.png');
  color: white;
}


::-webkit-scrollbar{
  width: 5px;
 
  background: black;
}

::-webkit-scrollbar-thumb{
  background: darkred;
 
}

/*********************************************************************************************************************************************
*************************************************** CODES DU DERNIER ORDRE *****************************************************************/

/*************************************************************** DISCORD DERNIER ORDRE ****************************************************/

.odiscord{
  left: -250px;
  top:150px;
  position: fixed;
  width: 250px;
  height:300px;
  transition: all ease-in 0.5s;
  z-index: 3;
  background: silver;
}

.odiscord > span{
  display: block;
  transform: rotate(-90deg);
  height: 25px;
  width:300px;
  position: absolute;
  top: 138px;
  left: 112px;
  text-align: center;
  font: 20px 'Overlock SC', sans-serif;
  color: darkred;
  z-index:2;
}

.img-discord{
  position: absolute;
  right:-25px;
  top:0px;
}

.odiscord:hover{
  left:0px;
  transition: all ease-out 0.5s;
}

/********************************************************* DISCORD - FIN *****************************************************************/

.oband_right{/*bandeau latéral à droite du forum */
  height:1300px;
  width:180px;
  background: #3e3e3e;
  position: fixed;
  right:0px;
  top:0px;
}

.tt_recent_topics{
  font: 15px 'Overlock SC', cursive;
  text-align: center;
  position: absolute;
  top: 40px;
  left: 30px;
  background: #3e3e3e;
}

#recent_topics{
  margin-top: 30px;
  height: 330px;
  overflow: auto;
}

#right{
  position: fixed;
  display: none;
}

.olinks{
  position: fixed;
  top:370px;
  right:0px;
  padding: 5px;
  width:180px;
  z-index: 1;
  background: #3e3e3e;
  box-sizing: border-box;
}

.olinks span{
  display: block;
  margin: auto;
  width: 150px;
  text-align: center;
  font-family: 'Overlock SC';
}

.olinks a{
  font-size: 12px;
}
/********************************************************* PA DERNIER ORDRE **************************************************************/

.oPA_cadre{
  margin:auto;
  width:942px;
  background:#3e3e3e;
  height: 435px;
  position: relative;
  margin-top:50px;
}

.oPA_cadre em{
  font-style: italic;
  font-size:13px;
 
}

.oPA_cadre strong{
  font-weight: bold;
  color: darkred;
}

.oPA_cadre > img{
  position: absolute;
  top:-50px;
  left: 0px;
}

.oPA_bloc-prez, .oPA_bloc-news{
  position: absolute;
  width:375px;
}

.oPA_bloc-prez{
  left: 34px;
}

.oPA_bloc-prez > div:first-child, .oPA_bloc-news > div:first-child, .oPA_bloc-gen > div:first-child{
  text-align: center;
  font: 40px 'Overlock SC', cursive;
  color: #a7a7a7;
}

.oPA_bloc-prez > div:last-child, .oPA_bloc-news > div:last-child{
  height: 190px;
  width:375px;
  border: 5px solid #131313;
  box-sizing: border-box;
  padding: 5px;
  background: #a7a7a7;
  text-align: justify;
  font-size:12px;
  color: #131313;
}

.oPA_bloc-liens{
  position: absolute;
  top: 51px;
  left: 416px;
}

.oPA_bloc-liens a{
  display: block;
  background: #1a1a1a;
  border: 1px solid black;
  font: 14px 'Overlock SC', cursive;
  text-decoration: none;
  color: white;
  width:110px;
  height:25px;
  padding-top:2px;
  box-sizing: border-box;
  text-align: center;
  margin-bottom:15px;
  transition: all out .5s;
}

.oPA_bloc-liens a:hover{
  background:white;
  color:#1a1a1a;
  transition: all ease .5s;
}

.oPA_bloc-news{
  right:34px;
}

.oPA_bloc-news img{
  height: 170px;
  float: right;
}

.oPA_bloc-news > div+div > img+div{
  overflow: auto;
  height:170px;
}

.oPA_cadre ul{
  list-style-type : none;
margin:0px;
padding:0px;
}

.oPA_bloc-news ::-webkit-scrollbar{
  width: 2px;
  height: 10px;
  background: none;
}

.oPA_bloc-news ::-webkit-scrollbar-thumb{
  background: none;
}

.oPA_cadre span{
  font: bold 18px Overlock SC;
}

.oPA_bloc-gen{
  position: relative;
  left:0px;
  top: 260px;
  width:875px;
  height:150px;
 
}

.oPA_gen-img{
  display: block;
  position: absolute;
  bottom: 0px;
 
}

.oPA_gen-img img{
  position: absolute;
  left:0px;
  z-index:1;
}

.oPA_gen-info1{
  position: relative;
  left:100px;
  height:100px;
  width:155px;
  transition: all ease .5s;
  background: #a7a7a7;
  overflow: hidden;
  box-sizing: border-box;
  text-align: center;
  transform: scale(0);
  z-index:2;
  display: flex;
  font-size: 15px;
}

.oPA_gen-info1 > div{
  margin: auto;
  text-align: center;
}

.oPA_gen-img:hover .oPA_gen-info1{
  transition: all ease .5s;
  transform: scale(1);
}

.oPA_gen-info2{
  position: relative;
  right:155px;
  height:100px;
  width:155px;
  transition: all ease .5s;
  background: #a7a7a7;
  overflow: hidden;
  box-sizing: border-box;
  text-align: center;
  transform: scale(0);
  z-index:2;
  display: flex;
  font-size: 15px;
}

.oPA_gen-info2 > div{
  margin: auto;
  text-align: center;
}

.oPA_gen-img:hover .oPA_gen-info2{
  transition: all ease .5s;
  transform: scale(1);
}

#g1{
  left:0px;
}

#g2{
  left:155px; 
}

#g3{
  left: 310px;
}

#g4{
  right: 255px;
}

#g5{
  right: 100px;
}

#g6{
  right:-55px;
}

.oPA_bloc-gen a{
  font: bold 18px Overlock SC;
  text-decoration: none;
}

/********************************************************** PA DERNIER ORDRE - FIN ***********************************************/

/********************************************************** CATEGORIES DERNIER ORDRE FFXIV ***********************************************/

.secondarytitle h2 .ocat_titre {/* affichage sur la PA */
  margin: auto;
  text-align: center;
  font: bold 40px 'Overlock SC', cursive;
  color: darkred;
  text-shadow: 1px 1px 1px white;
  margin-bottom:50px;
}

.ocat_titre{/* affichage dans les sujet */
  font: bold 20px 'Overlock SC', cursive;
  display:inline-block;
}

.ocat_cadre{
  width: 835px;
  height: 155px;
  margin: auto;
  position: relative;
  background: #301934;
  margin-bottom: 50px;
}

.img-stats{
  position: absolute;
  z-index:2;
  top:-12px;
}



.ocat_tt-fofo{
  width: 669px;
  height: 26px;
  text-align: center;
  font: 20px 'Overlock SC', cursive;
  color: darkred;
  position: absolute;
  top: -26px;
  right: 0px;
  background: url('https://img4.hostingpics.net/pics/813969Trapzetitre.png');
}

.ocat_stats{
  position: absolute;
  left: 38px;
  top: -12px;
  width: 90px;
  color: white;
  z-index:3;
  text-align: center;
  color: darkred;
  font: 16px 'Overlock SC', sans-serif;
  line-height: 22px;
 
}

.img-nnnl{
  position: absolute;
  z-index: 2;
  left: 45px;
  top: 38px;
 
}

.img-nnnl > img{
  width:75px;
}

.last-msg{
  left: 38px;
  bottom: -5px;
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  color: darkred;
  font-size: 9px;
  text-align:center;
  width: 90px;
}

.ocat_fond-descri{
  width: 835px;
  height: 155px;
  left:0px;
  top: 0px;
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  filter: saturate(200%);
}

.ocat_descri{
  position : absolute;
  width: 400px;
  top: 25px;
  left: 270px;
  height: 85px;
  padding: 10px;
  background: rgba(230,230,230,0.7);
  color: darkred;
  font-size: 13px;
  text-align: justify;
  z-index: 3;
  opacity:0.2;
  transition: all ease-out 0.2s;
  overflow: auto;
}

.ocat_descri:hover{
  opacity:1;
  transition: all ease-in 0.2s;
}

.ocat_ssfofo{
  position: absolute;
  width: 200px;
  height: 155px;
  top: 0px;
  right:0px;
  box-sizing: border-box;
  padding-left: 5px;
  background: rgba(255,255,255,0.9);
  color: white;
  z-index:0;
  transition: all ease 0.5s;
}

.img-ssfofo{
  position: absolute;
  right: -20px;
  height: 155px;
}

.ss-fofo_tt{
  color: darkred;
  font: 15px 'Overlock SC', sans-serif;
  transform: rotate(-90deg);
  position: absolute;
  right: -48px;
  top: 65px
}

.ocat_ssfofo:hover{
  right: -200px;
  transition: all ease 0.5s;
}

.ocat_ssfofo a{
 
  display: block;
  padding: 2px;
  color: indigo;
  transition: all ease 0.2s;
  font: bold 15px 'Overlock SC', sans-serif;
  text-shadow: 2px 2px 5px black;
}

.ocat_ssfofo a:hover{
  color: darkred;
  transition: all ease 0.2s;
}

.ocat_ssfofo > div+div{
  overflow: auto;
  height: 150px;
}

.img-dragon{
  margin-top: -50px;
  margin-bottom: 10px;
}
/********************************************************* FIN CATEGORIES DERNIER ORDRE ****************************************************/

/********************************************************* QEEL DERNIER ORDRE **************************************************************/

.oqeel_cadre{
  width:942px;
  background: #3e3e3e;
  height: 400px;
  position: relative;
  margin: auto;
  margin-top: 70px;
  margin-bottom: 55px;
}

.oqeel_cadre > img:first-child{
  position: absolute;
  top: -65px;
  left:100px;
  margin: auto;
  width:742px;
}

.oqeel_cadre2{
  position: relative;
  width: 900px;
  height:365px;
  margin: auto;
 
  top:20px;
}

.oqeel_bloc-online, .oqeel_bloc-24h{
  position: absolute;
}

.oqeel_bloc-24h{
  right:0px;
}

.oqeel_bloc-online > div:first-child,
.oqeel_bloc-24h > div:first-child{
  text-align: center;
  font: 17px 'Overlock SC', sans-serif;
  color: #a7a7a7;
  margin-bottom:-3px;
}

.oqeel_bloc-online > div:last-child, .oqeel_bloc-24h > div:last-child{
  width: 375px;
  height: 160px;
  background: #a7a7a7;
  border: 5px solid #131313;
  padding:5px;
  box-sizing:border-box;
  font-size: 12px;
  overflow: auto;
}

.oqeel_bloc-24h > div:last-child{
  padding:2px!important;
}

.oqeel_bloc-24h td.row1{
  background: none!important;
}

.oqeel_cadre2 img{
  position: absolute;
  left:376px;
  top:24px;
}

.oqeel_bloc-bas{
  position: absolute;
  bottom:30px;
  width: 900px;
}

.oqeel_stats, .oqeel_anniv{
  position: absolute;
  width:245px;
  height:125px;
  border: 5px solid #131313;
  padding: 5px;
  box-sizing: border-box;
  background: #a7a7a7;
  color: #131313;
  font-size: 12px;
  text-align: justify;
  overflow: auto;
}

.oqeel_stats{
  left:0px;
  bottom:0px;
}

.oqeel_anniv{
  right:0px;
  bottom:0px;
}

.oqeel_anniv td.row1{
  background: none!important;
}

.oqeel_bloc-grp{
  width: 375px;
  position: absolute;
  bottom:-28px;
  left: 263px;
}

.oqeel_bloc-grp > div:first-child, .oqeel_bloc-grp > div:last-child{
  text-align: center;
  font: 23px 'Overlock SC', sans-serif;
}

.oqeel_bloc-grp span{
  text-shadow: 1px 1px 1px black;
  cursor:pointer;
}

.gp1{color: #7d0707;}

.gp2{color: #bd8888;}

.gp3{color: #443899;}

.gp4{color: #5a82bd;}

.gp5{color: #9fd9eb;}

.gp6{color: #bdbdbd;}

.oqeel_desc-grp{
  width:375px;
  height: 125px;
  background: #a7a7a7;
  border: 5px solid #131313;
  padding:5px;
  box-sizing: border-box;
}

.oqeel_desc-grp > div > div:first-child{
  font: 16px 'Overlock SC', sans-serif;
}

.oqeel_desc-grp > div > div:last-child{
  height:85px;
  overflow: auto;
  text-align: justify;
  font-size: 12px;
}

.oqeel_new-mb{
  position: absolute;
  bottom: -50px;
  z-index:2;
  width:942px;
  height:50px;
  background: url('https://img15.hostingpics.net/pics/973513Navigsujet.png');
  text-align: center;
  font: 40px 'Overlock SC', cursive;
  color: #131313;
 }

.oqeel_desc-grp > div{
  display:none;
}

.oqeel_desc-grp > div.active{
  display:block;
}

/********************************************************* QEEL DERNIER ORDRE - FIN ********************************************************/


/********************************************************* PROFIL DERNIER ORDRE ************************************************************/

.omess_textenavighaut{
  font: 15px!important 'Overlock SC', sans-serif;
}

.nav{font-size:20px;}

.nav img{padding:5px;}

.fond-cell{
  background: #3e3e3e;
}

.omess_titre{
  background: url('https://img4.hostingpics.net/pics/332643Titresujet.png') no-repeat;
  height:50px;
  width:942px;
}

.omess_titre > div{
  text-align: center;
  font: 30px 'Overlock SC', sans-serif;
  color: darkred;
  padding-top:5px;
}

.cattitle{font: 30px 'Overlock SC', sans-serif;}

.post-options img{/*images citer, éditer, IP, supprimer*/
  padding:5px;
}

.post{
  box-sizing: border-box;
  width:900px;
  margin-bottom:50px;
  background: #3e3e3e;
}

.omess_prof-cadre{
  position:relative;
  margin-top: 10px;
}


.omess_recnoir{
 
  background: black;
  height:440px;
  width:250px;
  margin-left: -20px;
  margin-top:20px;
  margin-bottom: 20px;
  transform: rotate(-5deg);
}

.omess_recnoir > img{
  position: absolute;
  left:-70px;
  transform: rotate(5deg);
  top: 30px;
}

.omess_avaname-cadre{
  position: absolute;
  background: #131313;
  height:440px;
  width:250px;
  left: -20px;
  top: 0px;
}

.omess_avaname-cadre img:first-child{
  margin-top: 10px;
 
}

.omess_pseudo{
  background: url('https://img15.hostingpics.net/pics/710322Rectanglerang.png') no-repeat;
  position: absolute;
  top:350px;
  height: 28px;
  width:250px;
  text-align: center;
  padding-top:5px;
  box-sizing: border-box;
  z-index:2;
}

.omess_ava{
  width:200px;
  height:320px;
  position: absolute;
  top: 30px;
  left: 25px;
 
}

.omess_ava img{
  position: absolute;
  z-index:1;
}

.omess_rpg{
  position: absolute;
  width:200px;
  height:320px;
  overflow: auto;
  background: #4a494a;
  margin-top:10px;
}

.omess_ava:hover img{
  opacity:0;
  transition: all ease 0.5s;
}

.omess_rang{
  color:darkred;
  width: 200px;
  text-align: center;
  font-size: 12px;
  left:25px;
  top:380px;
  position: absolute;
}

.omess_details{
  width: 200px;
  min-height:110px;
  background: #4a494a;
  font-size: 12px;
  box-sizing: border-box;
  padding:5px;
}

.omess_online{
  position: absolute;
  width:200px;
  z-index:3;
  left: 25px;
  bottom:3px;
}



.omess_date{
  font: 12px 'Overlock SC', sans-serif;
}

.omess_msg{
  width:650px;
  min-height: 350px;
  background: #a7a7a7;
  padding: 10px;
  box-sizing:border-box;
  border: 5px solid #131313;
  color: #131313;
}

.omess_contact{
  padding-top:5px;
}

.omess_contact img{
  padding-right:5px;
}

.omess_navig{
  background: url('https://img4.hostingpics.net/pics/429591Navigsujet.png') no-repeat;
  height: 50px;
  width: 942px;
  position: relative;
}

.omess_navig > div{
  margin:auto;
  font: 20px 'Overlock SC', sans-serif;
  text-align: center;
  padding-top:10px;
}

.omess_textenavig{
  font: 15px 'Overlock SC', sans-serif;
  text-align: center;
}

.omess_perm{
 display:inline-block;
  right:0px;
  top:0px;
}

/***************************************************PROFIL DERNIER ORDRE - FIN *********************************************************/








.soh_navig{
  display:inline-block
  position: fixed;
  width:100px;
  z-index: 100;
  top:5px;
  right: 50px;
  font: 15pt 'Overlock SC', cursive;
  text-align: center;
}

.soh_navig div{
  margin-top:8px;
  left:0px;
  height:0%;
  overflow: hidden;
  transition: height ease .5s;
}

.soh_navig:hover div{
  height: 100%;
  border-left: solid 2px #212025;
  border-right: solid 2px #212025;
  border-bottom: solid 2px #212025;
}

.soh_navig span{
  display: block;
  width:100px;
  height:0px;
  overflow: hidden;
  background: #37363D;
  -moz-transition: all ease .5s;
  -webkit-transition: all ease .5s;
  transition: all ease .5s;
}

.soh_navig:hover span{
  height: 25px;
  -moz-transition: all ease .5s;
  -webkit-transition: all ease .5s;
  transition: all ease .5s;
}



Je ne sais pas si vous avez besoin des templates, si oui je vous les donnerai à votre demande.

Quelqu'un pourrait-il m'aider ? Sinon je crois que je vais faire une dépression nerveuse Q.Q

Merci d'avance !

[Walt]

Bonjour,

Tout s'affiche correctement de mon côté, je crois ?

Spoiler:

Cordialement,
Walt

[Invité]

Bonjour,

avec un petit CTRL + F5 c'est toujours pareil

Bien à vous

[Etilya]

Bon après les remarques de mes camarades, je me suis aperçue que j'étais la seule à avoir ce problème, j'ai fait un nettoyage du cache et des données de navigation, et tout remarche correctement.

Je me disais bien =')
J'y penserai la prochaine fois, avant de paniquer et déranger les gens pour rien xD

Désolée du coup x3