Mettre une image de rang en background d'un pseudo [résolu, merci ! ] Bouton_activeMettre une image de rang en background d'un pseudo [résolu, merci ! ] Bouton_hoverMettre une image de rang en background d'un pseudo [résolu, merci ! ] Fb-hoverMettre une image de rang en background d'un pseudo [résolu, merci ! ] Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Mettre une image de rang en background d'un pseudo [résolu, merci ! ] EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Mettre une image de rang en background d'un pseudo [résolu, merci ! ] EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Mettre une image de rang en background d'un pseudo [résolu, merci ! ] EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Mettre une image de rang en background d'un pseudo [résolu, merci ! ] EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Mettre une image de rang en background d'un pseudo [résolu, merci ! ] EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Mettre une image de rang en background d'un pseudo [résolu, merci ! ] EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Mettre une image de rang en background d'un pseudo [résolu, merci ! ] EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Mettre une image de rang en background d'un pseudo [résolu, merci ! ] EmptySam 11 Fév 2023, 06:04 par Krager

-38%
Le deal à ne pas rater :
Ecran PC gaming 23,8″ – ACER KG241Y P3bip à 99,99€
99.99 € 159.99 €
Voir le deal

Partagez
 

Mettre une image de rang en background d'un pseudo [résolu, merci ! ]

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://illusionstales.site.voila.fr/
Fae
Fae
{ Membre }
{ Membre }

Féminin Messages : 14



Mettre une image de rang en background d'un pseudo [résolu, merci ! ] Empty
Bonjour à tous et toutes .

Etant depuis quelques temps sur la création et personnalisation d'un forum, je viens d'attaquer la partie des profils. Plus précisément, l'affichage des profils dans un sujet.

Pour le moment, j'ai une image de rang que je souhaite faire en apparaître en fond du pseudo du membre. Attention, je ne souhaite pas voir une apparition de ce genre : pseudo, puis rang image en dessous, puis avatar, puis rang texte. Non, je souhaite mettre le rang image en background. Si mon explication n'est pas assez explicite, je me ferais un plaisir de vous joindre un schéma pour une meilleure visualisation.

J'ai voulu essayé de bidouiller un peu seule la chose, voire s'il m'était possible de trouver mais non. Je suppose que c'est dans le templates viewtopic_body qu'il faut agir. N'ayant abouti à rien ce template est vierge de toutes modifications (c'est aussi pour cette raison que je ne vous fournis pas de lien du forum, mais là encore si besoin, aucun soucis). Et comme mes recherches sur ccsactif et le net n'ont rien donné non plus, je m'en remet à vous. J'espère juste ne pas avoir l'erreur de mal nommé mon problème, sinon je comprendrais mieux si je n'ai rien trouvé.

Je remercie par avance, celles et ceux qui voudront bien m'apporter un peu de leur temps et de leur aider.
Fae.


Dernière édition par Fae le Lun 28 Jan 2013, 15:05, édité 1 fois
MessageSujet: Mettre une image de rang en background d'un pseudo [résolu, merci ! ]   Mettre une image de rang en background d'un pseudo [résolu, merci ! ] EmptyLun 28 Jan 2013, 10:21
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Mettre une image de rang en background d'un pseudo [résolu, merci ! ] Empty
Bonjour Fae !

Quand tu parle de "mettre le rang en image de background", je suppose que tu sous-entends finalement que :
  1. Tu as des images de rangs
  2. Tu souhaites que ces images ne s'affichent pas en dessous du pseudo mais bel et bien derrière


Si oui je pense que le moyen le plus simple d'arriver au résultat escompté serait de "remonter" l'image pour la placer exactement derrière le pseudo (en checkant les dimensions pour s'assurer qu'il n'y ait pas de soucis, à vue d'oeil, ça devrait le faire).

Toutefois, je te laisse me corriger si je me trompe (ou éventuellement m'indiquer un schéma/le lien du forum en question où constater l'effet) si tu le juge nécessaire Smile
MessageSujet: Re: Mettre une image de rang en background d'un pseudo [résolu, merci ! ]   Mettre une image de rang en background d'un pseudo [résolu, merci ! ] EmptyLun 28 Jan 2013, 10:56
Revenir en haut Aller en bas
http://illusionstales.site.voila.fr/
Fae
Fae
{ Membre }
{ Membre }

Féminin Messages : 14



Mettre une image de rang en background d'un pseudo [résolu, merci ! ] Empty
Bonjour Espeon.

Tu as tout à fait compris l'effet que je recherchais et je te remercie énormément pour ta réponse rapide Smile . Effectivement remonter l'image n'était pas une possibilité que j'avais jusqu'à maintenant envisagée. Du coup, est-ce que c'est quelque chose que je dois faire depuis le css ou bien depuis le template (ou les deux) ? J'avoue volontiers que la manipulation des attributs des templates ne m'est encore pas très aisée.
MessageSujet: Re: Mettre une image de rang en background d'un pseudo [résolu, merci ! ]   Mettre une image de rang en background d'un pseudo [résolu, merci ! ] EmptyLun 28 Jan 2013, 11:07
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Mettre une image de rang en background d'un pseudo [résolu, merci ! ] Empty
En fait, c'est beaucoup de CSS et un chouïa de template pour pouvoir simplifier notre CSS.

Par étapes, tout simplement :

1 - Le template


Commence par te rendre dans le template . Repère la variable {postrow.displayed.POSTER_RANK}. C'est elle qui contient le code de ton rang. On va faire en sorte de pouvoir le repérer facilement en CSS, donc pour cela il faut l'entourer d'une balise <span> contenant une classe, comme ceci (par exemple) :
Code:
<span class="poster-rank">{postrow.displayed.POSTER_RANK}</span>

2 - Le CSS


Dans ton CSS, tu va changer la position de tes éléments portant la classe .poster-rank afin de faire en sorte de pouvoir les remonter par rapport à leur position initiale.

Pour cela, on utilise la propriété position que l'on fixe à relative. Ensuite, on joue avec top pour le faire remonter. Comme ceci :
Code:
.poster-rank {
    position: relative;
    top: -20px;
}

A toi d'adapter la valeur pour le remonter suffisamment Smile

3 - Dernières retouches


Le simple fait de remonter ton image ne rendra peut-être pas l'effet désiré. Notamment, il est fort probable que ton image cache le pseudo. On peut arranger ça en forçant l'image à se placer derrière le pseudo, cela passe par la propriété z-index.

Ainsi, il faut rajouter un z-index à ton image, mais également un au pseudo, et faire en sorte que le premier soit plus petit que le dernier.

Petit détail avec le z-index : cette propriété ne fonctionne que si l'élément est positionné. C'est le cas de ton image (qui est positionnée de manière relative), mais pas de ton pseudo : il faudra préciser un positionnement (plus d'infos sur z-index [EN]).

Donc il faudra ajouter z-index: 1; à ton image de rang, puis pour ton pseudo :
Code:
.name {
    position: relative;
    z-index: 10;
}


Après il faut peaufiner pour améliorer le rendu (opacité ?), mais dans l'idée tu devrais être en mesure d'obtenir l'effet désiré avec cette histoire de positionnement Smile
MessageSujet: Re: Mettre une image de rang en background d'un pseudo [résolu, merci ! ]   Mettre une image de rang en background d'un pseudo [résolu, merci ! ] EmptyLun 28 Jan 2013, 11:25
Revenir en haut Aller en bas
http://illusionstales.site.voila.fr/
Fae
Fae
{ Membre }
{ Membre }

Féminin Messages : 14



Mettre une image de rang en background d'un pseudo [résolu, merci ! ] Empty
Je te remercie encore une fois tes explications claires et vraiment précises. J'ai réussi à obtenir ce que je voulais grâce à toi.

Du coup, je me permet une autre petite question en rapport avec cette technique, si je veux déplacer mon image online près de l'avatar (un peu comme ccs actif en fait), je dois réaliser à peu près le même du type de manœuvre avec : {postrow.displayed.ONLINE_IMG} ?
MessageSujet: Re: Mettre une image de rang en background d'un pseudo [résolu, merci ! ]   Mettre une image de rang en background d'un pseudo [résolu, merci ! ] EmptyLun 28 Jan 2013, 12:20
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Mettre une image de rang en background d'un pseudo [résolu, merci ! ] Empty
Exactement, c'est la bonne variable Smile

Ce "type de manoeuvre" (comme tu dis ^_^) peut s'appliquer sur tout et n'importe quoi. En fait, il s'agit simplement de positionner les éléments (relativement à leur position initiale) et rien ne t'empèche de le faire pour modifier le rendu visuel de ton forum (vu que changer la structure ne serait pas forcément pertinent).

Si ton problème est résolu, tu m'en vois ravi et je t'invite donc à l'indiquer dans le titre du sujet pour faciliter le travail des modérateurs Wink


Merci à toi et bonne soirée !
MessageSujet: Re: Mettre une image de rang en background d'un pseudo [résolu, merci ! ]   Mettre une image de rang en background d'un pseudo [résolu, merci ! ] EmptyLun 28 Jan 2013, 12:46
Revenir en haut Aller en bas
http://illusionstales.site.voila.fr/
Fae
Fae
{ Membre }
{ Membre }

Féminin Messages : 14



Mettre une image de rang en background d'un pseudo [résolu, merci ! ] Empty
C'est noté !

Merci beaucoup pour ton aide et ta patience. Bonne soirée à toi aussi !
MessageSujet: Re: Mettre une image de rang en background d'un pseudo [résolu, merci ! ]   Mettre une image de rang en background d'un pseudo [résolu, merci ! ] EmptyLun 28 Jan 2013, 15:05
Revenir en haut Aller en bas
Psycho
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



Mettre une image de rang en background d'un pseudo [résolu, merci ! ] Empty
Hello !
Je vois que le problème est résolu, donc je classe !
Merci de l'avoir signalé Mettre une image de rang en background d'un pseudo [résolu, merci ! ] 926145
MessageSujet: Re: Mettre une image de rang en background d'un pseudo [résolu, merci ! ]   Mettre une image de rang en background d'un pseudo [résolu, merci ! ] EmptyLun 28 Jan 2013, 15:34
Revenir en haut Aller en bas
Contenu sponsorisé




Mettre une image de rang en background d'un pseudo [résolu, merci ! ] Empty
MessageSujet: Re: Mettre une image de rang en background d'un pseudo [résolu, merci ! ]   Mettre une image de rang en background d'un pseudo [résolu, merci ! ] Empty
Revenir en haut Aller en bas
 

Mettre une image de rang en background d'un pseudo [résolu, merci ! ]

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Mettre le pseudo sous l'avatar mais garder le rang au-dessus.
» Background image qui ne s'affiche pas... [Problème résolu ^^]
» Changement d'image au passage de la souris [Merci à Ketsia ♥, RESOLU]
» [résolu : par Hiro : merci merci merci ^^] Mon forum est décalé
» Pseudo, avatar et rang centré comment faire?

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit