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.


    Fiche de Pub Taupe

    Partagez
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Dim 15 Mar 2015 - 20:22

    Rappel du premier message :




    Fiche de Pub Taupe


    Suite à une demande de Moys voici une fiche de Pub avec transition pour les images du staff.

    Je précise que l'arrière plan blanc correspond à mon forum.

    HTML ~ Voici donc un aperçu : www


    Et le code :
    HTML :
    Code:
    <!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>div.staff {width: 100px; height: 75px; margin: auto; overflow: hidden; display: inline-block; margin-left: 5px;} .staff img {position: relative; bottom: 75px; transition: all 0.5s; width: 100px; height: 75px;} .staff:hover img {bottom: 200px; transition: all 0.5s;} .txt_staff {color: #9c887d; font-size: 14px; text-align: justify; overflow: auto; width: 80px; height: 55px; padding: 10px;}</style></head><body>
    <div style="width: 530px; padding: 10px; margin: auto; background: #F5F5F2;">
      <img src="http://img15.hostingpics.net/pics/661225image791.jpg" style="width: 530px; height: 350px;" />
      <br /><br />
      <a href="Lien du forum" style="display: block; font-size: 35px; color: #9c887d; text-align: center;">Nom du forum</a>
      <br />
      <div style="width: 255px; display: inline-block; margin-right: 15px; background: #9c887d; height: 16px; color: #F5F5F2; font-size: 25px; text-align: center;">
        <span style="position: relative; top: -6px;">Contexte</span>
      </div>
      <div style="width: 255px; display: inline-block; background: #9c887d; color: #F5F5F2; height: 16px; font-size: 25px; text-align: center;">
        <span style="position: relative; top: -6px;">Informations</span>
      </div>
      <br />
      <div style="width: 215px; height: 140px; overflow: auto; display: inline-block; padding-left: 20px; padding-right: 20px; color: #9c887d; font-size: 11px; text-align: justify; margin-right: 15px;">
        Texte texte
      </div>
      <div style="width: 215px; height: 140px; overflow: auto; display: inline-block; padding-left: 20px; padding-right: 20px; color: #9c887d; font-size: 11px; text-align: justify;">
        Texte texte <br />x membres connectés
      </div>
      <br />
      <div style="width: 255px; display: inline-block; margin-right: 15px; background: #9c887d; color: #F5F5F2; height: 16px; font-size: 25px; text-align: center;">
        <span style="position: relative; top: -6px;">Nouveautés</span>
      </div>
      <div style="width: 255px; display: inline-block; background: #9c887d; color: #F5F5F2; font-size: 25px; height: 16px; text-align: center;">
        <span style="position: relative; top: -6px;">Staff</span>
      </div>
      <br />
      <div style="width: 215px; height: 80px; overflow: auto; display: inline-block; padding-left: 20px; padding-right: 20px; color: #9c887d; font-size: 11px; text-align: justify; margin-right: 15px;">
        Texte texte
      </div>
      <div style="width: 215px; height: 80px; overflow: auto; display: inline-block; padding-left: 20px; padding-right: 20px; color: #9c887d; font-size: 11px; text-align: justify;">
        <div class="staff"><div class="txt_staff">Texte ici
          </div><img src="http://img15.hostingpics.net/pics/219236image990.jpg" alt="staff" /></div>
        <div class="staff"><div class="txt_staff">Texte ici
          </div><img src="http://img15.hostingpics.net/pics/219236image990.jpg" alt="staff" /></div>
      </div>
      <br />
      <div style="background: #9c887d; color: #F5F5F2; font-size: 25px; height: 16px; text-align: center;">
        <span style="position: relative; top: -6px;">Nous lier</span>
      </div>
      <div style="color: #9c887d; font-size: 11px; text-align: justify; height: 80px; overflow: auto; padding: 15px;">
        Texte texte texte
      </div>
    <a href="http://www.never-utopia.com" style="display: block; text-decoration: none; font-size: 11px; text-align: center; color: #9c887d;">A-Lice | Never-Utopia</a>
    </div></body></html>

    Le code est à mettre dans le panneau d'administration, dans Module -> HTML & JAVASCRIPT -> Gestion des pages HTML -> Création en mode avancé (HTML)


    Et l'iframe pour poster :
    Code:
    <center><iframe src="Lien de la page HTML" border="0" frameborder="0" scrolling="no" style="margin: 10px;" width="570px" height="900px"></iframe></center>
    Si vous venez à agrandir la taille de la fiche, pensez à le faire pour l'iframe aussi !


    /!\ En cas de problème, c'est ici ou que ça ce passe.

    avatar
    Mathieu-.
    MasculinAge : 18Messages : 13

    le Dim 22 Jan 2017 - 11:27

    Merci !
    avatar
    Ombeline30
    FémininAge : 32Messages : 109

    le Mar 24 Jan 2017 - 7:27

    Merci ^^
    avatar
    Exenties
    FémininAge : 30Messages : 75

    le Ven 3 Fév 2017 - 13:22

    Merci




    avatar
    Siprano
    FémininAge : 19Messages : 291

    le Mer 1 Mar 2017 - 17:34

    Merci !
    avatar
    Porcelain Detox
    MasculinAge : 22Messages : 89

    le Dim 5 Mar 2017 - 18:12

    Merci :)
    avatar
    Deed01
    MasculinAge : 39Messages : 285

    le Mar 28 Mar 2017 - 14:20

    merci Very Happy
    avatar
    Weartec
    FémininAge : 24Messages : 24

    le Lun 12 Juin 2017 - 21:40

    Merci beaucoup!
    avatar
    Deed01
    MasculinAge : 39Messages : 285

    le Dim 23 Juil 2017 - 11:21

    très sympa :)
    Contenu sponsorisé


      La date/heure actuelle est Lun 21 Aoû 2017 - 1:12