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 : -29%
DYSON V8 Origin – Aspirateur balai sans fil
Voir le deal
269.99 €

    PA sobre & noire.

    Henrykiki
    Henrykiki
    MasculinAge : 32Messages : 576

    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 !
    • Revenir en haut
    Carcajou
    Carcajou
    FémininAge : 35Messages : 59

    Ven 15 Jan 2016 - 21:56

    great job ! :cow:
    bravo et merci
    • Revenir en haut
    Anonymous
    Invité

    Mar 19 Jan 2016 - 1:50

    Merci du partage, c'est top o/
    • Revenir en haut
    megb59
    megb59
    FémininAge : 30Messages : 111

    Mar 19 Jan 2016 - 11:11

    Merci pour ce code il est vriament bien!
    • Revenir en haut
    Llariarith
    Llariarith
    FémininAge : 39Messages : 218

    Mar 26 Jan 2016 - 10:39

    Merci !
    • Revenir en haut
    Zibeline
    Zibeline
    FémininAge : 39Messages : 84

    Ven 29 Jan 2016 - 8:19

    Merci beaucoup :love:
    • Revenir en haut
    Tchii
    Tchii
    FémininAge : 38Messages : 285

    Sam 6 Fév 2016 - 14:48

    Coucou!
    Merci pour ce petit code...
    Bravo pour le travail.
    A trés vite!
    Tchii.
    • Revenir en haut
    .lovely
    .lovely
    FémininAge : 27Messages : 54

    Dim 14 Fév 2016 - 23:47

    j'adore !
    • Revenir en haut
    DeadlyRuby
    DeadlyRuby
    FémininAge : 25Messages : 40

    Lun 15 Fév 2016 - 18:58

    Merci. ^^



    PA sobre & noire. - Page 8 15122001123111422113841857
    • Revenir en haut
    Celuna
    Celuna
    FémininAge : 34Messages : 133

    Dim 21 Fév 2016 - 12:16

    Il est très complet et bien fait.. Magnifique et Merci pour tous vos travaux.
    • Revenir en haut
    Darouine Lius
    Darouine Lius
    MasculinAge : 35Messages : 77

    Mar 23 Fév 2016 - 18:15

    merci :)
    • Revenir en haut
    Nunna
    Nunna
    FémininAge : 28Messages : 48

    Mar 23 Fév 2016 - 19:15

    merci :)
    • Revenir en haut
    Dokigaygay
    Dokigaygay
    MasculinAge : 25Messages : 29

    Mer 24 Fév 2016 - 19:22

    Merci <3
    • Revenir en haut
    Yomidashi
    Yomidashi
    FémininAge : 27Messages : 14

    Jeu 25 Fév 2016 - 12:56

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



    PA sobre & noire. - Page 8 Tumblr_n6gz9jVUEd1soec3yo1_500
    • Revenir en haut
    Luiyna
    Luiyna
    FémininAge : 35Messages : 10

    Sam 12 Mar 2016 - 15:36

    Merci beaucoup pour le partage ! Une PA tout en sobriété mais ultra complète !
    • Revenir en haut
    BlueGhost
    BlueGhost
    MasculinAge : 23Messages : 138

    Dim 13 Mar 2016 - 15:17

    Hello Very Happy
    J'adore ^^ Merci :)



    PA sobre & noire. - Page 8 1476882517-signa

    ~ Upupupu... je ne suis pas une peluche, je suis Monokuma ! ~
    Danganronpaaa ♥
    • Revenir en haut
    mon-etoile
    mon-etoile
    FémininAge : 36Messages : 140

    Dim 13 Mar 2016 - 19:40

    Merci beaucoup
    • Revenir en haut
    Lust Caution
    Lust Caution
    FémininAge : 30Messages : 79

    Lun 14 Mar 2016 - 19:20

    merci
    • Revenir en haut
    Thessia
    Thessia
    FémininAge : 35Messages : 78

    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.
    • Revenir en haut
    Kitket
    Kitket
    FémininAge : 41Messages : 106

    Mar 15 Mar 2016 - 19:19

    MErci
    • Revenir en haut
    Azorus
    Azorus
    MasculinAge : 23Messages : 35

    Mer 16 Mar 2016 - 18:47

    :love:



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


    GFX by Aleph'
    • Revenir en haut
    Depp
    Depp
    FémininAge : 33Messages : 301

    Mer 16 Mar 2016 - 20:12

    merci :)



    PA sobre & noire. - Page 8 Tumblr_nenygwIlcz1s4u464o1_500
    • Revenir en haut
    Callisto
    Callisto
    FémininAge : 28Messages : 45

    Ven 18 Mar 2016 - 16:35

    merci merci !
    • Revenir en haut
    Evil Queen 4ever
    Evil Queen 4ever
    FémininAge : 32Messages : 64

    Mer 23 Mar 2016 - 4:33

    sublime Very Happy




    PA sobre & noire. - Page 8 478753Chantal
    • Revenir en haut
    Feniix
    Feniix
    MasculinAge : 32Messages : 21

    Mer 23 Mar 2016 - 15:15

    Merci
    • Revenir en haut
    Hylia
    Hylia
    FémininAge : 24Messages : 100

    Ven 25 Mar 2016 - 10:35

    Merci!



    PA sobre & noire. - Page 8 _hylia10
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Sam 23 Nov 2024 - 9:01