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

    Partagez
    avatar
    Onyx
    FémininAge : 24Messages : 3132

    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



    avatar
    Laluna
    FémininAge : 24Messages : 74

    le Jeu 28 Mai 2015 - 2:55

    Mercii !
    avatar
    charlie.
    FémininAge : 38Messages : 62

    le Jeu 28 Mai 2015 - 16:06

    merci
    avatar
    Pollux
    FémininAge : 27Messages : 97

    le Sam 30 Mai 2015 - 16:39

    Merci
    avatar
    darkhero246
    MasculinAge : 26Messages : 179

    le Lun 1 Juin 2015 - 19:05

    Merci pour le tuto les amis Very Happy
    avatar
    Heine
    MasculinAge : 23Messages : 168

    le Lun 1 Juin 2015 - 19:18

    Merci !



    avatar
    pika-cerise
    FémininAge : 26Messages : 92

    le Mar 2 Juin 2015 - 20:05

    merci
    avatar
    Kahlan
    FémininAge : 31Messages : 371

    le Ven 5 Juin 2015 - 22:10

    Merci beaucoup =)
    avatar
    Brume Sauvage
    FémininAge : 25Messages : 35

    le Sam 6 Juin 2015 - 0:32

    Merci :)
    avatar
    Madras
    FémininAge : 33Messages : 279

    le Sam 6 Juin 2015 - 7:59

    Merci
    avatar
    Haniwa
    FémininAge : 23Messages : 206

    le Sam 13 Juin 2015 - 21:32

    Merci
    avatar
    Malice1329
    FémininAge : 30Messages : 79

    le Mar 16 Juin 2015 - 19:14

    Merci de ce partage



    avatar
    Dacina moe
    FémininAge : 40Messages : 171

    le Mar 16 Juin 2015 - 23:16

    Trop joli ^.^!
    avatar
    Invité

    le Jeu 18 Juin 2015 - 11:43

    Merci :)
    avatar
    Nutop
    FémininAge : 15Messages : 254

    le Ven 19 Juin 2015 - 12:48

    Merci du partage !






    avatar
    Malick
    Age : 24Messages : 159

    le Ven 19 Juin 2015 - 22:22

    Merci



    avatar
    Kingdom.
    FémininAge : 18Messages : 54

    le Dim 21 Juin 2015 - 13:16

    Merci ! :3
    avatar
    didicmy
    FémininAge : 27Messages : 69

    le Mar 28 Juil 2015 - 23:07

    Je sais pas pourquoi mais j'adore Very Happy Merci ^^
    Amélia
    FémininAge : 18Messages : 49

    le Mer 29 Juil 2015 - 19:05

    Merciii °°
    avatar
    Djeina
    FémininAge : 21Messages : 233

    le Dim 16 Aoû 2015 - 4:54

    J'adore. Merci pour le partage ^_^
    avatar
    petit lu
    FémininAge : 26Messages : 174

    le Dim 16 Aoû 2015 - 11:25

    Merci du partage ♥
    avatar
    Kelalin
    FémininAge : 25Messages : 1945

    le Dim 16 Aoû 2015 - 22:54

    Merci beaucoup du partage ! (*^▽^*)
    avatar
    Shaïka
    FémininAge : 21Messages : 76

    le Lun 17 Aoû 2015 - 18:08

    Merci !
    avatar
    Mme Layton
    FémininAge : 21Messages : 91

    le Mar 18 Aoû 2015 - 14:07

    Sympa, merci. :)
    avatar
    Hoz
    FémininAge : 28Messages : 21

    le Jeu 27 Aoû 2015 - 23:46

    Vraiment superbe! Merci Very Happy
    avatar
    Kitty Kat.
    FémininAge : 24Messages : 86

    le Sam 12 Sep 2015 - 17:26

    Je te l'empreinte ! Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Sam 18 Aoû 2018 - 16:06