Bonsoir bonsoir, ceci est un appel à l'aide u_u
Je souhaiterais combiner deux codages. Dans le mien, il y a une image de fond. Le codage que je veux combiner avec le mien est un codage qui permets de cacher les informations du profil derrière l'avatar et qui s'afficherait quand on passe la souris sur l'avatar. J'ai passé de nombreuses heures à essayer de combiner les deux codages sans pouvoir y arriver. Mon codage de base à une structure que je voudrais garder parce qu'il est codé en fonction de l'image de fond. J'ai essayé de déplacer les codes du second codage mais c'est encore pire.
Voici mon codage :
- Code:
-
<!-- BEGIN displayed -->
<tr class="post">
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<div class="avatar_mess"><center><div style="margin-top:5px;"><br /><br /><br /><div class="soft">{postrow.displayed.POSTER_AVATAR}</div> </div></center> <center><br /><span class="name">{postrow.displayed.POSTER_NAME}</span></center><div class="barre"></div><span class="rank">
<center>{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}</center> </span> </div>
<br />
Et voici le code que j'aimerais intégrer dans le mien :
- Code:
-
<!--Début de la modification pour l'apparence de l'avatar avec effet masqué-->
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<!--Code affichage dernier message posté--> <a name="{postrow.displayed.U_POST_ID}"></a>
<span class="rang_mess">{postrow.displayed.RANK_IMAGE}</span>
<span class="avatar_mess"><span class="profil_mess"><!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}</span>
{postrow.displayed.POSTER_AVATAR}</span>
</td>
<!--fin de la modification pour l'apparence de l'avatar avec effet masqué-->
Les deux css :
- Code:
-
/*profil*/
.name {
position: relative;
overflow: hidden;
text-align: center;
font-size: 15px;
letter-spacing: -1px;
text-transform: italic lowercase;
font-family: 'Marcellus', serif;
text-shadow:4px 0px 0px white;
}
.rank {
font-family: 'Marcellus', serif;
text-transform: lowercase ;
letter-spacing: 3px;
font-size: 10px;
text-shadow:4px 0px 0px white;
top: -25px;
}
.avatar_mess{
background-image:url(http://img15.hostingpics.net/pics/682818profil.png);
width:210px;
height: 500px;
display: block;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s}
.soft{max-width:200px;box-shadow: 0px 0px 3px #353534;
}
.profil_mess
{
position: absolute;
display: block;
width: 190px;
height: 310px;
margin-top: 100px;
padding: 5px;
overflow: auto;
background: #6b664e;
color: #c5bea0;
font-size: 11px;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.profil_mess:hover
{
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
J'ai encore poussé le sadisme, et là, c'est carrément dramatique ! J'ai changé des trucs et mmh... mon texte a disparu mais quand je passe la souris sous l'avatar, certaines lignes apparaissent comme ça.
- Code:
-
<!-- BEGIN displayed -->
<tr class="post">
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<div class="avatar_mess"><center><div style="margin-top:5px;"><br /><br /><br /><div class="soft">{postrow.displayed.POSTER_AVATAR}</div> </div></center> <center><br /><span class="name">{postrow.displayed.POSTER_NAME}</span></center><div class="barre"></div><span class="rank">
<center>{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}</center> </span> </div>
<br />
<!-- BEGIN profile_field -->
<span class="postdetails poster-profile"><div style="padding-left: 10px;padding-right: 10px;">
<span class="profil_mess">{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</span>
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
<br /></div> </span>
Je vous propose même un petit visuel ici : http://howtobe.forumactif.org/t7-modele-fiche-de-presentation
Quelqu'un pour venir à mon aide ? Je désespère là.
Sam 30 Mar 2024, 22:07 par 
