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 à ne pas rater :
LEGO® 10300 – La machine à remonter le temps Retour vers le futur ...
134.99 €
Voir le deal

    PA infernale

    Onyx
    Onyx
    FémininAge : 31Messages : 3350

    Sam 22 Nov 2014 - 4:16


    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



    Anonymous
    Invité

    Sam 22 Nov 2014 - 19:24

    Pouet !

    Ai-je vraiment besoin de faire un commentaire ? Razz

    Merci beaucoup Onyx Wink
    Anonymous
    Invité

    Lun 24 Nov 2014 - 9:57

    merci, c'est vraiment très bien fait :)
    Avallon
    Avallon
    FémininAge : 32Messages : 48

    Lun 24 Nov 2014 - 11:17

    Merci :)
    Hayate747
    Hayate747
    MasculinAge : 35Messages : 196

    Mer 26 Nov 2014 - 19:06

    Joli ! Merci Wink
    Dark Fairy
    Dark Fairy
    FémininAge : 27Messages : 244

    Ven 28 Nov 2014 - 19:12

    Merci elle est super belle!
    Kau
    Kau
    FémininAge : 22Messages : 148

    Sam 29 Nov 2014 - 2:20

    Merci !
    G U E R L A I N
    G U E R L A I N
    FémininAge : 33Messages : 192

    Dim 30 Nov 2014 - 19:14

    merci



    PA infernale 191114colorfulwallandsexygirlfacebookcovero1
    Lisou
    Lisou
    FémininAge : 24Messages : 351

    Mer 3 Déc 2014 - 16:02

    Merci Very Happy
    plushmasters
    plushmasters
    FémininAge : 32Messages : 71

    Mer 3 Déc 2014 - 22:14

    sublime
    smily
    smily
    FémininAge : 25Messages : 66

    Mer 10 Déc 2014 - 15:14

    MErci *^* !
    Carmina
    Carmina
    FémininAge : 38Messages : 506

    Ven 12 Déc 2014 - 12:28

    Merci!
    GreenGage
    GreenGage
    FémininAge : 31Messages : 73

    Dim 14 Déc 2014 - 0:23

    Hou, bien ! Merci beaucoup *^*
    SpicAsh
    SpicAsh
    FémininAge : 28Messages : 176

    Dim 14 Déc 2014 - 22:35

    Merci !
    Likilou
    Likilou
    MasculinAge : 31Messages : 309

    Mar 16 Déc 2014 - 19:33

    Merci



    PA infernale 707828SignArthur2
    Arisu
    Arisu
    FémininAge : 36Messages : 119

    Mer 17 Déc 2014 - 1:22

    Merci !
    Kirito
    Kirito
    MasculinAge : 28Messages : 209

    Mer 17 Déc 2014 - 18:00

    merci
    Banpaia
    Banpaia
    FémininAge : 27Messages : 130

    Jeu 18 Déc 2014 - 19:10

    Merci beaucoup !
    Pein94
    Pein94
    Age : 31Messages : 59

    Dim 21 Déc 2014 - 21:15

    merci Very Happy
    PrincesseÔ
    PrincesseÔ
    FémininAge : 27Messages : 220

    Ven 26 Déc 2014 - 15:40

    Merci! ^^
    Saya Shirayuki
    Saya Shirayuki
    FémininAge : 32Messages : 153

    Ven 26 Déc 2014 - 19:27

    Merci beaucoup, c'est formidable^^
    Liberty Grim
    Liberty Grim
    FémininAge : 26Messages : 128

    Ven 26 Déc 2014 - 20:18

    Classe ! Merci :3
    Lyu
    Lyu
    FémininAge : 27Messages : 12

    Ven 26 Déc 2014 - 21:06

    Merci infiniment, je ne sais pas comment vous faites ça.. x)
    Nathouille
    Nathouille
    FémininAge : 33Messages : 70

    Mar 30 Déc 2014 - 13:01

    Vais essayer, merci !
    Nevr0z
    Nevr0z
    FémininAge : 36Messages : 74

    Mar 30 Déc 2014 - 20:06

    Merci :)
    Contenu sponsorisé


      La date/heure actuelle est Lun 2 Déc 2024 - 11:47