Problème de catégorie/forum - résolution d'écran plus petite

[Elfette7]

Détails techniques

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

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Dès utilisation d'un écran à plus petite résolution.
Lien du forum : http://testelfette.kanak.fr/

Description du problème

Bonjour à tous,

Voilà, j'ai racheté récemment un PC portable avec une plus petite résolution d'écran et je me suis rendue compte que mon codage (dans le but de séparer mon forum en deux) pose problème sur un PC à plus petite résolution d'écran.

En effet, comme vu sur l'image, les forums au lieu d'être l'un à côté de l'autre, sont l'un en dessous de l'autre.
L'idée serait que l'ensemble soit un peu plus large et que les forums soient l'un à côté de l'autre à chaque fois par deux.

Ci-dessous mon codage CSS ::

Code:

body{
   margin:auto;
  background-size: 100% auto;
   }

div#banniere{
   background-image:url('https://nsm09.casimages.com/img/2018/08/09//18080908070323610115842138.png');
    background-attachment: fixed;
   background-repeat: no-repeat;
  height: 500px;
   background-position: top center;
   }

#i_logo {
    width: 100%;
}

a {
text-decoration: none;
}

/****Slectionner le contenu****/
.selectCode { float:right; text-transform: uppercase; cursor:pointer; }
div.cont_code { clear: right; }

.signature_div {
    border-top: 1px dashed #73b2f9;
    margin-top: 20px;
}

.navig {
position: absolute;
top: -3px;
width: 100%;
margin-bottom: 15px;
}

a.topictitle {
  font-family: Raleway;
  font-size: 20px;
  color: #5d5851;
  text-decoration: none;
  
}

a.mainmenu {
font-size: 19px;
margin: -5px;
padding-left: 5px;
padding-right: 5px;
padding-top: 7px;
padding-bottom: 7px;
font-family: 'Handlee', cursive;
text-decoration:none!important;
}

a.mainmenu:hover
{
font-size:17px;
margin:-5px;
padding-left:7px;
padding-right: 7px;
padding-top:3px;
padding-bottom:3px;
font-family: 'Handlee', cursive;
text-decoration:none!important;
color: #dbd9d7;
}

a.mainmenu img{
display: none;
}

.forumline
{
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;

border-top: 4px solid #5d5851;
border-bottom: 4px solid #5d5851;
  
padding: 5px;
}

a.forumlink{
  margin-left:5px;
  margin: 1px;
  font-size: 16px;
  font-family: Bubbler One;
  text-decoration:none!important;
  text-align: center;
  text-transform: none;
}

a.forumlink:hover{
  margin-left:5px;
  margin: 1px;
  font-size: 17px;
  font-family: Bubbler One;
  text-decoration:none!important;
  text-align: center;
  text-transform: none;
  color: #38373e;
}

span.forumlink {  
display: block;
text-align: left;
border-bottom:0px solid #000000;
font-family: Calibri Light;
}

span.forumlink:hover
{ display: block;
text-align: left;
border-bottom:0px solid #F2F2F2;
}

.row1.over span.gensmall { display:inline;}

.postdetails.poster-profile textarea { width: 196px; Height: 50px;}

.postbody {
text-align:justify;
padding-left:10px;
padding-right:10px;
padding-top: 10px;
font-family: 'Raleway', sans-serif;
font-size: 13px;
color: #5d5851;
}

.code {
width: 400px;
    max-width: 400px;
    overflow: hidden;
white-space: normal;
background-color:#dbd9d7;
border:1px solid #5d5851;
border-left:5px solid #5d5851;
padding:10px;
color:#382b14;
font-size: 12px;
font-family: Courier;
}

.spoiler {
overflow: hidden;
padding:10px;
color:#382b14;
font-color: #382b14;
  font-size: 13px;
}

.quote {
border: double 2px #5d5851;
background-color:#f1d5b0;
padding:11px;
color:#382b14;
font-size: 12px;
}

h3 {
color: #5d5851;
font-size: 14px;
text-align: center;
border-bottom: 1px solid #d1c7b8;
border-top: 1px solid #d1c7b8;
margin-bottom: 15px;
font-family: Raleway;
}

h2 {
text-align: center;
font-family: 'Handlee', cursive;
color: #5d5851;
}




/* Code Catégorie */

/* BLOC TITRE CATEGORIE */
.tleCAT{
margin:5px auto 0;
width:88%; height: 35px; padding:10px 0; text-align:center;
background:#5d5851; /* MODIFIABLE */
}
/* TITRE CATEGORIE */
.tleCAT h2{
margin:0;
font-size:32px; font-family:Arial; text-transform:uppercase; letter-spacing:3px;
color:#FAF8F5; /* MODIFIABLE */
}
/* BLOC CATEGORIE */
.mdlCAT{
margin:auto;
width:87%; padding:2px 0 7px 9px; text-align:center;
background:#bdb0a3; /* MODIFIABLE */
}
/* BAS CATEGORIE */
.btmCAT {
margin:0 auto 30px; width:88%;
height:10px; background:#5d5851; /* MODIFIABLE */
}
/* BLOC FORUM */
.FRM {
float:left; margin:0 15px 10px;
width:470px; height:240px; font-family:Arial;

}
.FRM:nth-of-type(even) {
margin-left:7px;
}
/* BLOC TITRE FORUM */
.tleFRM {
margin:auto;
/*background-image:url('https://nsm09.casimages.com/img/2018/08/09//18080909280523610115842207.png');*/
height:15px; padding:10px 0; overflow:hidden;
background:#a19487; /* MODIFIABLE */
text-transform:uppercase; font-weight:bold; text-align:center; font-size:14px;
}
/* TITRE FORUM */
.tleFRM a{
color:#FAF8F5 !important; /* MODIFIABLE */
}
/* BLOC SOUS-FORUMS / DERNIER MESSAGE / DESCRIPTION FORUM */
.boxFRM {
height:165px; padding-top:15px; text-align:center;
background:#dbd9d7; box-shadow:0 0 3px rgba(0,0,0,0.1); /* MODIFIABLE */
}
/* BLOC IMAGE DESCRIPTIVE FORUM */
.boxDESC {
display:inline-block; vertical-align:top;
width:155px; height:65px; border-radius:10px;
background:#191919;  /* MODIFIABLE */
}
/* IMAGE DESCRIPTIVE FORUM */
.descFRM img {
position:absolute; margin-top:-75px; margin-left:-2px;
width:155px; height:65px; border-radius:10px;
}
/* BLOC SOUS-FORUMS */
.sfFRM {
position:absolute; z-index:3;
width:145px; height:55px; padding:5px; border-radius:10px;
text-align:left; font-size:10px;
background:#191919; /* MODIFIABLE */
opacity:0; transition:all .65s linear; -webkit-transition:all .65s linear;
}
.sfFRM:hover {
opacity:1;
}
/* SOUS-FORUMS */
.sfFRM a{
color:#FAF8F5 !important; /* MODIFIABLE */
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
display:inline-block; vertical-align:top; margin-left:15px;
width:155px; height:45px; padding:10px 0; border-radius:10px;
text-align:center; font-size:10px;
background:rgba(250,250,250,0.6); box-shadow:inset 0 0 3px rgba(0,0,0,0.3); color:black; /* MODIFIABLE */
}
/* DESCRIPTION FORUM */
.descFRM {
margin:10px auto 0; width:320px; height:75px; overflow:hidden;
font-size:10px; text-align:justify; line-height:15px;
color:black; /* MODIFIABLE */
}
.descFRM:hover {
width:315px; padding-right:5px; overflow:auto;
}
/* ICÔNES FORUM */
.imgFRM{
position:absolute; z-index:2; margin-left:150px; margin-top:-40px; margin-left: 200px;
width:65px; height:65px;
}
.imgFRM img{
width:65px; height:65px; border-radius:65px;
box-shadow:0 0 3px rgba(0,0,0,0.2); /* MODIFIABLE */
}
/* NOMBRE SUJETS & MESSAGES FORUM */
.imgFRM div {
position:absolute; z-index:3; margin-top:-65px;
width:65px; height:52px; padding-top:13px; border-radius:65px; font-size:11px;
background:rgba(250,250,250,0.6); /* MODIFIABLE */
opacity:0; transition:opacity .65s linear; -webkit-transition:opacity .65s linear;
}
.FRM:hover .imgFRM div{
opacity:1;
}

/* Fin code catégorie*/

/*Code QEEL*/
/**QEEL par Cheshire Cat*/
.qeel h1{
  font-family: 'BenchNine', sans-serif;
  font-size:35px;
  text-align: center;
  color:#FAF8F5;
  background-color:#5d5851;
  margin-top:20px;
  margin-bottom:0px;
  margin-left: auto;
  margin-right: auto;
  text-transform:uppercase;
  letter-spacing:5px;
  width: 88%;
}
.qeel h2{
  text-align:center;
  font-family: 'Voltaire', cursive;
  font-size:20px;
  color:#5d5851;
}
.qeel .bloc{
  font-size:13px;
  color:#7B4725;
  font-family: Raleway;
  display:block;
  overflow:auto;
  width:200px;
  height:210px;
  margin:auto;
  text-align:justify;
  border-left:2px solid #5d5851;
  border-right:2px solid #5d5851;
  background-color:#dbd9d7;
  padding-left:8px;
  padding-right:8px;
}
.qeel .membresco24{
  margin-left:-5px;
  color:#5d5851;
  font-size:16px;
  font-family: Raleway;
}
.qeel .legend{
  top:5px;
  margin-bottom:13px;
  margin-left:13px;
  margin-right:13px;
  padding-top:5px;
  padding-left:8px;
  padding-right:8px;
  border-top:2px solid #5d5851;
  background-color:#dbd9d7;
  text-align:center;
}
.qeel .credit{
  font-size:11px;
  float:right;
}
/* Fin Code QEEL */

/****************************************************** PROFIL ********************************************************/


/*PROFIL BY PYPHILIA @ http://creaphy.olympe.in*/

a.topictitle{
  font-size:13px !important; /*titre du sujet, taille du texte*/
}

.postdetails {
  position:relative;
  height:auto;
  width:auto;
}
.postdetails .avatar_profil img{ /*avatar*/
position:relative;
z-index:6;
border-radius:0px 4px 0 0;
padding:6px 0;
border-top: 1px dashed #5d5851; /*bordures*/
border-bottom: 1px dashed #5d5851;
border-left: 8px solid #d1c7b8;
border-right: 8px solid #d1c7b8;
background:#d1c7b8; /*fond - à changer avec les bordures droite et gauche*/
}

.rang { /*Rang*/
  font-size:5px; /*taille du texte*/
  font-family: 'Handlee', cursive; /*police*/
  text-align:center; /*centré*/
  color: #dbd9d7;
  display: block;
}

.post .infos .name strong a { /*Pseudo - nom prénom*/
  height:40px;
  display:block;
  text-align:center;
  border-radius:0px 0px 0px 15px;
  margin-top: 7px;
  font-size:25px; /*taille du texte*/
  font-family: 'Handlee', cursive; /*police*/
  background:#dbd9d7; /*fond*/
  border: 1px dashed #d1c7b8;
  text-shadow: 1px 1px 3px #dbd9d7;
}

.all_profil { /*bloc des informations du profil*/
height:0px;
display:block;
padding:3px 10px;
overflow:auto;
background: #d1c7b8; /*couleur de fond*/
  color:#5d5851; /*couleur de texte*/
  font-size: 11px;
  text-align: justify;
border-bottom: 1px dashed #5d5851; /*bordure du bas (à changer avec celle .avatar_profil img)*/
  
-moz-transition:all 1s;
-o-transition:all 1s;
-ms-transition:all 1s;
-webkit-transition:all 1s;
transition:all 1s;
}

.all_profil .label { /*NE PAS TOUCHER*/ /*pour ne pas afficher les : */
  color:transparent;
}

.all_profil .label span { /*titres des zones du profil*/
  display:block;
  background: #dbd9d7; /*couleur de fond*/
  color: #5d5851 !important; /*couleur du texte*/
  text-transform:uppercase; /*majuscule*/
  text-align:center; /*centré*/
  margin-top:6px; /*marge en haut*/
  margin-bottom: 4px;
  font-size: 12px;
  
}
/*SCROLLBAR :: opera, chrome uniquement*/
.all_profil::-webkit-scrollbar {
    width: 7px;
}
 
.all_profil::-webkit-scrollbar-track {
  background-color:white;
}
 
.all_profil::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  border-radius:3px;
}

.infos { /*bloc du profil*/
  width:216px;
  margin-top:-25px;
  
-o-transition:all 1.4s;
-moz-transition:all 1.4s;
-ms-transition:all 1.4s;
-webkit-transition:all 1.4s;
transition:all 1.4s;
}

.infos:hover .all_profil{ /*NE PAS TOUCHER*/
  height:250px;
  margin-top:10px;
}

.postbody {
  padding-left:20px; /*zone de message*/
}
  

/****************************************************** FIN PROFIL ********************************************************/

Un tout grand merci pour votre aide !

[MlleAlys]

Bonjour,
La largeur de votre forum est en %, elle varie donc effectivement en fonction de la résolution de l'écran.

Plusieurs solutions s'offrent à vous :

- fixer la largeur de votre forum à environ 1170px minimum dans général > configuration > largeur du forum, pour que celle ci ne change pas quelque soit la largeur de l'écran.
La largeur fixe du forum dépend évidement de la largeur de vos .FRM, si vous diminuez 470px pour une autre valeur dans le css, la largeur du cadre du forum pourra être diminuée également, par exemple avec des .FRM à 400px de large, vous pouvez fixer une largeur à 1000px pour l'ensemble du forum, quelle que soit la taille de l'écran.

- déterminer une largeur minimale pour votre cadre de forum. Il restera en % pour les grandes résolutions, mais ne pourra pas descendre en dessous d'une certaine valeur.

- coder vos catégories à l'aide de % pour que toutes les largeurs s'adaptent les unes aux autres.

- des combinaisons des solutions précédentes.

Vous pouvez tester votre site sur différentes résolutions à l'aide d'outils de ce genre : http://quirktools.com/screenfly/

[Elfette7]

Merci MlleAlys !

Je vais tester la solution de la largeur de forum fixe pour voir ce que ça donne.. =)

J'imagine que je vais devoir un peu chipoter, je viendrai préciser si c'est bel et bien résolu ensuite !

En tout cas merci pour ces diverses explications


EDIT :: C'est parfait !!! Merci infiniment pour cette aide précieuse =)