Me revoilà

Alors merci beaucoup Onyx pour les infos ^^ J'ai bien décrypté ton code pour voir comment ça fonctionnait, faudra que je teste =)

Mais je ne sais pas si tu as vu, j'ai utilisé à peu près la même technique (avec les nth-child) mais en mode css (le code dans le template est donc plus long). Pour chaque ligne j'ai mis une class différente (donc pour ce qu'il y a derrière l'avatar, pour la ligne image, et pour la ligne groupe/surnom)
avec un jeu de display:none et display:block (en utilisant les nth child pour montrer les infos qui m'intéresse et contrôler chaque champ personnalisé)

Voici le code avec le bout concerné si ça t'intéresse :



Et pour la zone Template :



Je pense qu'il est quand même plus "lourd" que le code en Javascript alors si tu pouvais juste me dire si ça passe ? Sinon je prends ton code et je bidouille pour retrouver le même résultat

Et aussi pour Mz Eli ça te permet de voir de quoi je parlais si ça t'intéresse ^^

Le résultat ici :

http://testselenthil.forumgratuit.ch/t1-votre-1er-sujet

Il me reste plus qu'à changer l'avatar pour quelque chose de plus "neutre" pour le rendu, faire un test avec un nouveau compte (je veux voir si les textes et images que j'ai mis de base s'ajoutent bien dès l'inscription du nouvel utilisateur pour éviter que ça décale tous les champs)

Afterglow, hésite pas à me dire si tu veux des petites corrections, que ce soit les titres, les couleurs, des ptits ajouts supplémentaires (faut que je reregarde ton schéma là je voulais juste montrer le plus gros du boulot avec le placement)

Il faudrait aussi que tu me dises ce que tu veux comme champs "obligatoires" puisque je dois les rajouter manuellement

Le javascript n'est pas activé pour tous les ordis (c'est rare, mais bon, ça arrive) alors c'est sûrement mieux de fonctionner par CSS ^^

Sinon, je te recommanderais de mettre les champs qui ne sont pas derrières l'avatar en tout dernier dans l'ordre du profil et de fonctionner avec "nth-last-child()" qui prend le X enfant en partant de la fin à la place de nth-child() qui prend le X enfant en partant du début. Comme ça, After pourra plus facilement modifier ou ajouter des champs dans le futur puisqu'un champ nouvellement créé va automatiquement en haut de la liste

Et il pourrait aussi y avoir quelques améliorations. Présentement, tu prend tous les champs et tu leur met un display none. Puis, tu sélectionnes tous les champs un par un pour lui mettre un display inline-block ou block dépendemment de la section où tu veux qu'ils apparaîssent. Le hic, c'est que si After veut ajouter des champs dans le futur, ça vient causer problème parce qu'il faudrait qu'elle les ajoute alors manuellement dans le CSS et c'est frustrant.

Ce serait plus facile de simplement mettre tous les champs derrière l'avatar en display block, puis d'enlver les X derniers enfants qui vont en réalité en dessous de l'avatar en leur mettant un display none.

Et tu peux mettre ceci pour t'assurer qu'un champ sur 2 soit de background-différent sans avoir à tous les énumérer :

Code:

/*Champs pairs*/
.profil_mess_groupe .deco_profil_mess {
  background-color: couleur;
}
/*Champs impairs*/
.profil_mess_groupe .deco_profil_mess:nth-child(odd) {
  background-color: couleur;
}

Et pour le en dessous de l'avatar, tu met tous les champs en display none, à l'exception des X derniers enfants qui doivent apparaître auxquels tu mets un display inline-block.

Hey

Tout d'abord un gros merci Onyx pour tes précieuses informations

Pour le Javascript, c'est surtout par rapport à moi. J'ai encore peu de connaissances dans ce domaine, c'est pour ça que je ne pense pas à ce type de solution ^^

Pour les champs, c'est exactement le souci que j'ai rencontré et la réflexion que je me suis posée. Comme j'ai fait une recherche google, j'ai trouvé le nth-child mais je n'ai pas "tilté" sur le fait qu'on pouvait aussi partir sur le dernier champ afin de les sécuriser. Donc c'était un tout ptit détail que je n'arrivais pas à trouver mais qui va vraiment rendre le machin moins "complexe" à utiliser.

Merci beaucoup en tout cas je pense que ça m'a bien éclairé ^^ (et au final c'était tout bête <<).

Donc j'ai actualisé mon code avec tes conseils. L'aperçu fonctionne, j'ai fait un test pour ajouter un nouveau champ en le remplissant, c'est nickel ^^

Voici le résultat du code si tu souhaites "checker".

Perso, je pense trop au javascript parce que je commence enfin à réussir à l'utiliser un peu alors j'ai tendance à en mettre partout XD

Sinon, ça m'a l'air parfait ^^

Juste, ce ne serait pas plutôt cette couleur pour impair #388086 et cette couleur pour pair #a0d5d9?

Je te comprends ^^ Je pense que je ferais pareil si j'étais à ta place (et pis ça permet de mieux l'apprivoiser et continuer de pratiquer ^^)

Cool =) Je suis contente

Vi tu as raison, j'ai regardé les screens tout à l'heure et ma couleur n'est pas la bonne C'est prévu dans les modifs à faire. ^^

J'ai aussi fait un test en créant un nouveau compte, tout se met bien en place comme il faut donc je dirais qu'il n'y a plus de souci pour l'affichage et la création des champs du profil

Il ne me reste plus que des retouches assez mineures à faire pour que ça corresponde bien à ce qu'Afterglow a demandé (changement de police, meilleure intégration de la petite flèche et réduction...).

Il y aura un dernier ptit truc que j'aimerais tenter pour vraiment coller à ce qu'elle a demandé, c'est changer les ":" en caractère carré (dans les champs profil). J'ai commencé à faire des recherches et il va falloir utiliser le javascript xD J'ai peut être une piste avec "replace" et quelques indications, faut que je bidouille un peu si j'arrive à obtenir quelque chose.

Et si Mz Eli souhaite donner son avis également ou un commentaire (que ce soit sur le code ou autre) c'est avec plaisir

Bouh!

Et oui, replace est une assez bonne solution. En javascript, tu peux facilement faire quelque chose comme ceci pour remplacer les petits points par un triangle :

Code:

document.getElementsByClassName("deco_profil_mess").replace(/ : /g, " ► ");

Ah ta soluce est encore plus pitite que ce que j'ai trouvé xD

Mon truc fonctionne aussi mais il faut attribuer une span class à la variable du label puis insérer un ptit code javascript à la suite qui donne

Code:

<script type="text/javascript">$('.champ_carre').each(function(){$(this).html($(this).html().replace(/:/g,"X"));});</script>

Pour info je n'ai pas créé ce code j'ai fait quelques recherches et je suis tombée sur ça, après j'ai juste changer ma variable en javascript et mon élément à remplacer.

C'est un carré au fait, je sais pas pourquoi je t'ai dit triangle T_T (Elenthil devrait se couche <<)r. Et j'ai mis x pour voir si ça fonctionnait déjà parce qu'après les symboles c'est une autre histoire.

Après pour ton code, j'ai voulu essayé en le plaçant dans un module javascript mais ça ne fonctionne pas Manque sûrement un truc ou je le place pas au bon endroit. Soit faut le mettre dans le template, soit faut que je mette les balises script pour le placer, soit il me manque un élément autre qui empêche le machin de se lancer

Déso j'ai pas beaucoup de notions là dessus <<

Bouh!

Ah, l'avantage du jQuery sur le javascript, c'est plus facile de sélectionner les choses, j'adore each() ^^ Et oui, c'est normal que mon code ne fonctionne pas, c'était juste un petit bout pour montrer l'exemple, il manque des bouts

Et pourquoi les symboles sont une autre histoire, ce n'est pas particulièrement compliqer, tu transforme X par ◘ ou quelque chose, non? Et au pire tu mets une image...

Hey Onyx =)

Après tu sais moi le JQuery et le Javascript j'ai encore du mal à tout distingué
Ah ah en effet ça ne pouvait pas fonctionner alors xD Bon au moins ma solution marche quand même ^^

Pour les symboles, en fait je pensais au code que tu dois utiliser quand tu fais un site (sais pas si c'est toujours d'actu) mais tu avais un code à mettre dans ta page html sinon le symbole n'apparaissait pas. Par exemple pour un losange c'est : ♦

C'est pour cela que j'étais un ptit peu méfiante en mettant le carré comme ça et que ça passe. (bon au pire ça aurait rien déformé ^^)

Pour Afterglow voici l'avancée :

=> Modification des couleurs OK
=> Infos du profil en italique OK
=> Allongement du profil (espace sous les carrés) OK
=> Flèche à positionner EN COURS
=> Positionnement de la ligne groupe/surnom EN COURS
=> Redimensionnement des images dans les carrés roses OK
=> Ecriture du rang/pseudo A FAIRE
=> Positionnement du rang A FAIRE
=> Positionnement du pseudo A FAIRE

Voici un nouveau lien car j'ai ouvert un sujet neuf afin que tu puisses voir avec un "faux avatar" aux dimensions que tu as demandé :

http://testselenthil.forumgratuit.ch/t2-test-profil-afterglow#4

Petites remarques et demandes

- Est-ce que c'est possible d'avoir une police qui se trouve sur Google Fonts ressemblant à celle d'édition pour le rang/pseudo ? Comme celle-ci n'est pas hébergée, ça serait plus simple si tu pouvais m'en trouver une dans le même genre. Si tu ne trouves pas pas grave, je mettrais celle là

- Je ne peux pas mettre l'info du profil en maj comme sur ton schéma. Enfin si je peux mais ça ne serait pas très beau car il y a un risque de retour à la ligne si le texte est trop grand (par exemple date d'inscription + la date tiendra sur deux lignes)

- Pour la partie Surnom et Groupe, par rapport à la largeur de ton cadre, il faudra faire attention à ne pas avoir des mots trop longs sinon ça va rogner. J'ai réduit la taille de la police mais avec des majuscules ça prend pas mal de place ^^. Par exemple si tu as un membre qui met en surnom "Petite fleur des prairies", vu la longueur du surnom, ça coupera forcément. Est-ce que tu veux qu'on essaye de mettre en minuscules ou tu veux qu'on laisse comme ça ?

Pour Onyx et Mz Eli :

Concernant la partie de la ligne de groupe/surnom, je trouve mon code un peu bancal. Je pensais séparer les trois éléments dans 3 conteneurs distincts pour éviter que ça ne soit pas centré si le groupe ou surnom est très court. Donc donner une taille précise à trois blocs (pour groupe/carré/surnom) et mettre un text align pour les centrer. Je ne sais pas encore si ça fera bien ou pas

Sachant que pour le petit carré, j'ai rusé en mettant une position relative et le déplaçant avec un left pour qu'il se positionne au milieu (puisqu'on ne peux pas séparer les deux labels).

J'ai un petit souci avec la flèche qui ne se met pas devant l'élément. En effet, en attribuant un overflow hidden sur le fond profil pour éviter que le bandeau rose ne coupe, ça coupe aussi la flèche malheureusement :) J'essaie de voir comment régler ça car au final j'ai juste utilisé l'overflow pour le bandeau rose mais ça prend aussi en compte ma flèche

Valà

Bouh !

La façon facile de distinguer le jquery du javascript, c'est que jquery utilise des trucs comme $('.nomdelaclasse') à la place de document.getElementsByClassName('nomdelaclass').

Alors les symboles sur forumactif fonctionnent parce que forumactif a déjà défini l'encodage en utf-8 ou quelque chose de semblable.
Sur une page html, on crée une page html de A à Z alors il n'y a pas l'encodage de forumactif. Du coup, il faut dire à notre page html quel type d'encodage on on utilise. L'encodage de base accepte les chiffres et les lettres, mais pas les accents ou les caractères spéciaux. Normalement, il te suffit de mettre un encodage plus complet et presque tous les caractères fonctionnent. Pour cela, tu mets ceci dans le "head" de ta page html et c'est suffisant :

Code:

<meta charset="utf-8" />

Sinon, je ne suis pas trop sûre de quoi tu parles exactement pour Surnom Groupe et le carré, tu nous montre les bouts des codes? Parce qu'il y a un moyen bien plus facile de fonctionner pour le carré. Tu peux fonctionner comme avec "replace", sauf que tu remplacerais le saut de ligne entre chaque champ :

Code:

replace(/<br>/g, "<span class='profil_sep_carre'>◘</span>")

Puis tu mettrais la class du carré en display none partout sauf là où tu veux avec encore le :nth-last-child().

Pour la flèche, tu ne peux pas simplement la mettre ailleurs? Là, tu as le fond profil qui a un overflow hidden et c'est ok. Pour la flèche, pourquoi ne pas entourer le fond profil d'une autre div avec une position relative. Ensuite, tu met la flèche directement dans la nouvelle div et tu la place au bon en droit grace à la position absolute. Comme elle ne sera plus dans le fondprofil, elle ne causera plus problème. Enfin, je dis ça... Encore une fois, on ne voit pas trop tes codes alors c'est dur à dire, tu nous montres ?

Hey

Ok merci pour la précision sur le Jquery/Javascript

Je vois pour l'encodage merci pour la précision également

Oh je vois pour le carré, c'est donc carrément la variable du saut de ligne qu'il faut englober et remplacer l'espace par le carré

Pour la flèche c'est justement ce que j'ai essayé de faire après pour la placer au bon endroit, le seul souci, c'est que le click focus ne marche plus. L'élément contenant l'image se place au dessus de l'élément invisible faisant l'animation. Faudrait peut être que j'essaie de placer le conteneur image sous le conteneur animation (avec un z-index), je n'ai pas encore creusé plus loin. x_x

Ca marche avec le z-index (voir modifs plus bas) mais il reste un ptit souci encore ^^

Je te montre donc mes codes (c'est un peu le bazar désolé )

CSS



Et la partie template



Tu préfères tout le template ? Là je ne t'ai passé que la partie concernée mais si tu veux voir la globalité je peux le mettre (mais je n'ai pas fait de modif ailleurs)

EDIT :

Bon avec le bidouillage du z-index ça fonctionne << mais, je trouve un peu bizarre que le curseur ne prenne pas tout le bloc "invisible", faut vraiment cibler le clic.

Modification template (ajout d'une balise img + class juste avant fond_profil)



Modifications CSS

Mmhh...

First, pourquoi tu mets la feuille de personnage partout? Là, la variable {postrow.displayed.POSTER_RPG} est à 3 endroits pour rien. Si tu ne veux pas l'afficher nul part, enlève-là carrément. Sinon, met là juste à un endroit.

---

Pour la flèche, c'est vrai que ce n'est pas vraiment idéal comme solution ><

Vu le reste de ton code (avant ton édit), je tricherais en ne mettant pas l'overflow hidden sur le profil fond, tout simplement. J'entourerais le rang d'une div avec la même largeur que le fond profil et c'est à lui que je donnerais l'overflow hidden. Comme ça, ça n'affecte que le rang, rien d'autre. Cela donnerait ceci comme modifications dans ton CSS :

Code:

.fond_profil{
  
  background-color: #A0D5D9;
  height: 550px;
  width: 220px;
  border-top-left-radius: 33px 9px;
  border-top-right-radius: 33px 9px;
  border-bottom-left-radius: 33px 9px;
  border-bottom-right-radius: 33px 9px;
  position: relative;
  margin: 0 10px;
  
}

.rang_mess_couper {
  position: absolute;
  width: 220px;
  height: 80px;
  overflow: hidden;
  z-index: 49;
}

Et ton rang dans le template serait maintenant comme ceci :

Code:

<div class="rang_mess_couper"><span class="rang_mess">{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}</span></div>

---

Pour le carré, oui, on peut enlever les "br" qui sont les séparations entre les différents champs pour le changer en un carré dans un span auquel on donne une classe :

Code:

<script type="text/javascript">
                 $('.profil_mess_groupe > .deco_profil_mess').each(function(){$(this).html($(this).html().replace(/<br>/g,"<span class='carre_mess_groupe'>◘</span>"));});
                </script>

Ensuite, on fait disparaître toutes les carrés avec display none et on fait réapparaître juste le nth-last-of-type qui reste.

Cela donne ceci dans le template :

Code:

<div class="fond_profil">
            
  <div class="rang_mess_couper"><span class="rang_mess">{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}</span></div>
                          
          <span class="avatar_mess avatar_position">
                            
                            <div class="mess_lien_profil" tabindex="0">
                              
                              
          <div class="profil_mess">
            
                              
                            <!-- BEGIN profile_field -->
            <span class="deco_profil_mess">
              <span class="champ_carre">{postrow.displayed.profile_field.LABEL}</span>
              <script type="text/javascript">$('.champ_carre').each(function(){$(this).html($(this).html().replace(/:/g,"■"));});</script>
              <span class="italic_label">{postrow.displayed.profile_field.CONTENT}</span>{postrow.displayed.profile_field.SEPARATOR}</span>
                
                    <!-- END profile_field -->
                            {postrow.displayed.POSTER_RPG}</div>
            </div>
            
                            {postrow.displayed.POSTER_AVATAR}</span>
                          
            <div class="profil_mess_groupe">
            
                              
                            <!-- BEGIN profile_field -->
            <span class="deco_profil_mess">
               {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</span>
                    <!-- END profile_field -->
              {postrow.displayed.POSTER_RPG}
           </div>
               <script type="text/javascript">
                 $('.profil_mess_groupe > .deco_profil_mess').each(function(){$(this).html($(this).html().replace(/<br>/g,"<span class='carre_mess_groupe'>◘</span>"));});
                </script>
            
            <span class="pseudo_mess">{postrow.displayed.POSTER_NAME}</span>
            
            <div class="profil_mess_img">
            
                              
                            <!-- BEGIN profile_field -->
            <span class="deco_profil_mess">
              {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</span>
                    <!-- END profile_field -->
                            {postrow.displayed.POSTER_RPG}</div>
          
            
          
          </div>

Et cela comme CSS (au complet, je ne me souvenais plus ce que j'avais ajouté, alors ) :

Code:

/* Effet Avatar Slide */

.avatar_mess {
  display: inline-block;
  width: 200px;
  height: 320px;
  margin: auto;
  overflow: hidden;
  background-color: #75B4B9;
  
  box-shadow: 0px 0px 6px #000000;
  -moz-transform: all;
  transition: 1s;
}

.avatar_position {
  margin-top: 45px;
  margin-left: 9px;
}



.profil_mess {
  position: absolute;
  width: 0px;
  height: 320px;
  margin-top: -125px;
  margin-left: -194px;
  overflow: auto;
  background: #75B4B9;
  color: #141313;
  font-size: 11px;
  transition: 500ms;
  -moz-transition: 500ms;
  z-index: 10;
}

.profil_mess_img{
  margin-top: 23px;
  width: 245px;
}



.pseudo_mess{
  display: block;
  position: relative;
  z-index: 2;
  width: 220px;
  margin-top: -25px;
  text-align: center;
  font-size: 18px;
  font-family: Impact;
  padding-top: 5px;
}

.pseudo_mess a{
  text-decoration: none;
}

.mess_lien_profil{
  width: 40px;
  height: 60px;
  background-image: url(http://zupimages.net/up/16/27/oyd5.png);
  background-repeat: no-repeat;
  position: absolute;
  margin-top: 123px;
  margin-left: 194px;
  cursor: pointer;
  
}



.mess_lien_profil:focus .profil_mess{
  margin-left: -194px;
  margin-top: -117px;
  width: 200px;
  height: 314px;
  
}

/*Apparence Profil Avatar*/

.fond_profil {
  background-color: #A0D5D9;
  height: 550px;
  width: 220px;
  border-top-left-radius: 33px 9px;
  border-top-right-radius: 33px 9px;
  border-bottom-left-radius: 33px 9px;
  border-bottom-right-radius: 33px 9px;
  position: relative;
  margin: 0 10px;
}

.rang_mess_couper {
  position: absolute;
  width: 220px;
  height: 80px;
  overflow: hidden;
  text-align: center;
  z-index: 49;
}
.rang_mess {
  width: 240px;
  height: 30px;
  background-color: pink;
  position: absolute;
  transform: rotate(-5deg);
  margin-top: 30px;
  text-align: center;
  padding-top: 5px;
  z-index: 50;
  color: black;
  right: -3px;
}

/* Profil sous avatar */

.profil_mess .deco_profil_mess{
 display: block;
  color: white;
  padding-left: 3px;
  
}

.profil_mess .deco_profil_mess:nth-last-of-type(1),
.profil_mess .deco_profil_mess:nth-last-of-type(2),
.profil_mess .deco_profil_mess:nth-last-of-type(3),
.profil_mess .deco_profil_mess:nth-last-of-type(4){
 display: none;
}

/*Champs pairs*/
.profil_mess .deco_profil_mess {
 background-color: #A0D5D9;
}

/*Champs impairs*/
.profil_mess .deco_profil_mess:nth-of-type(odd) {
 
  background-color: #388086;
}

.profil_mess .deco_profil_mess:nth-of-type(1){
  margin-top: 27px;
  
}

.deco_profil_mess .italic_label {
 font-style: italic;
}

/* Profil Ligne Groupe / Surnom */

/*Disparition des champs autres que groupe et surnom*/
.profil_mess_groupe .deco_profil_mess{
 display: none;
}

/*Apparition de groupe et surnom*/
.profil_mess_groupe .deco_profil_mess:nth-last-of-type(3),
.profil_mess_groupe .deco_profil_mess:nth-last-of-type(4) {
 display: inline-block;
  background-color: #A0D5D9;
  vertical-align: top;
  margin-top: 10px;
  font-family: Arial;
  color: black;
  text-transform: uppercase;
  font-size: 13px;
}
/*Couleur de surnom*/
.profil_mess_groupe .deco_profil_mess:nth-last-of-type(4){
 color: #8E2395;
}
/*On fait disparaître tous les carrés*/
.profil_mess_groupe .carre_mess_groupe {
  display: none;
}
/*On garde juste le carré voulu*/
.profil_mess_groupe .deco_profil_mess:nth-last-of-type(4) .carre_mess_groupe{
  display: inline-block;
  color: #000000;
  padding: 0px 3px 0px 3px;
}

.profil_mess_groupe {
  text-align: center;
  width: 200px;
  margin: auto;
  margin-bottom: 25px;
}

/* Profil Images roses */

.profil_mess_img .deco_profil_mess{
 display: none;
  
}

.profil_mess_img .deco_profil_mess:nth-last-of-type(1), .profil_mess_img .deco_profil_mess:nth-last-of-type(2){
 display: inline-block;
  margin-right: 52px;
  position: relative;
  left: 13px;
  width: 70px;
  height: 70px;
  
  
}

.deco_profil_mess img{
 width: 70px;
  height: 70px;
}

Note : J'ai changé les "nth-last-child()" par "nth-last-of-type" parce que dans certains cas, le x dernier champ n'est pas nécessairement le x dernier enfant. Genre, si on a :
> div.truc
> > span.machin1
> > span.machin1
> > span.machin1
> > span.machin2

Et qu'on veut le dernier span.machin1, il faut dire "div.truc span.machin1:nth-last-child(2)" parce que c'est le 2e dernier enfant du parent (il y a span.machin2 qui est le premier). Du coup, si on ne sait pas que span.machin2 est là et qu'on met "div.truc span.machin1:nth-last-child(1)", on est foutu alors que si on utilise "div.truc span.machin1:nth-last-of-type(1)" ça fonctionne parce que nth-last-of-type sélectionne le dernier du même type. Du coup, il peut y avoir 12 trucs entre les span.machin1 et on sélectionne juste le dernier span.machin1 tout court.

C'est pas super important, c'est juste plus prudent ^^
Entre autre, moi qui avait les feuille de personnage d'activé, cela me créait des champs quelconque sous les champs normaux, donc cela décalait les enfants. nth-last-of-type a permis de régler le problème

Hey

Alors merci pour tes explications, j'espère que ça te dérange pas quand même

Pour la variable de la fiche RPG, c'est tout simplement que je n'y ai pas pensé. Et puis comme je bidouille le code pour la première fois j'essaie encore de me repérer parmi tout ça, je manque encore de réflexes.

Pour la flèche merci pour l'idée, effectivement ça fonctionne bien et c'était assez simple au final

Pour le petit carré, j'ai appliqué tes codes. Tout marche bien maintenant ^^

Le premier dans le template, la balise

Code:

</script>

est rouge. Il doit manquer quelque chose quelque part. Le code fonctionne le carré s'affiche bien mais c'est toujours un peu embêtant quand une balise devient rouge ^^"

EDIT : Suffisait juste de mettre un

Code:

<br />

et il boude plus ^^

Le deuxième problème, c'est que le carré doit se mettre entre le groupe et le surnom. Le souci c'est que quand je demande au séparateur du groupe de s'afficher, le carré passe sous la ligne du dessous J'ai fait la modif sur mon forum donc si tu veux voir l'aperçu. Peut être que j'ai du oublié un de tes bouts de code. Je vais relire attentivement ton CSS final pour voir si il n'y a pas un truc que j'ai oublié de mettre mais pour l'instant je ne vois pas.

Y a peut être un rapport avec le fait que le champ groupe soit une liste de puces.

EDIT : C'est bien la liste de puces. Un display inline block résous le problème

Merci pour l'explication du nth-last-of-type ^^ J'ai pris des notes

Il ne reste donc plus que la police rang/pseudo et les remarques d'Afterglow et ça devrait être bon

En tout cas un gros merci Onyx pour ton aide, tes conseils et tes explications.

Bouh!

De rien^^

Sinon, c'est toujours d'actualité? N'oubliez pas de upper de temps en temps pour que le sujet ne soit pas archivé

Pas de nouvelles alors j'archive. Un MP et je ressors le sujet