Sujets similaires

Bonjour et merci de l'aide que vous pourrez m'apporter.

J'ai suivi divers tutoriel du forum. Tout marche très bien. Mais j'ai un petit problème. La largeur de mon forum ne veut pas se réduire. Pourtant via le panneau d'admin j'ai changé les valeurs et j'ai même testé via le CSS avec le bodyline. Mais aucun effet, même en le forçant avec le "!important". Du coup, je ne comprends pas pourquoi il ne veut pas ce réduire.
J'aimerai qu'il fasse 800px de large, hors la il ne fait les pas.
En gros, les bordures marrons devraient être collé à ma bannière.

Je pense que cela vient de mes catégories, hors je n'ai pas de taille à celle-ci (enfin je crois pas) sauf la colonne de droite qui fait 150px. Et bien sûr, je n'arrive pas à donner une taille à mes catégories *SBAFF*

Je pense que le problème sera plus simple à voir, donc voici mon forum de test : http://testgraphnono.forumperso.com/

Et le CSS des fois que le bug se trouve dedans.

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

#i_logo
{
position: relative;
top: -11px;
}

td.rowpic, th, td.cat, td.catHead, td.catSides, td.catLeft, td.catRight, td.catBottom {
-moz-border-radius:10px;
-webkit-border-radius:10px;
}

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

.bodyline {
-moz-border-radius:13px;
border:15px solid #51331b;
  width: 800px;
}

a.mainmenu { position: relative; top: -10px; }

/*Présentation du Profil*/
.atelierprof {
padding:10px;
-webkit-border-radius: 40px 20px 10px 10px;
border-radius: 40px 20px 10px 10px;
/*text-transform:uppercase;*/
background-color:#5a3f39;
}

.pseudo_membre{
font-size: 15px;
  /*text-shadow : 1px 1px 3px #020202;*/
}

/*Profil derrière l'avatar*/

/* Code par Hiro pour CSSACTIF
   Merci de ne pas supprimer cette mention
   (http://www.css-actif.com) */

#englob { /* Encadrement global des 2 divs */
   position:relative;
   width:200px;
   height:320px;
   /*border:1px solid red; La vilaine bordure rouge */
   overflow:hidden; /* Permet de cacher ce qui dépasse */
}

.imgp {
   background:grey; /* le bg de la div qui contient l'avatar */
   position:absolute; /* Laissez comme ceci */
   top:0;/* Laissez comme ceci */
   left:0;/* Laissez comme ceci */
   width:100%;/* Laissez comme ceci */
   height:100%;/* Laissez comme ceci */
   z-index:1;/* La position par rapport à l'autre div qui contient les infos */
   -webkit-transition:all 0.5s;/* Laissez comme ceci */
   -moz-transition:all 0.5s;/* Laissez comme ceci */
   -o-transition:all 0.5s;/* Laissez comme ceci */
   -ms-transition:all 0.5s;/* Laissez comme ceci */
   transition:all 0.5s;/* Laissez comme ceci */
}

#englob:hover > .imgp {
   margin-top:300px; /* Lorsque la souris passe sur la div #englob, on fait glisser l'image vers le bas de 200px */
}

.infosp {
   background: #3c2723; /* le bg de la div qui contient les infos*/
   position:absolute;/* Laissez comme ceci */
   top:0;/* Laissez comme ceci */
   left:0;/* Laissez comme ceci */
   width:100%;/* Laissez comme ceci */
   height:100%;/* Laissez comme ceci */
   z-index:0;/* La position par rapport à l'autre div qui contient les infos (ici en dessous)*/
   opacity:0;/* on met l'opacité à zero pour un effet stylé */
   margin-left:-200px;/* on décale la div de 200px, elle est invisible grâce a l'overflow:hidden de #englob */
   -webkit-transition:all 0.5s;/* Laissez comme ceci */
   -moz-transition:all 0.5s;/* Laissez comme ceci */
   -o-transition:all 0.5s;/* Laissez comme ceci */
   -ms-transition:all 0.5s;/* Laissez comme ceci */
   transition:all 0.5s;/* Laissez comme ceci */
padding: 5px;
  -webkit-border-radius: 40px 20px 10px 10px;
border-radius: 40px 20px 10px 10px;
}

#englob:hover > .infosp {
   opacity:1;/* Lorsque la souris passe sur la div #englob, on augmente l'opacité des infos */
   margin-left:0px;/* et on décale cette div à 0px (position par défaut) */
}

/* MISE EN FORME DES LISTES DE SUJETS */

.bloc_sujets
{
  width: 950px;
  margin: auto;
  background: #5f4441;
  /*border: 1px solid #ececec;
  box-shadow: 0px 0px 3px #868686;
  -o-box-shadow: 0px 0px 3px #868686;
  -moz-box-shadow: 0px 0px 3px #868686;
  -webkit-box-shadow: 0px 0px 3px #868686;
  -htm-box-shadow: 0px 0px 3px #868686;*/
  padding: 5px;
}
.sujets
{
  background: #b9a497;
  border: 1px solid #74504c;
  padding: 3px;
  color: #694646;
}
.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: #d2c5bc;
  border-left: 3px solid #391419;
  border-right: 3px solid #391419;
  padding-top: 10px;
  font-size: 11px;
}
.sujets_stats
{
  width: 900px;
  text-align: right;
  margin-bottom: 5px;
}
.sujets_stats_contenu
{
  font-size: 10px;
  color: #a4a4a4;
}

.derniermess{
  width: 150px; /* largeur de la colonne "Derniers messages" */
}
/* fin mise en forme liste sujet*/

/* QEEL*/
/* ======================================
Personnalisation de la structure du QEEL
fait par Faucon pour CSS ACTIF
=========================================
Début du code
=========================================*/
.qeel_centrage{
  margin-left: 40px;
}
/*zone groupes*/
.groupes {/*aspect des groupes*/
font-size: 14pt;
text-shadow: #000000 1px 1px 1px ;
font-family: 'Amaranth', sans-serif;
   text-align: center;
}
.mon_onglet, .mon_onglet_selected { /*position des onglets*/
padding-left : 5px;
padding-right : 5px;
display:inline-block;
}

/*Couleur des groupes*/
a.groupe1 { color:#d93f32;}
a.groupe2 { color:#FFF;}
a.groupe3 { color:#980819;}
a.groupe4 { color:#E67D22;}
a.groupe5 { color:#B17F98;}
a.groupe6 { color:#5CDF72;}

/*zone de description des groupes*/
.descgroupes { /*description des groupes*/
width:400px;
padding: 5px;
box-shadow:0px 0px 10px #6581C1;
-moz-box-shadow: 0px 0px 10px #6581C1;
-webkit-box-shadow: 0px 0px 10px #6581C1;
}

#mon_contenu, .descgroupes { height : 190px; }
.mon_contenu { display:none; }

/*zone des statistiques*/
.stats { /*partie statistique du forum*/
width:400px;
height:200;
text-align: justify;
padding: 5px;
box-shadow:0px 0px 10px #5CDF72;
-moz-box-shadow: 0px 0px 10px #5CDF72;
-webkit-box-shadow: 0px 0px 10px #5CDF72;
}
.membreconnecte{ /*partie membres connéctés*/
overflow: auto;
height: 75px;
padding: 5px;
box-shadow:0px 0px 10px #d93f32;
-moz-box-shadow: 0px 0px 10px #d93f32;
-webkit-box-shadow: 0px 0px 10px #d93f32;
}

.hero_img{
  background-image: url(http://i40.servimg.com/u/f40/09/00/11/61/hero10.png);
  width: 142px;
  height: 72px;
  margin: auto;
}

.anarchist_img{
  background-image: url(http://i40.servimg.com/u/f40/09/00/11/61/anarch11.png);
  width: 197px;
  height: 85px;
  margin: auto;
}

.civil_img{
  background-image: url(http://i40.servimg.com/u/f40/09/00/11/61/freaki10.png);
  width: 200px;
  height: 100px;
  margin: auto;
}

.soldier_img{
  background-image: url(http://i40.servimg.com/u/f40/09/00/11/61/author10.png);
  width: 186px;
  height: 73px;
  margin: auto;
}

.descrip_groupe{
padding-left: 10px;
padding-right: 10px;
  font-size: 12px;
}

/* ======================================
Personnalisation de la structure du QEEL
fait par Faucon pour CSS ACTIF
=========================================
Fin du code
=========================================*/

/* Titre catégorie message forum */
.forumlink{
  font-size : 25px;
  text-align : center;
  font-family: 'Amaranth', sans-serif;
  padding: 2px;
  color: #b92e11 !important;
}

.forumlink:hover{
  color: #f23c14 !important;
}

.sforum{
  background: #d9b674;
  padding: 5px;
  text-align: center;
  border-top: 2px #51331b solid;
}

/*stat sujet message sous le titre du forum*/
.StatsForum {
   font-size:12px;
   text-align: center;
  font-family: 'Amaranth', sans-serif;
  color: #d6ad6f;
}

.description_forum{
  text-align: justify;
  padding-left: 30px;
  padding-right: 30px;
  background: #e3cd9e;
}

.last_sujet{
  border-top: 2px #51331b solid;
  background: #e3cd9e;
}

/*crédit forum footer*/
.mes-credits
{
   font-weight:normal;
   font-variant:small-caps;
   color:#000000;
   font-size:11px;
   text-align:center;
   font-family:arial, helvetica, sans-serif;
}

/*Titre catégorie */
/* Mise en forme du "bloc" qui contient le titre */
.TitreCategorie {
  /* background: ; */
   width: 100%; /*largeur à modifier selon vos goûts*/
   margin:auto; /* on centre le bloc */
   padding:2px; /*espace entre la bordure et le texte*/
}

/* mise en forme du titre lui-même */
.TitreCategorie h2 {
   margin:0; /* le titre a des marges par défaut, pour éviter de 'casser' nos réglages, on remet à zéro ici */
   text-align: center; /*alignement du texte par rapport au bloc qui le contient */
   letter-spacing:2px; /* espacement entre les lettres */
   font-variant:small-caps; /* texte en petites majuscules */
   color:#006699; /* couleur du texte */
   font-family: 'Amaranth', sans-serif;
   font-size:30px;
}

Je remercie d'avance ceux qui me répondront, en espérant trouver la clef du mystère !

Dans ton CSS il y a :

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

Je suppose que c'est pour que la bannière touche le haut ? Si oui, alors pas la peine de toucher à cela Wink

. Il est plus simple d'enlever cela et de mettre :

Code:: table.bodylinewidth
{
padding : 0 0 10px 0;
}

Cela correspond à :
En haut : 0px de marge intérieure
A droite : idem
En bas (troisième chiffre) : 10px de marge intérieur
A gauche : 0px de marge intérieure
Par défaut FA met 10px de marge intérieur, ce qui fait que peut importe que tu aurais fait, vu le placement de la bannière (à l'intérieur de "table.bodylinewidth"), il y aurait toujours eu 10px sur les côtés.

Ca ne résoud pas encore le problème, mais c'est déjà une piste ^^

Est ce que je pourrai voir ton template pour les catégories s'il te plait ?

Merci de me répondre Nihil Very Happy

Alors, le code dont tu me parles, en faite c'est pour éviter d'avoir une marge entre le haut de la bannière et du navigateur.

Comme demandé, voici le template index_box (si je me trompe pas c'est celui là qui correspond aux catégories)

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
   <td valign="bottom">
      
      <span class="gensmall">{LAST_VISIT_DATE}<br />
      {CURRENT_TIME}<br />
      </span>
      
      <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
   </td>
   <td class="gensmall" align="right" valign="bottom">
      
      <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
      <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
      
      <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
   </td>
</tr>
</table>

<div class="TitreCategorie">{catrow.tablehead.L_FORUM}</div>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">



<tr>
   
   <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
   
   <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
      <h{catrow.cathead.LEVEL} class="hierarchy">
         <span class="cattitle">
            <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
         </span>
      </h{catrow.cathead.LEVEL}>
   </td>
   <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>


<tr>
   
   <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
   
   <td class="row1 over" colspan="2" valign="top" width="100%" height="50">
      <h{catrow.forumrow.LEVEL} class="hierarchy">
         <center><span class="forumlink">
            <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
</span></center>
      </h{catrow.forumrow.LEVEL}>
<div class="StatsForum">{catrow.forumrow.TOPICS} sujets & {catrow.forumrow.POSTS} messages</div>
<div class="sforum"><span class="gensmall">
         
         {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
         
         {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span><br /></div>
<div class="description_forum"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>

   </td>
      <td class="row3 over" align="center" valign="middle" height="50">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
<br />
<div class="last_sujet"> <div class="gensmall derniermess">{catrow.forumrow.LAST_POST}</div></div>
</td>
</tr>


<tr>
   
   <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
   
   <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>


</table><img src="{SPACER}" alt="" height="5" width="1" />

Je suis pas sûre, j'ai peut être une idée :

Code:: 
<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>

<td class="row1 over" colspan="2" valign="top" width="100%" height="50">

A l'endroit où il y a width="100%", est ce que ça change quelque chose si tu diminues cette valeur (fait des test avec 50%, 80% par exemple

Alors j'ai testé, ça change la taille de la colonne de gauche (donc la description du forum), mais ça agrandit la colonne de droite (dernier poste) et le corps du forum garde la même taille

Oups excuse moi Nono je pense avoir fait une erreur dans mon premier post, je crois que le code ne change rien en fait //^^''//, il serait mieux de mettre :

Code:: td.bodyline
{
padding : 0 0 10px 0;
}

Dans ton css, enlève ton centrage fait avec un margin, ce n'est pas comme ça qu'on centre en CSS un bloc (enlever cela Smile

Code:: .qeel_centrage {
margin-left: 40px;
}

Là je crois ça devrait être bon xD

Oh yeah ça marche ! Je crois que c'était mon margin-left qui faisait tout merder.
Mais du coup, le qeel est pas du tout centré ><

Effectivement. Il faut que tu te rendes dans tes template, là où tu as mis la table avec ton QEEL.
Là, tu dois avoir quelque chose dans ce genre là :

Code:: <div class="qeel_centrage">
<table width="800px" cellspacing="5" cellpadding="1">

Il faut retirer le width="800px", et lui rajouter une class, par exemple "tableau_qeel"

Code:: <div class="qeel_centrage">
<table class="tableau_qeel" cellspacing="5" cellpadding="1">

Ensuite, comment centrer en CSS ? Il faut définir à un bloc une largeur (width) puis les marges latérales en "automatique"

Code:: .tableau_qeel {
width : 772px;
margin : auto;
}

Normalement comme ça, ça devrait être bon Wink

C'est presque bon.
J'ai juste l'impression que la marge est plus grande du coté droit. Mais bon c'est qu'un détail, ou peut être mes yeux qui partent en vrille aussi xD

Hum, tu peux modifier le 772px par 762px je pense que ça sera mieux ^^

C'est parfait !

Un grand merci à toi pour tout. Je te suis vraiment très reconnaissante ^^

Du coup, le sujet peut être archivé.

Largeur du forum indomptable [a archiver]

Largeur du forum indomptable [a archiver]

Sujets similaires

Sujets similaires

Partenaires Or