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.

Le Deal du moment :
Cartes Pokémon : la prochaine extension ...
Voir le deal

    PA sobre & noire.

    Henrykiki
    Henrykiki
    MasculinAge : 31Messages : 576

    Ven 30 Jan - 11:35

    Rappel du premier message :

    Bonjour tout le monde,

    LS ~ PA sobre et noire :


    Voici mon premier LS de PA suite à la demande de Lisou, faite ici.

    Découvrez un aperçu de cette PA en ligne:
    www - et en image


    La PA contient en elle-même :

    • Une zone titre.
    • Une navigation principale.
    • Une zone "contexte" scrollable.
    • Une zone "News Spéciale"
    • Une zone "Choses à savoir" cachée par une image.
    • Un espace membres du mois
    • Un espace "news" scrollable.
    • Un espace prédéfinis/recherches.
    • Un espace Staff + liens profil & mp.
    • Une zone partenaires, avec défilement possible.


    Vos commentaires et remerciements envers le demandeur et le codeur sont toujours bienvenus ^^


    Ce code-ci est à insérer dans une page html (PA>Modules>Pages HTML>Créer)
    Code:
    <!doctype html>
    <html lang="fr">
    <head>
       <meta charset="UTF-8">
       <title>Pa-Lisou</title>
       <style>
       /* ajustements personnels */

          /* stylisation paragraphe contexte + choses à savoir : */
          #pa {
             font-family: sans-serif;
             font-size: 12px;
             position: relative;
          }

          /* stylisation titres */
          #pa h2 {
             font-family: sans-serif;
             font-size: 14px;

             text-transform: uppercase;
             text-align: center;
             font-style: italic;

             margin-bottom: 10px !important; /* = espace sous les titres */
          }

          /* stylisation liens de toute la PA */

          #pa a{
             text-decoration: none;
             color: gray;
             -webkit-transition: all .2s ease-in-out;
             -moz-transition: all .2s ease-in-out;
             -ms-transition: all .2s ease-in-out;
             -o-transition: all .2s ease-in-out;
             transition: all .2s ease-in-out;
          }

          #pa a:hover{
             text-decoration: none;
             color: black;
          }

          /* stylisation format date des news */

          .date {
             font-weight: bold;
             color: gray;
             font-size: 11px;
             text-transform: uppercase;
          }

          /* stylisation liens menu */
          ul#menu a {
             text-decoration: none;
             color: #000;
             letter-spacing: 0px;
             font-size: 16px;
             -webkit-transition: all .2s ease-in-out;
             -moz-transition: all .2s ease-in-out;
             -ms-transition: all .2s ease-in-out;
             -o-transition: all .2s ease-in-out;
             transition: all .2s ease-in-out;
          }

          ul#menu a:hover {
             letter-spacing: 2px;
             font-weight: bold;
          }

          /* stylisation pseudo "staff" */

          .pseudo {
             margin: 5px 0px;
             font-weight: bold;
             font-size: 110%;
          }

       /* normalize */
       #pa h1,#pa h2,#pa h3,#pa h4,#pa h5,#pa h6, ul, p { margin: 0; padding: 0; font-weight: normal;}

       /* GÉNÉRAL */

       #pa {
          width: 800px; margin: 0 auto;
          border: 5px solid black;
       }

       #pa h1 {
          width: 100%;
          height: 50px; line-height: 50px;
          text-align: center;
       }

       #container {
          width: 780px; margin: 20px auto 10px;
          overflow: hidden;
       }

       .left {
          width: 620px;
          float: left; margin-right: 10px;
          min-height: 150px;
       }

       .right {
          width: 126px; height: 421px;
          border: 2px solid #000;
          float: left;
          padding: 10px;
       }

       /* MENU */

       ul#menu {
          width: 100%;
          padding: 5px 0px;
          border-top: 1px solid black;
          border-bottom: 1px solid black;
          list-style-type: none;
          text-align: center;
          text-transform: uppercase;
       }

       ul#menu li{
          display: inline-block;
          margin: 0;
          padding: 0 !important;
       }

       ul#menu li:after {
          content: "—";
          padding: 0 15px;
       }

       ul#menu li:last-child:after {
          content: "";
          padding: 0px;
       }

       /* contexte */
       #contexte {
          width: 596px; max-width: 596px;
          height: 136px; max-height:136px;
          padding: 10px; margin-bottom: 10px;
          border: 2px solid black;
       }

       img.contexteimg {
          width: 160px; height: 140px;
          margin: 0 10px 0 0;
          float: left;
       }

       .texte-contexte {
          width: 410px; height: 140px;
          padding-right: 15px; /* espace pour scrollbar */
          float: left; text-align: justify;
          overflow-y: auto; /* scrolling */
       }

       .texte-contexte p{   margin-bottom: 20px;}
       .texte-contexte p:last-child{   margin-bottom: 0px;}

       /* NEWS & CHOSES SE PASSANT */
       .twocols {
          float: left;
          width: 281px; height: 81px;
          border: 2px solid #000;
          margin-right: 10px;
          padding: 10px;
          position: relative;
          overflow: hidden;
       }

       .twocols:nth-child(even) {
          margin-right: 0px;
       }

       .news img { width: 100%; height: auto;}

       .choses img {
          position: absolute;
          top: 0; left: 0;
          width: 100%; height: 105px;
          -webkit-transition: all 1s linear;
          -moz-transition: all 1s linear;
          -ms-transition: all 1s linear;
          -o-transition: all 1s linear;
          transition: all 1s linear;
          z-index: 1;
       }

       .choses:hover img {
          /* Pour faire disparaitre l'image au survol */
          position: absolute;
          width: 100%; height: 0px;
          top: 52.5px; left: 0;
       }

       .choses p {
          /* Positionnement du texte sous l'image + scroll */
          position: absolute; top: 0; left: 0;
          padding: 10px;
          width: 285px; height: 85px;
          overflow-y: auto;
          z-index: 0;
       }

       /* MEMBRES + NEWS + RECHERCHES */
       .threecols {
          float: left;
          width: 156px; height: 136px;
          border: 2px solid #000;
          margin-right: 10px;
          padding: 10px;
          position: relative;
       }

       .threecols:nth-child(2) {
          width: 216px;
       }

       .threecols:last-child {
          margin-right: 0px;
       }

       .memberofthemonth {
          width: 156px; height: 115px;
       }
       
       .mom {
          float: left;
          width: 75px;
          margin-right: 6px;
          text-align: center;
       }

       .mom .pseudo { font-weight: bold;}

       .mom:nth-child(2), .research a:nth-child(odd) {
          margin-right: 0px;
       }

       .mom img {
          width: 100%; height: auto;
       }

       .newscontent {
          height: 110px;
          overflow-y: auto;
       }

       .nouvelle {
          margin: 5px 0px;
          border-bottom: 1px dotted #000;
          padding-bottom: 5px;
       }
       .research {text-align: center;}

       .research a {
          display: inline-block;
          width: 50px;
          height: 50px;
          background: orange;
          margin-right: 5px;
          margin-bottom: 10px;
          text-align: center;
       }

       .research a img{
          width: 50px; height: 50px;
       }

       /* STAFFS */

       .contentstaff {
          width: 100%;
          text-align: center;
          margin-bottom: 10px;
       }

       .contentstaff img {
          width: 100%; height: auto;
       }

       /* PARTENAIRES */

       #footer {
          clear: both;
          width: 100%;
          padding-top: 10px !important;
       }

       #footer img {
          width: 50px; height: 50px;
          -webkit-transition: all .3s ease;
          -moz-transition: all .3s ease;
          -ms-transition: all .3s ease;
          -o-transition: all .3s ease;
          transition: all .3s ease;
       }

       #footer img:hover {
          -webkit-animation-origin: center center;
          -moz-animation-origin: center center;
          -ms-animation-origin: center center;
          -o-animation-origin: center center;
          animation-origin: center center;
          -webkit-transform: scale(1.2);
          -moz-transform: scale(1.2);
          -ms-transform: scale(1.2);
          -o-transform: scale(1.2);
          transform: scale(1.2);
       }

       #credits {
          position: absolute;
          bottom: -20px; right: 0;
       }

       </style>
    </head>
    <body>
       <div id="pa">
          <h1>Titre du forum</h1>
          <ul id="menu">
             <li><a href="">Lien 1</a></li>
             <li><a href="">Lien 2</a></li>
             <li><a href="">Lien 3</a></li>
             <li><a href="">Lien 4</a></li>
             <li><a href="">Lien 5</a></li>
             <li><a href="">Lien 6</a></li>
          </ul>

          <div id="container">
             <div class="left">

                <!-- ESPACE CONTEXTE -->

                <div id="contexte">
                   <img src="http://i38.servimg.com/u/f38/19/07/10/81/imgcon10.png" alt="" class="contexteimg">
                   <div class="texte-contexte">
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, in, nulla, pariatur tempore aut fuga consectetur asperiores error quisquam corporis a fugiat expedita itaque. Ea, debitis optio nisi quae eligendi!</p>

                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, minus, asperiores, ab quos omnis dolor nulla consequuntur vitae vel ipsa amet obcaecati dolorem possimus tempore quo corporis corrupti fugit incidunt?</p>
                   </div>
                </div>

                <!-- ESPACE NEWS ET CHOSES SE PASSANT -->

                <div style="overflow: hidden; margin-bottom: 10px;">
                   <div class="twocols news">
                      NEWS
                   </div>
                   <div class="twocols choses">
                      <img src="http://i38.servimg.com/u/f38/19/07/10/81/imgcho10.png" alt="Image Choses se passant" />
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, quasi placeat quo laborum odio deleniti expedita explicabo ipsa dignissimos nihil aspernatur alias velit ipsum amet consequuntur fuga atque. Quis, sed.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, quod, eaque asperiores ratione non minus labore debitis deserunt laborum at perspiciatis eveniet obcaecati laboriosam minima perferendis dignissimos commodi incidunt accusamus!</p>
                   </div>
                </div>

                <!-- ESPACE MEMBRES + NEWS + RECHERCHONS -->

                <div style="overflow: hidden;">
                   <div class="threecols">
                      <h2>Membres du mois</h2>
                      <div class="memberofthemonth">
                         <p class="mom">
                            <img src="http://i38.servimg.com/u/f38/19/07/10/81/parten12.png" alt="">
                            <span class="pseudo">Machin</span><br>
                            Rang
                         </p>

                         <p class="mom">
                            <img src="http://i38.servimg.com/u/f38/19/07/10/81/parten12.png" alt="">
                            <span class="pseudo">Machin</span><br>
                            Rang
                         </p>
                      </div>
                   </div>
                   <div class="threecols">
                      <h2>Nouveautés</h2>
                      <div class="newscontent">
                         <div class="nouvelle">
                            <div class="date">xx-xx-xxxx :</div>
                            Lorem ipsum dolor sit amet.
                         </div>
                         <div class="nouvelle">
                            <div class="date">xx-xx-xxxx :</div>
                            Lorem ipsum dolor sit amet.
                         </div>
                         <div class="nouvelle">
                            <div class="date">xx-xx-xxxx :</div>
                            Lorem ipsum dolor sit amet.
                         </div>
                         <div class="nouvelle">
                            <div class="date">xx-xx-xxxx :</div>
                            Lorem ipsum dolor sit amet.
                         </div>
                         <div class="nouvelle">
                            <div class="date">xx-xx-xxxx :</div>
                            Lorem ipsum dolor sit amet.
                         </div>
                         <div class="nouvelle">
                            <div class="date">xx-xx-xxxx :</div>
                            Lorem ipsum dolor sit amet.
                         </div>
                      </div>
                   </div>
                   <div class="threecols research">
                      <h2>Nous recherchons</h2>
                      <a href="">
                         <img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt=""></a>
                      <a href="">
                         <img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt=""></a>
                      <a href="">
                         <img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt=""></a>
                      <a href="">
                         <img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt=""></a>
                   </div>
                </div>
             </div> <!-- END COLONNE "LEFT" -->
             <div class="right">
                <h2>Staff</h2>

                <div class="contentstaff">
                   <img src="http://i38.servimg.com/u/f38/19/07/10/81/imgsta11.png" alt="">
                   <div class="pseudo">PSEUDO</div>
                   <a href="">MP</a> -
                   <a href="">PROFIL</a>
                </div>
                <div class="contentstaff">
                   <img src="http://i38.servimg.com/u/f38/19/07/10/81/imgsta11.png" alt="">
                   <div class="pseudo">PSEUDO</div>
                   <a href="">MP</a> -
                   <a href="">PROFIL</a>
                </div>
                <div class="contentstaff">
                   <img src="http://i38.servimg.com/u/f38/19/07/10/81/imgsta11.png" alt="">
                   <div class="pseudo">PSEUDO</div>
                   <a href="">MP</a> -
                   <a href="">PROFIL</a>
                </div>
             </div> <!-- END COLONNE "RIGHT" -->

             <div id="footer" style="text-align: center;">
                <!-- <marquee behavior="" direction="right" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="1"> -->
                   <a href="Lien-Partenaires" target="_blank">
                      <img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt="Nom Partenaire"></a>
                   <a href="Lien-Partenaires" target="_blank">
                      <img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt="Nom Partenaire"></a>
                   <a href="Lien-Partenaires" target="_blank">
                      <img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt="Nom Partenaire"></a>
                   <a href="Lien-Partenaires" target="_blank">
                      <img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt="Nom Partenaire"></a>
                   <a href="Lien-Partenaires" target="_blank">
                      <img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt="Nom Partenaire"></a>
                   <a href="Lien-Partenaires" target="_blank">
                      <img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt="Nom Partenaire"></a>
                   <a href="Lien-Partenaires" target="_blank">
                      <img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt="Nom Partenaire"></a>
                   <a href="Lien-Partenaires" target="_blank">
                      <img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt="Nom Partenaire"></a>
                   <a href="Lien-Partenaires" target="_blank">
                      <img src="http://i38.servimg.com/u/f38/19/07/10/81/parten13.png" alt="Nom Partenaire"></a>
                <!-- marquee -->
             </div>
          </div>

       <div id="credits">
          PA réalisée sur <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>
       </div>
       </div>
    </body>
    </html>

    Insertion sur la page d'accueil :


    Une fois que tu as enregistré ta page web (copie/colle l'adresse internet de celle-ci quelque part, car tu vas en avoir besoin), il te suffit de te rendre sur ta page d'accueil, et de coller le code pour insérer une iframe, à savoir :

    Code:
    <iframe style="width: 810px; height: 635px;" scrolling="no" frameborder="0" src="HTTP://ADRESSE-DE-TA-PAGE-HTML-RECEMMENT-CREE"></iframe>

    Et tu auras ainsi ta belle Page d'accueil toute fonctionnelle :)


    Les trucs personnalisables sont au début du code après les commentaires "stylisation".. Ne pas toucher aux largeurs/border/hauteur etc!


    Merci de ne pas toucher aux crédits envers Never-Utopia.


    Une question ?


    Je serai ravi de vous y répondre là-bas : problème avec votre code.



    Des bisous !
    Cadmée
    Cadmée
    FémininAge : 48Messages : 16

    Lun 23 Oct - 12:03

    merci ! Very Happy
    LickingBoot
    LickingBoot
    FémininAge : 25Messages : 503

    Jeu 2 Nov - 23:27

    merci =)



    PA sobre & noire. - Page 14 557826ilovedoudousign
    Aadelrun
    Aadelrun
    FémininAge : 25Messages : 79

    Dim 5 Nov - 15:54

    Merci pour le partage ! Elle est super complète^^



    PA sobre & noire. - Page 14 1502999567-ghgh-gh
    Syler
    Syler
    FémininAge : 24Messages : 32

    Mer 15 Nov - 18:23

    Merci <3
    phenixia74
    phenixia74
    FémininAge : 45Messages : 61

    Jeu 16 Nov - 9:40

    Merci beaucoup pour le partage ♥
    jelayde
    jelayde
    MasculinAge : 36Messages : 18

    Jeu 16 Nov - 17:09

    exactement ce que je cherchais merci beaucoup !
    Hana Evali
    Hana Evali
    FémininAge : 33Messages : 195

    Sam 18 Nov - 17:43

    Merci !



    PA sobre & noire. - Page 14 Ye49
    DUDEISM
    DUDEISM
    MasculinAge : 32Messages : 4

    Sam 25 Nov - 12:44

    C'est génial, merci beaucoup :hug:
    pika-cerise
    pika-cerise
    FémininAge : 32Messages : 92

    Dim 26 Nov - 14:33

    elle est geniale trés complète merci
    Yuru-Jess
    Yuru-Jess
    FémininAge : 30Messages : 28

    Lun 27 Nov - 0:51

    Merci beaucoup du partage!
    Mr. Shidokaz
    Mr. Shidokaz
    MasculinAge : 30Messages : 192

    Jeu 7 Déc - 22:49

    Merci beaucoup ! :)
    Dearborn
    Dearborn
    FémininAge : 30Messages : 112

    Sam 9 Déc - 21:08

    Merci ♥
    Bunikkk
    Bunikkk
    MasculinAge : 28Messages : 51

    Sam 16 Déc - 23:39

    Merci !
    Fawadja
    Fawadja
    MasculinAge : 29Messages : 32

    Mar 16 Jan - 22:35

    merci
    Spitburgs
    Spitburgs
    MasculinAge : 26Messages : 2

    Mer 17 Jan - 12:08

    cool! :)
    Historia
    Historia
    FémininAge : 22Messages : 8

    Sam 20 Jan - 14:15

    Merci Very Happy
    Alouarn
    Alouarn
    MasculinAge : 33Messages : 132

    Dim 21 Jan - 11:51

    Merci beaucoup ! **

    Cette PA est magnifique ! **
    Soryoo
    Soryoo
    MasculinAge : 25Messages : 17

    Lun 12 Fév - 0:16

    gg et merci :)
    Cha
    Cha
    FémininAge : 27Messages : 2

    Jeu 15 Fév - 19:15

    Merci Very Happy
    Scratpub
    Scratpub
    FémininAge : 39Messages : 145

    Ven 2 Mar - 21:51

    Merci!!
    MxPrime2
    MxPrime2
    MasculinAge : 30Messages : 81

    Dim 4 Mar - 22:05

    Merci à vous deux!
    Bzzzz
    Bzzzz
    FémininAge : 39Messages : 88

    Ven 6 Avr - 19:24

    J'aime beaucoup aussi c'est très beau merci
    LizzieWeir
    LizzieWeir
    FémininAge : 33Messages : 14

    Sam 14 Avr - 11:50

    Un grand merci pour ton partage :)
    blurryface
    blurryface
    FémininAge : 29Messages : 4

    Sam 14 Avr - 18:57

    merci ! Very Happy
    Stitch56
    Stitch56
    FémininAge : 30Messages : 209

    Dim 15 Avr - 10:40

    Merci ♥
    Contenu sponsorisé


      La date/heure actuelle est Jeu 30 Mai - 16:49