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 coloréé en page html

    Partagez
    avatar
    Youp
    FémininAge : 23Messages : 579

    le Jeu 7 Jan 2016 - 16:50



    Hey ! Voici une petite fiche de pub sympathique aux couleurs estivales. Il y'a des animations sur la partie staff, qui dévoile le nom du staff. La voici: (vous n'aurez pas les images dans le code, à vous de les mettre, mais je vous expliquerais où)



    Ce livre nécessite une page html, une page qui sera hébergée sur un forum donc. Mais ne vous en faites pas, ce n'est vraiment pas sorcier


    Le code de la page html et ses explications

    Donc dans modules -> gestion des pages html -> créer en mode avancé, vous mettez ceci :
    Code:
    <!DOCTYPE html>
      <html>
        <head> 
          <meta charset="utf-8" />
          <title>Fiche de pub pour refresh</title>
          <base target="_blank" />
          <style type="text/css">
    .page{
      width: 550px;
      height: 900px;
      background: lightblue;
      background-image: url('LIEN');
      background-repeat: no-repeat;
    }

    a {
      text-decoration:none;
      color: white !important;
    }

    .titre {
      color : #fb6920;
      font-size: 24px;
      font-weight: ;
      letter-spacing: px;
      font-family: 'Indie Flower';
      float: right;
      position: relative;
      margin-right: 20px;
      margin-top: 257px;
      text-shadow: 2px 2px 0px white, -1px -1px 0px white;
    }    

    .contexte{
      width: 350px;
      height: 310px;
      background: white;
      position: absolute;
      top: 300px;
      overflow: auto;
      margin-left: 25px;
      font-size: 15px;
      padding: 7px;
      text-align:justify;
      color: chocolate;
    }

    .contexte:first-letter {
      font-size:290%;
      float:left;
      background: #fb6920;
      color: white;
      padding-left: 6px;
      padding-right: 5px;
      margin-right: 3px;
    }  

    .staff1{
      width: 100px;
      height: 100px;
      background: white;
      position: absolute;
      top: 300px;
      left: 420px;
      background: white;
      color: chocolate;
    }  

    .imagestaff1 {
      height: 100%;
      width: 100%;
      position:absolute;
      top:0;
      left:0;
      background-image: url('LIEN');
      background-size: contain;
      -webkit-transition: all 1s linear;
      transition: all 1s linear;
    }  

    .staff1:hover > .imagestaff1 {
      filter:alpha(opacity=0);
      opacity:0;
      visibility:hidden;
    }

    .staff2 {
      width: 100px;
      height: 100px;
      background: white;
      position: absolute;
      top: 410px;
      left: 420px;
      background: white;
      color: chocolate;
    }    


    .imagestaff2 {
      height: 100%;
      width: 100%;
      position:absolute;
      top:0;
      left:0;
      background-image: url('LIEN');
      background-size: contain;
      -webkit-transition: all 1s linear;
      transition: all 1s linear;
    }  

    .staff2:hover > .imagestaff2 {
      opacity:0;
      filter:alpha(opacity=0);
      visibility:hidden;
    }

    .staff3{
      width: 100px;
      height: 100px;
      background: white;
      position: absolute;
      top: 520px;
      left: 420px;
      background: white;
      color: chocolate;
    }

    .imagestaff3 {
      height: 100%;
      width: 100%;
      position:absolute;
      top:0;
      left:0;
      background-image: url('LIEN');
      background-size: contain;
      -webkit-transition: all 1s linear;
      transition: all 1s linear;
    }  

    .staff3:hover > .imagestaff3 {
      opacity:0;
      filter:alpha(opacity=0);
      visibility:hidden;
    }

    .blocliens{
      width: 550px;
      height: 36px;
      position: absolute;
      top: 650px;
      vertical-align: middle;
    }  

    .lien1{
      width: 109px;
      height: 35px;
      background: #fb6920;
      color: white !important;
      display: inline-block ;
      position: relative;
      top: 0px;
      float:left;
      text-align:center;
      line-height:30px;
    }

    .lien1:hover{
      width: 109px;
      height: 35px;
      background: #b92b2a;
      color: white;
      display: inline-block ;
      position: relative;
      top: 0px;
      float:left;
      text-align:center;
      line-height:30px;
    }

    .lien2{
      width: 111px;
      height: 35px;
      background: gold;
      color: white;
      display: inline-block ;
      position: relative;
      top: 0px;
      float: left;
      text-align:center;
      line-height:30px;
    }

    .lien2:hover{
      width: 111px;
      height: 35px;
      background: #b92b2a;
      color: white;
      display: inline-block ;
      position: relative;
      top: 0px;
      float: left;
      text-align:center;
      line-height:30px;
    }

    .blocinfo{
      width: 400px;
      background: white;
      position: absolute;
      top: 710px;
      overflow: auto;
      margin-left: 50px;
      font-size: 15px;
      padding: 15px;
      text-align:justify;
      color: chocolate;
      border-radius: 20px;
    }

    .boutonphrase {
      color : #fb6920;
      font-size: 20px;
      font-family: 'Indie Flower';
      text-shadow: 2px 2px 0px white, -1px -1px 0px white;
      width: 190px;
      margin: auto;
    }    

    .bouton {
      width: 100px;
      margin: auto;
      margin-top: -17px;
    }    

    .crédit {
      font-size: 10px;
      position: absolute;
      top: 875px;
      margin-left: 200Px;
      color: grey;
    }
    </style>
          <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Indie+Flower" >
        </head>       
        <body>                 
    <div class="page">
                                                                  
     <div class="titre">
                                   Si tu devais partir en voyage, où irais-tu?                                
     </div>
                                                                
     <div class="contexte">
                                   LE CONTEXTE BLABLABLA, ces balises -> <br /> <br /> Correspondent à un saut de ligne si vous souhaitez les utiliser. A la suite un petit lien vers le contexte en entier, vous pouvez le retirer: <a target="_blank" href="LIENde_la_suite_de_votre_contexte"><span style="color: rgb(185, 43, 42);">La suite...</span></a>                            
     </div>
                                                            
     <div class="staff1">
            
     <div style="height: 100px;  display:table-cell; vertical-align: middle; font-family: 'Indie Flower' ; text-align: center; width : 100px;">
              NOM STAFF      
     </div>
                      
     <div class="imagestaff1">
                        
     </div>
                                                            
     </div>
                                                            
     <div class="staff2">
            
     <div style="height: 100px;  display:table-cell; vertical-align: middle; font-family: 'Indie Flower' ; text-align: center; width : 100px;">
             NOM STAFF          
     </div>
                        
     <div class="imagestaff2">
                          
     </div>
                                                            
     </div>
                                                            
     <div class="staff3">
          
     <div style="height: 100px;  display:table-cell; vertical-align: middle; font-family: 'Indie Flower' ; text-align: center; width : 100px;">
            NOM STAFF    
     </div>
                        
     <div class="imagestaff3">
                        
     </div>
                                                            
     </div>
                                                            
     <div class="blocliens">
                                              
     <div class="lien1">
           <a href="LIEN" target="_blank">                  Règlement </a>                          
     </div>
                                
     <div class="lien2">
           <a href="LIEN" target="_blank">                      Base de données </a>                        
     </div>
                        
     <div class="lien1">
           <a href="LIEN" target="_blank">                     Fruits du démon </a>                          
     </div>
                                  
     <div class="lien2">
           <a href="LIEN" target="_blank">                      Questions  </a>                          
     </div>
                              
     <div class="lien1">
           <a href="LIEN" target="_blank">                    Staff  </a>                    
     </div>
                                                
     </div>
                                                  
     <div class="blocinfo">
                               Date d'ouverture: <br /> Membres enregistrés: <br />Nombre de messages postés : <br />  <br />                
     <div class="boutonphrase">
                     Venez nous rejoindre !                  
     </div><br />                  
     <div class="bouton">
                      <a title="OnePieceRefresh" href="LIEN_Forum"><img src="Image_bouton_partenariat" alt="logo partenaire" /></a>                  
     </div>
                                            
     </div>
                                        
     <div class="crédit">
                                  @Youp sur <a target="_blank" href="http://www.never-utopia.com/"> <span style="color: rgb(185, 43, 42);">Never Utopia</span> </a>                              
     </div>
                                                                                    
    </div>
    </body>
    </html>

    Ensuite, à chaque fois que vous voulez modifier votre code, vous devrez utiliser le mode avancé, soit l'engrenage sur lequel il est écrit "html". Sinon, cela va cause des bugs.

    Code:
    .page{
      width: 550px;
      height: 900px;
      background: lightblue;
     background-image: url('LIEN');
     background-repeat: no-repeat;
    }
    N'oubliez pas de remplacer le LIEN par un... roulement de tambour... Lien ! Razz Ce lien correspond à l'image en haut de la fiche, l'image ici fait 550 de largeur (width) et 275 de hauteur (height). Si vous désirez changer les proportions, il vous faudra changer certains placements comme celui du titre par exemple (modifier simplement la valeur top ).

    Modifier aussi le lien des images de imagestaff1, 2 et 3 ainsi que le nom qui s'affiche en dessous (j'ai noté NOM STAFF). Les images font 100x100px.

    Code:
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Indie+Flower" />            
    Correspond à la police google font que l'on utilise pour certaines parties de la fiche, vous pouvez la remplacer par une autre si vous le souhaitez bien sûr. Ajouter juste à la suite le code similaire que vous donne google font.

    N'oubliez pas de modifier aussi tout les LIEN (donc pour la navigation rapide, ex règlement, staff etc..., sur le bouton de partenariat aussi), et l'image du bouton de partenariat.



    Utiliser dans un message: mettre une iframe :

    Hop hop, maintenant pour l'utiliser, il suffit d'utiliser une iframe sous cette forme:
    Code:
    <iframe src="Le_lien_de_ta_page_html" frameborder="0" scrolling="no" style="margin:auto; width: 550px; height: 900px;"></iframe>
    Modifier les valeurs de hauteur et de largeur si vous avez modifier celle-ci sur votre page html. Enlever la première div si vous ne voulez pas que la fiche soit centrée.

    Voili voilou, j'espère que le rendu vous plaît et si vous avez un problème avec la modification du code, n'hésitez pas à passer dans "personnalisations" ou "problème avec mon code". N'enlevez pas le crédit bien sûr (surtout celui qui amène vers N-U, mais sur ce point je vous fait confiance ^^


    Dernière édition par Youp le Lun 7 Mar 2016 - 18:22, édité 1 fois



    avatar
    Youp
    FémininAge : 23Messages : 579

    le Jeu 7 Jan 2016 - 16:57

    Aaaaaah mince je suis teubé, je crois que j'ai posté au mauvais endroit, ce serait pas plutôt un LS de message ? Est ce que quelqu'un pourrait déplacer mon sujet s'il vous please ?



    avatar
    Kelalin
    FémininAge : 25Messages : 1945

    le Jeu 7 Jan 2016 - 21:30

    Merci pour le partage en tout cas ! <( ̄︶ ̄)>
    avatar
    Calypso Luciano
    FémininAge : 27Messages : 333

    le Mer 13 Jan 2016 - 21:19

    Merci pour le partage ^^
    avatar
    NyoTheNeko
    FémininAge : 24Messages : 5018

    le Sam 5 Mar 2016 - 11:00

    Hello Youp et désolée pour le retard! ^^

    Alors j'ai juste un petit soucis avec ton code, c'est que la page HTML... n'en est pas une! Il manque le doctype, les balises html, head et body... en fait, ça m'étonne que tu n'aies pas plus de soucis que ça avec cette page! O__O

    Si possible,m je voudrais que tu ajoutes tout comme il faut. Pour t'aider il y a ce tuto!

    Merci d'avance! ♥



    avatar
    Youp
    FémininAge : 23Messages : 579

    le Lun 7 Mar 2016 - 18:23

    C'est bon, tout est réparé ^^
    EDIT: j'ai bien l'impression que mon forum test les enlève, c'est possible ça ? O.o



    avatar
    Invité

    le Ven 30 Sep 2016 - 12:56

    Merci j'aime beaucoup le rendu :)
    avatar
    Onyx
    FémininAge : 24Messages : 3132

    le Dim 2 Oct 2016 - 2:09

    Salut!

    Est-ce que tu avais réussi à résoudre le problème? J'ai apporté des correction sur la manière de modifier une page html (avec l'engrenage html) et nettoyé le code un peu et cela fonctionne bien chez moi, peut-être que cela vient de là? En tout cas, tout me semble bon alors je déplace Wink



    avatar
    sandy13
    FémininAge : 28Messages : 15

    le Ven 14 Oct 2016 - 15:30

    Merci pour le partage :)
    avatar
    Fuyuka
    FémininAge : 23Messages : 62

    le Jeu 22 Déc 2016 - 23:57

    Merci beaucoup !!
    avatar
    NekoMiaouw
    FémininAge : 21Messages : 136

    le Dim 1 Jan 2017 - 13:52

    Merci, elle est très jolie !



    avatar
    TWISTY.RAIN
    FémininAge : 22Messages : 59

    le Lun 2 Jan 2017 - 16:47

    Merci beaucoup pour cette fiche :) !



    avatar
    PockyBanana
    FémininAge : 28Messages : 31

    le Mer 4 Jan 2017 - 13:13

    Merci beaucoup pour le partage, j'aime beaucoup ! Very Happy
    avatar
    Lalia
    FémininAge : 18Messages : 40

    le Sam 25 Fév 2017 - 14:38

    Merci beaucoup *____*
    avatar
    Inamio
    FémininAge : 25Messages : 238

    le Dim 26 Fév 2017 - 19:11

    Merci pour le partage



    avatar
    Kokoro Korou
    MasculinAge : 22Messages : 70

    le Dim 26 Mar 2017 - 16:05

    Merci :3 !!
    avatar
    Ely Kyuh
    FémininAge : 24Messages : 23

    le Dim 13 Mai 2018 - 14:15

    Le rendue est très sympa, merci =)
    avatar
    Everdeen
    FémininAge : 24Messages : 36

    le Jeu 28 Juin 2018 - 21:20

    Merci pour le partage :)



    avatar
    Litalis
    MasculinAge : 22Messages : 22

    le Ven 29 Juin 2018 - 12:27

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Mer 15 Aoû 2018 - 17:08