Déplacer les boutons sur le côté des posts

[Lilynufare]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome, Internet Explorer, Opera
Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : 22/09/17
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour
Je tente de disposer la partie des boutons (Citer, editer, supp, et ip) d'une autre façon et je n'arrive pas à les déplacer sur le côté droit de la partie message comme sur ce shéma, partie en rouge : http://fr.tinypic.com/view.php?pic=2rwopjd&s=9

J'ai réussi à faire ça, les mettre à la ligne dans un bloc mais je n'arrive pas à les déplacer comme il faut. Il reste à l'intérieur de l'ensemble, hors je souhaite le mettre au dehors : https://2img.net/r/hpimg11/pics/334978edss.png

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>
                <!-- 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>
          </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>
                      <tr align="center">
                        <td id="tleSBJ" colspan="3"><div class="popo">{TOPIC_TITLE}</div><div class="browse-arrows" style="float:right;"><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> </div><br/>
 <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_SEP}<a class="nav" href="{U_ALBUM}" itemprop="url"><span itemprop="title">{L_ALBUM}</span></a>-->
{NAV_CAT_DESC_SECOND}</span>
 </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}
       
          <!-- BEGIN postrow -->
          <!-- BEGIN displayed -->
          <tr class="post">
              <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
                <table class="tableau_profil" cellpadding="0" cellspacing="0">
                    <tr>
                      <td class="haut_tab"> </td>
                    </tr>
                    <tr>
                      <td class="milieu_tab">
                      <span class="postdetails poster-profile"><br />
                      {postrow.displayed.RANK_IMAGE}
                        <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong><center><div class="police">{postrow.displayed.POSTER_NAME}</div></center></strong></span><br/>
                        <span class="avatar_profil"> {postrow.displayed.POSTER_AVATAR}</span><br />
                     
               
                          <br/><div class="gif"><div class="cadreinfos_posteur"><div class="infos_posteur"><!-- BEGIN profile_field -->
                            <b>{postrow.displayed.profile_field.LABEL}</b> {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                            <!-- END profile_field -->
                            {postrow.displayed.POSTER_RPG}
                          </div></div></div><br/>
                        <span id="onoutline">{postrow.displayed.ONLINE_IMG}</span>
                          </span>

                      </td>
                    </tr>
                    <tr>
                      <td class="bas_tab"> </td>
                    </tr>
                </table>
        <br />
                <img src="http://2img.net/i/fa/empty.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"><td valign="top" nowrap="nowrap" class="post-options">
                      <div class="date">{postrow.displayed.POST_DATE}</div> <br/><div class="susu">{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}</div><br/>
                      <br/> 
                          <td valign="top" nowrap="nowrap"><div class="ktactPOST"> <div class="toolsPOST">{postrow.displayed.QUOTE_IMG}<br/>{postrow.displayed.EDIT_IMG}<br/>{postrow.displayed.DELETE_IMG}<br/>{postrow.displayed.IP_IMG}</div></div></td>
                      </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="bouton1">  {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}</div>
                        <br/>

                            <div class="clear"></div> <div class="postbody">
        <div>{postrow.displayed.MESSAGE}</div>
<br/>

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

          <!-- BEGIN switch_signature -->
        <div class="signPOST"><div class="signature"></div>
        {postrow.displayed.SIGNATURE}
        </div>
        <!-- END switch_signature -->

                          </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 -->
                      </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"><div class="popo">{TOPIC_TITLE}</div></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 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>

css :

Code:

/* bloc */
.ktactPOST { background:#000107;
border-radius: 10px;  position: relative;
display:inline-block; vertical-align:top; padding-right:10px;
text-align:center; line-height:6px;margin-left:40px;

}
.ktactPOST a {
display:block;
}
/* CITER / EDITER / SUPPRIMER / IP */
.toolsPOST {
display:inline-block; vertical-align:top; margin-left:10px;
text-align:center;
}

Merci de votre attention.

[Invité]

Hello Lilynufare,
hum la position relative n'est pas adaptée, utilises plutôt la position absolute dans ton style:

Code:

.ktactPOST { background:#000107;
border-radius: 10px;  position: relative;
display:inline-block; vertical-align:top; padding-right:10px;
text-align:center; line-height:6px;margin-left:40px;
 
}

a++

[Lilynufare]

Bonjour et merci de ton aide
J'ai essayé et l'ensemble du forum s'élargi au fur et à mesure que je le déplace, ça sort pas de l'intérieur.
Exemple : https://2img.net/r/hpimg11/pics/635487essaiie.png

[Invité]

Re,
sans lien du forum concerné , difficile de te venir en aide .

a++

[Lilynufare]

Ah oui, désolée j'avais oublié.

lien du forum : supprimé

[Invité]

Re,

si tu laisses la position relative, il faut supprimer le margin-left et mettre simplement :

Code:


left: 100px;


a++

[Sakura Yuuki]

Zut', doublée par la personne du dessus, effectivement, il faut retirer le margin lorsque l'on est en position absolute, sinon, il ne sert à rien x) La position absolute te permets de pouvoir faire sortir ton élément du cadre, d'ou son utilité :3

Le margin, quant à lui, "pousse" ton élément, c'est pour ça qu'il reste à l'intérieur c:

[Lilynufare]

Merci

problème résolu.

Sakura Yuuki : merci de ton conseil J'ai encore des choses à apprendre xD