Premier plan et second plan, rang par dessus profil utilisateur.

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

Résolu Premier plan et second plan, rang par dessus profil utilisateur.

Message par yoyiecats le 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 :

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>
CSS:
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
**

Féminin
Messages : 51
Inscrit(e) le : 30/04/2011

http://sword-light.forums-rpg.com/
yoyiecats a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Premier plan et second plan, rang par dessus profil utilisateur.

Message par yoyiecats le Dim 22 Sep 2013 - 22:02

Up

Exactement 24h ! x)

yoyiecats
**

Féminin
Messages : 51
Inscrit(e) le : 30/04/2011

http://sword-light.forums-rpg.com/
yoyiecats a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Premier plan et second plan, rang par dessus profil utilisateur.

Message par yoyiecats le Lun 23 Sep 2013 - 22:02

Up

yoyiecats
**

Féminin
Messages : 51
Inscrit(e) le : 30/04/2011

http://sword-light.forums-rpg.com/
yoyiecats a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Premier plan et second plan, rang par dessus profil utilisateur.

Message par Matriochka le Mar 24 Sep 2013 - 10:49

Bonjour,

On peut tout simplement procéder avec ce code à coller dans le CSS :
Code:
.rang_mess {position:relative;}

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Premier plan et second plan, rang par dessus profil utilisateur.

Message par yoyiecats le 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 ! =)

yoyiecats
**

Féminin
Messages : 51
Inscrit(e) le : 30/04/2011

http://sword-light.forums-rpg.com/
yoyiecats a été remercié(e) par l'auteur de ce sujet.

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


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