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.


    PA sobre & noire.

    Partagez
    avatar
    Henrykiki
    MasculinAge : 25Messages : 576

    le Ven 30 Jan 2015 - 12: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 !
    avatar
    Nymeria.
    FémininAge : 23Messages : 307

    le Jeu 19 Jan 2017 - 3:24

    Merci *-*
    avatar
    Invité

    le Ven 20 Jan 2017 - 9:33

    Merci pour ce code. :)
    avatar
    Adiboo
    MasculinAge : 29Messages : 22

    le Mar 24 Jan 2017 - 23:47

    J'adore elle est sublime *^*
    avatar
    #LANA.
    FémininAge : 23Messages : 7

    le Dim 29 Jan 2017 - 19:18

    Merci.
    avatar
    Gieve
    FémininAge : 28Messages : 104

    le Mer 8 Fév 2017 - 13:46

    Merci du partage !
    avatar
    Hallibel
    FémininAge : 25Messages : 82

    le Jeu 9 Fév 2017 - 12:48

    Merci !
    avatar
    Jiragi
    FémininAge : 18Messages : 22

    le Sam 11 Fév 2017 - 14:26

    merci !
    avatar
    J-SZ
    FémininAge : 28Messages : 217

    le Dim 12 Fév 2017 - 19:21

    merci pour le partage !

    :love:
    avatar
    Thanos
    MasculinAge : 22Messages : 84

    le Mar 21 Fév 2017 - 18:14

    merci
    avatar
    Laurolay
    FémininAge : 14Messages : 101

    le Jeu 9 Mar 2017 - 20:15

    Thank You ! c:
    avatar
    madame-al
    FémininAge : 27Messages : 12

    le Jeu 9 Mar 2017 - 20:40

    :love: :love:
    avatar
    CaraDelevngnie
    FémininAge : 18Messages : 370

    le Jeu 16 Mar 2017 - 22:53

    Jolie, j'aime beaucoup, j'aimerai voir ce que je peux faire avec ça :3



    avatar
    Sky Shiro
    MasculinAge : 19Messages : 1

    le Ven 24 Mar 2017 - 6:17

    Merci beaucoup ~
    avatar
    charlint
    FémininAge : 18Messages : 30

    le Dim 26 Mar 2017 - 20:10

    merci
    avatar
    kaguya venusity
    FémininAge : 23Messages : 97

    le Mar 28 Mar 2017 - 18:17

    Est cool
    avatar
    Örmée
    MasculinAge : 31Messages : 129

    le Mer 29 Mar 2017 - 10:02

    merci :)
    avatar
    LadyNicky
    FémininAge : 20Messages : 34

    le Mer 29 Mar 2017 - 16:46

    Merci
    avatar
    Nyptia
    FémininAge : 26Messages : 31

    le Lun 3 Avr 2017 - 15:33

    Merci :)
    avatar
    Mashi Hozuki
    MasculinAge : 20Messages : 28

    le Lun 3 Avr 2017 - 20:43

    Merci !
    avatar
    Asarigolo
    MasculinAge : 25Messages : 29

    le Jeu 6 Avr 2017 - 19:29

    merci ♥
    avatar
    Alsan
    MasculinAge : 21Messages : 53

    le Ven 21 Avr 2017 - 3:30

    Thank's
    avatar
    Jynnea
    FémininAge : 23Messages : 103

    le Ven 5 Mai 2017 - 1:56

    Merci!
    avatar
    Laurolay
    FémininAge : 14Messages : 101

    le Jeu 11 Mai 2017 - 11:53

    Merci !
    avatar
    AlexTasie
    MasculinAge : 21Messages : 34

    le Jeu 11 Mai 2017 - 19:29

    J'adore !! Merci du partage. :yay:
    avatar
    takoyaro
    FémininAge : 21Messages : 22

    le Mer 17 Mai 2017 - 13:41

    Merci ! : :omg: :lovebomb:
    Contenu sponsorisé


      La date/heure actuelle est Jeu 19 Juil 2018 - 3:44