Largeur du forum et problème de tableaux

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

Résolu Largeur du forum et problème de tableaux

Message par TYL le Dim 26 Avr 2015 - 15:10

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : 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 : Quand j'ai fais une mise à jour en changeant la majeure partie du codage du forum.
Lien du forum : http://love-runs-out.forumactif.org/

Description du problème

Bonjour,
Lorsque j'ai fais une mise à jour au niveau de mon forum en changeant de nombreux templates (index_box, index_body, overall_footer_end, overall_header, topics_list_box, viewforum_body, viewtopic_body) ainsi que le CSS, il en est ressorti que mon forum est plus large que ce que je souhaiterait. J'ai conscience que la page d'accueil est large, mais même lorsque je l'enlève le soucis persiste. Je précise que dans configuration, la largeur de mon forum est calibrée sur 750px, comme je le voudrais.
Je pense également qu'il y a un soucis au niveau des tableaux comme on peut le voir dans ce sujet. J'ai trouvé comment le régler (en imposant une largeur au tableau) mais il n'empêche que c'est agaçant pour les membres.
J'aimerais donc beaucoup régler ces deux soucis, je vous fournis le CSS mais ne sachant pas quel template pourrait influencer la largeur, je préfère qu'on me dise lequel donner plutôt que de donner la totalité du codage de mon forum.
Code:
/*FONDAMENTAUX*/
#chatbox_header .cattitle:before { content: "Garde manger de Timmy!"; }
#chatbox_header .cattitle strong { visibility: hidden; }

.postdetails.poster-profile img {
  width:200px;
  display:block;
}
a.mainmenu {
  font-family: Poiret One;
  font-size: 13px;
}
a {text-decoration: none !important; }
A:link {text-decoration: none !important;}
A:visited {text-decoration: none !important;}
A:active {text-decoration: none !important;}
A:hover {text-decoration: none !important;}
.selectCode {
  margin-right:5px;
  float: right;
}
.bodyline {
border-top: none !important;
border-bottom: none !important;
}
.postbody {
    display: block;
    padding-left: 15px;
    padding-right: 15px;
    text-align:justify;
}
body {
margin: 0 auto;
}

/*PAGE D'ACCUEIL*/
.lienpa {
  width: 200px;
  border-left: 3px solid #CC0099;
  border-right: 3px solid #CC0099;
  display: block
  border-top: 1px solid #CC0099;
  border-bottom: 1px solid #CC0099;
  height: 15px;
}

.lienpa:hover {
  border-left: 3px solid #33CC33;
  border-right: 3px solid #33CC33;
  border-top: 1px solid #33CC33;
  border-bottom: 1px solid #33CC33;
}
.left {
  padding:10px;
  background-color:#ffffff;
  border:1px solid #a69080;
  opacity:1;
  margin-top:1px;
  margin-right:4px;
  width:150px;
  float:left;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.left:hover {
  opacity:0.7;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.cube  {
  height: 20px !important;
  width:20px !important;
  background-color: #C23838;
  color: #C23838;
  -moz-transition-duration:4s;
  -moz-transition-timing-function:linear;
  -webkit-transition-duration:4s;
  -webkit-transition-timing-function:linear;
  transition-duration:4s;
  transition-timing-function:linear;
}
.cube:hover {
  -moz-transform:rotate(360deg);
  -webkit-transform:rotate(360deg);
  transform:rotate(360deg);
}

a.cube  {
  height: 20px !important;
  width:20px !important;
  background-color: #C23838;
  display: inline-block;
  color: #C23838;
  -moz-transition-duration:4s;
  -moz-transition-timing-function:linear;
  -webkit-transition-duration:4s;
  -webkit-transition-timing-function:linear;
  transition-duration:4s;
  transition-timing-function:linear;
}
a.cube:hover {
  -moz-transform:rotate(360deg);
  -webkit-transform:rotate(360deg);
  transform:rotate(360deg);
}

/*GROUPES*/
.mc {
  height: 25px;
  width:25px;
background-color: #C23838;
}

.bj {
  height: 25px;
  width:25px;
background-color: #3A93CF;
}
.fr {
  height: 25px;
  width:25px;
  background-color:#d5a440;
}
.m {
  height: 25px;
  width:25px;
  background-color:#C288E3;
}
.k {
  height: 25px;
  width:25px;
  background-color:#41C454;
}

.trait {
  border-bottom:1px solid #6d4d26;
  margin-top:2px;
  margin-bottom:2px;
}

/*FICHES*/
.secondarytitle h2 {
  font-family: Poiret One;
  font-size: 18px;
  text-transform: uppercase;
}
.infoscéna {
opacity: 0;
width: 190px;
height: 310px;
padding: 5px;
transition: 0.5s; background-color: #ffffff;
}

.infoscéna:hover {
opacity: 0.8;
transition: 0.5s;
}
.cadre {
  background-color: #eaeebd;
  font-size: 11px;
  padding: 10px;
  box-shadow: 0px 1px 1px #6d4d26;
  width: 500px;
}
.histoire /* Rédaction histoire */ {
   width: 470px;
   padding-left: 5px;
   padding-right: 5px;
   text-align: justify;
   line-height: 15px;
   font-size: 12px;
   font-family: Georgia;
   overflow: auto;
}

.horsjeu {
   height: 120px;
   padding-left: 5px;
   padding-right: 5px;
   overflow: auto;
   text-align: justify;
   font-family: Georgia;
   font-size: 11px;
   line-height: 14px;
   width: 382px;
}

.lienscena {
   height: 120px;
   padding-left: 5px;
   padding-right: 5px;
   overflow: auto;
   text-align: justify;
   font-family: Georgia;
   font-size: 11px;
   line-height: 14px;
   width: 382px;
}

.nego {
   width: 450px;
   padding: 5px;
   text-align: justify;
   font-family: Georgia;
   font-size: 11px;
   line-height: 14px;
}

.barre {
   border: 1px dashed #6d4d26;
   width: 200px;
   text-align: center;
}

/* Bottin */
pris {
  color: #cc0033
  text-transform: uppercase; 
}
scenario {
  color: #33cc66
  text-transform: uppercase;
}
reserve {
  color: #996699
  text-transform: uppercase;
}

/*QEEL*/
.cadreqeel {
  background-color: #e8efa2;
  font-size: 11px;
  padding: 10px;
  color: #9D5533;
  box-shadow: 0px 1px 1px #6d4d26;
  border-radius: 20px;
  width: 660px;
}

.texteqeel { height: 200px;
  overflow: auto;
  margin: 5px;
  padding: 5px;
  text-align: justify;
  border: 1px solid #000000;
  font-size: 11px;
  background-color: #e8efa2;
  }
  .qeel_titre
{
  width: auto;
  height: 100px;
  margin: auto;
  background: url(http://img15.hostingpics.net/pics/445654qeeltitre.png) no-repeat;
}
.groupe1, .groupe2, .groupe3, .groupe4, .groupe5
{
  display: block;
  font-weight: bold;
  text-transform: small-caps;
  margin-top: 5px;
  text-align: center;font-size: 14px;
}
.groupe1
{
  color: #dd5549 !important;
}
.groupe2
{
  color: #5176b4 !important;
}
.groupe3
{
  color: #d19656 !important;
}
.groupe4
{
  color: #579c5a !important;
}
.groupe5
{
  color: #545454 !important;
}
.groupe_contenu
{
  display: none;
}
.qeel_infos
{
  width: 90%;
  margin-top: 5px;
  margin-bottom: 5px;
  background: #f3f3f3;
  border: 1px dotted #5f5600;
  padding: 4px;
  font-size: 10px;
  text-align: justify;
}
.groupe1:hover .groupe_contenu, .groupe2:hover .groupe_contenu, .groupe3:hover .groupe_contenu, .groupe4:hover .groupe_contenu, .groupe5:hover .groupe_contenu
{
  display: block;
  position: absolute;
  margin-left: 50px;
  width: 250px;
  background: #e8efa2;
  padding: 4px;
  border: 1px dotted #5f5600;
  color: #989898;
  font-size: 10px;
  font-weight: normal;
}

/*CATEGORIES*/
.lastpost-avatar img {
  height: 80px;
  width: 50px;
}

.forumline
{
  width: 90%;
  margin: auto;
}
table
{
  width: 90%;
  margin: auto;
}
.forumline
{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  background: #e8efa2;
  border: 1px solid #ffffff;
  box-shadow: 0px 0px 5px #595959;
  -moz-box-shadow: 0px 0px 5px #595959;
  -o-box-shadow: 0px 0px 5px #595959;
  -htm-box-shadow: 0px 0px 5px #595959;
  -webkit-box-shadow: 0px 0px 5px #595959;
}
.cate_titre
{
  width: 90%;
  margin: auto;
  text-align: center;
}
.categorie
{
  width: 90%;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  background: #c6c85c;
  border-top: 3px solid #4c4842;
  border-bottom: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  box-shadow: 0px 0px 5px #595959;
  -moz-box-shadow: 0px 0px 5px #595959;
  -o-box-shadow: 0px 0px 5px #595959;
  -htm-box-shadow: 0px 0px 5px #595959;
  -webkit-box-shadow: 0px 0px 5px #595959;
}
.forum
{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  margin-bottom: 5px;
  background: #fcf5c7;
  border: 1px dotted #5f5600;
  padding: 2px;
}
.forumlink
{
  display: block;
  width: 490px;
  font-variant: small-caps;
  letter-spacing: 2px;
  padding-left: 20px;
  text-shadow: 1px 1px 0px #ffffff;
}
.forumlink a
{
  font-size: 16px;
  border-bottom: 2px dotted #5f5600;
}
.description
{
  margin: auto;
  display: block;
  width: 380px;
  font-size: 11px;
  text-align: justify;
  color: #000000;
}
.illu
{
  float: right;
  margin-left: 10px;
  margin-bottom: 10px;
  border: 1px solid #5f5600;
  background: #5f5600;
  padding: 5px;
}

.stats_last
{
  display: block;
  width: 120px;
  margin: auto;
  background: #e8efa2;
  padding: 10px;
  border: 1px dotted #5f5600;
}
.stats
{
  display: block;
  text-align: center;
  font-size: 10px;
  color: #b6b26a;
  border-bottom: 1px solid #cacaca;
  padding-bottom: 4px;
  margin-bottom: 4px;
}
.last
{
  display: block;
  text-align: center;
  font-size: 9px;
}
.sous_forum
{
  display: block;
  width: 98%;
  margin: auto;
  background: #e8efa2;
  padding: 2px;
  text-align: center;
}
a.nav img
{
width: 100px;
}

/*PROFIL DANS MESSAGES*/
.profil
{
  width: 210px;
  margin: auto;
  padding: 2px;
  background: #eaeebd;
  border: 1px dotted #5f5600;
  text-align: center;
}
.name
{
  font-family: 'Pacifico', cursive;
  font-size: 18px;
}
.profil_avatar
{
  border: 1px solid #5f5600;
  background: #fcf5c7;
  padding: 4px;
}
#page-body
{
  width: 920px;
  margin: auto;
}
.forumline
{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  background: #e8efa2;
  border: 1px solid #ffffff;
  box-shadow: 0px 0px 5px #595959;
  -moz-box-shadow: 0px 0px 5px #595959;
  -o-box-shadow: 0px 0px 5px #595959;
  -htm-box-shadow: 0px 0px 5px #595959;
  -webkit-box-shadow: 0px 0px 5px #595959;
}
table
{
  width: 100%;
  margin: auto;
}
a.nav img
{
  width: 300px;
}

  /*TITRES*/
t {
    font-family: Times New Roman;
   font-size: 15px;
     font-style: bold;
   color: #fd649a;
   text-transform: uppercase;
   letter-spacing: -1px;
   text-align: center;
   padding-top: 2px;
   margin-bottom: 3px;
}
t1 {
        font-family: Times New Roman;
   font-size: 11px;
     font-style: bold;
   color: #fd649a;
   text-transform: uppercase;
   letter-spacing: -1px;
   text-align: center;
   padding-top: 2px;
   margin-bottom: 3px;
}

a.t1 {
        font-family: Times New Roman;
   font-size: 11px;
     font-style: bold;
   color: #482d14;
   text-transform: uppercase;
   letter-spacing: -1px;
   text-align: center;
   padding-top: 2px;
   margin-bottom: 3px;
}
.titre01 /* Scénario & Présentation: Nom du personnage */ {
   font-family: 'Satisfy', cursive;
   font-size: 45px;
   color: #8f2900;
   text-align: center;
     position: relative;
}

.titre02 /* Scénario & Présentation: Citation mignonne */ {
   font-family: 'Shadows Into Light';
   font-size: 16px;
   color: #482d14;
   text-align: center;
}

.titre03 /* Sous-titre des sections */ {
   font-family: Philosopher;
   font-size: 15px;
   color: #fd649a;
   text-transform: uppercase;
   letter-spacing: -1px;
   text-align: center;
   padding-top: 2px;
   margin-bottom: 3px;
}

.titre04 /* Bottin des avatars, sous titres */ {
   font-family: Alex Brush;
   font-size: 30px;
   color: #482d14;
   text-align: center;
     position: relative;
}

Merci d'avance I love you


Dernière édition par TYL le Dim 26 Avr 2015 - 16:15, édité 1 fois

TYL
**

Féminin
Messages : 65
Inscrit(e) le : 30/06/2011

http://love-runs-out.forumactif.org/
TYL a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Largeur du forum et problème de tableaux

Message par MlleAlys le Dim 26 Avr 2015 - 15:43

Bonjour,

- Dans votre feuille de style, localisez et supprimez le code suivant :
Code:
#page-body {
  margin: auto;
  width: 920px;
}

- Puis localisez le code suivant :
Code:
.forumlink {
  display: block;
  font-variant: small-caps;
  letter-spacing: 2px;
  padding-left: 20px;
  text-shadow: 1px 1px 0 #fff;
  width: 490px;
}
Et supprimez la ligne width: 490px;

- Votre PA est ensuite effectivement trop grande

- Et il reste ensuite finalement votre bannière trop large de quelques px, vous pouvez ajouter le code css suivant pour qu'elle n'élargisse pas le forum :
Code:
#i_logo {
  max-width: 100%;
}

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Largeur du forum et problème de tableaux

Message par TYL le Dim 26 Avr 2015 - 15:50

Bonjour,
mon premier soucis est effectivement réglé mais reste le soucis des tableaux au niveau des messages, comment pourrais-je le régler? I love you
Merci beaucoup!

TYL
**

Féminin
Messages : 65
Inscrit(e) le : 30/06/2011

http://love-runs-out.forumactif.org/
TYL a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Largeur du forum et problème de tableaux

Message par MlleAlys le Dim 26 Avr 2015 - 15:57

de quel problème parlez vous exactement ?

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Largeur du forum et problème de tableaux

Message par TYL le Dim 26 Avr 2015 - 16:01

Voici l'apparence du code pour poster des réponses sur un autre forum: https://i19.servimg.com/u/f19/15/71/23/40/captur10.jpg
Et le code comme on peut le trouver sur mon forum: https://i19.servimg.com/u/f19/15/71/23/40/captur11.jpg
Je vous accorde que maintenant que la largeur est corrigée c'est moins flagrant, mais on voit que le tableau au niveau du blanc semble ne pas fonctionner et/ou ne pas respecter ses dimensions. Il n'y a aucune différence (hormis la couleur) entre les deux codes.

TYL
**

Féminin
Messages : 65
Inscrit(e) le : 30/06/2011

http://love-runs-out.forumactif.org/
TYL a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Largeur du forum et problème de tableaux

Message par MlleAlys le Dim 26 Avr 2015 - 16:09

Oh, les petits rectangles de couleur !
C'est parce que vous appliquez une largeur automatique de 100% à tous les tableaux de votre forum.
Pour que la largeur du tableau s'adapte au contenu, dans la balise table ajoutez le style width: auto; :
Code:
<table style="width: auto;">

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Largeur du forum et problème de tableaux

Message par TYL le Dim 26 Avr 2015 - 16:14

Merci beaucoup, problème résolu! I love you

TYL
**

Féminin
Messages : 65
Inscrit(e) le : 30/06/2011

http://love-runs-out.forumactif.org/
TYL 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