CSS pour l'image de Rang?

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

Résolu CSS pour l'image de Rang?

Message par Mysticia le Sam 26 Juil 2014 - 18:01

Bonjour,

j'aurais aimé savoir quel code CSS utiliser pour l'image de rang (poster rank img ne marche pas, j'ai essayé d'autres...)

effet recherché : que mon image de rang se positionne sur l'avatar et non pas au dessus (léger débordement en 1ier plan)


Dernière édition par Mysticia le Dim 27 Juil 2014 - 14:05, édité 1 fois

Mysticia
*

Messages : 38
Inscrit(e) le : 24/02/2013

http://9mois.bbactif.com/
Mysticia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: CSS pour l'image de Rang?

Message par Ea le Sam 26 Juil 2014 - 19:29

Bonjour,


Peut-être quelque chose comme :

Code:
.postdetails.poster-profile img:first-child { margin-bottom: -40px; z-index: 3; position: relative; }

les deux derniers attributs devraient permettre que l'image de rang soit au dessus de l'avatar.

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

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

Résolu Re: CSS pour l'image de Rang?

Message par Mysticia le Dim 27 Juil 2014 - 0:17

Merci de me répondre.

Alors l'avatar remonte mais cache l'image de rang, je voudrai que le rang soit par dessus, non en dessous.
Aussi dans ce code l'avatar descend sur les infos textes du posteur...

Merci de m'aider!

Mysticia
*

Messages : 38
Inscrit(e) le : 24/02/2013

http://9mois.bbactif.com/
Mysticia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: CSS pour l'image de Rang?

Message par Ea le Dim 27 Juil 2014 - 0:37

chez moi l'image de rang est au dessus : http://i.imgur.com/TOq6mQI.png

c'est ce qui devrait être réalisé grâce au "z-index: 3; position: relative;" normalement

pour ce qui est des informations de posteur, la seule chose que le code fait c'est faire remonter de 40 pixels ce qui se trouve en dessous de l'image de rang, donc je ne comprends pas comment l'avatar descenderais sur les informations de posteur.

Il serait possible de prendre une capture d'écran ?

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

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

Résolu Re: CSS pour l'image de Rang?

Message par Mysticia le Dim 27 Juil 2014 - 0:44

Voici l'affichage sur Google Chrome Sad

http://i35.servimg.com/u/f35/18/26/66/60/feee10.jpg


Dernière édition par Mysticia le Dim 27 Juil 2014 - 14:04, édité 1 fois

Mysticia
*

Messages : 38
Inscrit(e) le : 24/02/2013

http://9mois.bbactif.com/
Mysticia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: CSS pour l'image de Rang?

Message par Ea le Dim 27 Juil 2014 - 1:03

J'ai le même rendu sur chrome, firefox et opera.

J'imagin qu'en étant connecté la structure html change quelque peu et ceci :

Code:
.postdetails.poster-profile img:first-child

ne s'applique plus qu'aux images de rang mais également aux avatars, les deux problèmes ( avatar au dessus et texte en dessous couvert par l'avatar ) en seraient expliqués.

Dans ce cas il y a deux solutions :

  • Soit faire une modification de template et entourer {postrow.displayed.RANK_IMAGE} par <span class="prof-rankimg"> ... </span>

  • Soit ajouter ce script sur les pages de sujet :

    Code:
    $(function() {
      $(".postdetails.poster-profile").each(function() {
        $(this).children().first().filter("img").wrap('<span class="prof-rankimg" />');
      });
    });


et une fois une de ces deux solutions mise en place, le code css suivant peut être utilisé :

Code:
.prof-rankimg { margin-bottom: -40px; z-index: 2; position: relative; }

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

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

Résolu Re: CSS pour l'image de Rang?

Message par Mysticia le Dim 27 Juil 2014 - 1:16

Désolée mais j'ai testé les 2 méthodes et le css ne semble plus faire effet, mon rang et mon avatar reprennent la place d'origine, que ce soit sur firefox où je suis en invité ou google chrome ou je suis connectée voyez:

http://i35.servimg.com/u/f35/18/26/66/60/untitl15.jpg

ps : même affichage sur un 2è pc, non connecté



Dernière édition par Mysticia le Dim 27 Juil 2014 - 14:03, édité 1 fois

Mysticia
*

Messages : 38
Inscrit(e) le : 24/02/2013

http://9mois.bbactif.com/
Mysticia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: CSS pour l'image de Rang?

Message par Ea le Dim 27 Juil 2014 - 11:42

Vous avez bien :

Code:
<span class="prof-rankimg">{postrow.displayed.RANK_IMAGE}</span>

?

Et si vous avez bien ça, est-ce que vous utilisez l'image de rang ou est-ce que vous mettez l'image pas par la ligne image mais par le texte en mettant :

Code:
<img src="http://i39.servimg.com/u/f39/18/11/61/06/lang10.png" />

?

Si vous aviez cela il faudrait plutôt entourer {postrow.displayed.POSTER_RANK}

Et pour le CSS il me semble qu'à mon essai ça fonctionnait mieux avec :

Code:
.prof-rankimg img { margin-bottom: -40px; z-index: 2; position: relative; }

je me suis trompé et j'ai posté la version sans le img.

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

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

Résolu Re: CSS pour l'image de Rang?

Message par Mysticia le Dim 27 Juil 2014 - 14:03

Aaah voilà que tout s'explique, merci d'avoir résolu ce casse tête pour moi, je clôture!

Mysticia
*

Messages : 38
Inscrit(e) le : 24/02/2013

http://9mois.bbactif.com/
Mysticia 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