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 du moment : -40%
Tefal Ingenio Emotion – Batterie de cuisine 10 ...
Voir le deal
59.99 €

    [PA] (Nemalus - Onyx) PA plutôt simple pour Aes

    Nyan-cat
    Nyan-cat
    FémininAge : 25Messages : 326

    Ven 16 Jan 2015 - 14:58

    Rappel du premier message :

    Ma demande



    Coucou c'est nyan-cat... Oui, bon ok, je sais coder, mais en fait j'ai une grosse flemme pour faire une Pa pour mon forum vous voyez, et j'ai beaucoup de chose à gérer déjà sur la construction, donc je m'en remets à vous ♥. Merci à celui qui prendra la commande =) !

    Schéma(s) et Eléments
    Schémas : Globalement ça doit être sous cette forme ci => Schéma Mais en un peu plus aligné, si vous voyez où je veux en venir.

    Tailles des éléments : Les proportions sur le schéma sont très approximatives, mais globalement c'est la forme que cela doit avoir. Pour un peu d'aide, la Pa ne doit pas faire plus de 800/820px de large. Donc je dirais que le bloc CONTEXTE doit faire 380px, et le bloc SLIDESHOW de même. Pour ce qui est des images du staff, c'est 320*75 et 100*100. Après pour le reste si c'est aligné, et dans des proportions harmonieuses je vous laisse faire. Pour les élèments vert c'est 60*100, c'est les images pour les prédéfinis.

    Effets voulus : Il y a déjà des indications sur le schéma, mais pour ce qui est moins explicite ; Pour le STAFF, si possible un voile apparait sur l'image où on peut noter la fonction, le pseudo et la disponibilité. Pour les LIENS : une transition du clair vers le sombre (cf lien 5 du haut ). Pour les PREDEFINIS un voile comme pour le staff où l'on peut écrire la catégorie du prédéf, soit : Hors-la-loi ; Gouvernement ; Guilde ; Créature ; Civil.


    Ressources
    Les couleurs :
    FOND : #E5B994
    LIEN CLAIR : #80696C
    LIEN FONCE : #3E2428
    TYPO LIEN : #BC7349 Dosis
    FOND BLOC : #EECFB7


    Autres précisions ?
    C'est tout, si vous avez des questions, je suis ouverte ♥ : Encore merci !


    Dernière édition par Nyan-cat le Lun 23 Mar 2015 - 19:22, édité 2 fois



    [PA] (Nemalus - Onyx) PA plutôt simple pour Aes - Page 2 Nyan_cat_in_portals_by_ds_dna-d56j8yb
    Nyan-cat
    Nyan-cat
    FémininAge : 25Messages : 326

    Sam 14 Mar 2015 - 13:01

    Ok c'est parfait ♥ Je t'aime beaucoup fort ♥ !! Ça va être la perfection *w*



    [PA] (Nemalus - Onyx) PA plutôt simple pour Aes - Page 2 Nyan_cat_in_portals_by_ds_dna-d56j8yb
    Nemalus
    Nemalus
    FémininAge : 26Messages : 358

    Sam 14 Mar 2015 - 13:37

    Au survol des icônes du staff tu as ceci > https://2img.net/r/hpimg11/pics/672385patest4.jpg
    Les liens de droite ont complètement bugués je suis en train d'arranger ça ^^
    Et j'aurai bientôt terminé /o/

    Edit : je termine plus tard là je suis prise d'une flemme intense xD
    Nyan-cat
    Nyan-cat
    FémininAge : 25Messages : 326

    Sam 14 Mar 2015 - 14:06

    Pas de soucis, c'est super !
    Prend ton temps ♥ !



    [PA] (Nemalus - Onyx) PA plutôt simple pour Aes - Page 2 Nyan_cat_in_portals_by_ds_dna-d56j8yb
    Nemalus
    Nemalus
    FémininAge : 26Messages : 358

    Lun 16 Mar 2015 - 8:11

    Coucou c'est de nouveau moi Very Happy
    J'entre en pleine période de révisions intenses et donc je n'ai plus trop le temps de m'occuper de ta commande x:
    Néanmoins je te laisse le code que j'ai fait (comme tu sais coder je pense que ça devrait aller).
    Je m'excuse de ce petit désistement de dernière minute T.T
    Voici les codes :




    Peut être que je reviendrais dessus si je trouve du temps mais je ne te garantis rien.
    Ensuite je ne demande pas à être crédité sur la PA (mais seulement dans ton sujet spécial crédit) Voilou
    Bisous et caramel ♥
    Nyan-cat
    Nyan-cat
    FémininAge : 25Messages : 326

    Lun 16 Mar 2015 - 17:58

    Coucou miss !
    C'est adorable de me laisser tes codes ♥ ! Je vais jeter un coup d'oeil de suite.
    Je te souhaite bonne chance pour tes révisions ♥
    Je vois au niveau de la dispositon ça par un peu en live x)
    http://testnyancat1.forumactif.org/



    [PA] (Nemalus - Onyx) PA plutôt simple pour Aes - Page 2 Nyan_cat_in_portals_by_ds_dna-d56j8yb
    Nemalus
    Nemalus
    FémininAge : 26Messages : 358

    Lun 16 Mar 2015 - 20:39

    Coucou Wink
    Oulah oui effectivement o_o
    Si j'ai le temps de m'octroyer une pause je reviendrais sur ce code x: je suis désolée de te laisser du boulot comme ça T.T
    Nyan-cat
    Nyan-cat
    FémininAge : 25Messages : 326

    Lun 16 Mar 2015 - 21:04

    Pas de soucis. Je vais voir ce que je peux faire. De toute façon la PA ne sera en place qu'à la prochaine MàJ en Avril. :3



    [PA] (Nemalus - Onyx) PA plutôt simple pour Aes - Page 2 Nyan_cat_in_portals_by_ds_dna-d56j8yb
    Nemalus
    Nemalus
    FémininAge : 26Messages : 358

    Mar 17 Mar 2015 - 16:08

    D'accord tiens moi au courant Wink
    Nyan-cat
    Nyan-cat
    FémininAge : 25Messages : 326

    Dim 22 Mar 2015 - 8:13

    Coucou, alors j'ai essayé de bidouiller et tout, mais rien à faire ça fait toujours n'importe quoi Sad ....
    Donc je laisse la commande ouverte, en espérant qu'une âme charitable finisse :3



    [PA] (Nemalus - Onyx) PA plutôt simple pour Aes - Page 2 Nyan_cat_in_portals_by_ds_dna-d56j8yb
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 22 Mar 2015 - 19:39

    Salut!

    J'ai repris le codage de Nemalus et corrigé les erreurs qu'il y avait. Est-ce que c'est mieux comme ça?

    PA :
    Code:
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Dosis" />                                                           
    <div class="fond_PA">
                                                                                
       <div class="nema">
                                                        <a href="#">Lien 1</a>                                     
       </div>
                                                                                
       <div class="nema">
                                                        <a href="#">Lien 2</a>                                     
       </div>
                                                                                
       <div class="nema">
                                                        <a href="#">Lien 3</a>                                     
       </div>
                                                                                
       <div class="nema">
                                                        <a href="#">Lien 4</a>                                     
       </div>
                                                                                
       <div class="nema">
                                                        <a href="#">Lien 5</a>                                     
       </div><br />    <br />    <br />                                     
       <table cellpadding="0" cellspacing="0">
                                                                                             
          <tbody>
                                                                                                          
             <tr>
                                                                                                                       
                <td>
                                                                                                                
                   <div class="contexte_PA">
                                                                                                Lorem ipsum dolor sit amet, consectetur adipiscing                        elit. Sed vel congue est, et pharetra augue. Praesent                        fermentum vulputate elementum. Ut vehicula gravida                        bibendum. Pellentesque pretium ante purus, non aliquam                        urna posuere sit amet. Suspendisse potenti. Suspendisse                        tortor dolor, viverra sed enim vitae, vulputate ornare                        lectus. Aenean euismod nibh nec urna pretium                        consectetur. <a href="#">lire plus</a>                                                                 
                   </div>
                                                                                                                              
                </td>
                                                                                                                       
                <td>
                                                                                                                                    
                   <!--                                                                                                                                                                                Slideshow horizontal                                                                                                                                                                                -->                                                                 
                   <div class="slideshow" id="slideshow">
                                                                                                                                                 
                      <div id="slideshow-container">
                                                                                                                                                              
                         <div class="slide">
                                                                                                                    <a class="postlink" href="#" rel="nofollow" target="_blank"><img src="http://placehold.it/380x145" /></a>                                                                               
                         </div>
                                                                                                                                                              
                         <div class="slide">
                                                                                                                    <a class="postlink" href="#" rel="nofollow" target="_blank"><img src="http://img11.hostingpics.net/pics/408137guilde.png" /></a>                                                                               
                         </div>
                                                                                                                                                              
                         <div class="slide">
                                                                                                                    <a class="postlink" href="#" rel="nofollow" target="_blank"><img src="http://placehold.it/380x145" /></a>                                                                               
                         </div>
                                                                                                                                                        
                      </div>
                                                                                                                                           
                   </div>
                                                                                                                              
                </td>
                                                                                                                 
             </tr>
                                                                                                    
          </tbody>
                                                                                       
       </table>
                                                                                
       <table cellspacing="0" cellpadding="0">
                                                                                             
          <tbody>
                                                                                                          
             <tr>
                                                                                                                       
                <td valign="top" style="width: 320px;" align="center">
                                                                                       <span class="nema_title">Staff</span>                                             
                   <div style="width: 320px; height: 75px; overflow: hidden; background-image:url(http://placehold.it/320x75); margin-bottom: 8px;">
                                                                                                                                             
                      <div class="stafef">
                                                                                                                                                              
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                Nom Prénom<br />                                <a href="#"><span style="color: rgb(213, 199, 180);">Contact</span></a>                                - <a href="#"><span style="color: rgb(213, 199, 180);">Profil</span></a><br />                                Poste occupé                                                                               
                         </div>
                                                                                                                                                        
                      </div>
                                                                                                                                           
                   </div>
                                                                                                          
                   <div style="width: 320px; height: 75px; overflow: hidden; background-image:url(http://placehold.it/320x75); margin-bottom: 8px;">
                                                                                                                                             
                      <div class="stafef">
                                                                                                                                                              
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                Nom Prénom<br />                                <a href="#"><span style="color: rgb(213, 199, 180);">Contact</span></a>                                - <a href="#"><span style="color: rgb(213, 199, 180);">Profil</span></a><br />                                Poste occupé                                                                               
                         </div>
                                                                                                                                                        
                      </div>
                                                                                                                                           
                   </div>
                                                                                                          
                   <div style="width: 100px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/100x100); margin-right: 5px; display: inline-block;">
                                                                                                                                             
                      <div class="stafefico" style="display: inline-block;">
                                                                                                                                                              
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                Nom Prénom<br />                                <a href="#"><span style="color: rgb(213, 199, 180);">Contact</span></a>                                - <a href="#"><span style="color: rgb(213, 199, 180);">Profil</span></a><br />                                Poste occupé                                                                               
                         </div>
                                                                                                                                                        
                      </div>
                                                                                                                                           
                   </div>
                                                                                                                              
                   <div style="width: 100px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/100x100); margin-right: 5px; display: inline-block;">
                                                                                                                                             
                      <div class="stafefico" style="display: inline-block;">
                                                                                                                                                              
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                Nom Prénom<br />                                <a href="#"><span style="color: rgb(213, 199, 180);">Contact</span></a>                                - <a href="#"><span style="color: rgb(213, 199, 180);">Profil</span></a><br />                                Poste occupé                                                                               
                         </div>
                                                                                                                                                        
                      </div>
                                                                                                                                           
                   </div>
                                                                                                                                    
                   <div style="width: 100px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/100x100); margin: 0px; display: inline-block;">
                                                                                                                                             
                      <div class="stafefico" style="display: inline-block;">
                                                                                                                                                              
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                Nom Prénom<br />                                <a href="#"><span style="color: rgb(213, 199, 180);">Contact</span></a>                                - <a href="#"><span style="color: rgb(213, 199, 180);">Profil</span></a><br />                                Poste occupé                                                                               
                         </div>
                                                                                                                                                        
                      </div>
                                                                                                                                           
                   </div>
                                                                                                
                </td>
                                                                                                                       
                <td valign="top" style="padding-left: 10px; padding-top: 10px; width: 180px;">
                                                                                                                                    
                   <div style="background: #EECFB7; color :#BC7349; width:150px; height: 270px; overflow: auto; text-align: justify; padding: 15px;">
                                                                                                                                             
                      <div style="text-align: justify">
                                                                                                         Lorem ipsum dolor sit amet, consectetur adipiscing                            elit. Sed vel congue est, et pharetra augue.                            Praesent fermentum vulputate elementum. Ut vehicula                            gravida bibendum. Pellentesque pretium ante purus,                            non aliquam urna posuere sit amet. Suspendisse                            potenti. Suspendisse tortor dolor, viverra sed enim                            vitae, vulputate ornare lectus. Aenean euismod nibh                            nec urna pretium consectetur.                                                                         
                      </div>
                                                                                                                                           
                   </div>
                                                                                                                              
                </td>
                                                                                                                       
                <td valign="top" style="padding-top: 10px; padding-left: 10px; width: 266px;" align="center">
                                                                                             <a href="#" class="nema_2">Lien 1</a>                                          <a href="#" class="nema_2">Lien 2</a>                                                                                                                            <a class="nema_2" href="#">Lien 3</a>                                                                                                                            <a class="nema_2" href="#">Lien 4</a>      <a class="nema_2" href="#">Lien 5</a>    <a class="nema_2" href="#">Lien 6</a>                                                                                                                                                                  <a style="margin-bottom: 15px;" class="nema_2" href="#">Lien 7</a>               
                   <div style="width: 60px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/60x100); margin-right: 4px; display: inline-block;">
                                                                                                                                             
                      <div class="predef" style="display: inline-block;">
                                                                                                                                                              
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                <a href="#">Nom Prénom</a>  <br />  <br />                              <span style="color: rgb(213, 199, 180);">Hors-la-loi</span>                                     
                         </div>
                                                                                                                                                        
                      </div>
                                                                                                                                           
                   </div>
                                      
                   <div style="width: 60px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/60x100); margin-right: 4px; display: inline-block;">
                                                                                                                                             
                      <div class="predef" style="display: inline-block;">
                                                                                                                                                              
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                <a href="#">Nom Prénom</a>  <br /><br />                                <span style="color: rgb(213, 199, 180);">Hors-la-loi</span>                                     
                         </div>
                                                                                                                                                        
                      </div>
                                                                                                                                           
                   </div>
                          
                   <div style="width: 60px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/60x100); margin-right: 4px; display: inline-block;">
                                                                                                                                             
                      <div class="predef" style="display: inline-block;">
                                                                                                                                                              
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                <a href="#">Nom Prénom</a>  <br />  <br />                            <span style="color: rgb(213, 199, 180);">Hors-la-loi</span>                                     
                         </div>
                                                                                                                                                        
                      </div>
                                                                                                                                           
                   </div>
                          
                   <div style="width: 60px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/60x100); display: inline-block;">
                                                                                                                                             
                      <div class="predef" style="display: inline-block;">
                                                                                                                                                              
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                <a href="#">Nom Prénom</a>  <br />  <br />                            <span style="color: rgb(213, 199, 180);">Hors-la-loi</span>                                     
                         </div>
                                                                                                                                                        
                      </div>
                                                                                                                                           
                   </div>
                                                                  
                </td>
                                                                                                                 
             </tr>
                                                                                                    
          </tbody>
                                                                                       
       </table>
    </div>

    CSS :
    Code:
    /* --------------------------------- PA --------------------------------- */
    /*SLIDESHOW TEST*/
    .slideshow,.slide {
        width:380px;
        height:145px;
    }

    .slideshow {
        margin:auto;
        overflow:hidden;
    }

    .slideshow div {
        position:relative;
        top:0;
        left:0;
    }

    .slide {
        margin: 0;
        overflow:auto;
        display:inline-block;
        vertical-align:top;
        text-align:center;
        color:#fff;
    }

    .slide p {
        margin:auto;
        text-align:justify
    }

    /* Fond de la PA */
    .fond_PA {
        padding: 10px;
        background-color: #E5B994;
        width: 800px;
        position: relative;
    }

    /* Contexte */
    .contexte_PA {
        margin-right: 10px;
        background-color: #EECFB7;
        width: 370px;
        height: 115px;
        padding: 15px;
        color: #BC7349;
        text-align: justify;
        font-size: 12px;
        overflow: auto;
    }

    /* Liens */
    .nema {
        height: 40px;
        width: 150px;
        display: inline-block;
    }

    .nema a {
        display: inline-block;
        background-color: #80696C;
        color: #fff;
        font-family: 'Dosis',sans-serif;
        font-size: 25px;
        height: 40px;
        text-align: center;
        width: 145px;
        transition:all 1s ease;
    }

    .nema a:hover {
        background-color: #3E2428;
        color: #fff;
    }

    .nema_2 {
        height: 22px;
        width: 266px;
        display: block;
        margin-bottom: 5px;
        background-color: #80696C;
        color: #ffffff!important;
        font-family: 'Dosis',sans-serif;
        font-size: 16px;
        text-align: center;
        transition:all 1s ease;
        -webkit-transition:all 1s ease;
    }

    .nema_2:hover {
        background-color: #3E2428;
        color: #ffffff;
    }

    /*Titre Staff*/
    .nema_title {
        display: inline-block;
        color: #fff;
        font-family: 'Dosis', sans-serif;
        font-size: 25px;
        height: 30px;
        text-align: center;
        margin-bottom: 5px;
        margin-top: 10px;
    }

    /* Effets staff + predef */
    .stafef {
        width:320px;
        height:75px;
        background:#3E2428;
        opacity:0;
        transition:all 1s ease-in-out;
        -webkit-transition:all 1s ease-in-out;
    }

    .stafef:hover {
        opacity:1;
        -webkit-transform:rotate(-360deg);
        transform:rotate(-360deg);
    }

    .stafefico {
        width:100px;
        height:100px;
        display:inherit;
        background:#3E2428;
        opacity:0;
        transition:all 1s ease-in-out;
        -webkit-transition:all 1s ease-in-out;
    }

    .stafefico:hover {
        opacity:1;
        transform:rotate(-360deg);
        -webkit-transform:rotate(-360deg);
    }

    .predef {
        width:60px;
        height:100px;
        display:inherit;
        background:#3E2428;
        opacity:0;
        transition:all 1s ease-in-out;
        -webkit-transition:all 1s ease-in-out;
    }

    .predef:hover {
        opacity:1;
        transform:rotate(-360deg);
        -webkit-transform:rotate(-360deg);
    }

    /* --------------------------------- FIN PA --------------------------------- */



    Nyan-cat
    Nyan-cat
    FémininAge : 25Messages : 326

    Dim 22 Mar 2015 - 19:51

    Coucou Onyx !
    Merci de ton aide, et oui c'est beaucoup mieux, par contre il reste un soucis. Le slidshow ne fonctionne pas °w°. Est-ce normal ?



    [PA] (Nemalus - Onyx) PA plutôt simple pour Aes - Page 2 Nyan_cat_in_portals_by_ds_dna-d56j8yb
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 22 Mar 2015 - 20:24

    J'ai pas regardé cette partie là, mais effectivement, c'est pas complet ><

    Est-ce que le slideshow était supposé être automatique ou manuel? Genre, les images changent toutes seules ou il faut cliquer sur une flèche pour que ça change? Ou les deux? Et il y a combien d'images?



    Nyan-cat
    Nyan-cat
    FémininAge : 25Messages : 326

    Dim 22 Mar 2015 - 20:28

    Alors normalement c'était en automatique ( le code le moins lourd possible. )
    avec 3-4 images en défilement.



    [PA] (Nemalus - Onyx) PA plutôt simple pour Aes - Page 2 Nyan_cat_in_portals_by_ds_dna-d56j8yb
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 22 Mar 2015 - 22:13

    Salut!

    Alors on va remplacer le CSS par ceci :
    Code:
    /* --------------------------------- PA --------------------------------- */

    /* slideshow */
    #slideshow {
      position:relative;
      width:380px;
      height:145px
    }

    /* gestion des dimensions et débordement du conteneur */
    #slideshow .container {
      position:relative;
      width:380px;
      height:145px;
      overflow:hidden
    }

    /* le conteneur des slides */
    #slideshow .slider {
      position:absolute;
      left:0;
      top:0;
      width:400%;
      height:145px;
      animation:slider 16s infinite;
      -webkit-animation:slider 16s infinite;
    }

    /* Fonction animation */
    @keyframes slider {
      0%,20%,100% {left:0}
      25%,45% {left:-100%}
      50%,70% {left:-200%}
      75%,95% { left:-300%}
    }
    @-webkit-keyframes slider {
      0%,20%,100% {left:0}
      25%,45% {left:-100%}
      50%,70% {left:-200%}
      75%,95% { left:-300%}
    }

    /* Fond de la PA */
    .fond_PA {
      padding:10px;
      background-color:#E5B994;
      width:800px;
      position:relative
    }

    /* Contexte */
    .contexte_PA {
      margin-right:10px;
      background-color:#EECFB7;
      width:370px;
      height:115px;
      padding:15px;
      color:#BC7349;
      text-align:justify;
      font-size:12px;
      overflow:auto
    }

    /* Liens */
    .nema {
      height:40px;
      width:150px;
      display:inline-block
    }

    .nema a {
      display:inline-block;
      background-color:#80696C;
      color:#fff;
      font-family:'Dosis',sans-serif;
      font-size:25px;
      height:40px;
      text-align:center;
      width:145px;
      transition:all 1s ease
    }

    .nema a:hover {
      background-color:#3E2428;
      color:#fff
    }

    .nema_2 {
      height:22px;
      width:266px;
      display:block;
      margin-bottom:5px;
      background-color:#80696C;
      color:#fff!important;
      font-family:'Dosis',sans-serif;
      font-size:16px;
      text-align:center;
      transition:all 1s ease;
      -webkit-transition:all 1s ease
    }

    .nema_2:hover {
      background-color:#3E2428;
      color:#fff
    }

    /*Titre Staff*/
    .nema_title {
      display:inline-block;
      color:#fff;
      font-family:'Dosis',sans-serif;
      font-size:25px;
      height:30px;
      text-align:center;
      margin-bottom:5px;
      margin-top:10px
    }

    /* Effets staff + predef */
    .stafef {
      width:320px;
      height:75px;
      background:#3E2428;
      opacity:0;
      transition:all 1s ease-in-out;
      -webkit-transition:all 1s ease-in-out
    }

    .stafef:hover {
      opacity:1;
      -webkit-transform:rotate(-360deg);
      transform:rotate(-360deg)
    }

    .stafefico {
      width:100px;
      height:100px;
      display:inherit;
      background:#3E2428;
      opacity:0;
      transition:all 1s ease-in-out;
      -webkit-transition:all 1s ease-in-out
    }

    .stafefico:hover {
      opacity:1;
      transform:rotate(-360deg);
      -webkit-transform:rotate(-360deg)
    }

    .predef {
      width:60px;
      height:100px;
      display:inherit;
      background:#3E2428;
      opacity:0;
      transition:all 1s ease-in-out;
      -webkit-transition:all 1s ease-in-out
    }

    .predef:hover {
      opacity:1;
      transform:rotate(-360deg);
      -webkit-transform:rotate(-360deg)
    }

    /* --------------------------------- FIN PA --------------------------------- */

    Et la PA par ceci :
    Code:
    <link href="http://fonts.googleapis.com/css?family=Dosis" rel="stylesheet" type="text/css" />                                                           
    <div class="fond_PA">
                                                                                                          
       <div class="nema">
                                                                    <a href="#">Lien 1</a>                                                   
       </div>
                                                                                                          
       <div class="nema">
                                                                    <a href="#">Lien 2</a>                                                   
       </div>
                                                                                                          
       <div class="nema">
                                                                    <a href="#">Lien 3</a>                                                   
       </div>
                                                                                                          
       <div class="nema">
                                                                    <a href="#">Lien 4</a>                                                   
       </div>
                                                                                                          
       <div class="nema">
                                                                    <a href="#">Lien 5</a>                                                   
       </div><br />    <br />    <br />                                                   
       <table cellspacing="0" cellpadding="0">
                                                                                                                       
          <tbody>
                                                                                                                                    
             <tr>
                                                                                                                                                 
                <td>
                                                                                                                                          
                   <div class="contexte_PA">
                                                                                                            Lorem ipsum dolor sit amet, consectetur adipiscing                        elit. Sed vel congue est, et pharetra augue. Praesent                        fermentum vulputate elementum. Ut vehicula gravida                        bibendum. Pellentesque pretium ante purus, non aliquam                        urna posuere sit amet. Suspendisse potenti. Suspendisse                        tortor dolor, viverra sed enim vitae, vulputate ornare                        lectus. Aenean euismod nibh nec urna pretium                        consectetur. <a href="#">lire plus</a>                                                                               
                   </div>
                                                                                                                                                        
                </td>
                                                                                                                                                 
                <td>
                                
                   <div id="slideshow">
                                 
                      <div class="container">
                                    
                         <div class="slider">
                                <img style="width: 380px; height: 145px;" alt="" src="http://placehold.it/380x145" /><img style="width: 380px; height: 145px;" alt="" src="http://placehold.it/380x145" /><img style="width: 380px; height: 145px;" alt="" src="http://placehold.it/380x145" /><img style="width: 380px; height: 145px;" alt="" src="http://placehold.it/380x145" />   
                         </div>
                                
                      </div>
                                                                                                             
                   </div>
                </td>
                                                                                                                                           
             </tr>
                                                                                                                              
          </tbody>
                                                                                                                 
       </table>
                                                                                                          
       <table cellpadding="0" cellspacing="0">
                                                                                                                       
          <tbody>
                                                                                                                                    
             <tr>
                                                                                                                                                 
                <td align="center" style="width: 320px;" valign="top">
                                                                                                     <span class="nema_title">Staff</span>                                                         
                   <div style="width: 320px; height: 75px; overflow: hidden; background-image:url(http://placehold.it/320x75); margin-bottom: 8px;">
                                                                                                                                                                       
                      <div class="stafef">
                                                                                                                                                                                        
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                            Nom Prénom<br />                                <a href="#"><span style="color: rgb(213, 199, 180);">Contact</span></a>                                - <a href="#"><span style="color: rgb(213, 199, 180);">Profil</span></a><br />                                Poste occupé                                                                                             
                         </div>
                                                                                                                                                                                  
                      </div>
                                                                                                                                                                     
                   </div>
                                                                                                                                    
                   <div style="width: 320px; height: 75px; overflow: hidden; background-image:url(http://placehold.it/320x75); margin-bottom: 8px;">
                                                                                                                                                                       
                      <div class="stafef">
                                                                                                                                                                                        
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                            Nom Prénom<br />                                <a href="#"><span style="color: rgb(213, 199, 180);">Contact</span></a>                                - <a href="#"><span style="color: rgb(213, 199, 180);">Profil</span></a><br />                                Poste occupé                                                                                             
                         </div>
                                                                                                                                                                                  
                      </div>
                                                                                                                                                                     
                   </div>
                                                                                                                                    
                   <div style="width: 100px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/100x100); margin-right: 5px; display: inline-block;">
                                                                                                                                                                       
                      <div style="display: inline-block;" class="stafefico">
                                                                                                                                                                                        
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                            Nom Prénom<br />                                <a href="#"><span style="color: rgb(213, 199, 180);">Contact</span></a>                                - <a href="#"><span style="color: rgb(213, 199, 180);">Profil</span></a><br />                                Poste occupé                                                                                             
                         </div>
                                                                                                                                                                                  
                      </div>
                                                                                                                                                                     
                   </div>
                                                                                                                                                        
                   <div style="width: 100px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/100x100); margin-right: 5px; display: inline-block;">
                                                                                                                                                                       
                      <div style="display: inline-block;" class="stafefico">
                                                                                                                                                                                        
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                            Nom Prénom<br />                                <a href="#"><span style="color: rgb(213, 199, 180);">Contact</span></a>                                - <a href="#"><span style="color: rgb(213, 199, 180);">Profil</span></a><br />                                Poste occupé                                                                                             
                         </div>
                                                                                                                                                                                  
                      </div>
                                                                                                                                                                     
                   </div>
                                                                                                                                                              
                   <div style="width: 100px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/100x100); margin: 0px; display: inline-block;">
                                                                                                                                                                       
                      <div style="display: inline-block;" class="stafefico">
                                                                                                                                                                                        
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                            Nom Prénom<br />                                <a href="#"><span style="color: rgb(213, 199, 180);">Contact</span></a>                                - <a href="#"><span style="color: rgb(213, 199, 180);">Profil</span></a><br />                                Poste occupé                                                                                             
                         </div>
                                                                                                                                                                                  
                      </div>
                                                                                                                                                                     
                   </div>
                                                                                                                          
                </td>
                                                                                                                                                 
                <td style="padding-left: 10px; padding-top: 10px; width: 180px;" valign="top">
                                                                                                                                                              
                   <div style="background: #EECFB7; color :#BC7349; width:150px; height: 270px; overflow: auto; text-align: justify; padding: 15px;">
                                                                                                                                                                       
                      <div style="text-align: justify">
                                                                                                                       Lorem ipsum dolor sit amet, consectetur adipiscing                            elit. Sed vel congue est, et pharetra augue.                            Praesent fermentum vulputate elementum. Ut vehicula                            gravida bibendum. Pellentesque pretium ante purus,                            non aliquam urna posuere sit amet. Suspendisse                            potenti. Suspendisse tortor dolor, viverra sed enim                            vitae, vulputate ornare lectus. Aenean euismod nibh                            nec urna pretium consectetur.                                                                                       
                      </div>
                                                                                                                                                                     
                   </div>
                                                                                                                                                        
                </td>
                                                                                                                                                 
                <td align="center" style="padding-top: 10px; padding-left: 10px; width: 266px;" valign="top">
                                                                                                         <a class="nema_2" href="#">Lien 1</a>                                          <a class="nema_2" href="#">Lien 2</a>                                                                                                                            <a href="#" class="nema_2">Lien 3</a>                                                                                                                            <a href="#" class="nema_2">Lien 4</a>      <a href="#" class="nema_2">Lien 5</a>    <a href="#" class="nema_2">Lien 6</a>                                                                                                                                                                  <a href="#" class="nema_2" style="margin-bottom: 15px;">Lien 7</a>                           
                   <div style="width: 60px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/60x100); margin-right: 4px; display: inline-block;">
                                                                                                                                                                       
                      <div style="display: inline-block;" class="predef">
                                                                                                                                                                                        
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                            <a href="#">Nom Prénom</a>  <br />  <br />                              <span style="color: rgb(213, 199, 180);">Hors-la-loi</span>                                                 
                         </div>
                                                                                                                                                                                  
                      </div>
                                                                                                                                                                     
                   </div>
                                                                
                   <div style="width: 60px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/60x100); margin-right: 4px; display: inline-block;">
                                                                                                                                                                       
                      <div style="display: inline-block;" class="predef">
                                                                                                                                                                                        
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                            <a href="#">Nom Prénom</a>  <br /><br />                                <span style="color: rgb(213, 199, 180);">Hors-la-loi</span>                                                 
                         </div>
                                                                                                                                                                                  
                      </div>
                                                                                                                                                                     
                   </div>
                                                    
                   <div style="width: 60px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/60x100); margin-right: 4px; display: inline-block;">
                                                                                                                                                                       
                      <div style="display: inline-block;" class="predef">
                                                                                                                                                                                        
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                            <a href="#">Nom Prénom</a>  <br />  <br />                            <span style="color: rgb(213, 199, 180);">Hors-la-loi</span>                                                 
                         </div>
                                                                                                                                                                                  
                      </div>
                                                                                                                                                                     
                   </div>
                                                    
                   <div style="width: 60px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/60x100); display: inline-block;">
                                                                                                                                                                       
                      <div style="display: inline-block;" class="predef">
                                                                                                                                                                                        
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                            <a href="#">Nom Prénom</a>  <br />  <br />                            <span style="color: rgb(213, 199, 180);">Hors-la-loi</span>                                                 
                         </div>
                                                                                                                                                                                  
                      </div>
                                                                                                                                                                     
                   </div>
                                                                                            
                </td>
                                                                                                                                           
             </tr>
                                                                                                                              
          </tbody>
                                                                                                                 
       </table>
    </div>

    Pour changer la vitesse du slideshow, tu va à cet endroit dans le CSS :
    Code:
    /* le conteneur des slides */
    #slideshow .slider {
      position:absolute;
      left:0;
      top:0;
      width:400%;
      height:145px;
      animation:slider 16s infinite;
      -webkit-animation:slider 16s infinite;
    }

    Pour que ça soit plus long, tu augmente les deux "16s" (qui correspond à 16 secondes d'animation totale). Pour que ça soit plus rapide, tu diminue la valeur des "16s". À savoir que pour le slideshow, je me suis servie de ce tuto : http://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition



    Nyan-cat
    Nyan-cat
    FémininAge : 25Messages : 326

    Lun 23 Mar 2015 - 7:15

    Coucou Onyx !
    je viens de test la PA et le slidshow est toujours statique °w°...
    Je te laisse avec le lien test : http://testnyancat1.forumactif.org/



    [PA] (Nemalus - Onyx) PA plutôt simple pour Aes - Page 2 Nyan_cat_in_portals_by_ds_dna-d56j8yb
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Lun 23 Mar 2015 - 18:58

    Ah, ça... c'est un bug de forumactif avec les keyframe ><

    Tu dois aller dans le CSS, tout en bas, et cocher "non" à "Optimiser votre CSS".



    Nyan-cat
    Nyan-cat
    FémininAge : 25Messages : 326

    Lun 23 Mar 2015 - 19:22

    AH oui effectivement, c'est fâcheux !
    Tout fonctionne maintenant, merci beaucoup de ton aide ♥

    Merci aussi Nemalus pour la base que tu as donné !



    [PA] (Nemalus - Onyx) PA plutôt simple pour Aes - Page 2 Nyan_cat_in_portals_by_ds_dna-d56j8yb
    Contenu sponsorisé


      La date/heure actuelle est Ven 10 Mai 2024 - 2:55