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 Multicolor

    Partagez
    avatar
    Onyx
    FémininAge : 23Messages : 2974

    le Sam 20 Déc 2014 - 23:43

    Rappel du premier message :




    Fiche de pub Multicolor


    Voici une fiche de pub faite suite à la demande de Narakye.

    Pour voir l'aperçu : cliquez ici.

    Ce tutoriel est en 2 étapes :
    > Création de la page html.
    > Mise en place d'un iframe contenant la page HTML aux endroits où nous voulons utiliser le test.

    Pour utiliser ce tutoriel, il faut être fondateur ou administrateur de forum ou avoir accès à un endroit où vous pouvez héberger une page HTML.

    Mettre un crédit vers Never-Utopia est obligatoire.


    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



    1. Page HTML


    Premièrement, nous doit créer une page HTML. Pour cela, on va dans :
    > Panneau d'administration
    > > Modules
    > > > HTML & Javascript
    > > > > Gestion des pages HTML

    Ensuite, nous devons choisir l'option de création "Création en mode avancé (HTML)". Nous devons choisir un titre quelconque, puis s'assurer que les options suivantes sont cochées :

    Voulez-vous utiliser le haut et le bas de page de votre forum ? NON
    Utiliser cette page en tant que page d'accueil ? NON

    Dans le contenu, nous allons mettre notre page de pub.
    Code:
    <!DOCTYPE>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Fiche de pub</title>
        <style type="text/css">
          /*Enleve les marges inutiles*/
          body {
            margin: 0px;
          }
         
          /*Liens de la fiche*/
          a {
            color: #ffffff;
            text-decoration: none;
          }
          a:hover {
            color: #000000;
          }
         
          /*Cadre de la fiche*/
          .pub_cadre {
            width: 738px;
            height: 770px;
            margin: auto;
            background-image: url('http://img11.hostingpics.net/pics/571798cadre.png');
            padding-top: 72px;
            text-align: center;
            font-family: arial;
            font-size: 13px;
            color: #545454;
          }
         
          /*Image du haut de la fiche*/
          .pub_image_top {
            position: relative;
            width: 450px;
            height: 310px;
            margin: auto;
            border-radius: 105px 105px 0px 0px;
            box-shadow: 0px 0px 10px #353535;
            z-index: 1;
          }
         
          /*Corps de la fiche*/
          .pub_body {
            position: relative;
            background-image: url('http://img11.hostingpics.net/pics/367932fond.png');
            width: 450px;
            height: 365px;
            margin: auto;
            padding-top: 15px;
            text-align: center;
            z-index: 2;
          }
         
          /*Bloc avec image qui glisse*/
          .pub_bloc1 {
            position: relative;
            width: 400px;
            height: 86px;
            margin: auto;
            border: 2px solid white;
            background-color: white;
            border-radius: 5px;
            text-align: left;
            overflow: hidden;
          }
          /*Texte derrière image qui glisse*/
          .pub_bloc1_text {
            width: 390px;
            height: 76px;
            background-color: #dfdfdf;
            padding: 5px;
            overflow: auto;
            text-align: justify;
          }
          /*Image qui glisse*/
          .pub_bloc1_img {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 400px;
            height: 86px;
            border-radius: 5px;
            transition: all 1s;
            -webkit-transition: all 1s;
          }
          /*Glissement de image*/
          .pub_bloc1:hover .pub_bloc1_img {
            left: 450px;
          }
         
          /*Fond bleu du bloc qui change de contenu*/
          .pub_bloc2 {
            position: relative;
            width: 404px;
            height: 209px;
            background-image: url('http://img11.hostingpics.net/pics/130557fond2.png');
            border-radius: 5px;
            margin: auto;
          }
         
          /*Bloc qui change de contenu*/
          .contenu_pubonglet {
            position: absolute;
            top: 15px;
            left: 15px;
            width: 363px;
            height: 169px;
            background-color: #dfdfdf;
            border-radius: 4px;
            padding: 5px;
            text-align: justify;
            overflow: auto;
            display: none;
            transition: all 0.5s;
            -webkit-transition: all 0.5s;
          }
         
          /*Barre bleu du bas*/
          .pub_bloc3 {
            width: 450px;
            height: 35px;
            margin: auto;
            background-color: #3f87e1;
            text-align: center;
          }
          .pub_bloc3 a {
            display: inline-block;
            font-size: 20px;
            font-family: monotype corsiva;
            margin: 8px;
            margin-left: 30px;
            margin-right: 30px;
          }
        </style>
      </head>
      <body>
        <script type="text/javascript">
          //<!--
            function change_pubonglet(name)
              {
                document.getElementById('pubonglet_'+anc_pubonglet).className = 'pubonglet_0 pubonglet';
                document.getElementById('pubonglet_'+name).className = 'pubonglet_1 pubonglet';
                document.getElementById('contenu_pubonglet_'+anc_pubonglet).style.display = 'none';
                document.getElementById('contenu_pubonglet_'+name).style.display = 'block';
                anc_pubonglet = name;
              }
          //-->
        </script>
        <div class="pub_cadre">
          <img src="URL_DE_IMAGE_DU_HAUT" alt="Image haut" class="pub_image_top" />
          <div class="pub_body">
            <div class="pub_bloc1">
              <div class="pub_bloc1_text">
                Texte derrière l'image.
              </div>
              <img src="URL_DE_IMAGE_DU_MILIEU" alt="Image milieu" class="pub_bloc1_img" />
            </div>
            <span class="pubonglet_1 pubonglet" id="pubonglet_Initial" onmouseover="javascript:change_pubonglet('Initial');"></span>
            <img src="http://img11.hostingpics.net/pics/436524histoire.png" alt="Image histoire"  class="pubonglet_0 pubonglet" id="pubonglet_Histoire" onmouseover="javascript:change_pubonglet('Histoire');" />
            <img src="http://img11.hostingpics.net/pics/396239staffstats.png" alt="Image staff" class="pubonglet_0 pubonglet" id="pubonglet_Staff" onmouseover="javascript:change_pubonglet('Staff');" />
            <img src="http://img11.hostingpics.net/pics/598703merci.png" alt="Image merci" class="pubonglet_0 pubonglet" id="pubonglet_Merci" onmouseover="javascript:change_pubonglet('Merci');" />
            <div class="pub_bloc2">
              <div class="contenu_pubonglet" id="contenu_pubonglet_Initial">
                Passez sur les mots pour voir leur contenu ~
              </div>
              <div class="contenu_pubonglet" id="contenu_pubonglet_Histoire">
                Contenu de l'onglet Histoire.
              </div>
              <div class="contenu_pubonglet" id="contenu_pubonglet_Staff">
                Contenu de l'onglet Staff
              </div>
              <div class="contenu_pubonglet" id="contenu_pubonglet_Merci">
                Contenu de l'onglet Merci
                Crédit : Onyx de <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>
              </div>
            </div>
          </div>
          <div class="pub_bloc3">
            <a href="LIEN_DU_REGLEMENT" target="_blank">
              Règlement
            </a>
            <a href="LIEN_DES_PREDEFINIS" target="_blank">
              Prédéfinis
            </a>
            <a href="LIEN_DE_NOUS_REJOINDRE" target="_blank">
              Nous rejoindre
            </a>
          </div>
        </div>
        <script type="text/javascript">
          //<!--
            var anc_pubonglet = 'Initial';
            change_pubonglet(anc_pubonglet);
          //-->
        </script>
      </body>
    </html>

    Une page HTML peut être modifiée en tout temps et les modifications qui y sont apportées sont aussi apportées là où vous avez posté l'iframe de la page HTML.



    2. Iframe


    Nous avons maintenant une page HTML contenant une fiche de pub. Sauf que si on la laisse là, ce n'est pas trop utile. Alors aux endroits ou nous vondrons mettre la fiche de pub, on va mettre un iframe contenant le lien de notre page HTML.

    Quand on enregistre une page HTML et qu'on retourne dans la gestion des pages HTML, on a, dans la deuxième colone, ce qu'on appelle "URL du lien". C'est le lien de votre page HTML.

    Pour l'iframe, il s'agit du code qui va suivre. Vous copiez/collez le "URL du lien" de votre page HTML là où c'est écrit en majuscules qu'il faut le mettre et vous postez l'iframe là où vous voulez l'utiliser ^^
    Code:
    <iframe src="URL_DU_LIEN_DE_LA_PAGE_HTML" style="margin: auto; display: block; border: none; width: 738px; height: 842px;"></iframe>


    C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Problème avec mon code".

    À plus !


    Dernière édition par Onyx le Mer 1 Mar 2017 - 7:19, édité 2 fois



    avatar
    Kiki85
    MasculinAge : 22Messages : 389

    le Mer 6 Jan 2016 - 17:59

    merci !
    avatar
    Kâ Lys
    MasculinAge : 54Messages : 299

    le Dim 21 Fév 2016 - 0:49

    Merci c'est très beau! ^^



    avatar
    DeadlyRuby
    FémininAge : 18Messages : 40

    le Mer 24 Fév 2016 - 15:20

    Merci. ^^



    avatar
    Orochimaru
    FémininAge : 27Messages : 186

    le Mar 19 Avr 2016 - 19:33

    Beau travail Very Happy
    Merci du partage Very Happy



    Orochimaru

    " Les proies doivent toujours faire preuve de la plus grande vigilance, lorsqu'elles tentent d'échapper à leur prédateur. Tout ce qu'une proie peut espérer de son prédateur, c'est qu'il daigne la laisser tranquille après avoir eu ce qu'il voulait."
    avatar
    Linaewen
    FémininAge : 25Messages : 199

    le Jeu 21 Avr 2016 - 16:19

    Respect :panic: je l'adore Very Happy Je la prend ^^ merci pour ce sublime code
    avatar
    Mystigri
    FémininAge : 14Messages : 97

    le Ven 10 Juin 2016 - 20:03

    Merci ! Elle est originale cette fiche de pub !



    avatar
    Neko-Rika
    FémininAge : 18Messages : 115

    le Mar 28 Juin 2016 - 16:17

    Merci!
    avatar
    Aladiah
    FémininAge : 20Messages : 58

    le Ven 2 Sep 2016 - 20:56

    J'adore merci :o
    avatar
    Cloudygirl
    FémininAge : 33Messages : 65

    le Dim 4 Déc 2016 - 22:36

    Super joli ! Beaucoup de couleurs, c'est très beau =)
    Merci pour le partage !
    avatar
    carousse
    FémininAge : 25Messages : 13

    le Ven 23 Juin 2017 - 22:19

    merci
    avatar
    Lust Caution
    FémininAge : 23Messages : 79

    le Lun 17 Juil 2017 - 4:22

    wow merci !!!
    Contenu sponsorisé


      La date/heure actuelle est Sam 23 Sep 2017 - 14:49