Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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".

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

Ici, les deux parties sont collés cependant, le profil passe par dessus l'image de rang.

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


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

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

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

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;}
avatar

Matriochka
Membre actif

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

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