Liste des membres en 3 colonnes

[.bloodstream]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 24/10/2019
Lien du forum : http://written-in-the-stars.forumactif.com

Description du problème

Bonjour,

Je suis en train de faire des modifications au template memberlist_body pour la liste des membres du forum. J'ai pu faire le codage que je voulais, seulement j'aimerais avoir la liste des membres en 3 colonnes et non un à la suite de l'autre... J'ai essayé de chercher la solution, mais seule je n'y arrive pas. J'espère qu'on pourra m'aider
Le forum est présentement en construction, mais si vous avez besoin que je vous donne l'accès n'hésitez pas, merci d'avance pour votre aide.  

TEMPLATE

Code:

<form action="{S_MODE_ACTION}" method="get">
  <link href="https://fonts.googleapis.com/css?family=Shadows Into Light Two" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<table cellspacing="0" cellpadding="5" border="0" align="center" class="forumline" width="100%">
 <tr>
          <th class="thTop" nowrap="nowrap">{L_ORDER_OR_SELECT}</th>
 </tr>
 <tr>
 <td class="row1">
 <table cellspacing="2" cellpadding="0" border="0" align="center" class="genmed">
 <tr>
 <td width="100%">{L_USER_SELECT}&nbsp;<input type="text" class="post" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 {L_SELECT_SORT_METHOD}&nbsp;{S_MODE_SELECT}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 {L_ORDER}&nbsp;{S_ORDER_SELECT}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 {S_HIDDEN_SID}
 <input class="liteoption" type="submit" name="submit" value="{L_SUBMIT}" /></td>
 </tr>
 </table>
 </td>
 </tr>
</table>
</form>
 <table class="forumline" width="100%">
 <tr>
          <th colspan="9" class="thTop" nowrap="nowrap" width="100%" height="25"><div class="titrememb">WITS MEMBERS</div></th>
 
   </tr>
 <!-- BEGIN memberrow -->
 <tr>
          <td class="three-col"><div class="fondmemb inline-memb"><div class="avalistmemb inline-memb"><span class="gensmall"><a class="gensmall" href="{memberrow.U_VIEWPROFILE}"><div class="pseudomembre inline-memb">{memberrow.USERNAME}</div></a></span><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div>
               <div class="textmemb"> <!-- BEGIN switch_td_group -->
 {memberrow.GROUPS}
 <!-- END switch_td_group -->
<span class="gensmall"><div class="textint">✩ ft.{memberrow.INTERESTS}</div></span><br>
 <span class="gensmall"><div class="textint">✩ {memberrow.JOINED}</div></span><br>
 <span class="gensmall"><div class="textint">✩ {memberrow.LASTVISIT}</div></span><br>
 <span class="gensmall"><div class="textint">✩ {memberrow.POSTS} messages</div></span><br>
</div></div></td>
                  </tr>
 <!-- END memberrow -->
 <!-- BEGIN switch_no_user -->
 <tr>
 <td class="catBottom" colspan="{switch_no_user.COLSPAN_NUMBER}" height="28" align="center"><span class="gensmall">{switch_no_user.L_NO_USER}</span></td>
 </tr>
 <!-- END switch_no_user -->
</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 -->

CSS

Code:

/*LISTE DES MEMBRES*/

 .titrememb{
      font-size:20px;
      text-transform:uppercase;
      letter-spacing:0px;
      font-weight:normal;
  font-family:Shadows Into Light Two, Cursive;
  text-shadow: 0px 0px 1px;
   text-align:center;
    }

.pseudomembre{
  background-color:white;
  font-family: Oswald;
  font-size:14px;
  font-weight:300;
  letter-spacing:0px;
  text-transform:uppercase;
  text-align:center;
  padding:4px;
  width: 229px;
  box-shadow:0px 0px 1.5px grey;
  position:relative;top:-10px;
  position:relative;left:-10px;
  }

.inline-memb{
   display:inline-block;
  margin:10px;
}

.fondmemb{
   background-color:#F1E2E7;
    float: left;
   display:inline-block;
  width: 260px;
  height:150px;
  box-shadow:0px 0px 1.5px grey;
  }

.textmemb {
   display:inline-block;
  background-color:white;
  font-family: Oswald;
  font-size:14px;
  float: right;
  horizontal-align: text-top;
  width: 150px;
  height: 88px;
  position:relative;top:-120px;
  position:relative;left:-13px;
  box-shadow:0px 0px 1.5px grey;
  padding:3px;
  text-transform:uppercase;
  text-align:center;
  }

.textint {
  background-color:#F1E2E7;
  font-family: Oswald;
  font-size:9px;
  padding:2px;
  padding-left:10px;
  text-transform:uppercase;
  text-align:left;
  margin-bottom:-16px;
}


 .avalistmemb img{
  display:inline-block;
  float: left;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background-color:white;
  padding:3px;
  box-shadow: 0px 0px 1.5px grey;
  position:relative;top:-15px;
  height: 90px;
 object-fit: cover;
  width: 70px;
    }

[.bloodstream]

up, problème toujours d'actualité

[zz10]

Bonsoir, oui il faudrait le lien de la page en question et un accès. merci

[.bloodstream]

Voilà j'ai débloqué, et c'est la liste des membres, qui se retrouve ici.
http://written-in-the-stars.forumactif.com/memberlist

Merci

[Invité]

Hello .bloodstream,

il vaut mieux déposer tous les profils dans la balise td comme ceci:

Code:

<form action="{S_MODE_ACTION}" method="get">
  <link href="https://fonts.googleapis.com/css?family=Shadows Into Light Two" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<table cellspacing="0" cellpadding="5" border="0" align="center" class="forumline" width="100%">
  <tr>
          <th class="thTop" nowrap="nowrap">{L_ORDER_OR_SELECT}</th>
  </tr>
  <tr>
      <td class="row1">
      <table cellspacing="2" cellpadding="0" border="0" align="center" class="genmed">
        <tr>
            <td width="100%">{L_USER_SELECT}&nbsp;<input type="text" class="post" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            {L_SELECT_SORT_METHOD}&nbsp;{S_MODE_SELECT}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            {L_ORDER}&nbsp;{S_ORDER_SELECT}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            {S_HIDDEN_SID}
            <input class="liteoption" type="submit" name="submit" value="{L_SUBMIT}" /></td>
        </tr>
      </table>
      </td>
  </tr>
</table>
</form>
 <table class="forumline" width="100%">
  <tr>
          <th colspan="9" class="thTop" nowrap="nowrap" width="100%" height="25"><div class="titrememb">WITS MEMBERS</div></th>
     
  </tr>
    <tr>
          <td class="three-col">
  <!-- BEGIN memberrow -->
  <div class="fondmemb inline-memb"><div class="avalistmemb inline-memb"><span class="gensmall"><a class="gensmall" href="{memberrow.U_VIEWPROFILE}"><div class="pseudomembre inline-memb">{memberrow.USERNAME}</div></a></span><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div>
              <div class="textmemb"> <!-- BEGIN switch_td_group -->
      {memberrow.GROUPS}
      <!-- END switch_td_group -->
<span class="gensmall"><div class="textint">✩ ft.{memberrow.INTERESTS}</div></span><br>
      <span class="gensmall"><div class="textint">✩ {memberrow.JOINED}</div></span><br>
      <span class="gensmall"><div class="textint">✩ {memberrow.LASTVISIT}</div></span><br>
      <span class="gensmall"><div class="textint">✩ {memberrow.POSTS} messages</div></span><br>
</div></div>
  <!-- END memberrow -->
                </td>
                  </tr>
  <!-- BEGIN switch_no_user -->
  <tr>
      <td class="catBottom" colspan="{switch_no_user.COLSPAN_NUMBER}" height="28" align="center"><span class="gensmall">{switch_no_user.L_NO_USER}</span></td>
  </tr>
  <!-- END switch_no_user -->
</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 -->

Puis la largeur et de 100%, il faut donc attribuer une largeur en pourcentage pour chaque profil:

Code:


.fondmemb
{
background-color: #F1E2E7;
box-shadow: 0 0 1.5px grey;
display: inline-block;
float: left;
height: 150px;
width: 30%;
margin-left: 1%;
}

Et voilou .

a+++

[.bloodstream]

Ça marche parfaitement, merci beaucoup pour ton aide