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 : 3241

    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



    Laluna
    Laluna
    FémininAge : 24Messages : 74

    le Jeu 28 Mai 2015 - 2:55

    Mercii !
    charlie.
    charlie.
    FémininAge : 39Messages : 62

    le Jeu 28 Mai 2015 - 16:06

    merci
    Pollux
    Pollux
    FémininAge : 28Messages : 97

    le Sam 30 Mai 2015 - 16:39

    Merci
    darkhero246
    darkhero246
    MasculinAge : 26Messages : 179

    le Lun 1 Juin 2015 - 19:05

    Merci pour le tuto les amis Very Happy
    Heine
    Heine
    MasculinAge : 24Messages : 169

    le Lun 1 Juin 2015 - 19:18

    Merci !



    PA infernale - Page 4 110407104459204818
    pika-cerise
    pika-cerise
    FémininAge : 27Messages : 92

    le Mar 2 Juin 2015 - 20:05

    merci
    Kahlan
    Kahlan
    FémininAge : 32Messages : 371

    le Ven 5 Juin 2015 - 22:10

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

    le Sam 6 Juin 2015 - 0:32

    Merci :)
    Madras
    Madras
    FémininAge : 34Messages : 281

    le Sam 6 Juin 2015 - 7:59

    Merci
    Haniwa
    Haniwa
    FémininAge : 24Messages : 206

    le Sam 13 Juin 2015 - 21:32

    Merci
    Malice1329
    Malice1329
    FémininAge : 30Messages : 80

    le Mar 16 Juin 2015 - 19:14

    Merci de ce partage



    PA infernale - Page 4 Henry
    Dacina moe
    Dacina moe
    FémininAge : 40Messages : 171

    le Mar 16 Juin 2015 - 23:16

    Trop joli ^.^!
    Anonymous
    Invité

    le Jeu 18 Juin 2015 - 11:43

    Merci :)
    Nutop
    Nutop
    FémininAge : 16Messages : 254

    le Ven 19 Juin 2015 - 12:48

    Merci du partage !




    PA infernale - Page 4 Mini_597402Sceaufinal

    Malick
    Malick
    Age : 24Messages : 159

    le Ven 19 Juin 2015 - 22:22

    Merci



    PA infernale - Page 4 090302034044742442
    Kingdom.
    Kingdom.
    FémininAge : 19Messages : 54

    le Dim 21 Juin 2015 - 13:16

    Merci ! :3
    didicmy
    didicmy
    FémininAge : 28Messages : 69

    le Mar 28 Juil 2015 - 23:07

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

    le Mer 29 Juil 2015 - 19:05

    Merciii °°
    Djeina
    Djeina
    FémininAge : 22Messages : 233

    le Dim 16 Aoû 2015 - 4:54

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

    le Dim 16 Aoû 2015 - 11:25

    Merci du partage ♥
    Kelalin
    Kelalin
    FémininAge : 26Messages : 2059

    le Dim 16 Aoû 2015 - 22:54

    Merci beaucoup du partage ! (*^▽^*)
    Shaïka
    Shaïka
    FémininAge : 22Messages : 79

    le Lun 17 Aoû 2015 - 18:08

    Merci !
    Mme Layton
    Mme Layton
    FémininAge : 22Messages : 93

    le Mar 18 Aoû 2015 - 14:07

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

    le Jeu 27 Aoû 2015 - 23:46

    Vraiment superbe! Merci Very Happy
    Kitty Kat.
    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 Jeu 25 Avr 2019 - 22:19