Modifier un code pour lier le profil au hover de l'avatar

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Modifier un code pour lier le profil au hover de l'avatar

Message par Shiya Jeu 26 Nov 2015 - 23:27

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Aujourd'hui
Lien du forum : http://ad-test.faireunforum.com/t1-votre-1er-sujet

Description du problème

Bonjour,

Je viens vous embêter avec un "petit" soucis de code. Le code en lui même est bon, mais il ne correspond pas à ce que j'espérais et, maintenant que tout est installé, je voulais voir s'il n'était pas possible de l'adapter à ce que je voulais faire à la base.

Je m'explique:
Le code actuel permet que la feuille de personnage apparaisse sur le hover de l'avatar lorsque l'on passe son curseur dessus, tandis que le profil du membre se retrouve catapulté plus bas (comme sur le screen).

Ce que j'aimerais:
Pouvoir modifier le hover pour que ce soit le profil de membre qui apparaisse sous le curseur, et non la feuille de personnage et que du coup, le profil ne gêne plus sous l'avatar (qu'il n'y ai plus rien sur cette zone en fait)

Je suppose que ça doit se modifier dans la template, seulement j'ignore à quel endroit je devrais la modifier x_x
J'espère que mes explications ne sont pas trop brouillon et que vous arriverez à m'aider.

Merci d'avance.


Dernière édition par Shiya le Mar 1 Déc 2015 - 1:57, édité 1 fois
Shiya

Shiya
**

Féminin
Messages : 99
Inscrit(e) le : 28/12/2007

http://asumi-daigaku.easyforum.fr/
Shiya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier un code pour lier le profil au hover de l'avatar

Message par Invité Ven 27 Nov 2015 - 0:36

bonsoir , le Template concerné peut être ? sinon ça va etre compliqué
le css associer aussi Wink

vous voudriez le profil + la feuille de personnage dans le hover ,c'est bien ça ?
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier un code pour lier le profil au hover de l'avatar

Message par Shiya Ven 27 Nov 2015 - 0:51

Non, juste le profil
Template
Code:
    <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" 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}
      <!-- BEGIN postrow -->
      <!-- BEGIN hidden -->
      <tr>
          <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="3" align="center">{postrow.hidden.MESSAGE}</td>
      </tr>
      <!-- END hidden -->
      <!-- BEGIN displayed -->
      <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
          <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}" alt="" />

                                    <!-- 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>
                        <!-- BEGIN switch_signature -->
                        <div class="signature_div">
                            {postrow.displayed.SIGNATURE}
                        </div>
                        <!-- END switch_signature -->

                      </div>
                  </td>
                </tr>
            </table>
          </td>
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top">
        <div class="avaP">{postrow.displayed.POSTER_AVATAR}<div><div>{postrow.displayed.POSTER_RPG}</div></div></div>
        <div class="imgrankP">{postrow.displayed.RANK_IMAGE}<div class="onS">{postrow.displayed.ONLINE_IMG}</div></div>
        <div class="triNLP"></div><div class="triNRP"></div>
        <div class="rimgdP"><div class="nameP" style="padding:5px;"><strong>{postrow.displayed.POSTER_NAME}</strong></div><div class="rankP">{postrow.displayed.POSTER_RANK}</div><div class="ktactP">{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --></div>
        <div class="dtailS"><!-- BEGIN profile_field -->{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
        <!-- END profile_field --></div></div>
        <div class="triP"></div>
          </td>
      </tr>
      <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
          <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28" colspan="2">
          </td>
          <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>
      </tr>
      <!-- BEGIN first_post_br -->
    </table>
    <hr />
    <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 -->
      <!-- 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><div class="cattitle">{TOPIC_TITLE}</div></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>&nbsp;</td>
                </tr>
            </table>
          </td>
      </tr>
    </table>
CSS
Code:
    /* APPARENCE MESSAGES */
    div.postbody {
    background:rgba(250,250,250,0.3); border:3px solid rgba(250,250,250,0.2); /* MODIFIABLE */
    padding:10px; min-height:300px;
    text-align:justify; color:black;
    }
    /* AVATAR */
    .avaP {
    height:400px; width:200px;
    border:5px solid;
    border-color: #1e3556 /* MODIFIABLE */
    transition:transform 0.65s linear; -webkit-transition:transform 0.65s linear;
    }
    .avaP img {
    height:400px; width:200px;
    }
    /* INFORMATIONS RP */
    .avaP div{
    position:absolute; z-index:2; margin-top:-400px;
    width:200px; height:400px; overflow:hidden;
    }
    /* FOND INFORMATIONS RP */
    .avaP div div{
    width:190px; height:390px; padding:5px; overflow:auto;
    font-size:11px; background-color:rgba(250,250,250,0.5); /* MODIFIABLE */
    transform:translateY(-640px); -webkit-transform:translateY(-640px);
    transition:transform 0.65s linear; -webkit-transition:transform 0.65s linear;
    }
    .avaP:hover div div {
    transform:translateY(400px); -webkit-transform:translateY(320px);
    }
    /* IMAGE RANG */
    .imgrankP {
    position:absolute; z-index:3;
    margin-top:-53px;
    }
    /* ICONE EN LIGNE */
    .onS {
    position:absolute; z-index:4;
    margin-left:99px; margin-top:-30px;
    }
    /* TRIANGLES HAUT INFORMATIONS JOUEUR */
    .triNLP {
    display:inline-block;
    width:0; height:0;
    border-style:solid; border-width:50px 0 0 105px; border-color:transparent;
    border-left-color:#1e3556 /* MODIFIABLE */
    }
    .triNRP {
    display:inline-block;
    width:0; height:0;
    border-style:solid; border-width:0 0 50px 105px; border-color:transparent;
    border-bottom-color:#1e3556 /* MODIFIABLE */
    }
    /* BLOC INFORMATIONS JOUEUR */
    .rimgdP {
    background:#1e3556 /* MODIFIABLE */
    padding-bottom:5px;
    }
    /* PSEUDONYME */
    .nameP {
    width:200px; padding:5px;
    text-align:center; text-transform:uppercase;
    }
    /* TEXTE RANG */
    .rankP {
    padding:5px; width:200px;
    text-transform:uppercase; text-align:center;
    background:rgba(250,250,250,0.7); color:#1e3556  /* MODIFIABLE */
    }
    /* IMAGES CONTACT JOUEUR */
    .ktactP {
    width:210px; padding:5px 0; text-align:center;
    opacity:0.5;
    }
    /* INFOS JOUEUR */
    .dtailS {
    padding:5px; width:180px; margin:auto;
    font-size:11px; color:black; background:rgba(250,250,250,0.4); /* MODIFIABLE */
    }
    /* TRIANGLE BAS PROFIL */
    .triP {
    width:0; height:0; border-style:solid; border-width:50px 105px 0 105px; border-color:transparent;
    border-top-color:#1e3556 /* MODIFIABLE */
    }
Shiya

Shiya
**

Féminin
Messages : 99
Inscrit(e) le : 28/12/2007

http://asumi-daigaku.easyforum.fr/
Shiya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier un code pour lier le profil au hover de l'avatar

Message par Shiya Sam 28 Nov 2015 - 0:50

Petit up?
Shiya

Shiya
**

Féminin
Messages : 99
Inscrit(e) le : 28/12/2007

http://asumi-daigaku.easyforum.fr/
Shiya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier un code pour lier le profil au hover de l'avatar

Message par Invité Sam 28 Nov 2015 - 11:31

bonjour , vous avez changer depuis hier , l'avatar est passé a gauche , le profil dans le hover a changer aussi.. Exclamation
il n'y a plus les mêmes information , a l'interieur ..
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum