Bannière et profil - Problème de largeur.

par Darkaanisty Dim 14 Sep 2014 - 13:22

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://shingeki-rpg.forumactif.org/

Description du problème

Bonjour, bonsoir.

C'est la première fois que je poste ici pour un problème sur mes forums, en général, j'arrive toujours à trouver des solutions en cherchant bien sur le net... Sauf que là, et bien impossible de trouver une solution.
Donc c'est en désespoir de cause que je viens implorer votre aide...

Je m'explique :
Sur mon forum, ma bannière est collée aux bords comme ceci : https://i.servimg.com/u/f39/18/97/96/96/pourqu10.jpg

Seulement voilà, lorsque je vais dans un topic, et ce, depuis que j'ai rajouter un code pour embellir le contour de l'avatar, ma bannière refuse de se coller aux bords comme précédemment. Le forum s’élargit, et je n'arrive pas à trouver de solution pour réduire la taille des posts... Je vous montre en image pour que vous compreniez mieux : https://i.servimg.com/u/f39/18/97/96/96/pourqu11.jpg

Voilà, merci d'avance pour votre aide.

PS : Si vous avez besoin de mon Template, et mon CSS, les voici :

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">  <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>   <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>  </span> </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&pub=forumotion">{L_SHARE}</a> | <script type="text/javascript"> //<![CDATA[ insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES}); //]]> </script> </span> </td> </tr> </table> <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"> <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" nowrap="nowrap" class="t-title"><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="#bottom">{L_GOTO_DOWN}</a> </td> </tr> </table> </td> </tr>  <tr> <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td> </tr>  {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>   <tr class="post"> <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"> <div class="vava"> <center><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span></center> <span class="postdetails poster-profile"> <center>{postrow.displayed.POSTER_RANK}</center><center><span class="rankpic">{postrow.displayed.RANK_IMAGE}</span></center> <div class="opacity"><span class="posterava">{postrow.displayed.POSTER_AVATAR}</span></div> </div> </div> <div class="vava2">  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} </div> <div class="profilmasque" onClick="this.firstChild.value=(this.firstChild.value=='All about you')?'Masquer le Profil':'All about you';this.lastChild.style.display=(this.firstChild.value=='All about you')?'none':'block';" style="text-align: center;"><input type="button" value="All about you" class="profil1"/><div style="display: none; text-align:left;"> {postrow.displayed.POSTER_RPG} </div></div> </span> </div> <div id=""></div> <img src="http://2img.net/i/fa/vide.gif" alt="" style="width: 150px; height: 1px;" /> </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">  <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>  <div class="postbody"> {postrow.displayed.MESSAGE} <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} {postrow.displayed.contact_field.CONTENT} {postrow.displayed.ONLINE_IMG} </td> </tr> </table> </td> </tr>  </table> <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>    <tr> <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td> </tr>    <tr align="center"> <td class="row1" colspan="3" height="28"> <span class="genmed">{no_post.L_NO_POST}</span> </td> </tr>  <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" nowrap="nowrap" 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="1" cellpadding="0"> <tr> <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>  <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>  </tr>   <tr> <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td> </tr>   <tr> <td class="row2" colspan="2" align="center" style="padding:0px">  <a name="quickreply"></a> {QUICK_REPLY_FORM}  </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 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>  <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"> {S_TOPIC_ADMIN} <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}" /> <span class="gen">{L_MOD_TOOLS} {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 type="text/javascript" src="{JS_DIR}addthis/addthis_widget.js?pub=forumotion"></script>

CSS concernant le profil :

Code:: /*----------------------AVATAR------------------------*/ .spoiler_closed, .spoiler_closed.hidden, .spoiler_content, .spoiler_content.hidden { background-color: black; text-align : justify; /* alignement standart d'un spoiler */ border-color: transparent; /* c'est ceci qui fera disparaître votre cadre */ -moz-border-radius: 5px; /* bien entendu vous pouvez lui donner une courbure si vous le désirez */ border-radius: 5px;/* bien entendu vous pouvez lui donner une courbure si vous le désirez */ padding:5px; /* espacement entre le bord de votre cadre et votre texte */ } .vava { border:1px #726456 solid; background-image: url("http://i39.servimg.com/u/f39/18/97/96/96/kkfkfk11.png"); -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; margin: 5px; padding: 5px; } .vava2 { border:1px #726456 solid; background-image: url("http://i39.servimg.com/u/f39/18/97/96/96/kkfkfk11.png"); -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; margin: 5px; padding: 5px; font-size: 10px; } /* Profil Masqué */ .profilmasque /*c'est juste le css du bouton*/ { background-image: url("http://www.hostingpics.net/thumbs/43/24/12/mini_432412Proutproutprout.png"); border-bottom: 1px dotted #b70067; -moz-border-radius: 10px; -webkit-border-radius: 10px; -border-radius: 10px; /* en pointillée et en gris*/ font-size: 10px; /*taille de la police*/ letter-spacing: 1px; } .profil1/*c'est le css de l'ensemble bouton+profil*/ { width: 150px; background-color: #couleur; border: none; font-size: 5px; letter-spacing: 1px; font-weight: ; }

par MlleAlys Dim 14 Sep 2014 - 13:34

Bonjour,

le problème de largeur vient d'un code de votre css : vous avez bloqué la largeur de .postbody, donc des messages, à 600px :
Retrouvez ce passage :

Code:: .postbody { display: block; margin-left: auto; margin-right: auto; width: 600px; }

- display:block; ne sert à rien puisque, comme c'est une div, l'élément est déjà affiché en bloc
- width:600px; force la largeur du message et cause votre problème.
- margin:left; et margin-right; auraient servi à centrer le message dans la cellule si celle ci était plus grande que le message, ce qui n'est pas le cas ici. (Cela pourrait être sinon regroupé sous une seule propriété : margin:auto;)

Bref, m'est avis que vous pouvez supprimer ce code entier ^^

Sinon, pour palier à ce genre de désagrément d'un point de vu visuel, vous pouvez forcer la bannière à se coller aux bords en fixant la largeur de l'image à 100%... Cela camoufle le problème sans le résoudre en fait ^^ :

Code:: img#i_logo { width: 100%; }

par Darkaanisty Dim 14 Sep 2014 - 14:41

Merci beaucoup pour votre réponse rapide ! =D

J'ai supprimer le premier code (.Postbody) et cela marche parfaitement. Merci encore, je mets donc ce sujet en Résolu. =)

par **Chacha** Dim 14 Sep 2014 - 14:44

..	Bonjour et Bienvenue sur le Forum des Forums ForumActif Vu que vous êtes nouveau, voici quelques sujets importants : Sécurité : mail de fondation - Ce qu'il ne faut pas faire Questions/Réponses fréquentes - Listing Trucs et astuces - Listing La fonction Rechercher La FAQ de ForumActif.com N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse

Bannière et profil - Problème de largeur.