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 infernale

    Onyx
    Onyx
    FémininAge : 25Messages : 3289

    le 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



    One..
    One..
    MasculinAge : 21Messages : 54

    le Sam 30 Jan 2016 - 13:53

    Merci !
    Kilda
    Kilda
    FémininAge : 39Messages : 73

    le Mar 2 Fév 2016 - 21:54

    merci
    GuillaumeBETA
    GuillaumeBETA
    MasculinAge : 22Messages : 17

    le Mar 16 Fév 2016 - 19:52

    Merci !
    Gahia
    Gahia
    FémininAge : 31Messages : 50

    le Mar 1 Mar 2016 - 0:15

    Merci ^^
    .pinkrocks
    .pinkrocks
    FémininAge : 29Messages : 41

    le Mar 1 Mar 2016 - 12:40

    C'est superbe! En plein ce que nous cherchions! Merci beaucoup! :lovebomb:
    Thessia
    Thessia
    FémininAge : 30Messages : 75

    le Dim 6 Mar 2016 - 21:09

    Jolie



    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.
    Mattyew
    Mattyew
    MasculinAge : 25Messages : 90

    le Sam 19 Mar 2016 - 18:32

    Thank :)
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 51Messages : 167

    le Dim 20 Mar 2016 - 13:28

    Merci! curieux de voir
    Vetrox
    Vetrox
    MasculinAge : 19Messages : 37

    le Mar 22 Mar 2016 - 19:37

    Merci
    Nord
    Nord
    MasculinAge : 19Messages : 169

    le Sam 2 Avr 2016 - 0:01

    Merci pour le partage ! ^^
    Alpha Dow
    Alpha Dow
    FémininAge : 16Messages : 23

    le Dim 3 Avr 2016 - 19:33

    Merci !
    Arkaline
    Arkaline
    FémininAge : 28Messages : 193

    le Lun 11 Avr 2016 - 15:58

    Merci !



    Arkaline
    Kanu
    Kanu
    FémininAge : 29Messages : 62

    le Mar 12 Avr 2016 - 1:47

    Super, un grand merci ! Very Happy
    Lily Andrew
    Lily Andrew
    FémininAge : 15Messages : 17

    le Mar 12 Avr 2016 - 1:53

    Merci beaucoup !
    Eywa
    Eywa
    FémininAge : 34Messages : 14

    le Mar 12 Avr 2016 - 10:00

    Vraiment sympa cette PA , merci
    Kraken
    Kraken
    FémininAge : 26Messages : 137

    le Jeu 14 Avr 2016 - 1:33

    merci !
    Paradise
    Paradise
    FémininAge : 26Messages : 22

    le Mar 19 Avr 2016 - 4:33

    MAGNIFIQUE *-*
    Isyndra
    Isyndra
    FémininAge : 37Messages : 41

    le Lun 25 Avr 2016 - 14:22

    Merci beaucoup! :)
    BlackNight
    BlackNight
    MasculinAge : 31Messages : 90

    le Sam 30 Avr 2016 - 19:51

    Merci
    Aoko
    Aoko
    FémininAge : 25Messages : 38

    le Lun 2 Mai 2016 - 17:35

    Très beau merci! :)
    Lone wanderer
    Lone wanderer
    MasculinAge : 27Messages : 154

    le Mer 18 Mai 2016 - 21:35

    merci ! =)
    Evalla
    Evalla
    FémininAge : 26Messages : 61

    le Dim 29 Mai 2016 - 18:47

    merci
    Katty1993
    Katty1993
    FémininAge : 22Messages : 24

    le Lun 30 Mai 2016 - 9:57

    Merci beaucoup! :)
    The A.
    The A.
    FémininAge : 21Messages : 38

    le Ven 22 Juil 2016 - 11:28

    Merci !



    PA infernale - Page 6 Tumblr_mma46f4SJM1qjqvo3o1_500
    Jamais contente.
    Kanzaki
    Kanzaki
    FémininAge : 25Messages : 13

    le Mar 2 Aoû 2016 - 16:25

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Dim 25 Aoû 2019 - 20:44