Affichage liste de membres en flip Card

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! Bon, je charriais et c'était entièrement ironique!




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;
}

Voilà!

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

A bientôt pour d'autre LS!

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

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à !

Hello Marie !

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

－ 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ù
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à ), 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

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!

Est-ce que tu as bien validé ton template ? Car sur ton forum on ne voit pas les changements

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

Pardon

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 ?

Voilà corrigé techniquement.

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 ^^

Merci pour le partage !

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

merci

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

Merciiiii

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