AccueilFAQRechercherMembresGroupesS'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.


    Bloc de partenaires décalés, zoom au survol

    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5089

    le Mar 23 Déc 2014 - 0:42



    Hello hello,

    Un petit libre service pour afficher la liste de ses partenaires, créé à la demande de 1charlotte qui a réalisé le schéma.

    Informations


    Rendu visuel :




    • Largeur du bloc : 791px.

    • Les images de partenaire font 88px * 31px.

    • 7 partenaires par ligne


    Vous pouvez personnaliser le crédit vers Never Utopia, mais ne l'enlevez pas


    Les codes


    Les codes ne sont pas sous hide, vous pouvez les tester directement.
    Mais si vous le souhaitez, un merci est toujours accepté, personne ne vous mangera.
    Et ça fait toujours plaisir (◕‿◕✿)


    HTML :
    Vous pouvez le placer où vous souhaitez dans vos templates, une page html, la PA...

    Spoiler:
    Code:
    <!-------------------------------
     * BLOC PARTENAIRES AVEC DECALAGE
     * Libre service - Never Utopia
    --------------------------------->
    <div class="staggered-partners">
        <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/1abc9c/ffffff" alt="Never Utopia" /></a>
        <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/16a085/ffffff" alt="Never Utopia" /></a>
        <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/2ecc71/ffffff" alt="Never Utopia" /></a>
        <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/27ae60/ffffff" alt="Never Utopia" /></a>
        <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/3498db/ffffff" alt="Never Utopia" /></a>
        <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/2980b9/ffffff" alt="Never Utopia" /></a>
        <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/9b59b6/ffffff" alt="Never Utopia" /></a>
        <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/8e44ad/ffffff" alt="Never Utopia" /></a>
        <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/34495e/ffffff" alt="Never Utopia" /></a>
        <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/2c3e50/ffffff" alt="Never Utopia" /></a>
        <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/95a5a6/ffffff" alt="Never Utopia" /></a>
        <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/e74c3c/ffffff" alt="Never Utopia" /></a>
        <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/e67e22/ffffff" alt="Never Utopia" /></a>
        <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/f1c40f/ffffff" alt="Never Utopia" /></a>
        <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/1abc9c/ffffff" alt="Never Utopia" /></a>
        <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/16a085/ffffff" alt="Never Utopia" /></a>
        <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/2ecc71/ffffff" alt="Never Utopia" /></a>
        <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/27ae60/ffffff" alt="Never Utopia" /></a>
        <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/3498db/ffffff" alt="Never Utopia" /></a>
        <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/2980b9/ffffff" alt="Never Utopia" /></a>
        <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/9b59b6/ffffff" alt="Never Utopia" /></a>

        <div class="credits-partners"><a href="http://www.never-utopia.com/" title="Bloc partenaire venant de Never Utopia">Never Utopia ♥</a></div>
    </div>
    <!-- FIN BLOC PARTENAIRE -->

    Le CSS
    PA > Affichage > Couleurs > Feuille de style CSS

    Spoiler:
    Code:
    /*
     * ------------------------------
     * BLOC PARTENAIRES AVEC DECALAGE
     * Libre service - Never Utopia
     * ------------------------------
     */

    /* Bloc contenant les partenaires */
    .staggered-partners {
      font-size: 0; /* ne pas enlever */
      width: 791px;
      margin: auto;
      margin-top: 25px;
      margin-bottom: 25px;
    }

    /* Affichage pour un lien partenaire */
    .staggered-partners .partner-link {
      display: inline-block;
      width: 88px; /* largeur */
      height: 31px; /* hauteur */
      margin-right: 20px;
    }

    /* Style image du partenaire */
    .staggered-partners .partner-link img {
      position: relative;
      max-width: 100%;
      max-height: 100%;
      -webkit-transition: transform 600ms;
      transition: transform 600ms;
    }

    /* Effet au survol sur image */
    .staggered-partners .partner-link:hover img {
      transform: scale(1.3);
      -webkit-transform: scale(1.3);
      z-index: 1;
    }

    /* Decalage a gauche une ligne sur 2 */
    .staggered-partners .partner-link:nth-child(14n+8) {
      margin-left: 55px;
    }

    /* Suppression de la marge à droite une ligne sur 2 */
    .staggered-partners .partner-link:nth-child(14n) {
      margin-right: 0;
    }

    /* Style quand le lien n'a pas d'image */
    .staggered-partners .partner-link:empty {
      display: none;
    }

    /* Crédit */
    .credits-partners {
        margin-top: 10px;
        font-size: 12px;
        text-align: right;
        font-family: sans-serif;
        opacity: 0.3;
        transition: all 1s;
        -webkit-transition: all 1s;
    }

    /* Lien */
    .credits-partners a {
        text-decoration: none;
        color: black;
    }

    /* Apparition du crédit au survol du bloc */
    .staggered-partners:hover .credits-partners {
        opacity: 1;
    }

    /*------------------------------
     * FIN BLOC PARTENAIRES AVEC DECALAGE
     * ------------------------------ */

    En cas de problème ou de difficulté à personnaliser, il y a une partie "Un problème en codage" qui est là pour ça.


    Placement

    Par exemple pour le mettre en dessous du QEEL et de la chatbox du bas, on peut le mettre dans le template index_body après les lignes
    Code:
    {CHATBOX_BOTTOM}
    <br clear="all" />

    Ce qui peut donner :
    Bloc de partenaires décalés, zoom au survol GJInaN2




    On peut aussi mettre le code dans un message d'accueil (PA > Affichage > Page d'accueil > Généralités)
    Bloc de partenaires décalés, zoom au survol N0gIb0e



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    Halloween
    Halloween
    FémininAge : 10Messages : 9770

    le Mar 23 Déc 2014 - 19:47

    Plop !

    C'coloré *-* Merci du partage Wink




    < / Libre service codage >
    Dark-Ice
    Dark-Ice
    FémininAge : 23Messages : 173

    le Ven 9 Jan 2015 - 14:35

    merci <3



    Bloc de partenaires décalés, zoom au survol 113492DarkIcesigna
    Lyka Siuka
    Lyka Siuka
    FémininAge : 19Messages : 55

    le Mer 4 Fév 2015 - 12:08

    Merci énormément ♥



    Bloc de partenaires décalés, zoom au survol B5-lclk2F9NupfodhzH2vMY5LFc
    Esperanga
    Esperanga
    FémininAge : 30Messages : 103

    le Sam 14 Fév 2015 - 16:23

    Merci du partage Cool



    Bloc de partenaires décalés, zoom au survol Signa_10
    Kanra
    Kanra
    FémininAge : 18Messages : 113

    le Ven 17 Avr 2015 - 23:10

    Merci Very Happy
    Kokoro Korou
    Kokoro Korou
    MasculinAge : 23Messages : 70

    le Sam 2 Mai 2015 - 15:15

    Merci ! **
    Anonymous
    Invité

    le Ven 12 Juin 2015 - 9:18

    Merci beaucoup pour le code !
    Calypso Luciano
    Calypso Luciano
    FémininAge : 28Messages : 333

    le Dim 2 Aoû 2015 - 14:36

    Merci beaucoup^^
    Kirito
    Kirito
    MasculinAge : 23Messages : 200

    le Lun 10 Aoû 2015 - 20:46

    Merci *----*
    Kelalin
    Kelalin
    FémininAge : 26Messages : 2068

    le Lun 10 Aoû 2015 - 23:09

    Merci. \(T∇T)/
    Yuuki Emna
    Yuuki Emna
    FémininAge : 23Messages : 38

    le Mer 12 Aoû 2015 - 15:00

    Merci beaucoup! ^^
    Laeta
    Laeta
    FémininAge : 18Messages : 73

    le Sam 26 Sep 2015 - 13:57

    perfect **
    Alec Sing Toa
    Alec Sing Toa
    FémininAge : 27Messages : 75

    le Dim 6 Déc 2015 - 18:06

    Merci ^ ^
    Tria
    Tria
    FémininAge : 22Messages : 127

    le Sam 19 Déc 2015 - 0:06

    Merci !



    "Tomber est permis, se relever est ordonné."
    Bloc de partenaires décalés, zoom au survol Hv62
    Akiro
    Akiro
    FémininAge : 26Messages : 55

    le Lun 28 Déc 2015 - 21:24

    Wow merci c'est super! Razz
    Kingdom.
    Kingdom.
    FémininAge : 19Messages : 54

    le Ven 12 Fév 2016 - 18:51

    Merci :3
    SpaceSapien
    SpaceSapien
    MasculinAge : 28Messages : 15

    le Sam 9 Avr 2016 - 13:06

    Sympa ce partage, merci :)
    Shi
    Shi
    MasculinAge : 27Messages : 59

    le Mar 17 Mai 2016 - 11:26

    wow merci!
    Anonymous
    Invité

    le Jeu 23 Juin 2016 - 5:12

    Merci x)
    MeowLowDee
    MeowLowDee
    FémininAge : 27Messages : 72

    le Jeu 30 Juin 2016 - 13:15

    Exactement ce que je cherche depuis une heure héhé ! Merci beaucoup :DD ♥
    Froufy
    Froufy
    FémininAge : 18Messages : 59

    le Jeu 20 Oct 2016 - 10:33

    C'est super merci!



    1+1= 4
          2
    3
    1charlotte
    1charlotte
    FémininAge : 18Messages : 196

    le Sam 7 Jan 2017 - 15:40

    Bonchour, je viens réutiliser mon code :rip:
    Christtinne
    Christtinne
    FémininAge : 33Messages : 197

    le Mer 5 Avr 2017 - 7:33

    merci
    Espoir
    Espoir
    FémininAge : 24Messages : 54

    le Mar 18 Avr 2017 - 12:43

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Mer 19 Juin 2019 - 9:51