Modifier un code pour lier le profil au hover de l'avatar
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Modifier un code pour lier le profil au hover de l'avatar
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
Re: Modifier un code pour lier le profil au hover de l'avatar
bonsoir , le Template concerné peut être ? sinon ça va etre compliqué
le css associer aussi
vous voudriez le profil + la feuille de personnage dans le hover ,c'est bien ça ?
le css associer aussi
vous voudriez le profil + la feuille de personnage dans le hover ,c'est bien ça ?
Invité- Invité
Re: Modifier un code pour lier le profil au hover de l'avatar
Non, juste le profil
Template
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> </td>
</tr>
</table>
</td>
</tr>
</table>
- 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 */
}
Re: Modifier un code pour lier le profil au hover de l'avatar
bonjour , vous avez changer depuis hier , l'avatar est passé a gauche , le profil dans le hover a changer aussi..
il n'y a plus les mêmes information , a l'interieur ..
il n'y a plus les mêmes information , a l'interieur ..
Invité- Invité
Sujets similaires
» Code CSS pour modifier la largeur des post et des profil?
» Modifier code pour enlever les liens haut du profil avancé uniquement
» Besoin d'aide pour redimensionner les images dans un code en hover
» Modifier mon code Profil
» Code CSS pour modifier la bannière
» Modifier code pour enlever les liens haut du profil avancé uniquement
» Besoin d'aide pour redimensionner les images dans un code en hover
» Modifier mon code Profil
» Code CSS pour modifier la bannière
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum