Décalage des catégories quand on lit les topics

[Sayali]

Rappel du premier message :

Bonsoir à tous (ou bonne nuit ^^),

Tout d'abord pardon si mon problème a déjà été rencontré et résolu, mais je n'ai pas trouvé malgré une recherche.

Voilà, je rencontre un problème que je pense lié à du code, et ne trouve pas la réponse. Il est pas gravissime, mais pour un forum de graphisme, ben c'est pas top quand-même.

- l'URL du forum : http://naturaliart.forums-actifs.com/
- la version du forum, : phpBB2
- une illustration du souci : je vous mets le lien vers un topic que vous devriez voir : http://naturaliart.forums-actifs.com/t29-reglement-a-lire-et-a-approuver
- accès au compte fondateur : oui
- templates modifiées : oui : index_body et index_box notamment (je fournirai que si nécessaire parce que sinon ça deviendra illisible ^^)
- CSS personnalisé, : oui (idem que pour les templates)

Donc comme on le voit (en dézoomant si nécessaire), la catégorie dépasse trop vers la droite, et ce uniquement quand on lit les messages des sujets, pas ailleurs. Je n'arrive pas à trouver d'où vient le souci. J'ai essayé de régler ça via du CSS, ça n'a pas marché, et je ne sais franchement plus quoi faire =/ Donc si quelqu'un a une idée, je suis preneuse !

Merci d'avance à tous ceux qui essayeront de m'aider, avec ou sans succès

[Sayali]

Up? =/

[Sayali]

Up.

[Lixyr]

Bonsoir Sayali.

Chez moi, le tout est centré par rapport à la bannière, voire à l'écran. Est-ce que le problème est toujours d'actualité ?
Sinon, dans votre css, vous avez ceci :

Code:

table.forumline {
    border-radius: 8px 8px 8px 8px;}

Rajoutez ceci :

Code:

 margin: 0px auto;

Par contre, le cadre postbody blanc n'est absolument pas centré. Il est vers la droite. Retirez les codes données précédemment, qui ne servent absolument pas à centrer (margin-left: 110px; ça créé une marge à gauche, donc ça ne centre pas) et mettez ceci à la place :

Code:

margin:0 auto;

=> ça enlève la marge en haut et en bas (0), et ça créé une marge automatique de même taille à gauche et à droite, donc ça centre automatiquement.

[Sayali]

Bonjour Lixyr,

Déjà un grand merci pour cette réponse.

Oui, mon problème est toujours d'actualité malheureusement.
Je viens de modifier le code comme conseillé. Je suppose que ça fera plus propre, mais ça n'a rien changé du tout par rapport à mon problème... et c'est même devenu encore plus bizarre !
Je viens de refaire une capture d'écran du souci sur notre forum test (puisque le souci apparait sur les deux) : http://hpics.li/72707dd
On voit bien ici qu'en bas par rapport au texte (PA et tout), c'est décalé, et en haut par rapport à la bannière aussi.
J'ai regardé sur google chrome (un éclair de génie, j'ai pensé au cache à vider), et pas de souci, mais j'étais pas connectée. Je décide de me connecter (un autre éclair de génie...), et là... bingo, de nouveau le souci !
Je comprends de moins en moins...

Merci en tout cas pour ta réponse.

Edit : j'ai tenté de ne pas forcer la barre de navigation à rester sur une seule ligne, mais ça ne change rien.

[Lixyr]

Avez-vous supprimé les cookies du forum ? Vous avez le lien en bas de votre forum (ici)

Ensuite, et bien sur votre forum officiel (mis en profil), les sujets n'étaient plus centré, mais le postbody non plus. Le margin-left:110px est toujours présent, et lorsque vous l'enlevez et que vous recentré ça, comme je l'ai dit plus haut, les sujets se recentre avec.
Donc faites les modifications sur votre forum officiel, et ne les enlevez pas.

Code:

.postbody {
    background-color: rgb(244, 248, 247);
    color: rgb(194, 176, 139);
    padding: 15px 10px 20px;
    border-radius: 10px 10px 10px 10px;
    width: 650px;
    margin: 0 auto;

[Sayali]

Dans mon code CSS je ne trouve absolument pas de .postbody tout seul, bizarre. Je rejoins mon CSS (celui du forum test, donc modifié) :

Code:

/* header de fond */
#i_logo{
position:relative;
top:-20px;
height:500px;/*hauteur bannière*/
width:1600px;/*largeur bannière*/
}
body{background:url(http://img11.hostingpics.net/pics/299061mars.png) no-repeat 50% 0% #b8d784}
#page-body{width:910px;margin:auto;}

.bodyline,.forumline{background:none;border:none;border-spacing:0px;}

/*largeur du forum*/
.forumline.categorie{width:700px;margin:auto;}

/*bordures gauche et droite des catégories*/
.forumline.categorie>tbody>tr>td:first-child{border-left:8px solid #97b656;}
.forumline.categorie>tbody>tr>td:last-child{border-right:8px solid #97b656;}

/*taille titre catégorie*/
.secondarytitle h2{font-size:x-large}

/*cacher le lecteur de son de la chatbox*/
#son_chatbox{display:none}

/* style texte liens */
a {font-variant: small-caps; text-decoration : none;}

/* ombre et couleur liens */
.a,.gensmall, a:link,a:visited,a:hover{color: #714d1e;}

/* couleur liens dans les catégories [amélioration de la lisibilité] */
#page-body .forumline .gen, #page-body .forumline .genmed, #page-body .forumline .gensmall, #page-body .forumline a{
color:#714d1e;
}
.postdetails {color: #ededd0 !important;}

/* texte description catégories */
.catetexte {margin-left: 7px; margin-right: 3px; padding-top: 3px; padding-bottom: 3px;color:#BCB18F;}

/* fond derniers messages */
.derniermess {background-color: #b8d784;
  border-left: solid #b8d784 2px;
  border-right: solid #b8d784 2px;
  height: auto; width: 115px;
border-radius: 8px;
border-top: 2px #b8d784 solid;
border-bottom: 2px #b8d784 solid;
  color:#BCB18F;}
 
/* texte derniers messages */
.derniermesstext {margin-left: 7px; margin-right: 3px; padding-top: 3px; padding-bottom: 3px;}

/*corriger couleur derniers messages*/
.derniermess a,.derniermess .derniermesstext{color:#BCB18F !important;text-shadow:none !important;}

/* fond description catégories */
.descricategorie {margin: 7px;
  background-color: #b8d784;
  border-left: solid #b8d784 4px;
  border-right: solid #b8d784 4px;
  height: auto;
border-radius: 8px;
border-top: 0px #b8d784 solid;
border-bottom: 0px #b8d784 solid;}

/* texte souligné */
u {border-bottom : 1px dashed #714d1e; text-decoration: none;}

/* texte en gras */
b {font-variant: small-caps;}

/* texte en italique */
i {color : #714d1e;}

/* texte nom rang */
.rang {font-variant: small-caps; text-decoration: none; font-size:14px;}

/* texte rang */
.texterang {font-variant: small-caps; text-decoration: none; color:#ffffff; font-size:12px;}

/* texte pseudo */
.pseudo {font-size: 16px;}

/* balise code */
.code {background-color:#fffed9;
color: #f4f8f7;
padding-left: 6px;
border-color:#f0d39e;
padding-top:2px;
padding-bottom:2px;}

/* balise quote */
.quote {background-color:#fffed9;
color: #f4f8f7;
padding-left: 6px;
border-color:#f0d39e;
padding-top:2px;
padding-bottom:2px;}

/* balise spoiler */
.hide {background-color:#fffed9;
color: #f4f8f7;
padding-left: 6px;
border-color:#f0d39e;
paddin-top:2px;
padding-bottom:2px;}
.spoiler_content{color:#f4f8f7;
padding-left:6px;
padding-top:2px;
padding-bottom:2px;}

/* bouton previsualiser */
input.liteoption {background-color: #EDEDD0;
  color: #c2b08b;
  border-radius: 8px;
  border-left: 4px solid #ffffff;
  border-right: 4px solid #ffffff;
  border-top: 1px solid #EDEDD0;
  border-bottom: 1px solid #EDEDD0;
font-variant:small-caps;}

/* bouton envoyer */
input.mainoption {background-color: #EDEDD0;
  color: #c2b08b;
  border-radius: 8px;
  border-left: 4px solid #ffffff;
  border-right: 4px solid #ffffff;
  border-top: 1px solid #EDEDD0;
  border-bottom: 1px solid #EDEDD0;
font-variant:small-caps;}

/* barre titre mess */
input.post {background-color: white;
  color: black;
  border-radius: 8px;
  border-left: 4px solid #f0d39e;
  border-right: 4px solid #f0d39e;
  border-top: 1px solid #f0d39e;
  border-bottom: 1px solid #f0d39e;}

/* cadre mess */
textarea#text_editor_textarea.post {background-color: white;
  color: black;
  border-radius: 8px;
  border-left: 4px solid #f0d39e;
  border-right: 4px solid #f0d39e;
  border-top: 1px solid #f0d39e;
  border-bottom: 1px solid #f0d39e;}

/* table forum cate */
table.forumline {border-radius:8px;
margin:0px auto;}
   
/* avatar */
.avatar {font-size: auto;}

/* fond profil */
.profil {background-image: url(http://img15.hostingpics.net/pics/33008614b.png);
  padding-left:-5px;
  background-color: none;
  height:auto; width:195px;
border-left : solid 0px #F0D39E;
border-right: solid 0px #F0D39E;
margin-right:6px;
margin-left: 6px;
border-radius:0px;
border-top: 0px #f0d39e solid;
border-bottom: 0px #f0d39e solid;}

/* texte infos posteur fixe */
.infosposteur {padding-left : 8px; font-variant: small-caps; text-decoration: none; color: #714d1e !important;}

/* texte infos posteur modifiable */
.labelinfosposteur {color:white;}

/* fond avatar pseudo rang */
.avapseudorang {margin:auto;
  background-color: rgba(255,255,255,0.3);
  min-height:250;
  width: 165px;
border-radius:6px;}

/* pas de message edition */
tr.post span.gensmall { display: none; }

/* fond PA transpa */
table#msg_et, table#msg_et td{
  background-color:none !important;
  }

/* PA et bulles */

.PANaturaliart .Partenaires{
  height:0px;
  position:relative;
  /*position:absolute;
  left:250px;top:435px;
  width:394px;height:35px;
  text-align:left;
  font-size:1px;*/
}
.PartenaireA{
  opactity:0.01;
  width:100%;
  height:100%;
}
.PANaturaliart .Partenaire1{
  position :absolute;
  left : 250px; top:414px;
}
.PANaturaliart .Partenaire2{
  position :absolute;
  left : 250px; top:344px;
}
.PANaturaliart .Partenaire3{
  position :absolute;
  left : 250px; top:284px;
}
.PANaturaliart .Staff1{
  position :absolute;
  left : 520px; top:350px;
}
.PANaturaliart .Staff2{
  position :absolute;
  left : 640px; top:350px;
}
.PANaturaliart .Partenaires>div{
  /*display:inline-block;
  position:relative;*/
  height:35px;
  font-size:14px;
  width:46px
}
.PANaturaliart .Partenaires div.Partenaire>span>a{
  font-weight:bold;
}
.PANaturaliart .Partenaires>div>a>img{
  width:64px;
  height:35px;
  padding-top:5px;
  /*background:rgba(255,255,255,0.7);*/
}
.PANaturaliart .Partenaires>div div{
  display:none;
  z-index:0;
  min-width:150px;
  max-width:200px;
  max-height:170px;
  position:absolute;
  top:60%;
  left:60%;
  padding:5px;
  background-color:#f2e4e6;
  border:2px outset #f19faf;
  -moz-border-radius:0px 20px;
-webkit-border-radius:0px 20px;
-o-border-radius:0px 20px;
-ms-border-radius:0px 20px;
-icab-border-radius:0px 20px;
border-radius:0px 10px 10px 10px;
}
.PANaturaliart .Partenaires>div:hover div{
  z-index:99;
  display:block;
}
.PANaturaliart .Partenaire p.Plus{
  margin:0px;
  padding:0px;
  max-height:16px;
  overflow:hidden;
    -moz-transition:max-height 400ms linear;
-webkit-transition:max-height 400ms linear;
-o-transition:max-height 400ms linear;
-ms-transition:max-height 400ms linear;
-icab-transition:max-height 400ms linear;
transition:max-height 400ms linear;
}
.PANaturaliart .Partenaire p.Plus:hover{
  max-height:150px;
    -moz-transition:max-height 400ms linear;
-webkit-transition:max-height 400ms linear;
-o-transition:max-height 400ms linear;
-ms-transition:max-height 400ms linear;
-icab-transition:max-height 400ms linear;
transition:max-height 400ms linear;
  overflow:auto;
}

/* sidebar haut */
.secondarytitle {background: url('http://img15.hostingpics.net/pics/280219sidebarh.png') 50% 0%;
height: 135px;
resize: none;}

/* sidebar bas */
.foot_table{
background:url("http://img15.hostingpics.net/pics/271155sidebarb.png")50% 100%;
height:135px;margin:auto;width:700px;
}

/*Qeel*/
#qeel
{
background-image: url('http://img15.hostingpics.net/pics/962811qeel.png');
position:relative;
height:700px;
width:700px;
}
 
#qeel *{
background-color: transparent;
}
#statistiques,#anniversaires,#legende{
position:absolute;
overflow:auto;
}
#qeel #statistiques>span,#qeel #anniversaires span{
  color:#ededd0 !important;
}
#statistiques{
left:155px;top:210px;
width:470px;
max-height:100px;
}
#anniversaires{
left:170px;
top:470px;
width:190px;
max-height:200px;
}
#legende{
left:438px;
top:425px;
width:220px;
height:106px;
  overflow:auto;
}
#legende .gensmall{
font-size:13px;
display:block
}
#derniers_connectes{display:none;}

/* redimension images mess*/
.postbody img{
max-width:600px;
max-height:300px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
-icab-border-radius:5px;
border-radius:0px
}
/*interdire le redimensionnement des images aux quelles la classe noresize est appliquée*/
.noresize{
max-width:none !important;max-height:none !important;
}

/* couleurs catégorie */
.td_bodyline{
  width:700px;
background-color: #916553;}

/* selectionner contenu */
.selectCode{
float:right;
text-transform:lowercase;
cursor:pointer;
float:right;
text-transform:lowercase;
font-family:Arial;
cursor:pointer;
text-decoration:none;
letter-spacing:2px
}
div.cont_code { clear: right; }

/*fond des messages postés*/
div.postbody{background-color:#f4f8f7;
  color:#c2b08b;
padding-top:15px;
padding-left:10px;
padding-right:10px;
padding-bottom:20px;
border-radius:10px;
width:650px;
margin:0 auto;}

Quant au lien, le voici : http://naturaliarttest.forumactif.org/
Forum test ou forum normal c'est la même chose, puisqu'on installe un nouveau design sur le forum test et le jour J on met tout en place sur le normal en copiant tout les codes (templates et CSS) qui sont susceptibles d'avoir été modifiés, et ce même si on n'y avait pourtant pas touché (mais comme j'ai pas une bonne mémoire, je finis par oublier ce que j'ai modifié, donc dans le doute, je remets tout).

Donc le souci y est toujours bel et bien, hélas, quoiqu'en effet je n'ai pas supprimé les cookies (mais je ne trouve pas où le faire sur le forum test, je n'ai apparemment pas le lien pour)

Merci encore Je retrouve un peu espoir sur mon souci que j'ai depuis environ deux mois ^^

[Lixyr]

Ah certaines choses s'éclairent.

 Vous forcez votre bannière transparente à avoir une largeur de 1600px, qui doit surement correspondre à la largeur de votre écran. Pensez que tout le monde n'a pas le même écran que vous, donc on voit apparaitre une scroll-barre disgracieuse en bas.
Dans votre CSS, vous avez :

#i_logo{
position:relative;
top:-20px;
height:500px;/*hauteur bannière*/
width:1600px;/*largeur bannière*/
}

Changez 1600px par 100%.
Comme ça le logo prendra toute la largeur de l'écran quel qu'il soit, pas plus pas moins.

 Ensuite, pour le postbody, vous l'avez modifié sur votre forum test, et ça recentre le tout. Voici le passage :

/*fond des messages postés*/
div.postbody{background-color:#f4f8f7;
color:#c2b08b;
padding-top:15px;
padding-left:10px;
padding-right:10px;
padding-bottom:20px;
border-radius:10px;
width:650px;
margin:0 auto;}

Remaniez ça sur votre forum officiel.

[Sayali]

Encore merci pour ta réponse.

La bannière fait, en elle-même, bien 1600px de large. J'ai néanmoins modifié le code, comme ça n'a pas d'incidence sur son affichage, je vais laisser comme ça.

Néanmoins, après avoir donc modifié sur les deux forums, supprimé les cookies sur le forum officiel, m'être reconnectée... le problème persiste.
Voici une capture d'écran : http://hpics.li/ca9ab9e

Je me demande si c'est pas un élément du postbody ou du profil qui poste souci parce que :
- sur la page d'accueil, je n'ai pas le souci
- sur la page où on affiche la liste des sujets, je ne l'ai pas non plus
- sur les MP, je n'ai rien non plus, que ce soit à l'affichage de la liste ou celui d'un MP en particulier
- par contre, dès que je lis un topic bien précis du forum, là c'est décalé

Je trouve ça de plus en plus bizarre =/

[Lixyr]

J'ai regardé ce que ça donne sur un plus grand écran, et tout est parfaitement centré maintenant.

Essayez de
- supprimer les cookies de votre forum
- vider le cache internet de votre navigateur (firefox, google chrome etc) ainsi que les cookies
- redémarrez votre ordinateur

[Sayali]

Ben les cookies c'est déjà fait, et ça n'a rien changé. Je sais pas vider les caches par contre je dois avouer (surtout sur firefox, que je n'arrive absolument pas à utiliser correctement).
Par contre, j'ai aussi constaté que le souci n'avait lieu que quand on est connecté sur le forum. Normal donc que tu ne le vois pas. Si tu veux je peux te fournir par MP les accès au forum test pour que tu juges par toi-même.

[Lixyr]

Trouvé.

C'est au niveau des boutons "nouveau sujet", et "répondre au sujet" : ces boutons sont trop grands, du coup ça créé un décalage.

Donc vous avez deux solutions :
- soit vous modifiez vos images pour qu'elles soient plus petites
- soit vous modifiez le template viewtopic_body :

<td align="left" valign="middle" nowrap="nowrap">
<span class="nav">
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authreply -->
</span>
</td>

Après ce qui est en vert vous rajoute un retour à la ligne :
<br />
pour mettre les deux images les unes en dessous des autres.

<td align="left" valign="middle" nowrap="nowrap">
<span class="nav">
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a> <br />
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authreply -->
</span>
</td>

[Sayali]

Aaaaaaaaaaaaaah *crise cardiaque*
C'est bon, ça marche !! Après deux mois de galère, tu résous mon souci en un petit jour. Je vais te vénérer jusqu'à la fin des temps !
En plus en te lisant, je me dis "eh mince, ça va mettre les boutons l'un en dessous de l'autre, j'ai pas trop envie quand-même" (mais j'avais encore moins envie d'en modifier la taille, c'est pas logique). Ben non, ils sont toujours à côté, mais là c'est nickel quand-même.
Un grand merci à toi, cher sauveuse (c'est pas français, mais je m'en tape ^^)

Je mets ce sujet en résolu

[Lixyr]

Vous êtes sûre ? Ce n'est pas réglé chez moi, l'image du titre est trop grande.
Il faudrait juste couper les côtés transparents, qui prennent de la place.

[Sayali]

Ah ben chez moi ça l'est. J'avais commencé sur le forum test, et après comme il s'agissait d'une toute petite balise à ajouter, j'ai fini par le faire sur le forum normal.
Par contre il y a peut-être plusieurs choses qui entraient en ligne de compte, et il ne me semble pas avoir modifié au niveau du CSS sur le forum officiel. J'ai en effet l'impression que c'est toujours un tout petit peu décalé, mais bien moins qu'avant, et quasi pas visible. Je vais vérifier du côté du CSS

Edit : CSS mis à jour. Ca me semble bon non?

[Lixyr]

l'image du titre est trop grande.
Il faudrait juste couper les côtés transparents, qui prennent de la place.

[Sayali]

Edit bis : voici les images nouveau et répondre :
https://i.servimg.com/u/f58/18/44/96/59/nveau12.png https://i.servimg.com/u/f58/18/44/96/59/rep11.png
Elles me semblent bonnes. Mais bizarrement, quand je fais ctrl et clique sur la zone, en effet c'est super grand sur la droite (à droite de répondre). Je me demande si ça vient encore pas du template :

Code:

<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){
 _atc.cwait = 0;
 $('.addthis_button').mouseup(function(){
 if ($('#at15s').css('display') == 'block') {
 addthis_close();
 addthis_close();
 }
 });
});
//]]>
</script>

<table width="100%" border="0" cellspacing="2" cellpadding="0">
 <tr>
 <td align="left" valign="middle" nowrap="nowrap">
 <span class="nav">
 <!-- BEGIN switch_user_authpost -->
                          <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   <br />
 <!-- END switch_user_authpost -->
 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
 <!-- END switch_user_authreply -->
 </span>
 </td>
 <td align="left" valign="middle" nowrap="nowrap">
 <!-- BEGIN switch_twitter_btn -->
 <span id="twitter_btn" style="margin-left: 6px; ">
 <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
 <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 </span>
 <!-- END switch_twitter_btn -->
 <!-- BEGIN switch_fb_likebtn -->
 <span id="fb_likebtn" style="margin-left: 6px; ">
 <iframe src="http://www.facebook.com/plugins/like.php?href={FORUM_URL}{TOPIC_URL}&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
 </span>
 <!-- END switch_fb_likebtn -->
 </td>
 <td class="nav" valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
 <td align="right" valign="bottom" nowrap="nowrap" width="100%">
 <span class="gensmall bold">
 <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pub=forumotion">{L_SHARE}</a>
 <!-- BEGIN switch_plus_menu -->
  | 
 <script type="text/javascript">//<![CDATA[
 var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
 var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
 var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
 var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
 var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
 var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
 insert_plus_menu('f{FORUM_ID}&amp;t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
 //]]>
 </script>
 <!-- END switch_plus_menu -->
 </span>
 </td>
 </tr>
</table>

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" style="border-bottom: 0px;">
 <tr align="right">
 <td class="catHead" colspan="3" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="9%" class="noprint"> </td>
 <td align="center" class="t-title">
 <h1 class="cattitle"> {TOPIC_TITLE}</h1>
 </td>
 <td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td>
 </tr>
 </table>
 </td>
 </tr>
 <!-- BEGIN topicpagination -->
 <tr>
 <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
 </tr>
 <!-- END topicpagination -->
 {POLL_DISPLAY}
 <tr>
 <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
 <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
 </tr>
 <!-- BEGIN postrow -->
 <!-- BEGIN displayed -->
 <tr class="post">
 
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
    <span class="postdetails poster-profile"><a name="{postrow.displayed.U_POST_ID}"></a>
      <div class="profil">
                  <br/>
            <div class="avapseudorang">
              <div>
              <br/>
 <center>{postrow.displayed.POSTER_AVATAR}</center>
 <br/>
 <span class="pseudo">
 
<center>
 <strong>{postrow.displayed.POSTER_NAME}</strong>
 </center>
 </span>
 <center>
 <span class="texterang">
<span class="rang"></span>
 </span>
 </center>
 
<center>
 <span class="imgrang">{postrow.displayed.RANK_IMAGE}</span>
 </center>
                <br />
                <br />
            </div>
                  </div>
                  
 <!-- BEGIN profile_field -->
 
                <br/>
                          <span class="infosposteur">{postrow.displayed.profile_field.LABEL}
                <span class="labelinfosposteur">{postrow.displayed.profile_field.CONTENT}</span></span>
 <!-- END profile_field -->
                          <br/>
 <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
                  <br/>
                  <br/>
 </div>
      <br/>
 </span>
</td>
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
 <td valign="top" nowrap="nowrap" class="post-options">
 {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
 </td>
 </tr>
 <tr>
 <td colspan="2" class="hr">
 <hr />
 </td>
 </tr>
 <tr>
 <td colspan="2">
 <!-- BEGIN switch_vote_active -->
 <div class="vote gensmall">
 <!-- BEGIN switch_vote -->
 <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
 <!-- END switch_vote -->

 <!-- BEGIN switch_bar -->
 <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
 <!-- BEGIN switch_vote_plus -->
 <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
 <!-- END switch_vote_plus -->

 <!-- BEGIN switch_vote_minus -->
 <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
 <!-- END switch_vote_minus -->
 </div>
 <!-- END switch_bar -->

 <!-- BEGIN switch_no_bar -->
 <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
 <!-- END switch_no_bar -->

 <!-- BEGIN switch_vote -->
 <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
 <!-- END switch_vote -->
 </div>
 <!-- END switch_vote_active -->

 <div class="postbody">

 <div>{postrow.displayed.MESSAGE}</div>

 <!-- BEGIN switch_attachments -->
 <dl class="attachbox">
 <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
 <dd>
 <!-- BEGIN switch_post_attachments -->
 <dl class="file">
 <dt>
 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />

 <!-- BEGIN switch_dl_att -->
 <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
 <!-- END switch_dl_att -->

 <!-- BEGIN switch_no_dl_att -->
 {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
 <!-- END switch_no_dl_att -->
 </dt>

 <!-- BEGIN switch_no_comment -->
 <dd>
 <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
 </dd>
 <!-- END switch_no_comment -->

 <!-- BEGIN switch_no_dl_att -->
 <dd>
 <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
 </dd>
 <!-- END switch_no_dl_att -->

 <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
 </dl>
 <!-- END switch_post_attachments -->
 </dd>
 </dl>
 <!-- END switch_attachments -->

 <div class="clear"></div>
 <div class="signature_div">
 {postrow.displayed.SIGNATURE}
 </div>

 </div>
 <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
 </td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>
 <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
 <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
 </td>
 <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
 <table border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="middle">
 {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
 </td>
 </tr>
 </table>
 </td>
 </tr>
 <!-- BEGIN first_post_br -->
</table>
<br />
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <tr>
 <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
 <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
 </tr>
 <!-- END first_post_br -->
 <!-- END displayed -->
 <!-- BEGIN hidden -->
 <tr>
 <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
 </tr>
 <!-- END hidden -->
 <!-- END postrow -->
 <!-- BEGIN no_post -->
 <tr align="center">
 <td class="row1" colspan="3" height="28">
 <span class="genmed">{no_post.L_NO_POST}</span>
 </td>
 </tr>
 <!-- END no_post -->
 <tr align="right">
 <td class="catBottom" colspan="3" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="9%" class="noprint"> </td>
 <td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
 <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
 </tr>
 </table>
 </td>
 </tr>
</table>
<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
 <tr>
 <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
 <!-- BEGIN topicpagination -->
 <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
 <!-- END topicpagination -->
 </tr>
 <!-- BEGIN switch_user_logged_in -->
 <!-- BEGIN watchtopic -->
 <tr>
 <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
 </tr>
 <!-- END watchtopic -->
 <!-- END switch_user_logged_in -->
</table>

<!-- BEGIN promot_trafic -->
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
 <tr>
 <td class="catBottom" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
 <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
 </tr>
 </table>
 </td>
 </tr>
</table>

<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
 <tr>
 <td class="catBottom" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
 <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>
 <td class="row2 postbody" valign="top">
 <!-- BEGIN link -->
 » <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}">{promot_trafic.link.TITLE}</a><br />
 <!-- END link -->
 </td>
 </tr>
</table>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
 <tbody>
 <tr>
 <td class="catBottom">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tbody>
 <tr>
 <td valign="top">
 <h1 class="cattitle"> {L_FORUM_RULES}</h1>
 </td>
 </tr>
 </tbody>
 </table>
 </td>
 </tr>
 <tr>
 <td class="row1 clearfix">
 <table>
 <tr>
 <!-- BEGIN switch_forum_rule_image -->
 <td class="logo">
 <img src="{RULE_IMG_URL}" />
 </td>
 <!-- END switch_forum_rule_image -->
 <td class="rules postbody">
 {RULE_MSG}
 </td>
 </tr>
 </table>
 </td>
 </tr>
 </tbody>
</table>
<!-- END switch_forum_rules -->

<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td class="row2" colspan="2" align="center" style="padding:0px">
 <!-- BEGIN switch_user_logged_in -->
 <a name="quickreply"></a>
 {QUICK_REPLY_FORM}<br />
 <!-- END switch_user_logged_in -->
 </td>
 </tr>
 <tr>
 <td style="margin:0; padding: 0;" colspan="2">
 <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
 <tbody>
 <!-- BEGIN show_permissions -->
 <tr>
 <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
 <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
 </tr>
 <!-- END show_permissions -->
 <tr>
 <td class="catBottom" colspan="2" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
 <!-- BEGIN show_permissions -->
 <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
 <!-- END show_permissions -->
 </tr>
 </table>
 </td>
 </tr>
 </tbody>
 </table>
 </td>
 </tr>
 <tr>
 <td style="margin:0; padding: 0;" colspan="2">
 <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
 <tbody>
 <tr>
 <td class="catBottom" colspan="2" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
 <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
 </tr>
 </table>
 </td>
 </tr>
 </tbody>
 </table>
 </td>
 </tr>
</table>

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
 <tr>
 <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
 <span class="nav">
 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
 <!-- END switch_user_authpost -->
 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
 <!-- END switch_user_authreply -->
 </span>
 </td>

 <!-- BEGIN viewtopic_bottom -->
 <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>
 <!-- END viewtopic_bottom -->

 <!-- BEGIN moderation_panel -->
 <td align="center">
 <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
 </td>
 <td align="center" width="250">
 <span class="gensmall"> </span>
 </td>
 <!-- END moderation_panel -->
 </tr>
</table>
</form>

<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
 <tr>
 <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
 <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
 <input type="hidden" name="t" value="{TOPIC_ID}" />

 <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
 <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

 <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span>
 </form>
 </td>
 </tr>
</table>
<!-- END viewtopic_bottom -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
<script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>

Edit : ah le titre ! Pardon, je suis à la ramasse.
Sur le forum test j'ai redimensionné, j'ai mis 500 de large au lieu de 700.
Par contre, voici en screen le truc bizarre dont je parlais : http://hpics.li/09bfd6a
Je me demande si ça vient pas du template, parce qu'avant le br que tu m'as fait rajouter, j'ai un truc bizarre d'écrit (et ça vient pas de moi il me semble). Ca joue peut-être.

[Lixyr]

Oui, c'est l'espace transparent de l'image sur les côtés :


Sinon il y a une autre solution : mettre une valeur maximale à cette image, et aux autres. Dans le CSS :

Code:

span.nav a.nav img {max-width:480px;}

On va essayer ça.

[Sayali]

Hmmm... Ben écoute, j'ai changé la taille du titre juste pour la cabane sur le forum officiel... De 700 à 500 aussi. Par chance j'avais laissé ouvert l'ancien onglet, j'ai pu comparer, et t'as raison, ça joue aussi à fond. Est-ce que toi tu vois encore un décalage si on laisse comme ça? Si oui, j'essayerai ton code, mais si c'est réglé en ne mettant pas d'espace, autant ne pas ajouter de code qui risque de dérégler autre chose (comprendre : oui, j'ai un peu peur qu'il y ait un autre bug de nouveau ^^)

[Lixyr]

Là c'est impeccable.

[Sayali]

Ah ben super En effet il y avait donc énormément de choses qui jouaient : la taille des images, le profil aussi je pense (j'ai enlevé un margin left et un margin right à ce niveau), d'autres margins gênants (bref, mauvais codage de ma part =/ )

Encore un grand merci !

Cette fois je pense qu'on peut mettre en résolu ^^

[Lixyr]

Les margin étaient à 0 je crois, donc le profil ne jouait pas, c'était juste les images, et le margin-left qu'on t'avait dit de mettre dans le postbody. ^^


Bonne continuation.

[Sayali]

Si, y'avait un margin left et right à 6px pour le profil ^^
Aha oui, ce margin... C'est moi qui l'ai mis, j'arrivais pas à centrer sans center le texte ^^ Je savais pas qu'en mettant un margin auto ça allait me centrer ça comme je voulais xD

Merci beaucoup, et encore merci de ton aide précieuse.