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 : -25%
PC Portable Gamer 16,1” HP Victus 16 – 16 ...
Voir le deal
749.99 €

    PA infernale

    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 22 Nov 2014 - 4:16

    Rappel du premier message :


    PA infernale


    Voici un petit LS d'une PA que j'ai fait pour la demande de Cruelly. D'ailleurs, il y a déjà un qeel dans le même style qui a été fait par halloween et que vous pouvez trouver à cet endroit.

    Effets spéciaux :
    Au survol du contexte, l'image glisse vers la droite.
    Au survol d'une image du staff, l'info du stattien apparaît.
    Au survol de l'event, l'image glisse vers la droite.
    Au survol d'une image d'un poste vacant, une infobulle avec le nom/lien du poste vacant apparait.

    Pour voir l'aperçu sans survol : cliquez ici.
    Pour voir l'aperçu au survol du contexte, de l'event, du premier staffien et du premier poste vacant : cliquez ici.

    Ce LS est en deux parties.
    • Tout d'abord, nous allons installer le HTML de la PA.
    • Puis, nous allons le mettre en forme à l'aide du CSS.


    Mettre un crédit vers Never-Utopia est obligatoire.

    Vos commentaires et remerciements sont toujours bienvenus ^^


    1. Corps de la PA (HTML)


    Nous allons commencer par aller dans l'espace de la page d'accueil pour y mettre la partie HTML.

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > PAGE D'ACCUEIL
    > > > > GÉNÉRALITÉS
    > > > > > CONTENU DU MESSAGE

    On y met le code suivant et on enregistre :
    Code:
    <div id="pa">
                                                                                                                        
       <div id="concept">
                                                                                                                           
          <div id="concept_text">
                                                                 Contexte. Contexte. Contexte. Contexte. Contexte. Contexte. Contexte. Contexte. Contexte. Contexte. Contexte. Contexte. Contexte. Contexte. Contexte. Contexte. Contexte. Contexte. Contexte. Contexte. Contexte. Contexte. Contexte. Contexte. Contexte. Contexte. Contexte.           
          </div>
                                                                    <img id="concept_img" alt="concept_img" src="http://img4.hostingpics.net/pics/626989concept.png" />                                                         
       </div>
                                                                                                                    
       <div id="staff">
                                                                                                                 
          <div class="staff_infobulles">
                                                             <img alt="staff1" src="http://img4.hostingpics.net/pics/716745staff.png" class="staff_img" />                                               
             <div class="staff_infobulle">
                                                                                                                       
                <div class="staff_info">
                                                                     Pseudo<br />Rang<br />Absence<br /><a target="_blank" href="#">Profil</a> - <a target="_blank" href="#">Messages Privés</a>                                                     
                </div>
                                                                                                                       
                <div class="staff_text">
                                                                     Texte staff 1. Texte staff 1. Texte staff 1. Texte staff 1. Texte staff 1. Texte staff 1. Texte staff 1. Texte staff 1. Texte staff 1. Texte staff 1. Texte staff 1. Texte staff 1. Texte staff 1. Texte staff 1.           
                </div>
                                                                                                                       
             </div>
                                                                                                          
          </div>
                                                                                                       
          <div class="staff_infobulles">
                                                             <img alt="staff2" src="http://img4.hostingpics.net/pics/716745staff.png" class="staff_img" />                                               
             <div class="staff_infobulle">
                                                                                                                       
                <div class="staff_info">
                                                                     Pseudo<br />Rang<br />Absence<br /><a target="_blank" href="#">Profil</a> - <a target="_blank" href="#">Messages Privés</a>                                                     
                </div>
                                                                                                                       
                <div class="staff_text">
                                                                     Texte staff 2. Texte staff 2. Texte staff 2. Texte staff 2. Texte staff 2. Texte staff 2. Texte staff 2. Texte staff 2. Texte staff 2. Texte staff 2. Texte staff 2. Texte staff 2. Texte staff 2. Texte staff 2.                                                     
                </div>
                                                                                                                       
             </div>
                                                                                                          
          </div>
                                                                                                       
          <div class="staff_infobulles">
                                                             <img alt="staff3" src="http://img4.hostingpics.net/pics/716745staff.png" class="staff_img" />                                               
             <div class="staff_infobulle">
                                                                                                                       
                <div class="staff_info">
                                                                     Pseudo<br />Rang<br />Absence<br /><a target="_blank" href="#">Profil</a> - <a target="_blank" href="#">Messages Privés</a>                                                     
                </div>
                                                                                                                       
                <div class="staff_text">
                                                                     Texte staff 3. Texte staff 3. Texte staff 3. Texte staff 3. Texte staff 3. Texte staff 3. Texte staff 3. Texte staff 3. Texte staff 3. Texte staff 3. Texte staff 3. Texte staff 3. Texte staff 3. Texte staff 3.                                                   
                </div>
                                                                                                                       
             </div>
                                                                                                          
          </div>
                                                                                                       
          <div class="staff_infobulles">
                                                             <img alt="staff4" src="http://img4.hostingpics.net/pics/716745staff.png" class="staff_img" />                                               
             <div class="staff_infobulle">
                                                                                                                       
                <div class="staff_info">
                                                                     Pseudo<br />Rang<br />Absence<br /><a target="_blank" href="#">Profil</a> - <a target="_blank" href="#">Messages Privés</a>                                                     
                </div>
                                                                                                                       
                <div class="staff_text">
                                                                     Texte staff 4. Texte staff 4. Texte staff 4. Texte staff 4. Texte staff 4. Texte staff 4. Texte staff 4. Texte staff 4. Texte staff 4. Texte staff 4. Texte staff 4. Texte staff 4. Texte staff 4. Texte staff 4.                                                     
                </div>
                                                                                                                       
             </div>
                                                                                                          
          </div>
                                                                                                                         
          <div id="mess_accueil">
                                                                   Message de bienvenue. Message de bienvenue. Message de bienvenue. Message de bienvenue. Message de bienvenue. Message de bienvenue. Message de bienvenue. Message de bienvenue. Message de bienvenue. Message de bienvenue. Message de bienvenue. Message de bienvenue.                                             
          </div>
                                                                                                                   
       </div>
                                                                                                      
       <div id="event">
                                                                                                                           
          <div id="event_text">
                           Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event. Event.           
          </div>
                                                                    <img id="event_img" alt="event_img" src="http://img4.hostingpics.net/pics/589540event.png" />                                                         
       </div>
                                                                                          
       <div id="navig_pa">
                                                   
          <div style="text-align: center;">
                 <strong>Liens utiles</strong>   
          </div><a href="#" target="_blank">Règlement</a><br /><a href="#" target="_blank">Contexte</a><br /><a href="#" target="_blank">Présentations</a><br /><a href="#" target="_blank">Postes vacants</a><br /><a href="#" target="_blank">Inventaires</a><br /><a href="#" target="_blank">Fiches de relations</a><br /><a href="#" target="_blank">Partenariat</a><br /><a href="#" target="_blank">Foire aux questions</a>       
       </div>
                                                                                
       <div id="top_sites">
                                            <strong>Top-sites</strong><br /><a href="/forum" target="_blank"><img src="http://img4.hostingpics.net/pics/913354tops.png" alt="top-sites" /></a><a href="/forum" target="_blank"><img src="http://img4.hostingpics.net/pics/913354tops.png" alt="top-sites" /></a><a href="/forum" target="_blank"><img src="http://img4.hostingpics.net/pics/913354tops.png" alt="top-sites" /></a><a href="/forum" target="_blank"><img src="http://img4.hostingpics.net/pics/913354tops.png" alt="top-sites" /></a>                           
       </div>
                                                                            
       <div id="credits">
                                                PA par Onyx de <a target="_blank" href="http://www.never-utopia.com/">Never-Utopia</a>                                   
       </div>
                                                                    
       <div style="clear: both;">
                                                                       
       </div>
                                                                      
       <div id="membres_mois">
                                          <img src="http://img4.hostingpics.net/pics/660289membre.png" alt="membre du mois" /><img src="http://img4.hostingpics.net/pics/660289membre.png" alt="membre du mois" />                               
          <div id="membres_mois_info">
                                             <strong>Membres du mois</strong><br /><br />Pseudo et Pseudo                               
          </div>
                                                                         
       </div>
                                                          
       <div id="partenaires">
                                    <strong>Top-Partenaires</strong><br /><br /><a href="#" target="_blank"><img src="http://img4.hostingpics.net/pics/460747partenaires.png" alt="partenaire" /></a><a href="#" target="_blank"><img src="http://img4.hostingpics.net/pics/460747partenaires.png" alt="partenaire" /></a><a href="#" target="_blank"><img src="http://img4.hostingpics.net/pics/460747partenaires.png" alt="partenaire" /></a><a href="#" target="_blank"><img src="http://img4.hostingpics.net/pics/460747partenaires.png" alt="partenaire" /></a><a href="#" target="_blank"><img src="http://img4.hostingpics.net/pics/460747partenaires.png" alt="partenaire" /></a><a href="#" target="_blank"><img src="http://img4.hostingpics.net/pics/460747partenaires.png" alt="partenaire" /></a>               
       </div>
                                                      
       <div id="pvs">
                                                                     
          <div class="pvs_infobulles">
                                   <img src="http://img4.hostingpics.net/pics/87665586pv.png" alt="pv_img" /><span class="pv_infobulle"><a href="#" target="_blank">Nom du PV 1</a></span>                   
          </div>
                                                     
          <div class="pvs_infobulles">
                                   <img src="http://img4.hostingpics.net/pics/87665586pv.png" alt="pv_img" /><span class="pv_infobulle"><a href="#" target="_blank">Nom du PV 2</a></span>                   
          </div>
                                                     
          <div class="pvs_infobulles">
                                   <img src="http://img4.hostingpics.net/pics/87665586pv.png" alt="pv_img" /><span class="pv_infobulle"><a href="#" target="_blank">Nom du PV 3</a></span>                   
          </div>
                                                     
          <div class="pvs_infobulles">
                                   <img src="http://img4.hostingpics.net/pics/87665586pv.png" alt="pv_img" /><span class="pv_infobulle"><a href="#" target="_blank">Nom du PV 4</a></span>                   
          </div>
                                                     
          <div class="pvs_infobulles">
                                   <img src="http://img4.hostingpics.net/pics/87665586pv.png" alt="pv_img" /><span class="pv_infobulle"><a href="#" target="_blank">Nom du PV 5</a></span>                   
          </div>
                                                     
          <div class="pvs_infobulles">
                                   <img src="http://img4.hostingpics.net/pics/87665586pv.png" alt="pv_img" /><span class="pv_infobulle"><a href="#" target="_blank">Nom du PV 6</a></span>                     
          </div>
                                                       
       </div>
                                                                    
       <div style="clear: both;">
                                                                       
       </div>
    </div>



    2. Mise en forme (CSS)


    Si vous regardez votre PA, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme notre PA à l'aide du CSS.

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > IMAGES ET COULEURS
    > > > > COULEURS
    > > > > > FEUILLE DE STYLE CSS

    Puis, nous allons ajouter le CSS suivant :
    Code:
        /************************************************** Début Page d'accueil **************************************************/


        /*Bloc de la page d'accueil*/
        #pa {
          position: relative;
          width: 776px;
          height: 376px;
          margin: auto;
          background-image: url('http://i59.servimg.com/u/f59/17/10/65/34/sans_t16.jpg');
          text-align: left;
          padding-top: 24px;
          padding-left: 4px;
          color: #efefef;
          font-family: verdana;
          font-size: 10px;
        }


        /*Bloc du concept*/
        #concept {
          float: left;
          position: relative;
          width: 175px;
          height: 222px;
          overflow: hidden;
        }
        /*Texte du concept*/
        #concept_text {
          width: 163px;
          height: 210px;
          margin: 1px;
          padding: 5px;
          text-align: justify;
          overflow: auto;
        }
        /*Image du concept*/
        #concept_img {
          position: absolute;
          top: 0px;
          left: 0px;
          width: 175px;
          height: 222px;
          transition: 0.5s;
          -webkit-transition: 0.5s;
        }
        /*Glissement de l'image du concept*/
        #concept:hover #concept_img {
          left: 200px;
        }


        /*Bloc du staff*/
        #staff {
          float: left;
          position: relative;
          width: 313px;
          height: 133px;
          margin-left: 12px;
        }
        /*Bloc de chaque staffien*/
        .staff_infobulles {
          float: left;
          width: 67px;
          height: 50px;
          margin-top: 6px;
          margin-left: 9px;
        }
        /*Images du staff*/
        .staff_img {
          width: 67px;
          height: 50px;
        }
        /*Infobulles du staff*/
        .staff_infobulle {
          position: absolute;
          bottom: 11px;
          left: 9px;
          width: 294px;
          height: 66px;
          transform: scale(0);
          -webkit-transform: scale(0);
          -ms-transform: scale(0);
          transition: 0.5s;
          -webkit-transition: 0.5s;
        }
        /*Apparition de l'infobulle du staff*/
        .staff_infobulles:hover .staff_infobulle {
          transform: scale(1);
          -webkit-transform: scale(1);
          -ms-transform: scale(1);
        }
        /*Information du staff*/
        .staff_info {
          float: left;
          width: 130px;
          height: 51px;
          margin-top: 7px;
          padding: 4px;
        }
        /*Petit texte du staff*/
        .staff_text {
          float: left;
          width: 132px;
          height: 39px;
          margin-top: 12px;
          margin-left: 8px;
          padding: 4px;
          text-align: justify;
          border: 1px solid #353535;
          overflow: auto;
        }
        /*Message de bienvenue du staff*/
        #mess_accueil {
          position: absolute;
          bottom: 12px;
          left: 10px;
          width: 285px;
          height: 49px;
          padding: 4px;
          text-align: justify;
          overflow: auto;
          transform: scale(1);
          -webkit-transform: scale(1);
          -ms-transform: scale(1);
          transition: 0.5s;
          -webkit-transition: 0.5s;
        }
        /*Disparition du message du staff*/
        .staff_infobulles:hover ~ #mess_accueil {
          transform: scale(0);
          -webkit-transform: scale(0);
          -ms-transform: scale(0);
        }


        /*Bloc de l'event*/
        #event {
          float: left;
          position: relative;
          width: 312px;
          height: 59px;
          margin-top: 28px;
          margin-left: 14px;
          overflow: hidden;
        }
        /*Texte de l'event*/
        #event_text {
          width: 300px;
          height: 47px;
          padding: 5px;
          margin: 1px;
          text-align: justify;
          overflow: auto;
        }
        /*Image de l'event*/
        #event_img {
          position: absolute;
          top: 0px;
          left: 0px;
          width: 312px;
          height: 59px;
          transition: 0.5s;
          -webkit-transition: 0.5s;
        }
        /*Glissement de l'image de l'event*/
        #event:hover #event_img {
          left: 337px;
        }

        /*Bloc de la navigation*/
        #navig_pa {
          float: left;
          width: 120px;
          height: 212px;
          margin-top: -132px;
          margin-left: 14px;
          padding: 5px;
          text-align: left;
          font-size: 10px;
        }
        #navig_pa a {
          display: inline-block;
          margin-top: 12px;
        }


        /*Bloc des top-sites*/
        #top_sites {
          float: left;
          width: 103px;
          height: 83px;
          margin-top: -130px;
          margin-left: 11px;
          padding: 5px;
          text-align: center;
        }
        /*Images des top-sites*/
        #top_sites img {
          width: 45px;
          height: 30px;
          margin: 3px;
          margin-top: 6px;
          margin-bottom: 0px;
          opacity: 0.8;
        }
        /*Images des top-sites survolés*/
        #top_sites img:hover {
          opacity: 1;
        }


        /*Bloc des crédits*/
        #credits {
          float: left;
          width: 103px;
          height: 104px;
          margin-top: -27px;
          margin-left: 12px;
          padding: 5px;
        }


        /*Bloc des membres du mois*/
        #membres_mois {
          float: left;
          width: 175px;
          height: 113px;
          margin-top: 23px;
          margin-left: -1px;
          text-align: center;
        }
        /*Images des membres du mois*/
        #membres_mois img {
          width: 67px;
          height: 50px;
          margin: 8px;
        }
        /*Infos des membres du mois*/
        #membres_mois_info {
          width: 142px;
          height: 36px;
          margin: auto;
          margin-top: -2px;
          padding: 4px;
          text-align: center;
          background-color: rgba(100,100,100,0.5);
        }


        /*Bloc des partenaires*/
        #partenaires {
          float: left;
          width: 301px;
          height: 102px;
          margin-top: 23px;
          margin-left: 15px;
          padding: 5px;
          text-align: center;
        }
        /*Images des partenaires*/
        #partenaires img {
          width: 88px;
          height: 31px;
          margin: 3px;
          opacity: 0.8;
        }
        /*Images des partenaires survolés*/
        #partenaires img:hover {
          opacity: 1;
        }


        /*Bloc des pvs*/
        #pvs {
          float: left;
          width: 246px;
          height: 103px;
          margin-top: 22px;
          margin-left: 14px;
          padding: 5px;
          padding-top: 3px;
          text-align: center;
        }
        /*Bloc de chaque pv*/
        .pvs_infobulles {
          position: relative;
          display: inline-block;
          width: 67px;
          height: 50px;
          margin: 1px;
          margin-left: 1px;
          margin-right: 2px;
        }
        /*Images des pvs*/
        #pvs img {
          width: 67px;
          height: 50px;
        }
        /*Infobulles des pvs*/
        .pv_infobulle {
          position: absolute;
          z-index: 1;
          bottom: 50px;
          left: -10px;
          width: 79px;
          height: auto;
          padding: 3px;
          background-color: #303030;
          border-radius: 3px;
          box-shadow: 0px 0px 5px 2px #000000;
          transform: scale(0);
          -webkit-transform: scale(0);
          -ms-transform: scale(0);
          transition: 0.2s;
          -webkit-transition: 0.2s;
        }
        /*Apparition de l'infobulle des pvs*/
        .pvs_infobulles:hover .pv_infobulle {
          transform: scale(1);
          -webkit-transform: scale(1);
          -ms-transform: scale(1);
        }

        /************************************************** Fin Page d'accueil **************************************************/

    Si vous avez des problèmes avec ce LS, venez poster ici.


    À plus !


    Dernière édition par Onyx le Mer 30 Mai 2018 - 0:43, édité 1 fois



    Le Dévoreur de temps
    Le Dévoreur de temps
    MasculinAge : 44Messages : 92

    Sam 14 Mar 2015 - 15:16

    Merci beaucoup pour ce beau panneau d'accueil !
    Pooni
    Pooni
    FémininAge : 26Messages : 39

    Sam 14 Mar 2015 - 15:20

    Très jolie en plus d'être toute simple o/
    Merci à toi !
    Neymar
    Neymar
    MasculinAge : 26Messages : 139

    Mar 17 Mar 2015 - 19:38

    J'aime trop o/
    Océ
    Océ
    FémininAge : 50Messages : 364

    Mer 18 Mar 2015 - 10:50

    Merci

    Satyrix
    Satyrix
    MasculinAge : 26Messages : 18

    Lun 23 Mar 2015 - 15:22

    swagg a écrit:merci, c'est vraiment très bien fait :)
    TheDrakLord
    TheDrakLord
    MasculinAge : 28Messages : 61

    Lun 23 Mar 2015 - 19:01

    Merci



    PA infernale - Page 3 Tumblr_lungm7eJ4o1qbzgd7o1_r1_500
    Isiiis
    Isiiis
    FémininAge : 31Messages : 39

    Lun 23 Mar 2015 - 19:05

    C'est vraiment beau ♥
    Merci du partage ! Very Happy
    Necko
    Necko
    MasculinAge : 27Messages : 29

    Dim 29 Mar 2015 - 5:40

    Merci
    Miku
    Miku
    MasculinAge : 32Messages : 70

    Lun 6 Avr 2015 - 18:03

    Je suis fan de ta manière de coder, encore une fois c'est juste parfait. Un grand merci !
    Saphire
    Saphire
    FémininAge : 27Messages : 146

    Jeu 9 Avr 2015 - 18:37

    merci !!
    Whisper
    Whisper
    FémininAge : 27Messages : 34

    Ven 10 Avr 2015 - 18:26

    Thank you very much ! Very Happy
    Lyka Siuka
    Lyka Siuka
    FémininAge : 25Messages : 55

    Sam 11 Avr 2015 - 14:15

    Thanks ♥



    PA infernale - Page 3 B5-lclk2F9NupfodhzH2vMY5LFc
    Anonymous
    Invité

    Sam 18 Avr 2015 - 10:08

    Merci du partage !
    Mordiern
    Mordiern
    FémininAge : 47Messages : 285

    Sam 18 Avr 2015 - 10:59

    J'aime énormément cette PA ^^

    Merci du partage :)
    Tchii
    Tchii
    FémininAge : 38Messages : 285

    Ven 24 Avr 2015 - 22:33

    Coucou!
    Merci pour ce petit code.
    A trés vite!
    Tchii.
    pimslady
    pimslady
    FémininAge : 35Messages : 71

    Sam 25 Avr 2015 - 2:28

    Merci! Décidément, je suis fan de tes codes!
    Pikabouh
    Pikabouh
    FémininAge : 22Messages : 123

    Sam 25 Avr 2015 - 13:05

    Merci ^^
    Samiki
    Samiki
    FémininAge : 26Messages : 84

    Dim 26 Avr 2015 - 18:13

    merci



    PA infernale - Page 3 Lbxa
    Dakeris RPG ♦ Un monde nouveau régi par la peur
    Le forum ouvre ses portes, nous vous attendons nombreux !

    avatar
    Hop80
    MasculinAge : 35Messages : 138

    Ven 8 Mai 2015 - 0:34

    merci
    CraWox
    CraWox
    MasculinAge : 26Messages : 22

    Mer 13 Mai 2015 - 18:23

    Merci
    Carlotta Besascar
    Carlotta Besascar
    FémininAge : 24Messages : 26

    Dim 17 Mai 2015 - 16:47

    Je prend merci :) !
    Chocolakato
    Chocolakato
    FémininAge : 34Messages : 837

    Jeu 21 Mai 2015 - 23:05

    Merci !



    Tsumei
    Tsumei
    MasculinAge : 34Messages : 116

    Ven 22 Mai 2015 - 15:26

    Merci !!
    Screen
    Screen
    FémininAge : 32Messages : 92

    Ven 22 Mai 2015 - 19:23

    Merciii >v<
    Misery Mind™
    Misery Mind™
    FémininAge : 33Messages : 153

    Ven 22 Mai 2015 - 22:26

    merci !



    Contenu sponsorisé


      La date/heure actuelle est Mar 5 Nov 2024 - 16:41