AccueilDernières imagesRechercherS'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.

-50%
Le deal à ne pas rater :
-50% sur les sacs à dos pour ordinateur portable Urban Factory ...
19.99 € 39.99 €
Voir le deal

    Fiche de pub coloréé en page html

    Youp
    Youp
    FémininAge : 29Messages : 579

    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



    Fiche de pub coloréé en page html 262632clip20160315at092522
    Youp
    Youp
    FémininAge : 29Messages : 579

    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 ?



    Fiche de pub coloréé en page html 262632clip20160315at092522
    Anonymous
    Invité

    Jeu 7 Jan 2016 - 21:30

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

    Mer 13 Jan 2016 - 21:19

    Merci pour le partage ^^
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    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! ♥



    Youp
    Youp
    FémininAge : 29Messages : 579

    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



    Fiche de pub coloréé en page html 262632clip20160315at092522
    Anonymous
    Invité

    Ven 30 Sep 2016 - 12:56

    Merci j'aime beaucoup le rendu :)
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    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



    sandy13
    sandy13
    FémininAge : 34Messages : 15

    Ven 14 Oct 2016 - 15:30

    Merci pour le partage :)
    Fuyuka
    Fuyuka
    FémininAge : 29Messages : 63

    Jeu 22 Déc 2016 - 23:57

    Merci beaucoup !!
    NekoMiaouw
    NekoMiaouw
    FémininAge : 27Messages : 148

    Dim 1 Jan 2017 - 13:52

    Merci, elle est très jolie !



    Fiche de pub coloréé en page html 388245alisign
    TWISTY.RAIN
    TWISTY.RAIN
    FémininAge : 27Messages : 64

    Lun 2 Jan 2017 - 16:47

    Merci beaucoup pour cette fiche :) !



    Fiche de pub coloréé en page html Smile_so_sad_by_tuschen-daizswq
    PockyBanana
    PockyBanana
    FémininAge : 34Messages : 36

    Mer 4 Jan 2017 - 13:13

    Merci beaucoup pour le partage, j'aime beaucoup ! Very Happy
    Lalia
    Lalia
    FémininAge : 24Messages : 45

    Sam 25 Fév 2017 - 14:38

    Merci beaucoup *____*
    Inamio
    Inamio
    FémininAge : 31Messages : 252

    Dim 26 Fév 2017 - 19:11

    Merci pour le partage



    Fiche de pub coloréé en page html 2014_p10
    Kokoro Korou
    Kokoro Korou
    MasculinAge : 28Messages : 74

    Dim 26 Mar 2017 - 16:05

    Merci :3 !!
    Ely Kyuh
    Ely Kyuh
    FémininAge : 30Messages : 33

    Dim 13 Mai 2018 - 14:15

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

    Jeu 28 Juin 2018 - 21:20

    Merci pour le partage :)



    Fiche de pub coloréé en page html Anastasia
    Litalis
    Litalis
    MasculinAge : 28Messages : 27

    Ven 29 Juin 2018 - 12:27

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 0:38