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

    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
    Nezumi-liet
    FémininAge : 29Messages : 11

    le Dim 4 Jan 2015 - 0:13

    Merci ^^
    avatar
    Mikasa
    FémininAge : 21Messages : 162

    le Lun 5 Jan 2015 - 1:40

    Merci beaucoup d'avoir pris du temps pour faire cela ^^




    Signa:


    avatar
    Halloween
    FémininAge : 24Messages : 9756

    le Jeu 22 Jan 2015 - 20:17

    Merci :)




    < / Libre service codage >
    avatar
    Venise
    FémininAge : 35Messages : 270

    le Ven 23 Jan 2015 - 13:18

    merci
    avatar
    Nîniel
    FémininAge : 23Messages : 70

    le Sam 24 Jan 2015 - 15:44

    Merci



    avatar
    BlackSo
    MasculinAge : 19Messages : 31

    le Dim 15 Fév 2015 - 19:06

    merci du partage
    avatar
    Théine
    MasculinAge : 37Messages : 24

    le Sam 7 Mar 2015 - 19:39

    Merci ! .o/
    Phénix'
    FémininAge : 17Messages : 93

    le Mer 1 Avr 2015 - 14:19

    Merci
    avatar
    Moon Heart
    FémininAge : 18Messages : 37

    le Mer 1 Avr 2015 - 19:59

    c'est très jolie ^^
    avatar
    Kuroo
    FémininAge : 21Messages : 44

    le Ven 17 Avr 2015 - 20:01

    Merci
    avatar
    Célestine
    FémininAge : 20Messages : 51

    le Lun 4 Mai 2015 - 1:02

    Merci ! Very Happy
    avatar
    Chocolakato
    FémininAge : 28Messages : 796

    le Jeu 21 Mai 2015 - 22:49

    Merci :)



    avatar
    picka234
    Age : 53Messages : 440

    le Mer 10 Juin 2015 - 17:43

    tres beau merci



    avatar
    Flaura
    FémininAge : 15Messages : 152

    le Jeu 11 Juin 2015 - 20:21

    Merci !
    avatar
    rosebleudu10
    FémininAge : 28Messages : 189

    le Mar 28 Juil 2015 - 13:14

    merci
    avatar
    Liberty Grim
    FémininAge : 20Messages : 128

    le Sam 1 Aoû 2015 - 11:52

    Waw ! Merci beaucoup Very Happy
    avatar
    PitchiPitchiPitch
    FémininAge : 20Messages : 18

    le Mer 26 Aoû 2015 - 20:20

    merci du partage :)
    avatar
    Kelalin
    FémininAge : 26Messages : 1970

    le Mer 26 Aoû 2015 - 21:20

    Merci ! (; ̄Д ̄)
    avatar
    Oupsie
    FémininAge : 27Messages : 9

    le Sam 26 Sep 2015 - 19:53

    Merci =)
    avatar
    Sneakazuha
    FémininAge : 22Messages : 34

    le Mar 13 Oct 2015 - 9:40

    J'adore, merci ♥
    avatar
    Sneakazuha
    FémininAge : 22Messages : 34

    le Mar 13 Oct 2015 - 9:40

    J'adore, merci ♥
    avatar
    Féhéla
    FémininAge : 45Messages : 238

    le Ven 18 Déc 2015 - 18:37

    merci :)
    avatar
    £ternal_$unshine
    FémininAge : 25Messages : 69

    le Ven 1 Jan 2016 - 15:40

    Merci pour la page. Elle est très belle ! :)



    Ce Joli Kit a été créé par ma coupine Soihra ♥
    avatar
    Moro-PM
    FémininAge : 16Messages : 149

    le Jeu 21 Jan 2016 - 19:21

    Merci ! **
    Contenu sponsorisé


      La date/heure actuelle est Mer 14 Nov 2018 - 18:10