Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Alignement des avatars liste des membres

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

Résolu Alignement des avatars liste des membres

Message par Melodiam Jeu 10 Mai 2018 - 14:06

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 !


Dernière édition par Melodiam le Jeu 10 Mai 2018 - 19:22, édité 1 fois
Melodiam

Melodiam
****

Messages : 332
Inscrit(e) le : 16/04/2012

Voir le profil de l'utilisateur http://funkytown-bakemono.forumactif.com
Melodiam a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement des avatars liste des membres

Message par w00tw00t Jeu 10 Mai 2018 - 18:22

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.

Alignement des avatars liste des membres OYcIALE

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
w00tw00t

w00tw00t
***

Messages : 118
Inscrit(e) le : 09/05/2018

Voir le profil de l'utilisateur http://forum.forumactif.org
w00tw00t a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement des avatars liste des membres

Message par Melodiam Jeu 10 Mai 2018 - 19:21

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 !!!!!! Very Happy
Melodiam

Melodiam
****

Messages : 332
Inscrit(e) le : 16/04/2012

Voir le profil de l'utilisateur http://funkytown-bakemono.forumactif.com
Melodiam a été remercié(e) par l'auteur de ce sujet.

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


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