Template memberlist_body

[Eiffel01]

Bonjour,
je personnalise actuellement mon template memberlist_body. Sauf que lorsque tous les codes sont faits, je me rends compte que le rendu n'est pas bon. Le bloc qui contient les informations du membre ne se répète pas mais les informations des autres membres s'entassent dans le même, la catastrophe quoi.

Mon template terminé :

Spoiler:

et le CSS :

Spoiler:

Quelqu'un aurait-il la solution ?

[Invité]

Bonjour,

http://yourcritique.forumactif.org/ Est-ce bien le forum concerné ?
Pourriez-vous nous fournir une capture d'écran du problème ?


Cordialement.

[Eiffel01]

La version buguée n'est actuellement pas sur le forum YourCritique mais il pourra l'être après la résolution de ce problème.

Voici le problème :

Spoiler:

Il ne se crée pas de second bloc avec les informations du deuxième membre. Auriez-vous la solution ?

[Invité]

Re,

Essayant en modifiant ceci :

Code:

.bloc_listemembre { background-color: #f2f2f2; border-radius: 7px; border: 1px solid gray; padding: 5px; margin-top: 10px;  }

par :

Code:

.bloc_listemembre { background-color: #f2f2f2; border-radius: 7px; border: 1px solid gray; padding: 5px; margin-top: 10px; height:auto;  }

Cordialement.

[Eiffel01]

Aucun changement, de plus je veux que le bloc où il y a les infos de Bleu se reproduise à droite pour contenir les informations de Testeur1.

[Eiffel01]

UP

[Maxmax]

Salut,

Essaie avec ce code pour ton template :

Code:

<form action="{S_MODE_ACTION}" method="get">
  <div class="lien_racine">YourCritique ⚊ liste des membres</div>
 
  <table align="center" width="100%">
  <tr>
        <td class="bloc_listemembre">
 <div class="titre4">Les membres</div>
          <hr/>
          <table width="100%"><tr>
         
            <td align="left" style="text-align: center" width="30%">{L_USER_SELECT}<br/><input type="text" class="post" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" /></td>
            <td align="center" style="text-align: center" width="30%">{L_SELECT_SORT_METHOD}<br/>{S_MODE_SELECT}</td>
            <td style="text-align: center" width="30%">{L_ORDER}<br/>{S_ORDER_SELECT}</td>
            <td align="right" style="text-align: center" width="10%"><input class="liteoption" type="submit" name="submit" value="{L_SUBMIT}" /></td>
       
            </tr>
     
          </table>
     
  </td>
  </tr>
 
</table>
</form>
 
<br/>
 
<table width="100%" class="bloc_listemembre" align="left" cellspacing="1" cellpadding="0">
              <!-- BEGIN memberrow -->
  <tr>
          <td>
            <div class="profil_listemembre">
              <table style="border-bottom: 1px solid gray; padding-bottom: 10px;"><tr>
                <td class="{memberrow.ROW_CLASS}"><div class="avatar mini"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div></td>
                <td class="{memberrow.ROW_CLASS}" width="100%"><div style="font-size: 10px">Je suis <a class="gen" href="{memberrow.U_VIEWPROFILE}"> <br/> <span style="font-size: 16px">{memberrow.USERNAME}</span>  </a></div>
                  </td>
                </tr></table>
           
              <br/>
              <div style="font-size: 11px; text-align: left; padding-left: 5px"><div class="{memberrow.ROW_CLASS}">↪ <strong>Messages :</strong> {memberrow.POSTS}</div></div>
              <div style="font-size: 11px; text-align: left; padding-left: 5px"><div class="{memberrow.ROW_CLASS}">↪ <strong>Dernière visite :</strong> {memberrow.LASTVISIT}</div></div>
  <div style="font-size: 11px; text-align: left; padding-left: 5px"><div class="{memberrow.ROW_CLASS}">↪ <strong>Date d'inscription :</strong> {memberrow.JOINED}</div></div>
           
              <center><div class="{memberrow.ROW_CLASS}"> {memberrow.PM_IMG}</div></center>
 
           
         
            </div> </td>
 
 
 
 
 
 
</tr>
              <!-- END memberrow -->
 
 
</table>
 
 
 
 
<!-- BEGIN switch_pagination -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td><span class="nav">{PAGE_NUMBER}</span></td>
      <td align="right"><span class="nav">{PAGINATION}</span></td>
  </tr>
</table>
<br />
<!-- END switch_pagination -->

(je ne l'ai pas testé, mais c'est ainsi que j'aurais procédé, si ça ne marche pas, post une petite capture d'écran stp;))

Cordialement,

Max

[Eiffel01]

Bonjour,
C'est déjà mieux Mais les blocs ne se mettent pas côte à côte, ils se mettent les un en dessous des autres.
https://i.servimg.com/u/f38/19/13/82/29/templa10.jpg

Merci de votre aide

[Invité]

Salut Eiffel01,

supprimes l'intégralité de ton template et remplaces par ce contenu:

Code:


        <form action="{S_MODE_ACTION}" method="get">
          <div class="lien_racine">YourCritique ⚊ liste des membres</div>
       
          <table align="center" width="100%">
          <tr>
                <td class="bloc_listemembre">
        <div class="titre4">Les membres</div>
                  <hr/>
                  <table width="100%"><tr>
               
                    <td align="left" style="text-align: center" width="30%">{L_USER_SELECT}<br/><input type="text" class="post" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" /></td>
                    <td align="center" style="text-align: center" width="30%">{L_SELECT_SORT_METHOD}<br/>{S_MODE_SELECT}</td>
                    <td style="text-align: center" width="30%">{L_ORDER}<br/>{S_ORDER_SELECT}</td>
                    <td align="right" style="text-align: center" width="10%"><input class="liteoption" type="submit" name="submit" value="{L_SUBMIT}" /></td>
             
                    </tr>
           
                  </table>
           
          </td>
          </tr>
       
        </table>
        </form>
       
        <br/>
       
        <div class="bloc_Cont_listemembre" >
                      <!-- BEGIN memberrow -->
     
<div class="profil_listemembre">
<div style="border-bottom: 1px solid gray; padding-bottom: 10px;">
<div class="{memberrow.ROW_CLASS}">
  <div class="avatar mini"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div>
  </div>
<div class="{memberrow.ROW_CLASS}" width="100%">
  <div style="font-size: 10px">Je suis <a class="gen" href="{memberrow.U_VIEWPROFILE}"> <br/>
    <span style="font-size: 16px">{memberrow.USERNAME}</span>  </a></div>
</div>

</div>
                 
                      <br/>
<div style="font-size: 11px; text-align: left; padding-left: 5px">
  <div class="{memberrow.ROW_CLASS}">↪ <strong>Messages :</strong> {memberrow.POSTS}</div></div>
<div style="font-size: 11px; text-align: left; padding-left: 5px">
  <div class="{memberrow.ROW_CLASS}">↪ <strong>Dernière visite :</strong> {memberrow.LASTVISIT}</div></div>
<div style="font-size: 11px; text-align: left; padding-left: 5px">
  <div class="{memberrow.ROW_CLASS}">↪ <strong>Date d'inscription :</strong> {memberrow.JOINED}</div></div>
                 
<center><div class="{memberrow.ROW_CLASS}"> {memberrow.PM_IMG}</div></center>
  <br />
  </div>
                      <!-- END memberrow -->
       
       
        </div>
       
       
       
       
        <!-- BEGIN switch_pagination -->
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
              <td><span class="nav">{PAGE_NUMBER}</span></td>
              <td align="right"><span class="nav">{PAGINATION}</span></td>
          </tr>
        </table>
        <br />
        <!-- END switch_pagination -->


Penses a enregistrer les modifications en cliquant respectivement sur et

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Supprimes ceci:

Code:



        /********Liste membre*********/
        .bloc_listemembre { background-color: #f2f2f2; border-radius: 7px; border: 1px solid gray; padding: 5px; margin-top: 10px;  }
        .profil_listemembre { border-radius: 5px; text-align: center; padding:2px; width: 210px; background-color: white; height: 170px;
        margin-left: 10px;}



Remplaces par:

Code:


/********Liste membre*********/
.bloc_listemembre
{
  width:100%;
  background-color: #f2f2f2;
  border-radius: 7px;
  border: 1px solid gray;
  padding: 5px;
  margin-top: 10px; 
}
/*Le bloc contenant les membres*/
.bloc_Cont_listemembre
{
  width:100%;
  min-height:250px;
  height:250px;
  max-height:auto;
  background-color: #f2f2f2;
  border-radius: 7px;
  border: 1px solid gray;
  padding: 5px;

}

/*Les membres*/
.profil_listemembre
{
  border-radius: 5px;
  text-align: center;
  padding:2px;
  width: 220px;
  background-color: white;
  height:auto;
  margin: 10px 2px 2px 5px;
  float:left;
}


Penses à cliquer sur le bouton


J'ai renommé la class pour les membres par

Code:

.bloc_Cont_listemembre

Puis supprimé la table conteneur et les lignes en les remplaçant par des divs.

a++

[Eiffel01]

Bonsoir,
C'est bien mieux
Mais quelques petits problèmes encore que je n'ai pas réussis à éliminer.
https://i.servimg.com/u/f38/19/13/82/29/probly10.jpg
A droite, les marges ont un problème.
Pour l'avatar, j'ai truvé (avec un float:left). Il ne manque que le problème de droite puis je vous laisse tranquille.

Merci énormément.

[Invité]

Re,

dans ta C.S.S

Code:



.bloc_Cont_listemembre
{
  width:100%;
  min-height:250px;
  height:250px;
  max-height:auto;
  background-color: #f2f2f2;
  border-radius: 7px;
  border: 1px solid gray;
  padding: 5px;
 
}


Il suffit de modifier le 100% par 98%
et d'ajouter un margin-left:1%;

Ce qui revient à :

Code:


.bloc_Cont_listemembre
{
  width:98%;
  margin-left:1%;
  min-height:250px;
  height:250px;
  max-height:auto;
  background-color: #f2f2f2;
  border-radius: 7px;
  border: 1px solid gray;
  padding: 5px;

}


a++

[Eiffel01]

Bonsoir,
J'ai créée trois autres comptes et je me suis rendu compte de ceci :
https://i.servimg.com/u/f38/19/13/82/29/probly11.jpg
Le fond du forum ne suit pas. Auriez-vous la solution ?

[Invité]

Salut Eiffel01,



modifies ta css comme ceci peut être:

Code:


/*Le bloc contenant les membres*/
.bloc_Cont_listemembre
{
  width:98%;
  height:250px;
  margin:10px 10px 10px 1%;
  overflow-y:scroll;
  background-color: #f2f2f2;
  border-radius: 7px;
  border: 1px solid gray;
  padding: 5px;
}

/*Les membres*/
.profil_listemembre
{
  border-radius: 5px;
  text-align: center;
  padding:2px;
  width: 220px;
  background-color: white;
  height:auto;
  margin: 10px 2px 15px 5px;
  float:left;
}



a++

[Eiffel01]

Bonjour,
Encore quelque problème. Je ne voudrais pas une barre de défilement mais que le fond continue (pour que les blocs de membre ne dépassent pas).
Résultat actuel :
https://i.servimg.com/u/f38/19/13/82/29/probly12.jpg
Il y a également un décalage entre la fiche de Bleu et de Testeur 1. Les bloc devraient aller sous celui de bleu mais pas ici.

Auriez-vous la solution ?

[Invité]

Re,
il me semble que dans cette partie tu ne pourras faire mieux donc le scroll sera essentiel dans ce cas.
Pour le bloc bleu qui empêche le bon fonctionnement de placement, il faut augmenter la hauteur du bloc membre:

Code:


.profil_listemembre


modifies le

Code:

height:auto;

par:

Code:


height:210px;


Augmentes ou diminue la hauteur si besoin .

a++

[Eiffel01]

C'est parfait
Merci à vous infiniment et bonne soirée