Premier plan et second plan, rang par dessus profil utilisateur.
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Premier plan et second plan, rang par dessus profil utilisateur.
Bonsoir/Bonjour,
Voilà, lors des messages de réponses, on peut voir le profil utilisateur ainsi que le rang au dessus.(muni d'une image dans mon cas )
Je souhaite faire en sorte que mon image de rang chevauche le profil utilisateur des messages de réponses pour expliquer plus amplement mon problème, voici quelques captures :
Alors... comme je sais jamais si c'est utile de le/les mettre ou pas, voici le template de mon profil utilisateur ainsi que le CSS :
Sur ce, merci à ceux qui pourront m'aider... (ou pas ^^ )
Cordialement.
Voilà, lors des messages de réponses, on peut voir le profil utilisateur ainsi que le rang au dessus.(muni d'une image dans mon cas )
Je souhaite faire en sorte que mon image de rang chevauche le profil utilisateur des messages de réponses pour expliquer plus amplement mon problème, voici quelques captures :
- Spoiler:
- Ici, les deux "parties" ne sont pas assemblé c'est juste pour vous faire voir la forme des deux "parties".
Ici, les deux parties sont collés cependant, le profil passe par dessus l'image de rang.
Alors... comme je sais jamais si c'est utile de le/les mettre ou pas, voici le template de mon profil utilisateur ainsi que le CSS :
- Spoiler:
- Template :
- Code:
<center><td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"></center>
<center><span class="rang_mess">{postrow.displayed.RANK_IMAGE}</span></center>
<center><span class="avatar_mess"><center><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></center>
{postrow.displayed.POSTER_AVATAR}</span></center>
<span class="pseudo_mess">{postrow.displayed.POSTER_NAME}</span>
</td>
- Code:
.avatar_mess
{
display: block;
width: 200px;
height: 350px;
margin-top: -30px;
margin-left: 6px;
margin-right: 10px;
overflow: hidden;
background: #bce44f;
border-top: 5px solid #ffffff;
border-bottom: 5px solid #ffffff;
border-right: 8px solid #ffffff;
border-left: 8px solid #ffffff;
border-radius: 50px;
transform: rotate(-0deg);
-moz-transform: rotate(-0deg);
-o-transform: rotate(-0deg);
-ms-transform: rotate(-0deg);
-htm-transform: rotate(-0deg);
-webkit-transform: rotate(-0deg);
box-shadow: 0px 0px 7px #5a5a5a;
-moz-box-shadow: 0px 0px 7px #5a5a5a;
-o-box-shadow: 0px 0px 7px #5a5a5a;
-htm-box-shadow: 0px 0px 7px #5a5a5a;
-webkit-box-shadow: 0px 0px 7px #5a5a5a;
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;
}
.avatar_mess:hover
{
margin-left: 6px;
overflow: hidden;
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-htm-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
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
{
position: absolute;
display: block;
width: 190px;
height: 325px;
margin: auto;
padding: 5px;
overflow: hidden;
border-radius: 43px;
background: #bce44f;
padding-top: 20px;
color: #475c0d;
text-shadow: 0.1px 0.05px 0.1px #ffffff
font-size: 12px;
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
{
overflow: hidden;
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;
}
.pseudo_mess
{
display: block;
position: relative;
width: 160px;
height: 40px;
margin-top: -45px;
margin-left: 65px;
padding-top: 6px;
text-align: center;
font-size: 20px;
font-family: Time New Roman;
background: #c0e659;
border-radius: 80px;
border-left: 7px solid #ffffff;
border-right: 7px solid #ffffff;
border-top: 3px solid #ffffff;
border-bottom: 3px solid #ffffff;
box-shadow: 0px 0px 4px #5a5a5a;
-moz-box-shadow: 0px 0px 4px #5a5a5a;
-o-box-shadow: 0px 0px 4px #5a5a5a;
-htm-box-shadow: 0px 0px 4px #5a5a5a;
-webkit-box-shadow: 0px 0px 4px #5a5a5a;
}
Sur ce, merci à ceux qui pourront m'aider... (ou pas ^^ )
Cordialement.
Dernière édition par yoyiecats le Mar 24 Sep 2013 - 19:43, édité 2 fois
Re: Premier plan et second plan, rang par dessus profil utilisateur.
Up
Exactement 24h ! x)
Exactement 24h ! x)
Re: Premier plan et second plan, rang par dessus profil utilisateur.
Bonjour,
On peut tout simplement procéder avec ce code à coller dans le CSS :
On peut tout simplement procéder avec ce code à coller dans le CSS :
- Code:
.rang_mess {position:relative;}
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Premier plan et second plan, rang par dessus profil utilisateur.
Merci beaucoup ça fonctionne parfaitement ! ^^ (pourquoi mes problèmes insurmontables sont toujours aussi simple au final ? x) )
Sujet résolu ! =)
Sujet résolu ! =)
Sujets similaires
» Image rang qui passe au dessus du pseudo de l'utilisateur
» Mettre un champ de profil au dessus de l'avatar et le rang en dessous
» Affichage rang profil utilisateur doublon
» barre de titre au premier plan
» Comment faire pour que le "Titre du Rang" ne s'affiche plus au dessus de "L'image du rang" ?
» Mettre un champ de profil au dessus de l'avatar et le rang en dessous
» Affichage rang profil utilisateur doublon
» barre de titre au premier plan
» Comment faire pour que le "Titre du Rang" ne s'affiche plus au dessus de "L'image du rang" ?
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum