AccueilRechercherS'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.

    Henrykiki
    Henrykiki
    MasculinAge : 28Messages : 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 !
    Shaolan
    Shaolan
    MasculinAge : 29Messages : 108

    le Dim 31 Mai 2015 - 4:25

    Merci beaucoup
    Natsuhi
    Natsuhi
    FémininAge : 24Messages : 35

    le Lun 1 Juin 2015 - 18:44

    Merci ^^
    damon w salvatore
    damon w salvatore
    FémininAge : 32Messages : 109

    le Mer 3 Juin 2015 - 23:54

    merci
    Madras
    Madras
    FémininAge : 35Messages : 282

    le Sam 6 Juin 2015 - 7:16

    Merci du partage
    Keith
    Keith
    MasculinAge : 28Messages : 37

    le Sam 6 Juin 2015 - 19:50

    Aaah ça m’intéresse bien ça, merci! :3
    Malice1329
    Malice1329
    FémininAge : 32Messages : 80

    le Lun 8 Juin 2015 - 15:38

    merci beaucoup mon amie aura une belle pa sur son nouveau forum. !!!



    PA sobre & noire. - Page 4 Henry
    No'Oz
    No'Oz
    FémininAge : 18Messages : 88

    le Mar 9 Juin 2015 - 19:12

    MErci!
    Saya Shirayuki
    Saya Shirayuki
    FémininAge : 27Messages : 153

    le Mer 10 Juin 2015 - 11:57

    Merci beaucoup^^
    Devil.
    Devil.
    FémininAge : 23Messages : 58

    le Lun 15 Juin 2015 - 18:15

    Merci ! C'est top ! :3
    AkaZukin
    AkaZukin
    FémininAge : 26Messages : 35

    le Mar 16 Juin 2015 - 1:05

    Merci à vous 2 ♥
    Anonymous
    Invité

    le Jeu 18 Juin 2015 - 11:30

    Merci :)
    Zephyr Du Moulin
    Zephyr Du Moulin
    MasculinAge : 24Messages : 19

    le Jeu 18 Juin 2015 - 15:45

    Merci beaucoup ! ♥
    Ikel
    Ikel
    MasculinAge : 23Messages : 13

    le Sam 20 Juin 2015 - 17:42

    Merci !
    avatar
    Hane
    FémininAge : 22Messages : 64

    le Mar 23 Juin 2015 - 6:13

    Merci beaucoup de partager ce code!

    PS: je trouve vraiment super que vous mettiez toutes le dimensions vraiment super merci d'avance!
    Porcelain Detox
    Porcelain Detox
    MasculinAge : 26Messages : 91

    le Mar 30 Juin 2015 - 17:42

    Merci <3
    Mini007
    Mini007
    MasculinAge : 26Messages : 21

    le Sam 4 Juil 2015 - 7:48

    bravo
    PLOIM
    PLOIM
    FémininAge : 23Messages : 52

    le Sam 4 Juil 2015 - 19:53

      Simple et efficace, merci !
    Kahlan
    Kahlan
    FémininAge : 33Messages : 371

    le Lun 6 Juil 2015 - 16:52

    Merci beaucoup pour ce codage =)
    Meldicia
    Meldicia
    FémininAge : 33Messages : 31

    le Lun 13 Juil 2015 - 15:30

    Merci beaucoup!
    Argy
    Argy
    FémininAge : 22Messages : 98

    le Lun 13 Juil 2015 - 18:57

    Merci beaucoup ! J'adore cette PA ^^
    Simple sobre, mais qui réunit tout ce qu'il faut !
    Odahviing
    Odahviing
    FémininAge : 23Messages : 24

    le Dim 19 Juil 2015 - 20:32

    Merci beaucoup ! **
    Biscotte Cynique
    Biscotte Cynique
    FémininAge : 23Messages : 47

    le Mar 21 Juil 2015 - 15:43

    Merciii !
    tiiinqueen
    tiiinqueen
    MasculinAge : 25Messages : 9

    le Mar 21 Juil 2015 - 23:16

    Merciiii !
    Kyuusei Ban
    Kyuusei Ban
    FémininAge : 27Messages : 69

    le Sam 25 Juil 2015 - 17:08

    Merci :)
    Zorane
    Zorane
    MasculinAge : 29Messages : 67

    le Sam 25 Juil 2015 - 22:41

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 29 Oct 2020 - 5:14