PA infernale

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.

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 **************************************************/

À plus !