AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

-20%
Le deal à ne pas rater :
Pack Gigabyte Ecran PC Gamer 27″ LED M27Q (rev2.0) + Radeon RX 6950 ...
749 € 939 €
Voir le deal

    Affichage liste de membres en flip Card

    Marie
    Marie
    FémininAge : 34Messages : 2206

    Mer 8 Fév 2017 - 22:45


    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide


    Bonjour/ Bonsoir!

    Alors, je viens vous proposer un petit LS faite de mes propres mains! Je l'appelle le "Flip Card Member List". Bon il existe surement mais j'ai la flemme de trouver un nom original donc voilà! Puis, si ça vous convient pas c'est la même! Razz Bon, je charriais et c'était entièrement ironique!

    Affichage : Flip - Affichage en survol :Backflip! - Lien d'un forum test : Ici Version du forum : PHPBB2



    Template memberlist_body:

    Code:
    <form action="{S_MODE_ACTION}" method="get">
        <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} <input type="text" class="post" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />     
                    {L_SELECT_SORT_METHOD} {S_MODE_SELECT}     
                    {L_ORDER} {S_ORDER_SELECT}    &nbsp;
                    {S_HIDDEN_SID}
                    <input class="liteoption" type="submit" name="submit" value="{L_SUBMIT}" /></td>
                </tr>
              </table>
              </td>
          </tr>
        </table>
        </form>
       
        <!-- BEGIN memberrow -->
         
              <div class="memberlist"><div class="flipa"><div class="flipb"><div class="flipping">
                          <div class="backflip"><div class="avatar_member_list"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div></div>
                          <div class="sousavatar"><div style="padding: 5px;"><div class="pseudo_member"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></div><div class="groups"><span class="gen">{memberrow.GROUPS}</span></div>
                            <div class="stat_member"> Ce membre nous a rejoint le {memberrow.JOINED}. <br/><br/>Sa dernière visite est {memberrow.LASTVISIT}{memberrow.POSTS}. <br/><br/>Boîte à mp:{memberrow.PM_IMG}{memberrow.WWW_IMG}</div></div></div></div></div></div>
                        </div>
          <!-- END memberrow -->
          <!-- BEGIN switch_no_user -->
         
          <!-- END switch_no_user -->
       
            <br/><div class="copyright">Codé par Allhyka pour<a href="http://www.never-utopia.com" target="_blank"> Never-Utopia</a></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 -->



    Le CSS:

    Code:

    /**** CODER PAR MARIE POUR NEVER-UTOPIA. MERCI DE LAISSER LE COPYRIGHT***/

    /**** AFFICHAGE MEMBRE LISTE****/

    .memberlist {
    display:inline-block;
    vertical-align:top;
    margin-bottom: 15px;
    margin-right: 15px;
    }

     /*** FORMAT DE L'IMAGE DE L'AVATAR ***/
    .avatar_member_list img{
      width: 100px;/** taille de l'image de l'avatar que vous désiré qu'il s'affiche **/
      height: 160px;
    }


    /*** L'ANIMATION FLIP CARD ***/
    .flipa {
      width: 100px; /** les tailles doivent être le même format que l'image de l'avatar! **/
      height: 160px;
      overflow: hidden;
      background-color: #D0D7D2;
      border: 2px outset black; /**** La bordure autour ***/
      box-shadow: 10px 10px 2px 0px #5E5E5E;
    }

    .flipb {
      width: 100px; /*** Remettez la taille de l'avatar plus haut ***/
      height: 160px;
      perspective:1000;
      box-shadow: 2px 2px #999696;
    }

    .flipping {
      transform-style:preserve-3d;
      transition: all 1.2s ease-in-out;
      box-shadow: 2px 2px #999696;
    }

    .flipb:hover .flipping {
     transform: rotateY(180deg); /*** Le sens du flip***/
    }

    .backflip {
      width: 100px; /*** Remettez la taille de l'avatar plus haut ***/
      height: 160px;
      box-shadow: 3px 3px 0px #999696;
      overflow: hidden;
      backface-visibility: hidden;
      position: absolute;
      transition: all 1.2s ease-in-out;
    }

    /*** DERRIERE L'AVATAR ***/

    .sousavatar {
      width: 100px; /*** Remettez la taille de l'avatar plus haut ***/
      height: 160px;
      background-color: #fff;
      overflow: hidden;
      box-shadow: 2px 2px #999696;
      opacity: 0;
      transform: rotateY(180deg);
      transition: all 1.2s ease-in-out;
      backface-visibility: hidden;
      position: absolute;
      overflow: auto;
    }

    .pseudo_member {
     
     font-family: 'Playball', cursive; /**L'écriture**/
      text-align: center;
      color: #000;
      line-height: 100%;
      font-size: 16px;
      text-transform: uppercase;
    }

    .stat_member {
      font-family: georgia; /**L'écriture**/
      font-size: 10px;
      color: #000;
      text-align: left;
     }

    .groups {
      font-family: arial; /**L'écriture**/
      text-align: center;
      font-size: 7px;
      color: #000;
      line-height: 100%;
      text-transform: uppercase;
      margin-bottom: 5px;
      border-bottom:1px solid #000;
    }


    .flipb:hover .sousavatar {
      opacity: 1;
    }

    .copyright {
    font-size: 10px;
    text-align: right;
    font-family: georgia;
    }

    Pour tout problème ou question, il suffira de poster un petit sujet là --> Problème avec mon code <--- Je viendrai vous aider avec plaisir ! :)


    Voilà!

    J'espère que ce LS vous aura plus!

    A bientôt pour d'autre LS! :wesh:


    Dernière édition par Marie le Mar 21 Fév 2017 - 20:49, édité 13 fois
    Cheshire Cat
    Cheshire Cat
    FémininAge : 26Messages : 975

    Ven 17 Fév 2017 - 20:57

    Yo miss :)

    J'ai remarqué que dans le début de ton CSS concernant ta template, il y avait ceci
    Code:
    ul{
        list-style-type: none;
    }

    En fait, tu sélectionnes toutes les listes du forum, et pas seule celle présente dans ta template de liste des membres. Si un membre met une liste et qu'il veut garder les ronds pleins pour sa liste, il risque de ne pas forcément comprendre.
    Du coup ce que je te conseille c'est de mettre une classe pour ta liste dans ta template et dans ton CSS ^-^

    Maintenant, concernant tes préfixes, tu n'es pas obligé de tous les laisser. Pour savoir quel préfixe utiliser pour telle propriété css, je te conseille de checker le site http://caniuse.com où tu as simplement à rentrer le nom de ta propriété et de regarder si c'est vert ou rouge et s'il est possible d'utiliser un préfixe ou non pour certains cas.

    Par exemple, pour transform, tu as uniquement besoin de ton préfixe webkit.
    Maintenant je te laisse voir par toi-même comme ça tu pourras prendre le site en main Very Happy

    Cela dit, je pense que tu t'es prise la tête pour pas grand chose afin d'aligner tes blocs. avec une simple div qui englobe ton bloc principal pour chaque membre, tu aurais pu lui ajouter le CSS suivant
    Code:
    display:inline-block;
    vertical-align:top;
    Et ainsi aligner tes éléments en évitant ta div en float et peut-être ta liste.

    Cela dit, ne prends pas mal ce que je dis. C'est pour rendre ton code plus facile d'utilisation et moins lourd ^-^
    Voilà !
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 19 Fév 2017 - 21:00

    Hello Marie !

    C'est top, on a presque pas de LS de liste de membres :hudada:
    edit : Je crois qu'à part un tuto, on a pas de LS de liste des membres o_o, tu seras la première Wink

    - J'ai pas trop compris le passage avec l'espace insécable (&nbsp;) >-<. Que je le mette ou non, pas de différence d'espacement. Je suppose que cela correspondait peut-être à ton ancienne version avant la proposition de Chesh :) ? Eventuellement, je te conseille de jouer avec les marges sur .memberlist pour modifier les espaces.

    - Pour la police d'écriture Google font sur les pseudos, est ce que tu veux la garder ou non ? Car je la vois dans le CSS mais pas dans le html. :/ Le plus simple je pense c'est simplement de la retirer du CSS.

    - Comme on n'utilise plus les tableaux pour positionner, il y a un petit souci ici :


    Si tu regardes bien, la structure fait :
    table > tr > div

    Les tableaux en html c'est hyyyyper relou, et en gros il faut absolument suivre la bonne structure, mettre une cellule dans un tr. Sinon les éléments en dehors d'une div sont éjectés au dessus du tableau, et c'est ce qu'il se passe ici :'(

    Du coup je te propose de te débarrasser du tableau dont tu n'as plus besoin (yeeeeaaah, au revoir les tableaux !). C'est tout simple, dans le code en question (la partie que j'ai c/c), il suffit d'enlever les balises table et tr ^^

    - Dans ton code CSS tu as la classe .groups mais dans le HTML je vois ceci (style à la place groups) :
    Code:
    <div style="groups">

    - Enfin dernière petite chose (après j'arrête c'est promis), on essaye depuis la MàJ - rentrée 2016 si possible d'ouvrir les LS, c'est à dire de ne pas mettre sous balise hide le code. C'est bien entendu comme tu veux, rien ne t'y oblige, mais je le précise au cas où :friends:
    Le lien sur l'ouverture des LS si ça t'intéresse --> Aux auteurs de tuto', astuces, LS

    Bonne soirée :)

    ---

    Pour faciliter l'indexage (pour moi ou le gentil responsable courageux qui passera par là :siffle:), voici le bloc de code tout prêt à mettre dans l'index :
    Code:
    <div class="ls_codage"><div class="lscodage_illu"><img src="http://placehold.it/200x150" /></div><div class="tutograph_titre">Affichage membre de liste en flip Card</div><div class="tutograph_mots">par Marie</div><a href="http://www.never-utopia.com/t62447-affichage-membre-de-liste-en-flip-card" class="tutograph_lien">Voir le Code</a></div><!--NEXT-->
    Il n'y a plus qu'à remplacer http://placehold.it/200x150 par l'url d'une miniature en 200 x 150

    Marie
    Marie
    FémininAge : 34Messages : 2206

    Dim 19 Fév 2017 - 23:19

    Ha! Je peux enfin répondre!

    Donc, voilà , j'ai tout bien noté vos critiques! J'ai tout corriger et mis au propre!

    Voici ce que tu m'as demander Nihil:

    Code:
    <div class="ls_codage"><div class="lscodage_illu"><img src="http://zupimages.net/viewer.php?id=17/07/23n0.png" /></div><div class="tutograph_titre">Affichage membre de liste en flip Card</div><div class="tutograph_mots">par Marie</div><a href="http://www.never-utopia.com/t62447-affichage-membre-de-liste-en-flip-card" class="tutograph_lien">Voir le Code</a></div><!--NEXT-->

    Bisous!



    /

    Kit fait par Arpège. Merci! :love:
    Cheshire Cat
    Cheshire Cat
    FémininAge : 26Messages : 975

    Mar 21 Fév 2017 - 0:39

    Est-ce que tu as bien validé ton template ? Car sur ton forum on ne voit pas les changements :hum:
    Marie
    Marie
    FémininAge : 34Messages : 2206

    Mar 21 Fév 2017 - 20:40

    Voilà!!! J'avais zapper.. Je l'ai fait sur mon fofo officiel mais pas sur le test...

    Pardon



    /

    Kit fait par Arpège. Merci! :love:
    Cheshire Cat
    Cheshire Cat
    FémininAge : 26Messages : 975

    Mar 21 Fév 2017 - 20:43

    C'est génial merci :3

    Du coup j'ai remarqué un petit truc, voilà un screen: https://puu.sh/udyVw/92990b8140.png
    En gros ton box-shadow empiète sur le footer de la page et gène légèrement la lecture des liens. Serait-il possible d'arranger ça ? Very Happy
    Marie
    Marie
    FémininAge : 34Messages : 2206

    Mar 21 Fév 2017 - 20:49

    Voilà corrigé techniquement.



    /

    Kit fait par Arpège. Merci! :love:
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mer 22 Fév 2017 - 11:28

    Ca me parait bon, je déplace ton sujet, merci encore pour ton LS :)

    PS: j'en ai juste profité pour rajouter une légère marge à droite (pour faire comme la capture d'écran) et enlever une petite fermeture de balise en trop tr qui trainait ici :
    Code:
    <br/><div class="copyright">Codé par Allhyka pour<a href="http://www.never-utopia.com" target="_blank"> Never-Utopia</a></div> </tr>

    Merci pour la capture d'écran au bon format, ça fait gagner du temps ! Petit détail, l'url que tu as donné ne fonctionnera pas :
    Code:
    src="http://zupimages.net/viewer.php?id=17/07/23n0.png"

    En effet, ça renvoie vers une page html https://www.zupimages.net/viewer.php?id=17/07/23n0.png, dans le src="" il faudra mettre le lien vers l'image directement ( https://www.zupimages.net/up/17/07/23n0.png ), mais bon, rien qu'avoir déjà le lien de la capture d'écran au bon format ça fait gagner du temps ^^

    Anonymous
    Invité

    Mer 22 Fév 2017 - 11:48

    Merci pour le partage !
    CN.June
    CN.June
    FémininAge : 24Messages : 315

    Jeu 6 Juil 2017 - 19:34

    Merci beaucoup pour ce tutoriel !
    Je me posais la question de savoir comment personnaliser ça, du coup, ça me sera vraiment utile ♥
    Sigril
    Sigril
    MasculinAge : 25Messages : 13

    Ven 28 Juil 2017 - 3:00

    merci
    Littleelda
    Littleelda
    FémininAge : 33Messages : 49

    Dim 18 Mar 2018 - 9:29

    Merci beaucoup pour ce libre service, ça m'évitera de tout coder moi-même pour un résultat bien moins propre '-'

    Merciiiii



    Affichage liste de membres en flip Card Elora_10
    Amatis
    Amatis
    FémininAge : 25Messages : 36

    Sam 6 Avr 2019 - 1:23

    Merci beaucoup, on trouve rarement des LS pour la liste de membres, et le tiens est exactement ce que je recherchais ! cheers
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 18:25