Probleme largeur de page

[dancehallnounours]

Bonjour,

je vous explique mon problème:

je dois mettre en ligne lundi la nouvelle version de mon forum, j'ai donc fait un forum de test pour le nouveau thème.

Je n'avais pas de problème de largeur de page avec mon forum, mais avec le forum test selon la taille de l'écran, la page est trop large et il ya une barre de défilement horizontal.

Sur le forum de test j'ai essayé de baisser la largeur du forum à 70% mais rien n'y fait.
J'ai aussi essayé de reduire la taille de la bannière mais elle est automatiquement agrandi.

Comment peut-on régler ce problème svp?

Je compte exporter le thème, et je n'aimerai pas me retrouver avec ce souci sur mon "vrai" forum.

Merci d'avance!

Lien de mon forum: http://www.dancehall-mania.com/

lien du forum test: http://testdhm.forumactif.org/

[Scipion]

Bonjour

L'origine du problème provient visiblement de la bannière dont la largeur est trop grande, soit 1190px. Faites des tests avec les deux images redimensionnées suivantes :

800px : https://i.servimg.com/u/f79/13/94/72/47/f9p6qa10.jpg

900px : https://i.servimg.com/u/f79/13/94/72/47/f9p6qa11.jpg

Cordialement

[dancehallnounours]

merci pour votre réponse, j'ai modifié la bannière mais le probleme persiste

[Scipion]

Bonjour

Si vous avez sur le forum test une feuille de style CSS personnalisée, mettez svp son contenu à disposition afin que je puisse effectuer un test.

Cordialement

[dancehallnounours]

Bonjour,

oui en effet après avoir cherché je m'aperçois que les élements de mon forum sont trop larges, j'essaye d'ajuster, j'ai réussi à obtenir un affichage normal de la page sur mon ordi portable (en limitant toutes les largeurs à 850 px maximum)

mais sur un écran plus petit je pense que le problème doit persister car dès que je zoome à 110% la barre réapparait.

Je vous met ma feuille css telle qu'elle était avant que je la modifie ce matin, si vous pouvez me conseiller ce serait génial.

Merci énormément.

Code:


.bodyline
{
width:950px;
}
.cate_titre
{
  clear:both;
  color: #ffffff;
  text-transform: uppercase;
  height: 70px;
  margin-top: 30px;
}
.catetitre_bloc
{
position: relative;
z-index: 1;
display: block;
width: 90%;
height: 20px;
margin-left: auto;
margin-right : auto;
}
.catetitre_content
{
position: absolute;
z-index: 2;
display: block;
width: 950px;
margin-left: auto;
  margin-right: auto;
  margin-top: -40px;
text-align: center;
padding: 2px;
}
.catetitre
{
color: #ffffff;
font-family: arial;
font-size: 26px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 1px 1px 0px #000000;
}
.forum_bloc
{
  width: 950px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: -30px;
  background-image: url(http://i40.tinypic.com/azevqb.jpg)
  background-repeat: repeat-y;
  z-index:3;
}
.forum
{
float: left;
width: 450px;
height: 220px;
margin-left: 12.5px;
margin-right: 12.5px;
margin-bottom: 50px;
color: #39b54a;
}
a.forumlink
{
  background-image:url(http://hitskin.com/themes/13/06/08/i_back_catd.png);
   background-repeat:repeat-x;
   border-top-left-radius:5px;
   border-top-right-radius:5px;
   height:40px;
  padding-top:0.5em;
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  color: #39b54a;
  text-align: center;
font-family: arial;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
}
a.forumlink:hover
{
text-decoration: none;
color: #00b552;
}
.forum_contenu
{
  position: relative;
  z-index: 1;
  width: 98%;
  height: 90%;
  padding: 4px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -8px;
  background-color: #d9d9d9;
  color:#000;
}
.description
{
  clear: both;
  width: 410px;
  margin: 10px 5px 5px 7px;
  padding: 5px;
  height: 46px;
  overflow: hidden;
  border: 2px solid #9c9c9c;
  z-index:3;
  background:#444444;
 color: #fff;
font-size:10px;
}
.description_contenu
{
  position: absolute;
  display: block;
  width: 400px;
  height: 62px;
  background-color: #191817;
  font-size: 10px;
  color: #9c9c9c;
  text-align: justify;
  padding: 5px;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
  transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.description_contenu:hover
{
  opacity: 0.8;
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  filter: alpha(opacity=80);
  transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.icone_stats
{
  margin: auto;
  margin-top: 5px;
  margin-left: 10px;
}
.stats_lastpost
{
  float: right;
  width: 120px;
  height: 80px;
  margin-left: 10px;
  margin-top: 10px;
  background-color: #c8c8c8;
  border: 1px solid #b5b5b5;
  padding: 5px;
}
.stats
{
  display: block;
  margin-bottom: 5px;
  border-bottom: 1px dotted #b5b5b5;
  padding-bottom: 5px;
  font-size: 10px;
  color: #8f8f8f;
}
.lastpost
{
  display: block;
  font-size: 11px;
}
.sous_forum
{
position: absolute;
z-index: 2;
float: left;
width: 200px;
line-height: 11px;
margin-left: 110px;
margin-top: -95px;
margin-bottom: 0px;
color: #b5b5b5;
padding: 4px;
}
.sous_forum a
{
  color: #b5b5b5;
  text-shadow: 1px 1px 0px #000000;
  float: left;
  width: 200px;
  line-height: 11px;
  margin-left: 110px;
  margin-bottom: 0px;
  background:#252525;
  padding:4px;
}
.sous_forum a:hover
{
  color: #ffffff;
  margin-left: 110px;
  padding: 4px;
}
.sous_forum:hover
{
  height: 50px;
  color: #b5b5b5;
  padding: 4px;
  margin-left: 110px;
 }
.nav
{
background:#000;
height:40px;
}
.gensmall
{
  vertical-align:50%;
}

/* QEEL ONGLETS LATERAUX ONCLIC FOCUS */

#qeel_bloc
{
  height: 400px;
}
#qeel_head
{
  width: 850px;
  margin: auto;
  height: 151px;
  background: url(#);
}
#qeel_body
{
  width: 850px;
  height: 150px;
  margin: auto;
  background: url(#) repeat-y;
}
#qeel_foot
{
  width: 850px;
  margin: auto;
  height: 118px;
  background: url(#);
}
#qeel
{
  padding-top: 20px;
  padding-bottom: 20px;
}
.qeel_onglet1
{
  width: 150px;
  height: 20px;
  padding: 4px;
  margin-left: 0;
  margin-bottom: 10px;
  background: #d39b69;
  border: 1px solid #cf6f1d;
  box-shadow: 0px 0px 4px #493b32;
  -moz-box-shadow: 0px 0px 4px #493b32;
  -o-box-shadow: 0px 0px 4px #493b32;
  -htm-box-shadow: 0px 0px 4px #493b32;
  -webkit-box-shadow: 0px 0px 4px #493b32;
  font-weight: bold;
  color: #473d36;
  text-shadow: 1px 1px 0px #f0b27e;
  text-align: center;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeel_onglet2
{
  width: 150px;
  height: 20px;
  padding: 4px;
  margin-left: 0;
  margin-bottom: 10px;
  background: #f1f0eb;
  border: 1px solid #d0d0cc;
  box-shadow: 0px 0px 4px #605750;
  -moz-box-shadow: 0px 0px 4px #605750;
  -o-box-shadow: 0px 0px 4px #605750;
  -htm-box-shadow: 0px 0px 4px #605750;
  -webkit-box-shadow: 0px 0px 4px #605750;
  font-weight: bold;
  color: #ba7b42;
  text-shadow: 1px 1px 0px #d4d3cf;
  text-align: center;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeel_onglet3
{
  width: 150px;
  height: 20px;
  padding: 4px;
  margin-left: 0;
  background: #625c51;
  border: 1px solid #423328;
  box-shadow: 0px 0px 4px #3a372d;
  -moz-box-shadow: 0px 0px 4px #3a372d;
  -o-box-shadow: 0px 0px 4px #3a372d;
  -htm-box-shadow: 0px 0px 4px #3a372d;
  -webkit-box-shadow: 0px 0px 4px #3a372d;
  font-weight: bold;
  color: #d1d1cc;
  text-shadow: 1px 1px 0px #736f68;
  text-align: center;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeel_onglet1:hover, .qeel_onglet2:hover, .qeel_onglet3:hover
{
  margin-left: 20px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeel_contenu1
{
  position: absolute;
  z-index: 1;
  width: 700px;
  height: 150px;
  overflow: auto;
  margin-left: 200px;
  margin-top: -40px;
  background: #e6e6e6;
  border: 1px  solid #f5f4ee;
  box-shadow: 0px 0px 4px #38342d;
  -moz-box-shadow: 0px 0px 4px #38342d;
  -o-box-shadow: 0px 0px 4px #38342d;
  -htm-box-shadow: 0px 0px 4px #38342d;
  -webkit-box-shadow: 0px 0px 4px #38342d;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}
.qeel_contenu2
{
  position: absolute;
  z-index: 2;
  width: 700px;
  height: 150px;
  overflow: auto;
  margin-left: 200px;
  margin-top: -80px;
  background: #e6e6e6;
  border: 1px  solid #f5f4ee;
  box-shadow: 0px 0px 4px #38342d;
  -moz-box-shadow: 0px 0px 4px #38342d;
  -o-box-shadow: 0px 0px 4px #38342d;
  -htm-box-shadow: 0px 0px 4px #38342d;
  -webkit-box-shadow: 0px 0px 4px #38342d;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}
.qeel_contenu3
{
  position: absolute;
  z-index: 3;
  width: 700px;
  height: 150px;
  overflow: auto;
  margin-left: 200px;
  margin-top: -120px;
  background: #e6e6e6;
  border: 1px  solid #f5f4ee;
  box-shadow: 0px 0px 4px #38342d;
  -moz-box-shadow: 0px 0px 4px #38342d;
  -o-box-shadow: 0px 0px 4px #38342d;
  -htm-box-shadow: 0px 0px 4px #38342d;
  -webkit-box-shadow: 0px 0px 4px #38342d;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}
.qeel_contenu4
{
  position: absolute;
  z-index: 4;
  width: 700px;
  height: 150px;
  overflow: auto;
  margin-left: 204px;
  margin-top: -129px;
  background: #e6e6e6;
  border: 1px  solid #f5f4ee;
  box-shadow: 0px 0px 4px #38342d;
  -moz-box-shadow: 0px 0px 4px #38342d;
  -o-box-shadow: 0px 0px 4px #38342d;
  -htm-box-shadow: 0px 0px 4px #38342d;
  -webkit-box-shadow: 0px 0px 4px #38342d;
}
.qeel_contenu
{
  padding: 4px;
  color: #74685d;
  font-size: 11px;
  text-shadow: 1px 1px 0px #f7f6f0;
  text-align: justify;
  font-weight: normal;
}
.qeel_onglet1:hover .qeel_contenu1, .qeel_onglet2:hover .qeel_contenu2, .qeel_onglet3:hover .qeel_contenu3
{
  margin-left: 180px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeel_onglet1:focus .qeel_contenu1, .qeel_onglet2:focus .qeel_contenu2, .qeel_onglet3:focus .qeel_contenu3
{
  z-index: 10;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
}
/* PA ONGLETS LATERAUX ONCLIC EN FOCUS */

#pafocus_head
{
  width: 850px;
  height: 151px;
  background: url(#) no-repeat;
}
#pafocus_body
{
  width: 850px;
  height: 340px;
  background: url(http://i40.tinypic.com/opqkco.jpg) no-repeat;
}
#pafocus_foot
{
  width: 850px;
  height: 109px;
  background: url(#) no-repeat;
}

#pafocus
{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: right;
}
.pafocus_onglet1
{
  width: 120px;
  height: 20px;
  padding: 4px;
  margin-left: 0;
  margin-bottom: 10px;
  background: #39b54a;
  border: 1px solid #cf6f1d;
  box-shadow: 0px 0px 4px #493b32;
  -moz-box-shadow: 0px 0px 4px #493b32;
  -o-box-shadow: 0px 0px 4px #493b32;
  -htm-box-shadow: 0px 0px 4px #493b32;
  -webkit-box-shadow: 0px 0px 4px #493b32;
  font-weight: bold;
  color: #473d36;
  text-shadow: 1px 1px 0px #f0b27e;
  text-align: center;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.pafocus_onglet2
{
  width: 120px;
  height: 20px;
  padding: 4px;
  margin-left: 0;
  margin-bottom: 10px;
  background: #39b54a;
  border: 1px solid #d0d0cc;
  box-shadow: 0px 0px 4px #605750;
  -moz-box-shadow: 0px 0px 4px #605750;
  -o-box-shadow: 0px 0px 4px #605750;
  -htm-box-shadow: 0px 0px 4px #605750;
  -webkit-box-shadow: 0px 0px 4px #605750;
  font-weight: bold;
  color: #ba7b42;
  text-shadow: 1px 1px 0px #d4d3cf;
  text-align: center;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.pafocus_onglet3
{
  width: 120px;
  height: 20px;
  padding: 4px;
  margin-left: 0;
  background: #625c51;
  border: 1px solid #423328;
  box-shadow: 0px 0px 4px #3a372d;
  -moz-box-shadow: 0px 0px 4px #3a372d;
  -o-box-shadow: 0px 0px 4px #3a372d;
  -htm-box-shadow: 0px 0px 4px #3a372d;
  -webkit-box-shadow: 0px 0px 4px #3a372d;
  font-weight: bold;
  color: #d1d1cc;
  text-shadow: 1px 1px 0px #39b54a;
  text-align: center;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.pafocus_onglet1:hover, .pafocus_onglet2:hover, .pafocus_onglet3:hover
{
  margin-left: 20px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.pafocus_contenu1
{
  position: absolute;
  z-index: 1;
  width: 700px;
  height: 340px;
  overflow: auto;
  margin-left: 200px;
  margin-top: -40px;
  background: #00a651;
  border: 1px  solid #f5f4ee;
  box-shadow: 0px 0px 4px #38342d;
  -moz-box-shadow: 0px 0px 4px #38342d;
  -o-box-shadow: 0px 0px 4px #38342d;
  -htm-box-shadow: 0px 0px 4px #38342d;
  -webkit-box-shadow: 0px 0px 4px #38342d;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}
.pafocus_contenu2
{
  position: absolute;
  z-index: 2;
  width: 700px;
  height: 340px;
  overflow: auto;
  margin-left: 200px;
  margin-top: -80px;
  background: #00a651;
  border: 1px  solid #f5f4ee;
  box-shadow: 0px 0px 4px #38342d;
  -moz-box-shadow: 0px 0px 4px #38342d;
  -o-box-shadow: 0px 0px 4px #38342d;
  -htm-box-shadow: 0px 0px 4px #38342d;
  -webkit-box-shadow: 0px 0px 4px #38342d;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}
.pafocus_contenu3
{
  position: absolute;
  z-index: 3;
  width: 700px;
  height: 340px;
  overflow: auto;
  margin-left: 200px;
  margin-top: -120px;
  background: #00a651;
  border: 1px  solid #f5f4ee;
  box-shadow: 0px 0px 4px #38342d;
  -moz-box-shadow: 0px 0px 4px #38342d;
  -o-box-shadow: 0px 0px 4px #38342d;
  -htm-box-shadow: 0px 0px 4px #38342d;
  -webkit-box-shadow: 0px 0px 4px #38342d;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}
.pafocus_contenu4
{
  position: absolute;
  z-index: 4;
  width: 700px;
  height: 340px;
  overflow: auto;
  margin-left: 200px;
  margin-top: -133px;
  background: #444;
  border: 1px  solid #f5f4ee;
  box-shadow: 0px 0px 4px #38342d;
  -moz-box-shadow: 0px 0px 4px #38342d;
  -o-box-shadow: 0px 0px 4px #38342d;
  -htm-box-shadow: 0px 0px 4px #38342d;
  -webkit-box-shadow: 0px 0px 4px #38342d;
}
.pafocus_contenu
{
  padding: 4px;
  color: #007236;
  font-size: 11px;
  text-shadow: 1px 1px 0px #f7f6f0;
  text-align: justify;
  font-weight: normal;
}
.pafocus_onglet1:hover .pafocus_contenu1, .pafocus_onglet2:hover .pafocus_contenu2,
.pafocus_onglet3:hover .pafocus_contenu3
{
  margin-left: 180px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.pafocus_onglet1:focus .pafocus_contenu1, .pafocus_onglet2:focus .pafocus_contenu2,
.pafocus_onglet3:focus .pafocus_contenu3
{
  z-index: 10;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
}



[Scipion]

Du moment que vous évoquez un écran plus petit que l'ordinateur portable, donc probablement une tablette, il est tout à fait normal que le rendu final des éléments du forum ne soit pas au top.

Sinon, votre feuille de style CSS est bien agencée et surtout elle ne provoque aucune déformation une fois installée. Sauf que je crois qu'il serait intéressant d'harmoniser une largeur unique pour le bodyline et le Qeel par exemple à 850px, ceci à titre de test bien entendu.

Cordialement

[dancehallnounours]

Merci pour votre réponse :-)

Par "écran plus petit" j'entendai les écrans 15" et 13" d'ordinateurs portables, je serai embêtée que le problème se pose pour ceux qui en sont equipés.
Après les tablettes je ne m'en occupe pas

Je vais tester à 850.

à 800 ce serai trop petit à votre avis?

[Scipion]

Allons-y pour un test à 850px quoi que 800px serait une bonne valeur pour votre cas. Donc, je vous suggère de faire des tests avec les deux valeurs indiquées et nous verrons ce qui se produira à votre niveau.

Cordialement

[dancehallnounours]

Encore moi

Il semble qu'en mettant tout à 800 j'arrive à un affichage plutôt correct
qu'en pensez-vous? http://testdhm.forumactif.org/

Or j'ai un nouveau problème maintenant lol c'est que je n'arrive pas alligner mon PA et mon QEEL même en ayant changé leur dimensions

Une idée?

Encore un grand merci

[Scipion]

Le plus important à mon avis serait de réussir à afficher correctement le tableau du Qeel en harmonie avec le reste du forum donc je vous propose en conséquence de supprimer temporairement votre page d'accueil pour voir l'effet général que cela produit. Après, nous envisagerons la suite pour la PA.

Cordialement

[FANCH 56]

J'avais ce problème sur mon forum il y a quelques années. J'ai résolu en mettant "auto" pour la largeur

[dancehallnounours]

Merci pour votre aide à tous les deux.
En effet j'ai mis 'auto' ça a l'air de donner un meilleur rendu d'affichage et plus harmonisé selon les ecrans.
J'attendrai les premiers retours des membres.
En cas de problème majeur je reviens vous voir

Merci et longue vie à Forumactif!