Alignement des avatars liste des membres

[Melodiam]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum :  

Description du problème

Bonjour ! :-)

Je suis entrain de modifier la liste des memres, le codage donc, de mon forum et je rencontre un souci... Je n'arrive pas à aligner les avatars (donc les ranger les uns à côté des autres, en tableau entre autre)...

Ensuite seulement je pourrais mettre les icones de contact (mp) et le pseudo comme je le souhaite (càd sous l'avatar, à moitié en float' dessus)....

Voici mon code template :

Code:

<h1 class="page-title solo">{PAGE_TITLE}</h1>

<form action="{S_MODE_ACTION}" method="get">
<div class="panel">
 <h2 class="h3">{L_ORDER_OR_SELECT}</h2>
 <p style="text-align:right; margin: 0; padding: 0;">
 {L_USER_SELECT}&nbsp;<input type="text" class="inputbox tiny" 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="button2" type="submit" name="submit" value="{L_SUBMIT}" />
 </p>
</div>
</form>

<div class="forumbg forumbg-table" style="background: white; padding: 50px;">
 <div class="inner"><span class="corners-top"><span></span></span>

 
 <!-- BEGIN memberrow -->

            <div class="avatar-mini">{memberrow.AVATAR_IMG}<div class="avatar-mini_contenu">L'aventure a commencé le {memberrow.JOINED} !</br>⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆</br>J'étais là {memberrow.LASTVISIT}.</br>⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆</br> J'ai écris {memberrow.POSTS} messages.</div></div></br>
<a href="{memberrow.U_VIEWPROFILE}"><div style="margin-left: 10px; text-align: center; position: relative; float: right; text-transform: uppercase; font-size: 9px; letter-spacing: 3px; background: black; padding: 10px; color: black; width: 100px; max-width: 100px; margin-bottom: -110px;">{memberrow.USERNAME}</div></a>
 <!-- BEGIN switch_td_group -->
 <td>{memberrow.GROUPS}</td>
 <!-- END switch_td_group -->
 <td>{memberrow.INTERESTS}</td>
 <td>&nbsp;{memberrow.PM_IMG}&nbsp;</td>
<td>&nbsp;{memberrow.WWW_IMG}&nbsp;</td>

 <!-- END memberrow -->
 <!-- BEGIN switch_no_user -->
 <tr class="row1">
 <td colspan="{switch_no_user.COLSPAN_NUMBER}">{switch_no_user.L_NO_USER}</td>
 </tr>
 <!-- END switch_no_user -->


 <span class="corners-bottom"><span></span></span></div>
</div>

<div class="pagination" style="float:none;">
 <!-- BEGIN switch_pagination -->
 {PAGINATION}<br /><br />
 <!-- END switch_pagination -->
</div>




Voici mon CSS :

Code:

.avatar-mini img {
background-color: #FFF;
    border-color: #FFF;
    border-radius: 0px;
    border-style: solid;
    border-width: 2px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.3);
    height: auto;
    vertical-align: middle;
    width: 120px;
  display: block;
  }

.avatar-mini_contenu {
position: absolute;
display: block;
width: 100px;
height: 148px;
font-size: 9px;
text-transform: uppercase;
margin-left: 10px;
margin-top: -157px;
background: white;
opacity: 0;
color: black;
transition: 1s;
overflow: auto;
padding: 5px;
text-align: left;
}

.avatar-mini_contenu:hover {
opacity: 1;
transition: 1s;
  }

Voici un aperçu direct via : http://fourseasonsrpg.forumactif.com/memberlist

Si vous pouviez m'aider je vous en serais très reconnaissante, merciiiiiii !

[w00tw00t]

Bonjour Melodiam,

Je vous propose de partir sur une solution à base de Flexbox.
Je trouve que cela va dans le sens de la notion de site adaptif introduite par ModernBB.



Vous trouverez un exemple intégral réalisé à partir de vos codes ci-dessous :

Code:

<h1 class="page-title solo">{PAGE_TITLE}</h1>

<form action="{S_MODE_ACTION}" method="get">
    <div class="panel">
        <h2 class="h3">{L_ORDER_OR_SELECT}</h2>
        <p style="text-align:right; margin: 0; padding: 0;">
            {L_USER_SELECT}&nbsp;<input type="text" class="inputbox tiny" 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="button2" type="submit" name="submit" value="{L_SUBMIT}" />
        </p>
    </div>
</form>

<div class="forumbg forumbg-table" style="background-color: white; padding: 50px;">
    <div class="inner"><span class="corners-top"><span></span></span>

        <div class="memberlist_container">

            <!-- BEGIN switch_no_user -->
            <div class="memberlist_item">
                {switch_no_user.L_NO_USER}
            </div>
            <!-- END switch_no_user -->

            <!-- BEGIN memberrow -->
            <div class="memberlist_item">

                <div class="memberlist_inner">

                    {memberrow.AVATAR_IMG}

                    <div class="memberlist_inner_description ">

                        #{memberrow.ROW_NUMBER}&nbsp; - &nbsp; <a href="{memberrow.U_VIEWPROFILE}"> {memberrow.USERNAME}</a> <br>

                        ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆<br>

                        L'aventure a commencé le {memberrow.JOINED} !<br>

                        ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆<br>

                        J'étais là {memberrow.LASTVISIT}.<br>

                        ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆<br>

                        J'ai écris {L_POSTS} message(s).<br>

                        <!-- BEGIN switch_td_group -->
                        ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆<br>
                        {memberrow.GROUPS}
                        <!-- END switch_td_group -->

                        ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆<br>

                        {memberrow.INTERESTS}

                    </div>

                </div>

                <div class="memberlist_links">
                    &nbsp;{memberrow.PM_IMG}&nbsp;
                    &nbsp;{memberrow.WWW_IMG}&nbsp;
                </div>

            </div>
            <!-- END memberrow -->

        </div>

    <span class="corners-bottom"><span></span></span></div>
</div>

<div class="pagination" style="float:none;">
    <!-- BEGIN switch_pagination -->
    {PAGINATION}<br /><br />
    <!-- END switch_pagination -->
</div>




Code:

.memberlist_container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding:5px;
        user-select:none;
}

.memberlist_item {
        flex: 0 1 auto;
        margin:5px;
}

.memberlist_inner img:first-child {
        width: 120px;
        background-color: #FFF;
        border-color: #FFF;
        border-radius: 0px;
        border-style: solid;
        border-width: 2px;
        box-shadow: 0 1px 1px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.3);
}

.memberlist_inner {
        position:relative;
}

.memberlist_inner_description {
        position:absolute;
        top:10px;
        left:10px;
        bottom:15px;
        right:10px;
        font-size: 9px;
        text-transform: uppercase;
        background: white;
        opacity: 0;
        color: black;
        transition: 1s;
        overflow: auto;
        padding: 10px;
        text-align: left;
        box-sizing: border-box;
}

.memberlist_inner_description:hover {
        opacity: 1;
        transition: 1s;
}

.memberlist_links {
        padding-top: 8px;
}

Je pense que vous devriez apprécier davantage le résultat lorsque davantage de membres seront inscrits sur votre forum.

Je reste à votre disposition pour plus de détails,

Cordialement,
w00tw00t

[Melodiam]

Bonjour w00tw00t !

Je suis suuuuuper contente du résultat, effectivement cela marche à merveille ! :-)
J'ai hâte de voir plus de membres inscrits du coup...

Encore merci de votre aide,
Bonne soirée !!!!!!