Mettre un cadre pour "Afficher/Masquer"

[Shtoum]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Moi uniquement
Lien du forum : http://coresdoparaiso.forum-canada.com/

Description du problème

Bonjour, alors voilà j'ai créé un "Afficher Masquer" mais j'aimerais que lorsque les informations apparaissent, il y ai un cadre qui les entours, le même que celui que j'ai mit autour de l'avatar.
Voici mon template viewtopic_body, il me semble que c'est celui là qui est concerné

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>
      <!-- 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 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"> <!-- google_ad_section_start -->{TOPIC_TITLE}<!-- google_ad_section_end --></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>
  <!-- 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">
      <center><div class="cadreavatar">{postrow.displayed.POSTER_AVATAR}<br/><div class="profilmessage"><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br/>
            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}<br/>
              {postrow.displayed.RANK_IMAGE}</span></div></div></center>

      <br /><span class="postdetails poster-profile"><div onClick="this.firstChild.src=(this.firstChild.src=='http://zupimages.net/up/13/48/kl2v.png')?'http://zupimages.net/up/13/48/jbdf.png':'http://zupimages.net/up/13/48/kl2v.png';this.lastChild.style.display=(this.firstChild.src=='http://zupimages.net/up/13/48/kl2v.png')?'none':'block';" style="text-align: center; padding: 3px;"><input type="image" src="http://zupimages.net/up/13/48/kl2v.png"><div style="display: none; text-align: left;"><span style="white-space:nowrap;">
            <div class="justifyprofil"><!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field --></div>
            {postrow.displayed.POSTER_RPG}</span></div></div>
        </span>

        <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:LARGEUR_DE_TA_COLONNEpx;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">
                  <!-- 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>


<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" 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>
      <!-- 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 -->
  <tr>
      <td class="row2" colspan="2" align="center" style="padding:0px">
        <!-- BEGIN switch_user_logged_in -->
        <a name="quickreply"></a>
        {QUICK_REPLY_FORM}

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

Et le CSS concerné :

Code:

/*CADRE AVATAR*/
.cadreavatar {
border : 2px solid #F3DCF5;
border-radius: 10px 10px 10px 10px;
height: 170px;
width: 140px;
background-image: url('http://img11.hostingpics.net/pics/704324702.png');
box-shadow: 0px 0px 7px #F3DCF5;
  padding-top: 25px;
}

/*ESPACE AVATAR PSEUDO*/
.profilmessage{
  margin-top: 25px;

Et j'aimerais aussi savoir si, il était possible de changer la couleur de "Message :" mais de garder celle actuelle pour "31".
Merci beaucoup !

[Invité]

Bonjour,

essayez de remplacer :

Code:

 <div class="justifyprofil"><!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field --></div>
            {postrow.displayed.POSTER_RPG}</span></div>

par :

Code:

 <div class="justifyprofil cadreavatar"><!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field --></div>
            {postrow.displayed.POSTER_RPG}</span></div>

Ou remplacez "cadreavatar" par une autre classe si vous voulez que le cadre soit différent de celui de l'avatar (il faudra en créer une autre dans le CSS).

Et j'aimerais aussi savoir si, il était possible de changer la couleur de "Message :" mais de garder celle actuelle pour "31".

A quoi faites-vous allusion ?


Cordialement.

[Shtoum]

Alors, c'est presque ça, merci, mais il y a un petit problème encore ...

Spoiler:

Comment décaler le cadre et le texte ? Pour qu'il soit aligner avec le cadre de l'avatar, et qu'il y avait une petite marge entre le bord du cadre et le texte ?
Et pour la couleur, je pensais au texte dans le cadre, comment mettre par exemple "message :" en blanc mais que le nombre de message reste de la même couleur ?

[Invité]

Remplacez par ceci :

Code:

<div align="center"><div class="justifyprofil cadreavatar" style="padding:Xpx;"><!-- BEGIN profile_field -->
                    {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                    <!-- END profile_field --></div>
                    {postrow.displayed.POSTER_RPG}</span></div></div>

=> Pour style="padding:Xpx;", vous devez remplacer X par le nombre de pixels de marge intérieure que vous souhaitez. (Le décalage entre le bord et le texte.)

Pour votre deuxième demande, je vous propose d'insérer ce code dans Affichage > Couleurs > Onglet "Feuille de style CSS" :

Code:

.postdetails.poster-profile span.label, .postdetails.poster-profile span.label span{
    color: white !important;
}

Vous pouvez remplacer "white" par la couleur de votre choix. Voir : Nomination et couleurs.


Cordialement.

[Shtoum]

Spoiler:

C'est parfait merci, malheureusement, le texte dépasse sur le côté, à droite, y a-t-il un moyen pour qu'il revienne à la ligne ? :/

[Invité]

Bonsoir,

Pour gérer ce débordement, il va nous falloir rajouter une ligne au CSS de .cadreavatar.
Plusieurs solutions :

→ Couper le texte pour masquer la partie débordante à la vue (je ne pense pas que ce soit l'effet recherché).

Code:

overflow:hidden;

→ Couper le texte pour renvoyer la partie débordante à la ligne. Par exemple, sur votre capture, on aurait :

Messages : 42
Date d'inscription : 22/08/20
12

Code:

word-wrap: break-word;

→ Tenter les césures avec hypens, voir le comportement avec les dates. A savoir que la propriété n'est pas admise par beaucoup de navigateurs pour le moment...

Code:

  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;

Cordialement.

[MlleAlys]

Bonjour,
Par défaut le texte revient normalement à la ligne, là c'est un élément de votre template qui lui demande le contraire :
- Repérez ce passage :

Code:

            <span style="white-space:nowrap;">
            <div class="justifyprofil"><!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field --></div>
            {postrow.displayed.POSTER_RPG}</span>

C'est le white-space:nowrap; le coupable, vous pouvez retirer le span, et la balise de fermeture à la fin du passage pour qu'il ne reste que :

Code:


            <div class="justifyprofil"><!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field --></div>
            {postrow.displayed.POSTER_RPG}

Et normalement il n'y aura pas besoin de rajouter de css

[Shtoum]

Ah merci beaucoup c'est parfait !
Bonne continuation à vous