Problème d'alignement dans mon template memberlist_body

[Hitoki]

Détails techniques

Version du forum : PunBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis le début de ma retouche du template list membre
Lien du forum : https://deliquescencetest.forumactif.com/

Description du problème

Bonjour !

Ma liste de membre ne veut pas s'aligner et comme une bécasse, je n'ai pas modifié l'ancien mais je suis partie de 0. Résultat, les blocs membres sont les uns en dessous des autres alors que j'aimerais qu'ils soient alignés sur la même ligne.

Et je ne me souviens plus comme c'était fait ;o;

J'ai un autre souci, le bouton Ok n'est pas aligné avec l'input, dans la recherche des membres. J'aimerais que cela le soit.

Pourriez vous m'aider ?

Merci à celle qui prendra du temps pour corriger mes problèmes.

Voilà mon template

Code:

<div class="main frm">



   <div class="main-content">
      <div class="utilisateur">Rechercher un utilisateur</div>
                    <form action="{S_MODE_ACTION}" method="get" class="form-frm">
      <fieldset class="frm-set multi"><div class="rechercheruti"><input type="text" class="inputbox" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />
         



         
                  <div class="frm-buttons">
            {S_HIDDEN_SID}
            <input type="submit" name="submit" value="{L_SUBMIT}" />
         </div></div>
      </fieldset>
      </form>

      <fieldset>
         <div>
                                                    <div class="bloc_listem">
                                                      
                  <!-- BEGIN memberrow -->
                                           <div class="avatar_mini">{memberrow.AVATAR_IMG}</div>
                        <!-- BEGIN switch_td_group -->
                      {memberrow.GROUPS}
                     <!-- END switch_td_group -->
                                                     <div class="fond_liste_membre"> <div class="nom">{memberrow.USERNAME}</div><a class="gen" href="{memberrow.U_VIEWPROFILE}"></a>
                                                     <p><b>Dernier passage :</b> {memberrow.LASTVISIT}</p>
                                                     <p><b>Missives :</b> {memberrow.POSTS}</p>
                                                     <p>{memberrow.PM_IMG}</p></div>
                  <!-- END memberrow -->
                  <!-- BEGIN switch_no_user -->
                  {switch_no_user.L_NO_USER}
                  <!-- END switch_no_user -->
                          </div>
         </div>
      </fieldset>
   </div>

   <div class="main-foot">
   </div>

   <!-- BEGIN switch_pagination -->
   <div class="paged-foot clearfix">
      <p class="paging">{PAGINATION}</p>
   </div>
   <!-- END switch_pagination -->

</div>

Et le css

Code:



/* Rechercher un utilisateur */

.utilisateur{
  color: #fff;
  font-family: 'Metamorphous', cursive !important;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

/* Fond rechercher un utilisateur */

.rechercheruti {
 
  background-color: #0b1626;
  border: 1px solid #2b3c57;  
  border-radius: 20px 20px;
  padding: 10px;
margin: auto;
  width: 1030px;
}

/* Contenant */

.bloc_listem {
float: left;
  margin: 0 0 0 25px;
  width: 463px;

}

/* Pseudo */

.nom  {
       background: #00000a;
  font-family: 'Alegreya SC', serif;
  font-size: 19px;
  font-style: normal;
  margin-bottom: 10px;
  padding: 10px;
  text-align: center;
  text-shadow: 1px 0 1px #AC6E81;
  width: 235px;

}

/* Float gauche */

.fond_liste_membre {
 background-color: #0b1626;
   border: 1px solid #2b3c57;
  border-radius: 0 0 20px  20px;
  border-radius:   0 20px 20px 0;
  color: #fff;
  float: left;
  height: 150px;
  padding: 10px;
   text-align: center;
  width: 260px;
}



/* Petit avatar */

.avatar_mini {
    border: 1px solid #2b3c57;
  border-radius: 20px 0 0 20px;
  float: left;
  height: 150px !important;
  width: 113px !important;
}
.avatar_mini img{
    border: 1px solid #2b3c57;
  border-radius: 20px 0 0 20px;
  float: left;
  height: 150px !important;
  width: 113px !important;
}


[MlleAlys]

Bonjour,
Je poste pour voir le template.

[Hitoki]

Bonjour à vous !

Pensez-vous qu'il est mieux d'afficher mon codage sans hide ?

[MlleAlys]

Disons que je comprends l'envie de garder un code perso sans avoir l'impression de le laisser en LS, même si de mon côtéje trouve ça plus pratique d'y avoir accès direct sans devoir poster un message "inutile" (et qui ne garantit pas que j'aurais une solution à proposer une fois le code visible).
Et peut être que certains aidants peuvent ne pas l'effort pour voir le code et passeront simplement votre sujet sans aider ?
Donc à moins que ça ne soit vraaaiment un truc original spécial personnel etc, j'aurais tendance à voter "sans hide"   



- concernant le bouton ok, il est à la ligne parce qu'il est dans un bloc div. Il suffit de supprimer cette div pour que le bouton revienne sur la même ligne.

- concernant la liste des membres, je pense que le plus simple est de créer un bloc pour contenir chaque membre, et de les afficher non pas avec des float, mais avec un flex sur le bloc global de la liste.

template après ces deux modifs :

Code:

<div class="main frm">
  <div class="main-content">
    <div class="utilisateur">Rechercher un utilisateur</div>
    
    <form action="{S_MODE_ACTION}" method="get" class="form-frm">
      <fieldset class="frm-set multi">
        <div class="rechercheruti">
          <input type="text" class="inputbox" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" /> {S_HIDDEN_SID} <input type="submit" name="submit" value="{L_SUBMIT}" />
         </div>
      </fieldset>
    </form>
    
    <fieldset id="liste_membres">
        
        <!-- BEGIN memberrow -->
        <div class="bloc_membre">
          
          <div class="avatar_mini">{memberrow.AVATAR_IMG}</div>
          
          <div class="fond_liste_membre">
            <div class="nom">
              <a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>
            </div>
            <!-- BEGIN switch_td_group -->
            <table><tr>{memberrow.GROUPS}</tr></table>
            <!-- END switch_td_group -->
            <p><b>Dernier passage :</b> {memberrow.LASTVISIT}</p>
            <p><b>Missives :</b> {memberrow.POSTS}</p>
            <p>{memberrow.PM_IMG}</p>
          </div>
          
        </div>
        <!-- END memberrow -->
        
        <!-- BEGIN switch_no_user -->
        {switch_no_user.L_NO_USER}
        <!-- END switch_no_user -->
        
    </fieldset>
   </div>
 
   <div class="main-foot">
   </div>
 
   <!-- BEGIN switch_pagination -->
   <div class="paged-foot clearfix">
      <p class="paging">{PAGINATION}</p>
   </div>
   <!-- END switch_pagination -->
 
</div>

- dans le css, supprimez les float sur .avatar_mini, .avatar_mini img, et .fond_liste_membre.
- remplacez le code :

Code:

.bloc_listem {
  float: left;
  margin: 0 0 0 25px;
  width: 463px;
}

par :

Code:

.liste_membres {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

Et... nous verrons à ce moment là ce que ça donne et s'il y a des choses à corriger.

[Hitoki]

Après vos mots, j'ai enlevé mon hide. A l'avenir, je ne le mettrai plus. Comme vous dites, ça ne permet pas à tous de voir le problème et comme ce n'est pas un code super original, ça ne sert à rien !

J'ai apporté les modifications !

Encore merci pour l'aide que vous m'offrez !

[MlleAlys]

Avez-vous bien modifié et publié le template ? J'observe bien le changement du css, mais pas du template.

[Hitoki]

C'est fait. j'avais fait sur mon forum forum. Je ne comprends pas, sur mon forum test, le bouton est aligné avec l'input.

Et sur le fo test, ça ne le fait pas O.O

Edit

Ah je suis désolée sans le vouloir j'ai cité, Est ce qu'un modo pourrait supprimer le message ;o; ? Je l'ai vraiment pas fait exprès ;o;

[MlleAlys]

Sur https://deliquescencetest.forumactif.com/memberlist , je ne vois pas le nouveau template, c'est toujours l'ancien qui est affiché.
Est-ce que je dois regarder à une autre adresse ?

[Hitoki]

AAAAAAAAAAAAAh pardon pardon.

Je n'arrêtais pas de mettre le bon code (le votre) dans le template et je me trompais de forum O.O

Là c'est bon !

[MlleAlys]

Ah oui c'est bon !
Et du coup désolée, j'ai oublié un bout dans les codes css :
Ajoutez :

Code:

.bloc_membre {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 10px;
}

et corrigez le code .liste_membres en #liste_membres


(dans .bloc_membre, margin définit l'espace minimal entre les blocs.
Pour 3 membres côte à côté, vous pouvez descendre la largeur de .fond_liste_membre à environ 220px.)

[Hitoki]

Ca fonctionne, merci à toi !

Vraiment merci

Je te créditerai !

Et mon problème est résolu !

[MlleAlys]

ce n'est pas nécessaire, de rien ^^