Alignement de la liste des images pour le Profil

2 participants

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

Résolu Alignement de la liste des images pour le Profil

Message par Hirakyo152 Jeu 11 Fév 2016 - 2:44

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Toujours
Lien du forum : http://kaminoakuma-elsword.forumactif.org/

Description du problème


Bonjour,

Est-ce qu'il est possible de faire en sorte que l'on puisse faire un alignement de la liste des images pour le Profil ? Voici un exemple de ce que je souhaite avoir Mad :

Alignement de la liste des images pour le Profil 894713IMG11022016024152

Je ne sais pas du tout si vous allez pouvoir comprendre ça ! Razz

Merci en avance pour votre aide =)


Dernière édition par Hirakyo152 le Ven 12 Fév 2016 - 20:45, édité 1 fois
Hirakyo152

Hirakyo152
**

Masculin
Messages : 86
Inscrit(e) le : 17/01/2016

http://kaminoakuma.forumactif.org/
Hirakyo152 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement de la liste des images pour le Profil

Message par Hirakyo152 Ven 12 Fév 2016 - 13:20

Bonjour,

UP ! Very Happy

Est-ce que c'est possible de le faire ? Sachant que moi, j'ai beau chercher... mais j'ai trouvé aucune astuce pour ça... :'(
Hirakyo152

Hirakyo152
**

Masculin
Messages : 86
Inscrit(e) le : 17/01/2016

http://kaminoakuma.forumactif.org/
Hirakyo152 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement de la liste des images pour le Profil

Message par Musara Ven 12 Fév 2016 - 18:14

Salut Hirakyo !

J'ai codé une solution relativement simple en Javascript qui devrait fonctionner chez toi aussi.

Code:
$(function(){

   $('#profile_field_16_-7').after('<div class="musa-profile-field-list"></div>');
   
   $('.musa-profile-field-list').append($('#profile_field_16_-7 label'));
   
   $('#profile_field_16_-7').remove();

});

Cependant il faut remplacer l'identifiant "#profile_field_16_-7" (qui correspond à l'endroit où je testais le code chez moi) par ce que tu veux.

Pourrais-tu récupérer l'identifiant du champ du profil concerné chez toi ?

Pour ce faire : clic droit sur la première des images que tu veux aligner et clique sur "Inspecter" dans le menu déroulant (si tu utilises Chrome). Tu devrais voir apparaitre plein de code qui ressemble environ à ça :

Code:
<ul id="quelque_chose" class="profile_field_list">
    <li>
        <label></label>
    </li>
    <li></li>
    <li></li>
    ...

C'est le id="quelque_chose" qui nous intéresse ici !

Une fois que tu l'auras trouvé je pourrai t'expliquer comment ajouter le code mentionné plus haut.

Et si jamais tu ne trouves pas / si jamais ça ne ressemble pas à ce que j'ai dit, n'hésite pas !
Musara

Musara
**

Masculin
Messages : 50
Inscrit(e) le : 02/01/2016

http://musaraignes.forumactif.fr/
Musara a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement de la liste des images pour le Profil

Message par Hirakyo152 Ven 12 Fév 2016 - 18:51

Bonjour,

J'ai effectué ce que vous m'avez dit de faire... voici le code JavaScript que j'ai modifié :

Code:
$(function(){
 
   $('#profile_field_8_4').after('<div class="profile_field_list"></div>');
  
   $('.profile_field_list').append($('#profile_field_8_4 label'));
  
   $('#profile_field_8_4').remove();
 
});

Placement: Sur toutes les pages


Sauf que mon problème actuel, c'est ça :

Alignement de la liste des images pour le Profil 295201IMG12022016184916

Il y a un alignement qui se produit en double :/
(J'aimerai retirer ceux qui sont dans la partie : "Sexe" et "Navigateur internet")

PS : Je possède Comodo Dragon, comme navigateur qui est similaire à Google Chrome.
Hirakyo152

Hirakyo152
**

Masculin
Messages : 86
Inscrit(e) le : 17/01/2016

http://kaminoakuma.forumactif.org/
Hirakyo152 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement de la liste des images pour le Profil

Message par Musara Ven 12 Fév 2016 - 19:15

Salut Hirakyo !

Yes bien joué, c'est exactement ce qu'il fallait faire. Ton problème vient de la classe ".profile_field_list" que tu as utilisée dans le code Javascript. Donne lui un nom perso comme j'avais fait ".musa-profile-field-list" par exemple. Tu peux mettre ce que tu veux sauf une classe déjà utilisée comme ".profile_field_list".

En espérant que ça corrige le souci !
Musara

Musara
**

Masculin
Messages : 50
Inscrit(e) le : 02/01/2016

http://musaraignes.forumactif.fr/
Musara a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement de la liste des images pour le Profil

Message par Hirakyo152 Ven 12 Fév 2016 - 19:23

Ça fonctionne à merveille, merci beaucoup Wink 
Désormais, j'aimerai faire quelque chose de plus représentant... 
comme par exemple, faire en sorte qu'il y a 3 images par ligne, c'est possible ? 

Par exemple: 

Alignement de la liste des images pour le Profil LKNEW Alignement de la liste des images pour le Profil RSNEW Alignement de la liste des images pour le Profil ISNEW

Alignement de la liste des images pour le Profil EMNEW Alignement de la liste des images pour le Profil VPNEW Alignement de la liste des images pour le Profil DWNEW

Alignement de la liste des images pour le Profil WSNEW Alignement de la liste des images pour le Profil GANEW Alignement de la liste des images pour le Profil NWNEW
Hirakyo152

Hirakyo152
**

Masculin
Messages : 86
Inscrit(e) le : 17/01/2016

http://kaminoakuma.forumactif.org/
Hirakyo152 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement de la liste des images pour le Profil

Message par Musara Ven 12 Fév 2016 - 19:37

Ouais ça me parait tout à fait faisable.

Essaye ce code :

Code:
$(function(){

   $('#profile_field_8_4').after('<div class="profile-field-list-perso"></div>');
   
   $('.profile-field-list-perso').append($('#profile_field_8_4 label'));
   
   $('#profile_field_8_4').remove();
   
   $('.profile-field-list-perso label:nth-child(3n+3)').after('<br />');

});

Je ne l'ai pas testé alors croisons les doigts x)
Musara

Musara
**

Masculin
Messages : 50
Inscrit(e) le : 02/01/2016

http://musaraignes.forumactif.fr/
Musara a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement de la liste des images pour le Profil

Message par Hirakyo152 Ven 12 Fév 2016 - 20:06

Merci bien, ça fonctionne parfaitement Smile

Alignement de la liste des images pour le Profil Img_1210

Est-ce que c'est possible de faire en sorte que ma avant-dernière image rejoigne ma dernière image ? 
Histoire de faire en sorte qu'elle ne se retrouve pas toute seule en dernière ?
Hirakyo152

Hirakyo152
**

Masculin
Messages : 86
Inscrit(e) le : 17/01/2016

http://kaminoakuma.forumactif.org/
Hirakyo152 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement de la liste des images pour le Profil

Message par Musara Ven 12 Fév 2016 - 20:35

Ouais, un truc un peu moins joli dans ce genre là devrait faire l'affaire :

Code:
$(function(){

   $('#profile_field_8_4').after('<div class="profile-field-list-perso"></div>');
   
   $('.profile-field-list-perso').append($('#profile_field_8_4 label'));
   
   $('#profile_field_8_4').remove();
   
   $('.profile-field-list-perso label:nth-child(29)').after('<br />');
   $('.profile-field-list-perso label:nth-child(27)').after('<br />');
   $('.profile-field-list-perso label:nth-child(24)').after('<br />');
   $('.profile-field-list-perso label:nth-child(21)').after('<br />');
   $('.profile-field-list-perso label:nth-child(18)').after('<br />');
   $('.profile-field-list-perso label:nth-child(15)').after('<br />');
   $('.profile-field-list-perso label:nth-child(12)').after('<br />');
   $('.profile-field-list-perso label:nth-child(9)').after('<br />');
   $('.profile-field-list-perso label:nth-child(6)').after('<br />');
   $('.profile-field-list-perso label:nth-child(3)').after('<br />');

});


Dernière édition par Musara le Ven 12 Fév 2016 - 20:48, édité 2 fois
Musara

Musara
**

Masculin
Messages : 50
Inscrit(e) le : 02/01/2016

http://musaraignes.forumactif.fr/
Musara a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement de la liste des images pour le Profil

Message par Hirakyo152 Ven 12 Fév 2016 - 20:45

J'ai juste ajouté quelques lignes... et ça me convient parfaitement Very Happy

Code:
$(function(){
 
  $('#profile_field_8_4').after('<div class="profile-field-list-perso"></div>');
 
  $('.profile-field-list-perso').append($('#profile_field_8_4 label'));
 
  $('#profile_field_8_4').remove();
 
  $('.profile-field-list-perso label:nth-child(29)').after('<br />');
  $('.profile-field-list-perso label:nth-child(30)').after('<br />');
  $('.profile-field-list-perso label:nth-child(27)').after('<br />');
  $('.profile-field-list-perso label:nth-child(24)').after('<br />');
  $('.profile-field-list-perso label:nth-child(21)').after('<br />');
  $('.profile-field-list-perso label:nth-child(18)').after('<br />');
  $('.profile-field-list-perso label:nth-child(15)').after('<br />');
  $('.profile-field-list-perso label:nth-child(12)').after('<br />');
  $('.profile-field-list-perso label:nth-child(9)').after('<br />');
  $('.profile-field-list-perso label:nth-child(6)').after('<br />');
  $('.profile-field-list-perso label:nth-child(3)').after('<br />');
 
});

Merci encore, Musara Wink
Hirakyo152

Hirakyo152
**

Masculin
Messages : 86
Inscrit(e) le : 17/01/2016

http://kaminoakuma.forumactif.org/
Hirakyo152 a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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