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 Simple (News, Staff, Contexte & groupes)

    Partagez
    avatar
    Henrykiki
    MasculinAge : 26Messages : 576

    le Lun 29 Déc 2014 - 21:29

    Rappel du premier message :

    Bonjour à tous,

    Voici un LS de PA style Attack on Titan hivernale.
    Elle vous est proposée suite à la demande de Mikasa.


    Aperçus : normale - survol du staff - en ligne


    Cette PA contient :

    • Un espace groupes pour 5 groupes
    • Un espace Staff + pseudo qui s'affiche au survol
    • Un espace News qui défilent + arrêt au survol.
    • Un espace Recrutement qui défilent + arrêt au survol.
    • Un espace Contexte.


    L'installation


    Création de la page html


    Rendez-vous sur votre panneau d'administration > modules > Gestion des pages HTML > Création en mode avancé. Donnez un titre a celle-ci : Pa-hivernale, par exemple, et collez-y le code ci-dessous :

    Code:
    <!doctype html>
    <html lang="fr">
    <head>
       <meta charset="UTF-8">
       <title>Pa - Mikasa</title>
       <link href='http://fonts.googleapis.com/css?family=Rye' rel='stylesheet' type='text/css'>

       <style>
          /* ici tous les textes avec la typo spéciale sont visés */
          #liens-nav a, #blocs td h2, ul#staffs li span {
             font-family: 'Rye', cursive;
          }

          /* pour ne pas devoir chercher tous les blocs qui ont la font */

          #pa {
             width: 800px; height: 400px;
             margin: 0 auto;
             background: url("http://i59.servimg.com/u/f59/18/77/81/63/pa_mod12.png") no-repeat;
             background-position: -2px; /*Ajustement du fond pour positionnement des blasons*/
             font-family: sans-serif;
             font-size: 12px;
             letter-spacing: .5px;
             position: relative;
          }

          #pa a {
             -webkit-transition: all .2s linear;
             -moz-transition: all .2s linear;
             -ms-transition: all .2s linear;
             transition: all .2s linear;
          }

          #liens-nav {
             text-align: center;
          }

          @-webkit-keyframes jingle {
             0% {-webkit-transform: rotate(-3deg);}
             33% {-webkit-transform: rotate(-0deg);}
             66% {-webkit-transform: rotate(3deg);}
             100% {-webkit-transform: rotate(0deg);}
          }

          @-moz-keyframes jingle {
             0% {-moz-transform: rotate(-3deg);}
             33% {-moz-transform: rotate(-0deg);}
             66% {-moz-transform: rotate(3deg);}
             100% {-moz-transform: rotate(0deg);}
          }

          @-ms-keyframes jingle {
             0% {-ms-transform: rotate(-3deg);}
             33% {-ms-transform: rotate(-0deg);}
             66% {-ms-transform: rotate(3deg);}
             100% {-ms-transform: rotate(0deg);}
          }

          @keyframes jingle {
             0% {transform: rotate(-3deg);}
             33% {transform: rotate(-0deg);}
             66% {transform: rotate(3deg);}
             100% {transform: rotate(0deg);}
          }

          #liens-nav a {
             font-size: 15px;
             color: #416139;
             text-decoration: none;
             display: block;
             padding-top: 70px; /* permet de faire croire que les blasons sont des liens */
             font-weight: normal;
          }

          #liens-nav a:hover {
             color: #811420;
             -webkit-animation: jingle .35s linear infinite;
             -moz-animation: jingle .35s linear infinite;
             -ms-animation: jingle .35s linear infinite;
             animation: jingle .35s linear infinite;      }

          #blocs {
             position: relative;
             bottom: -10px;
          }

          #blocs td {
             vertical-align: top;
             position: relative;
             padding: 5px;
          }

          #blocs td h2 {
             position: absolute;
             top: -15px; right: 0;
             margin: 0; padding: 0;
             font-size: 18px;
             font-weight: normal;
             display: block;
             width: 100%;
             color: #7e161e;
          }

          #blocs td.news, #blocs td.need {
             width: 150px; max-width: 150px;
             height: 80px; max-height: 80px;
          }

          #blocs td.contexte {
             width: 180px; max-width: 180px;
          }

          #blocs td.contexte, #blocs td.news, #blocs td.need {
             background: #f2f2f2;
             border-radius: 5px 0px 5px 5px;
             border-bottom: 1px solid lightgray;
             border-left: 1px solid lightgray;
          }

          #content-contexte {
             height: 200px;
             overflow-y: scroll;
             padding-right: 10px;
          }

          h2.center {   
             max-width: 220px;
             text-align: center;
             bottom: 0px !important;
             top: auto !important;
             left: 0;
          }

          h2.right {
             text-align: right;
             padding-right: 5px !important;
          }
          
          .news a, .need a {
             color: #000;
             text-decoration: none;
          }

          .news a:hover, .need a:hover {
             color: #7e161e;
          }
          .news p, .need p {
             padding: 5px 0;
             margin: 0;
             border-bottom: 1px solid #416139;
          }

          .news p strong, .need p strong{
             display: block;
          }

          ul#staffs {
             position: absolute;
             bottom: -16px;
             left: -8px;
             width: 225px;
             height: 105px;
             list-style-type: none;
             padding:0; margin: 0;
             text-align: center;
             overflow-y: auto;
          }

          ul#staffs li {
             width: 90px; height: 90px;
             overflow: hidden;
             background: orange;
             padding:0; margin: 0px 5px 5px;
             display: inline-block;
          }

          ul#staffs li span {
             position: absolute;
             top: -25px;
             display: inline-block;
             width: 90px;
             padding: 5px 0px;
             background: rgba(255,255,255,.7);
             color: #7e161e;
             -webkit-transition: top .2s ease-in-out;
             -moz-transition: top .2s ease-in-out;
             -ms-transition: top .2s ease-in-out;
             transition: top .2s ease-in-out;
          }

          ul#staffs li:hover span {
             position: absolute;
             top: 0px;
             display: inline-block;
             width: 90px; height: 14px;
             overflow: hidden;
             padding: 5px 0px;
             background: rgba(255,255,255,.7);
             color: #7e161e;
          }

          #credits {
             position: absolute;
             bottom: -20px; right: 0;
             text-align: right;
             font-family: sans-serif;
             font-size: 12px;
             padding: 3px 0;
             color: #99c6dd;
          }

          #credits a {
             padding-left: 20px;
             background: url("http://img4.hostingpics.net/pics/171045Ship.png") no-repeat left;
             background-size: 14px 14px;
             color: #7699ab !important;
             text-decoration: none !important;
             border: 0px !important;
          }
          
          #credits a:hover {
             color: #536b78 !important;
             background-position: 3px
          }
       </style>
    </head>
    <body>
       <div id="pa">
          <table align="center" width="710px" id="liens-nav">
             <tr>
                <td width="20%"><a href="1">Wall People</a></td>
                <td width="20%"><a href="1">Garnison</a></td>
                <td width="20%"><a href="1">Military Police</a></td>
                <td width="20%"><a href="1">Survey Corps</a></td>
                <td width="20%"><a href="1">Trainees squad</a></td>
             </tr>
          </table>
          
          <table align="center" width="740px" height="247px" id="blocs" cellspacing="20px">
             <tr>
                <td>
                   <!-- Laisser vide = espace au dessus de staff -->
                   <h2 class="center">STAFF</h2>
                   <!-- Juste le titre va dans cette case, le contenu c'est plus loin ! -->
                </td>
                <td class="news">
                   <h2 class="right">News</h2>
                   <marquee behavior="scroll" direction="up" scrollamount="1" width="150px" height="80px"  onmouseover="this.stop();" onmouseout="this.start();">

                      <!-- Pour rajouter des news, juste copier/coller une ligne ci-dessous  -->
                      <p><a href=""><strong>Le titre</strong> l'info de la news?</a></p>
                      <p><a href=""><strong>Le titre :</strong> l'info de la news?</a></p>

                   </marquee>
                </td>
                <td class="contexte" rowspan="2">
                   <h2 class="right">Contexte</h2>
                   <div id="content-contexte">
                      <!-- Collez ici votre contexte :  -->
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, atque, nulla, consequatur impedit sapiente nostrum nisi blanditiis illum et tempora molestias odio natus qui esse explicabo assumenda voluptatum sit minima.</p>
                      
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, rerum, ipsam dicta laborum dignissimos inventore sunt odit laudantium beatae reprehenderit itaque autem necessitatibus delectus iure magni soluta incidunt quidem consectetur?</p>
                   </div>
                </td>
             </tr>
             <tr>
                <td>
                   <!-- CONTENU DE LA CASE STAFF => ICI :  -->
                   <ul id="staffs">
                      <li>
                         <span class="name">Henrykiki</span>
                         <img src="http://i59.servimg.com/u/f59/18/77/81/63/mikasa11.png" alt="STAFF"></li>
                      <li>
                         <span class="name">Name</span>
                         <img src="http://i59.servimg.com/u/f59/18/77/81/63/mikasa11.png" alt="STAFF">
                      </li>
                      <!-- <li>STAFF 3</li>
                      <li>STAFF 4</li> -->
                   </ul>

                </td>

                <td class="need">
                   <h2 class="right">We need</h2>
                   <marquee behavior="scroll" direction="up" scrollamount="1" width="150px" height="80px"  onmouseover="this.stop();" onmouseout="this.start();">

                      <!-- Pour rajouter un poste, juste copier/coller une ligne ci-dessous  -->
                      <p><a href=""><strong>Le poste :</strong> description ?</a></p>
                      <p><a href=""><strong>Le poste :</strong> description ?</a></p>

                   </marquee>
                </td>
                <!-- <td></td> -->
             </tr>
          </table>

          <div id="credits">
             PA réalisée sur <a href="http://www.never-utopia.com/t52279-henrikiyi-pa-style-attack-on-titan-fond-image-hivernale" target="_blank">Never-Utopia</a>.
          </div>
       </div>
    </body>
    </html>

    Enregistrez. Ensuite, copiez quelque part l'adresse internet de cette page fraichement crée car nous en aurons besoin dans quelques instants.

    Installation de la page d'accueil


    Rendez-vous à l'emplacement de votre page d'accueil (PA>Affichage>Page d'accueil>Généralités) et collez-y ce code pour introduire une iframe...

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

    Et donc, remplacez "HTTP://ADRESSE-DE-LA-PAGE-HTML-RECEMMENT-CREE" par l'adresse de la page html que vous avez créée, dont je vous ai dis de garder l'URL quelque part...

    Les images correspondant aux groupes sont intégrées dans le fond de la PA, et donc, dans l'image utilisée pour le background de #pa ! (voir l'image de fond)


    Merci de conserver les crédits envers Never-Utopia


    Une question ? Un souci avec le code ?


    Rendez-vous dans la zone appropriée : c'est par ici !


    Dernière édition par Henrykiki le Jeu 15 Jan 2015 - 13:21, édité 1 fois



    Des bisous !
    avatar
    Margaux E.
    FémininAge : 15Messages : 25

    le Sam 2 Avr 2016 - 13:37

    Toujours des PA trop belles :)
    Merci
    avatar
    beza
    FémininAge : 22Messages : 47

    le Sam 9 Avr 2016 - 23:31

    Merci!
    avatar
    Viou
    FémininAge : 29Messages : 181

    le Mer 6 Juil 2016 - 9:52

    Merci du partage
    avatar
    Loona
    FémininAge : 51Messages : 21

    le Dim 7 Aoû 2016 - 8:49

    Merci.



    avatar
    Utauko
    FémininAge : 21Messages : 42

    le Ven 11 Nov 2016 - 11:44

    Merci *-*
    avatar
    Lilynufare
    FémininAge : 28Messages : 341

    le Jeu 16 Fév 2017 - 2:28

    merci
    avatar
    Momiji-chan
    FémininAge : 20Messages : 38

    le Mer 22 Fév 2017 - 14:35

    Merci pour ces codes. :)
    avatar
    allen walker
    FémininAge : 21Messages : 31

    le Jeu 6 Avr 2017 - 16:50

    Merci !
    avatar
    Jujudu44
    FémininAge : 30Messages : 61

    le Lun 5 Juin 2017 - 1:15

    Merci, c'est magnifique !
    avatar
    Natsuo Tanacka
    MasculinAge : 21Messages : 103

    le Lun 5 Juin 2017 - 3:46

    Merci :bipbip:



    avatar
    IReezor
    MasculinAge : 28Messages : 10

    le Mer 2 Aoû 2017 - 3:47

    cimer
    avatar
    Ghost of Darkness
    FémininAge : 24Messages : 43

    le Jeu 21 Sep 2017 - 17:00

    Toute belle et toute simple <3 J'adore, merci ! Very Happy



    Ghost of Darkness
    All my friends are heathens, take it slow. Wait for them to ask you who you know. Please dont make any sudden moves. You don't know the half od the abuse.


    avatar
    Patou972
    FémininAge : 39Messages : 172

    le Ven 1 Déc 2017 - 22:30

    Merci beaucoup pour le partage
    avatar
    Hasuko77
    MasculinAge : 25Messages : 13

    le Lun 5 Mar 2018 - 13:26

    merci
    avatar
    Orochimaru
    FémininAge : 28Messages : 209

    le Lun 5 Mar 2018 - 16:16

    wooow.
    J'Adore :)
    Beau travail :)



    Orochimaru

    " Les proies doivent toujours faire preuve de la plus grande vigilance, lorsqu'elles tentent d'échapper à leur prédateur. Tout ce qu'une proie peut espérer de son prédateur, c'est qu'il daigne la laisser tranquille après avoir eu ce qu'il voulait."
    avatar
    daeliteh
    Messages : 3

    le Mer 4 Avr 2018 - 11:19

    Merciii :)
    avatar
    Noruenu
    FémininAge : 25Messages : 123

    le Sam 7 Avr 2018 - 18:14

    merci ! o/
    avatar
    soulscythe
    MasculinAge : 27Messages : 19

    le Mar 15 Mai 2018 - 21:35

    Merci ^^
    avatar
    noonesheretosleep
    FémininAge : 19Messages : 6

    le Mer 16 Mai 2018 - 22:31

    Merci Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Mer 26 Sep 2018 - 6:36