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
    Carcajou
    FémininAge : 28Messages : 59

    le Ven 15 Jan 2016 - 21:56

    great job ! :cow:
    bravo et merci
    avatar
    Invité

    le Mar 19 Jan 2016 - 1:50

    Merci du partage, c'est top o/
    avatar
    megb59
    FémininAge : 24Messages : 104

    le Mar 19 Jan 2016 - 11:11

    Merci pour ce code il est vriament bien!
    avatar
    Llariarith
    FémininAge : 33Messages : 217

    le Mar 26 Jan 2016 - 10:39

    Merci !
    avatar
    Zibeline
    FémininAge : 32Messages : 83

    le Ven 29 Jan 2016 - 8:19

    Merci beaucoup :love:
    avatar
    Tchii
    FémininAge : 32Messages : 251

    le Sam 6 Fév 2016 - 14:48

    Coucou!
    Merci pour ce petit code...
    Bravo pour le travail.
    A trés vite!
    Tchii.
    avatar
    .lovely
    FémininAge : 21Messages : 54

    le Dim 14 Fév 2016 - 23:47

    j'adore !
    avatar
    DeadlyRuby
    FémininAge : 18Messages : 40

    le Lun 15 Fév 2016 - 18:58

    Merci. ^^



    avatar
    Celuna
    FémininAge : 27Messages : 130

    le Dim 21 Fév 2016 - 12:16

    Il est très complet et bien fait.. Magnifique et Merci pour tous vos travaux.
    Darouine Lius
    MasculinAge : 28Messages : 65

    le Mar 23 Fév 2016 - 18:15

    merci :)
    avatar
    Nunna
    FémininAge : 21Messages : 48

    le Mar 23 Fév 2016 - 19:15

    merci :)
    avatar
    Dokigaygay
    MasculinAge : 19Messages : 29

    le Mer 24 Fév 2016 - 19:22

    Merci <3
    avatar
    Yomidashi
    FémininAge : 20Messages : 14

    le Jeu 25 Fév 2016 - 12:56

    C'est une très jolie page d'acceuil ! Arîgato !



    avatar
    Luiyna
    FémininAge : 29Messages : 10

    le Sam 12 Mar 2016 - 15:36

    Merci beaucoup pour le partage ! Une PA tout en sobriété mais ultra complète !
    avatar
    BlueGhost
    MasculinAge : 16Messages : 125

    le Dim 13 Mar 2016 - 15:17

    Hello Very Happy
    J'adore ^^ Merci :)





    ~ Upupupu... je ne suis pas une peluche, je suis Monokuma ! ~
    Danganronpaaa ♥
    avatar
    mon-etoile
    FémininAge : 29Messages : 140

    le Dim 13 Mar 2016 - 19:40

    Merci beaucoup
    avatar
    Lust Caution
    FémininAge : 23Messages : 79

    le Lun 14 Mar 2016 - 19:20

    merci
    avatar
    Thessia
    FémininAge : 28Messages : 74

    le Lun 14 Mar 2016 - 23:01

    Merci du partage



    Ce n'est pas parce que tu ne le vois pas que ce n'est pas réel,
    Ce n'est pas par ce que tu n'y arrive pas que ce n'est pas possible.
    avatar
    Kitket
    FémininAge : 34Messages : 100

    le Mar 15 Mar 2016 - 19:19

    MErci
    avatar
    Azorus
    MasculinAge : 16Messages : 35

    le Mer 16 Mar 2016 - 18:47

    :love:



    Seul mon nounours peut me comprendre :cowboy: :gentleman: :bandit:


    GFX by Aleph'
    avatar
    Depp
    FémininAge : 27Messages : 298

    le Mer 16 Mar 2016 - 20:12

    merci :)



    avatar
    Callisto
    FémininAge : 21Messages : 44

    le Ven 18 Mar 2016 - 16:35

    merci merci !
    avatar
    Evil Queen 4ever
    FémininAge : 25Messages : 60

    le Mer 23 Mar 2016 - 4:33

    sublime Very Happy





    avatar
    Feniix
    MasculinAge : 25Messages : 21

    le Mer 23 Mar 2016 - 15:15

    Merci
    avatar
    Hylia
    FémininAge : 18Messages : 97

    le Ven 25 Mar 2016 - 10:35

    Merci!



    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Juin 2018 - 0:49