Accueil
Créer un forumPremier 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.
par yoyiecats Sam 21 Sep 2013 - 22:02
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
yoyiecats- **
-
Messages : 51
Inscrit(e) le : 30/04/2011 -
Re: Premier plan et second plan, rang par dessus profil utilisateur.
par yoyiecats Dim 22 Sep 2013 - 22:02
Up
Exactement 24h ! x)
Exactement 24h ! x)
yoyiecats- **
-
Messages : 51
Inscrit(e) le : 30/04/2011 -
Re: Premier plan et second plan, rang par dessus profil utilisateur.
par yoyiecats Lun 23 Sep 2013 - 22:02
Up
yoyiecats- **
-
Messages : 51
Inscrit(e) le : 30/04/2011 -
Re: Premier plan et second plan, rang par dessus profil utilisateur.
par Matriochka Mar 24 Sep 2013 - 10:49
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.
par yoyiecats Mar 24 Sep 2013 - 19:43
Merci beaucoup ça fonctionne parfaitement ! ^^ (pourquoi mes problèmes insurmontables sont toujours aussi simple au final ? x) )
Sujet résolu ! =)
Sujet résolu ! =)
yoyiecats- **
-
Messages : 51
Inscrit(e) le : 30/04/2011 -
Sujets similaires» Affichage rang profil utilisateur doublon
» [Profil] Un choix multiple pour une liste d'images, profil d'utilisateur
» Image rang qui passe au dessus du pseudo de l'utilisateur
» comment mettre une image en arrière plan dans le profil
» Problème pour modifier la couleur de l'arrière plan du profil.
» [Profil] Un choix multiple pour une liste d'images, profil d'utilisateur
» Image rang qui passe au dessus du pseudo de l'utilisateur
» comment mettre une image en arrière plan dans le profil
» Problème pour modifier la couleur de l'arrière plan du profil.
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