Problème pour le code d'un sujet

Bonjour/Bonsoir ♥

Je ne sais pas si j'ai le droit de poster ici, mais je n'ai vu aucune partie pour les problèmes de codage, du coup je viens ici ~

Il se trouve que j'ai utilisé votre codage pour mes sujets sur mon forum, mais j'ai un petit soucis récurent... il arrive que souvent, si l'intérieur du message et trop large, le toute la partie droite du bloc d'écriture, du bloc de date et du titre sorte du bloc du forum... Je ne sais pas vraiment d'où vient le souci, aussi j'aimerai savoir s'il était possible de m'aider ?
J'ai pour l'instant demandé aux membres de mettre leurs grosses images en spoiler, mais ce n'est pas forcément ce qui est le mieux..

Voici le lien du forum : http://melancholy-of-souls.forumactif.com/

Je vous donne aussi mon css, que vous puissiez jeter un coup d'oeil. Je donne la partie général ainsi que la partie du Sujet :

général:

css sujet:

Code:: /* PRESENTATION DU SUJET */
/* BLOC TITRE SUJET */
#tlePOST{
margin:5px auto; padding:15px 0;
background:url('http://img15.hostingpics.net/pics/820885patterngrunge.png'); /* MODIFIABLE */
text-transform:uppercase; text-align:center;
}
/* TITRE SUJET */
#tlePOST h1 {
display:block;
font-size:20px; font-family:Arial; color:#d9d9d9; /* MODIFIABLE */
}
/* BLOC JOUEUR */
.boxPOST {
margin-right:10px; width:220px; text-align:center;
}
/* BLOC AVATAR */
.avaPOST {
margin:auto; width:200px; height:auto; padding:10px; border:1px solid;
border-color:lightgrey; background:#d9d9d9; /* MODIFIABLE */
}
/* BLOC PSEUDONYME & RANG */
#namePOST {
margin:10px auto; width:220px; height:85px;
border:1px solid #d9d9d9; text-align:right; /* MODIFIABLE */
}
/* CONTENU PSEUDONYME & RANG */
.namePOST {
margin-left:45px; width:165px; height:65px; padding:20px 10px 0 0;
background:#d9d9d9; border-color:#d9d9d9;/* MODIFIABLE */
}
/* BORDURE PSEUDONYME */
.namePOST a {
text-decoration:none !important; font-size:14px;
padding-bottom:5px; border-bottom:1px solid;
border-bottom-color:#323232; /* MODIFIABLE */
}
/* TEXTE RANG */
.rankPOST {
padding-top:10px;
color:black; font-size:10px; /* MODIFIABLE */
}
/* BLOC INFORMATIONS JOUEUR */
.abtPOST {
margin:10px auto;
width:252px; text-align:left; font-size:11px;
}
/* INFORMATION JOUEUR */
.abtPOST div{
margin-bottom:5px;
width:210px; padding:5px; border:1px solid;
text-transform:uppercase; font-size:11px;
border-color:#d9d9d9; background:#d9d9d9; /* MODIFIABLE */
}
/* INTITULE INFORMATION JOUEUR */
.abtPOST span.label {
color:black !important; /* MODIFIABLE */
}
/* IMAGES CONTACT JOUEUR */
.ktactPOST {
text-align:center;
}
/* BLOC DATE / OUTILS MODERATION */
.tktPOST {
padding:10px; text-transform:uppercase; text-align:right;
font-family:Arial; /* MODIFIABLE */
}
/* DATE SUJET */
.datePOST {
padding:5px; font-size:11px; border-bottom:1px solid;
border-bottom-color:#e6e6e6; color:#e6e6e6; /* MODIFIABLE */
}
/* CITER / EDITER / SUPPRIMER / IP */
.toolsPOST {
margin-top:5px;
}
/* APPARENCE MESSAGE */
div.postbody {
min-height:335px; padding:15px; border:1px solid; border-top:none;
border-color:lightgrey; background:#d9d9d9; color:black; /* MODIFIABLE */
text-align:justify;
}
/* BLOC SIGNATURE */
.signPOST {
margin-top:10px;
min-height:50px; padding:15px; border:1px solid;
background:#d9d9d9; color:black; /* MODIFIABLE */
font-size:11px;
}
.signPOST br:nth-child(1) {
display:none;
}
.signPOST br:nth-child(2) {
display:none;
}
/*------------------------------------------------------------ FIN SUJETS -------------------------------------------------*/

merci beaucoup d'avance, surtout si vous acceptez de m'aider... Je sais que ce n'est pas forcément votre boulot, mais personne n'a su me dire ce qu'il y avait.
Cordialement, Faucheuse.

Bonsoir,

Une simple instauration de largeurs maximales devrait résoudre le problème :

Code:: /* APPARENCE MESSAGE */
div.postbody {
min-height:335px; max-width:540px !important; padding:15px;
border:1px solid; border-top:none;
border-color:lightgrey; background:#d9d9d9; color:black; /* MODIFIABLE */
text-align:justify;
}
/* LARGEUR MAXIMALE IMAGES APPARENCE MESSAGE */
div.postbody img{
max-width:100%;
}
/* BLOC SIGNATURE */
.signPOST {
margin-top:10px;
min-height:50px; max-width:540px !important; padding:15px;
background:#d9d9d9; color:black; /* MODIFIABLE */
font-size:11px;
}

Merci ça marche très bien !

Cependant, lorsque les liens de navigation au dessus du bloc de titre sont trop long, le sujet s'élargit mais pas le bloc du forum, comment ça se fait ?

Le corps de votre forum dispose d'une largeur fixe :

Code:: .bodyline {
position:absolute; left:250px;
width:800px;
}

Remplacez l'intégralité du template viewtopic_body par :

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(){

   if(typeof(_atc) == "undefined") {
   _atc = { };
   }

   _atc.cwait = 0;
   $('.addthis_button').mouseup(function(){
   if ($('#at15s').css('display') == 'block') {
   addthis_close();
   }
   });
   });

   var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
   showHiddenMessage = function(id)
   {
   try
   {
   var regId = parseInt(id, 10);
   if( isNaN(regId) ) { regId = 0; }

   if( regId > 0)
   {
   $('.post--' + id).toggle(0, function()
   {
   if( $(this).is(":visible") )
   {
   $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
   }
   else
   {
   $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
   }
   });
   }
   }
   catch(e) { }

   return false;
   };

   //]]>
   </script>

   <table width="100%" align="center" border="0" cellspacing="1" cellpadding="0">
   <tr><td align="left" colspan="3" {WIDTH_GALLERY}>
   <div class="navPOST"><span class="nav">
   
   <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>
   
   
   <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
   
   </span> <span class="nav" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a class="nav" href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a>{NAV_CAT_DESC_SECOND} <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></span></div>
   </td></tr>
<tr>
<td colspan="3">
   <div id="tlePOST"><h1 class="cattitle">{TOPIC_TITLE}</h1></div>
   </td>
   </tr>
   </table>

   <table align="center" width="100%" border="0" cellspacing="1" cellpadding="0" >

   
   <tr>
   <td colspan="3" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
   </tr>
   
   {POLL_DISPLAY}
   
   
   <tr>
   <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="3" align="center">{postrow.hidden.MESSAGE}</td>
   </tr>
   
   
   <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}"><td colspan="3">
   
   <div class="vote gensmall">
   
   <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
   

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

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

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

   
   <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
   
   </div>
   
   </td></tr>
   <tr>
<td valign="top">
   <div class="boxPOST"><a name="{postrow.displayed.U_POST_ID}" style="position:relative; top:-30px; width:1px;" id="{postrow.displayed.U_POST_ID}"></a><div class="avaPOST">{postrow.displayed.POSTER_AVATAR}</div>
<div id="namePOST"><div class="namePOST"><strong>{postrow.displayed.POSTER_NAME}</strong><div class="rankPOST">{postrow.displayed.POSTER_RANK}</div></div></div><script type="text/javascript">//<![CDATA[
$( document ).ready(function() {$('a[href*="/u"] span').each(function(){var color = $(this).css("color");
$(this).parent().parent().parent().parent().css("background-color", color);});});//]]></script>
<div class="abtPOST"><div>{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</div></div>
<div class="ktactPOST">{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}</div>
   </div>
   </td>
   <td {postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" colspan="2">
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
   <td>
<div class="tktPOST"><div class="datePOST"><img src="{postrow.displayed.MINI_TIME_IMG}" border="0" />{postrow.displayed.POST_DATE}</div><div class="toolsPOST">{postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG}</div><div style="display:none;"><strong>{postrow.displayed.POSTER_NAME}</strong></div></div>
   <div class="postbody">
   <div>{postrow.displayed.MESSAGE}</div>

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

   
   <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}
   

   
   {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}
   
   </dt>

   
   <dd>
   <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
   </dd>
   

   
   <dd>
   <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
   </dd>
   

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

   <div class="clear"></div>
   </div>

   <div class="signPOST">
   {postrow.displayed.SIGNATURE}
   </div>
   
<span class="browse-arrows"{postrow.displayed.THANK_BGCOLOR} style="display:block; text-align:right;">
   <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
   </span>
   </td>
   </tr>
   </table>
   </td>
   </tr>
   
   </table>
   <hr />
   <table class="forumline" width="100%" align="center" 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>
   
   
   
   
   <tr align="center">
   <td class="row1" colspan="3" height="28">
   <span class="genmed">{no_post.L_NO_POST}</span>
   </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 valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
   
   <td align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
   
   </tr>
   
   
   <tr>
   <td colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
   </tr>
   
   
   </table>

   
   <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">
   <div class="cattitle"> {L_FORUM_RULES}</div>
   </td>
   </tr>
   </tbody>
   </table>
   </td>
   </tr>
   <tr>
   <td class="clearfix">
   <table>
   <tr>
   
   <td class="logo">
   <img src="{RULE_IMG_URL}" alt="" />
   </td>
   
   <td class="rules postbody">
   {RULE_MSG}
   </td>
   </tr>
   </table>
   </td>
   </tr>
   </tbody>
   </table>
   

   <table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
   <td colspan="2" align="center" style="padding:0px">
   
   <a name="quickreply"></a>
   {QUICK_REPLY_FORM}<br />
   
   </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>
   
   <tr>
   <td valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
   <td valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
   </tr>
   
   <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_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
   
   </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">
   
   <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>
   
   
   <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
   
   </span>
   </td>

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

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

   
   <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="{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>
   

   
   <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>
   
   <script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>

Et ajoutez ceci à votre partie CSS :

Code:: /* NAVIGATION SUJET */
.navPOST {
max-width:800px;
}

Merci ça marche super ! Merci beaucoup ! J'adore ♥ encore merci pour votre aide !