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

    Partagez
    avatar
    Nihil Scar Winspeare
    Messages : 4513

    le Lun 22 Déc 2014 - 23: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 :




    On peut aussi mettre le code dans un message d'accueil (PA > Affichage > Page d'accueil > Généralités)

    avatar
    Halloween
    FémininAge : 23Messages : 9740

    le Mar 23 Déc 2014 - 18:47

    Plop !

    C'coloré *-* Merci du partage Wink



    Je mets les voiles, que le vent te soit favorable matelot !
    avatar
    Dark-Ice
    FémininAge : 21Messages : 173

    le Ven 9 Jan 2015 - 13:35

    merci <3



    avatar
    Lyka Siuka
    FémininAge : 17Messages : 55

    le Mer 4 Fév 2015 - 11:08

    Merci énormément ♥



    avatar
    Esperanga
    FémininAge : 28Messages : 88

    le Sam 14 Fév 2015 - 15:23

    Merci du partage Cool



    avatar
    Kanra
    FémininAge : 16Messages : 113

    le Ven 17 Avr 2015 - 22:10

    Merci Very Happy
    avatar
    Kokoro Korou
    MasculinAge : 21Messages : 66

    le Sam 2 Mai 2015 - 14:15

    Merci ! **
    avatar
    Minzy
    FémininAge : 21Messages : 184

    le Ven 12 Juin 2015 - 8:18

    Merci beaucoup pour le code !
    avatar
    Calypso Luciano
    FémininAge : 26Messages : 332

    le Dim 2 Aoû 2015 - 13:36

    Merci beaucoup^^
    avatar
    Kirito
    MasculinAge : 21Messages : 193

    le Lun 10 Aoû 2015 - 19:46

    Merci *----*
    En ligne
    avatar
    Kelalin
    FémininAge : 24Messages : 1492

    le Lun 10 Aoû 2015 - 22:09

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

    le Mer 12 Aoû 2015 - 14:00

    Merci beaucoup! ^^
    avatar
    Laeta
    FémininAge : 16Messages : 73

    le Sam 26 Sep 2015 - 12:57

    perfect **
    avatar
    Alec Sing Toa
    FémininAge : 25Messages : 66

    le Dim 6 Déc 2015 - 17:06

    Merci ^ ^
    avatar
    Tria
    FémininAge : 20Messages : 125

    le Ven 18 Déc 2015 - 23:06

    Merci !



    "Tomber est permis, se relever est ordonné."
    avatar
    Akiro
    FémininAge : 24Messages : 54

    le Lun 28 Déc 2015 - 20:24

    Wow merci c'est super! Razz
    avatar
    Kingdom.
    FémininAge : 17Messages : 53

    le Ven 12 Fév 2016 - 17:51

    Merci :3
    avatar
    SpaceSapien
    MasculinAge : 26Messages : 15

    le Sam 9 Avr 2016 - 12:06

    Sympa ce partage, merci :)
    avatar
    Shi
    MasculinAge : 25Messages : 57

    le Mar 17 Mai 2016 - 10:26

    wow merci!
    avatar
    Linaewen
    FémininAge : 25Messages : 194

    le Jeu 23 Juin 2016 - 3:12

    Merci x)
    avatar
    MeowLowDee
    FémininAge : 25Messages : 72

    le Jeu 30 Juin 2016 - 11:15

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

    le Jeu 20 Oct 2016 - 9:33

    C'est super merci!



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

    le Sam 7 Jan 2017 - 14:40

    Bonchour, je viens réutiliser mon code :rip:
    avatar
    Christtinne
    FémininAge : 31Messages : 177

    le Mer 5 Avr 2017 - 6:33

    merci
    avatar
    Espoir
    FémininAge : 22Messages : 52

    le Mar 18 Avr 2017 - 11:43

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Lun 29 Mai 2017 - 20:54