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 sombre (onglets + staff bulles + slideshow auto +++)

    Partagez
    avatar
    Henrykiki
    MasculinAge : 26Messages : 576

    le Mar 30 Déc 2014 - 2:22

    Bonjour à tous,

    Voici un LS de PA style sombre.
    Elle vous est proposée suite à la demande de Nalu.


    Aperçus :
    - Onglet 1 de base - Contexte survolé - Navigation survolée -
    - Infobulle - Onglet 2 - Onglet 3 - en ligne


    Cette PA contient :

    • Un système à 3 onglets
    • Ong1 : Un contexte sous image (disparait au survol)
    • Ong1 : Une navigation sous image (disparait au survol + effet sur menu)
    • Ong1 : Un espace prédéfinis avec système d'infobulles performant.
    • Ong2 : Un espace staff (avec bulles qui tournent)
    • Ong2 : Un slideshow automatique (image ou texte)
    • Ong2 : Mini espace vidéo (optionnel, pas obligatoire)
    • Ong3 : Espace membres (du mois, rplayer, voteur)
    • Ong3 : Espace "meilleur rp du mois" (image cliquable)
    • Ong3 : Espace Partenaires + espace top-sites !


    L'installation

    Un simple merci envers le demandeur et le codeur sont les bienvenus !


    Dernière édition par Henrykiki le Jeu 15 Jan 2015 - 13:21, édité 1 fois



    Des bisous !
    avatar
    Henrykiki
    MasculinAge : 26Messages : 576

    le Mar 30 Déc 2014 - 2:22

    Création de la page html


    Rendez-vous sur votre panneau d'administration > modules > Gestion des pages HTML > Création en mode avancé. Donnez un titre a celle-ci : Pa-sombre, par exemple, et collez-y le code ci-dessous :

    Code:
    <!doctype html>
    <html>
    <head>
     <title>PA NALU</title>
     <meta charset="UTF-8" />
     <style>

    /*** GENERAL ***/

     #pa {background: #202020; width: 800px; margin: 0 auto; color: #fff; line-height: 1.3;}
     #pa a {
     color: #f9979d; text-decoration: none;
     border-bottom: 1px dotted #f9979d;
     -webkit-transition: color .2s linear;
     transition: color .2s linear;
     }

     #pa a:hover {
     color: #f79292; text-decoration: none;
     border-bottom: 1px solid #f9979d;
     }
     #credits {
     text-align: center;
     font-family: sans-serif;
     font-size: 12px;
     padding: 3px 0;
     color: #606060;
     }

     #credits a {
     padding-left: 20px;
     background: url("http://img4.hostingpics.net/pics/171045Ship.png") no-repeat left;
     background-size: 14px 14px;
     color: #aa434d !important;
     text-decoration: none !important;
     border: 0px !important;
     }

     #credits a:hover {
     color: #f79292 !important;
     }

     #credits span {color: #aa434d !important;}
     
     /* CREATION DE 3 ONGLETS POUR NAVIGUER ENTRE LES PAGES */

     ul#onglets {
     width: 650px; height: 30px;
     margin: 0px auto;
     padding: 30px 0;
     list-style-type: none;
     text-align: center;
     }

     ul#onglets li {
     display: inline-block;
     margin-right: 6px;
     width: 210px; height: 30px;
     }

     ul#onglets li:hover {
     height: 32px;
     position: relative; top: -2px;
     background: #905655;
     cursor: pointer;
     }

     ul#onglets li:last-child, ul#contentnav li:last-child, ul#predefinis li:last-child { margin-right: 0px;} /* = retrait de l'espace à droite. */

     /* CREATION DES PANNEAUX CONTENANT LES 3 CONTENUS DIFFERENTS */

     ul#contentOnglets {
     width: 650px; min-height: 310px;
     margin: 0 auto;
     list-style-type: none;
     padding: 0;
     position: relative;
     }

     ul#contentOnglets li {
     /*position: absolute;*/
     top: 0; left: 0;
     width: 650px;

     }
     
     ul#contentnav {
     width: 650px; height: 170px;
     margin: 0px auto;
     padding: 0px;
     list-style-type: none;
     text-align: center;
     }

     ul#contentnav li {
     padding: 0; margin: 0;
     display: inline-block;
     position: static;
     width: 320px; height: 170px;
     margin-right: 6px;
     overflow: hidden;
     }

    /*** PREMIER ONGLET ***/
     
     #contentcontexte, #contentmenu {
     width: 320px; height: 170px;
     overflow-y: scroll;
     overflow-x: none;
     position: relative;
     font-family: sans-serif;
     font-size: 12px;
     color: gray;
     line-height: 1.3;
     letter-spacing: 1px;
     text-align: left;
     }

     #contentcontexte p {
     margin-bottom: 36px;
     text-indent: 20px;
     }

     #contentcontexte img {
     position: absolute;
     left: 0; top: 0; opacity: 1;
     -webkit-transition: all .2s ease-in-out;
     transition: all .2s ease-in-out;
     }

     #contentmenu img {
     position: absolute;
     right: 0; top: 0; opacity: 1;
     -webkit-transition: all .2s ease-in-out;
     transition: all .2s ease-in-out;
     }

     #contentcontexte:hover img {
     left: -320px; opacity: 0;
     }

     #contentmenu:hover img {
     right: -320px; opacity: 0;
     }

     #contentmenu a {
     display: block;
     width: 100%; max-width: 100%;
     height: 28.33px; line-height: 28.33px;
     border: 0;
     background: rgba(146,86,86,0);
     padding-left: 20px;
     -webkit-transition: all .5s ease-in-out;
     transition: all .5s ease-in-out;
     }

     #contentmenu a:hover {
     display: block;
     width: 100%;
     height: 28.33px; line-height: 28.33px;
     border: 0;
     background: rgba(146,86,86,1);
     color: #202020;
     }

     ul#predefinis {
     width: 650px; height: 97px;
     margin: 24px auto;
     padding: 0px;
     list-style-type: none;
     text-align: center;
     }

     ul#predefinis li {
     padding: 0; margin: 0;
     display: inline-block;
     position: relative;
     width: 72px; height: 97px;
     margin-right: 6px;
     }
     
     ul#predefinis li .info {display: none;}
     ul#predefinis li:hover .info { /* INFOBULLES */
     display: block;
     position: absolute;
     bottom: 105px; left: 0px;
     width: 200px; /* IMPORTANT */
     background: white;
     color: #202020;
     font-size: 10px;
     font-family: sans-serif;
     padding: 10px;
     text-align: left;
     border-radius: 5px;
     }
        /* EXCEPTION INFOBULLES 7 & 8 */
          ul#predefinis li:nth-child(7):hover .info, ul#predefinis li:nth-child(8):hover .info {
          bottom: 105px; right: 0px; left: auto;}
          ul#predefinis li:nth-child(7):hover .info .fleche, ul#predefinis li:nth-child(8):hover .info .fleche {
          bottom: -8px; right: 30px; left: auto;}
          /* FIN EXCEPTION */

     .fleche { /* PETIT CURSEUR QUI CIBLE QUEL PERSO ON PARLE */
     width: 15px; height: 8px;
     background: url("http://i39.servimg.com/u/f39/19/07/10/81/fleche10.png") no-repeat;
     position: absolute;
     bottom: -8px; left: 30px;
     }

     ul#predefinis li .info a {
     color: #f9979d; text-decoration: none;
     border-bottom: 1px dotted #f9979d;
     }

     ul#predefinis li .info a:hover {
     color: #202020; text-decoration: none;
     border-bottom: 1px solid #f9979d;
     }
     ul#predefinis li img {
     opacity: .7;
     }

     ul#predefinis li:hover img {
     opacity: 1;
     }

    /**** DEUXIEME ONGLET ****/

     ul#presentStaff {
     width: 230px;
     list-style-type: none;
     padding: 0; margin: 0 auto;
     text-align: center;
     }

     ul#presentStaff li {
     position: static;
     display: inline-block;
     width: 60px; height: 60px;
     margin: 6px 3px ;
     }

     ul#presentStaff li.explic {
     position: static;
     display: inline-block;
     width: 210px; height: 80px;
     border: 2px solid #f9979d;
     padding: 10px 5px;
     vertical-align: middle;
     overflow-y: scroll;
     color: gray;
     font-family: sans-serif;
     font-size: 12px;
     }

     ul#presentStaff li.explic h2 {
     display: inline-block;
     margin: 0; padding: 0 10px;
     color: #f9979d;
     font-family: sans-serif;
     font-size: 16px; font-weight: normal;
     border-bottom: 1px dotted #f9979d;
     }

     ul#presentStaff li:hover img {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
     -webkit-transition: all .5s ease-in-out;
     transition: all .5s ease-in-out;
     }

    /**** SLIDESHOW -- DON'T TOUCH ! ***/

     .slideshow,
     .slide {
        width: 365px; max-width: 365px;
        height: 115px; max-height: 115px;
     }

     .slideshow {
        margin: 0px 0 0 auto;
        overflow: hidden;
        
        background-color: #202020;
        
        border: 4px solid #925656;
        font-family: sans-serif;
        font-size: 12px;
        color: gray;       /* ========= >> >> >> Couleur texte dans le slideshow */
     }

     #slideshowvideo {
        margin: 15px 65px 0 auto;
        overflow: hidden;
        width: 225px; max-width: 225px;
        height: 168px; max-height: 168px;

        background-color: red;
        
        border: 4px solid #925656;
        font-family: sans-serif;
        font-size: 12px;
        color: gray;       /* ========= >> >> >> Couleur texte dans le slideshow */
     }

     .slideshow div {
        position: relative;
        top: 0;
        right: 0;
     }
        
     .slide {
        margin: 0;
        overflow: auto;
        
        display: inline-block;
        vertical-align: middle;
            
        text-align: center;
        color: white;
     }

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

     .slide h2 { /* ========= >> >> >> Style titre dans le slideshow */
     display: inline-block;
     margin: 6px 0 0 0; padding: 0 10px;
     color: #f9979d;
     font-family: sans-serif;
     font-size: 16px; font-weight: normal;
     border-bottom: 1px dotted #f9979d;
     }
     #credcss {position: absolute; bottom: -27px; right: 0;}
     #credcss, #credcss a { font-size: 9px; color: #404040; text-transform: uppercase; font-family: sans-serif; border: 0 !important;}

     

     /***** FINNNN SLIDESHOOOWWWW ****/
     

    /*** TROISIEME ONGLET ***/

     ul#membresofthemonth {
     width: 280px; max-width: 280px;
     margin: 0; padding: 0;
     list-style-type: none;
     text-align: center;
     position: static;
     }

     ul#membresofthemonth li {
     /*position: static;*/
     width: 66px; height: 113px;
     overflow: hidden; display: inline-block;
     border: 5px solid #925656;
     margin-right: 6px; margin-bottom: 6px;
     position: relative;
     }

     ul#membresofthemonth li:nth-child(3), ul#membresofthemonth li:nth-child(4) {
     margin-right: 0px;
     }

     ul#membresofthemonth li span{
     position: absolute;
     display: block;
     width: 100px;
     text-align: center;
     bottom: 10px; left: -15px;
     -webkit-transform: rotate(-10deg);
     transform: rotate(-10deg);
     background: #f9979d;
     color: #945a5e;
     font-family: sans-serif;
     text-transform: uppercase;
     font-size: 11px;
     padding: 3px 0px 2px;
     }

     ul#membresofthemonth li img {
     opacity: .6;
     -webkit-transition: all .2s ease-in-out;
     transition: all .2s ease-in-out;
     }

     ul#membresofthemonth li:hover img {
     opacity: 1;
     -webkit-transform: scale(1.1) rotate(3deg);
     transform: scale(1.1) rotate(3deg);
     }

     ul#membresofthemonth li.infosmembresofthemonth {
     width: 238px;
     margin: 0 auto; padding: 10px 5px;
     overflow-y: scroll;
     color: gray;
     font-family: sans-serif;
     font-size: 12px;
     }

     ul#membresofthemonth li.infosmembresofthemonth h2 {
     display: inline-block;
     margin: 0; padding: 0 10px;
     color: #f9979d;
     font-family: sans-serif;
     font-size: 16px; font-weight: normal;
     border-bottom: 1px dotted #f9979d;
     }

     ul#membresofthemonth li.infosmembresofthemonth a { border: 0px; color:#aa434d;}

     ul#membresofthemonth li.infosmembresofthemonth a:hover { color: #f79292;}
     
     #partenaires { padding-left: 40px;}
     #partenaires h1 { margin: 0px auto; padding: 0px; }

     ul#sous-partenaires {
     display: block;
     width: 280px; max-width: 280px;
     height: 130px; max-height: 130px;
     margin: 0; padding: 0;
     list-style-type: none;
     text-align: center;
     overflow-y: scroll;
     }

     ul#sous-partenaires li {
     position: static;
     width: 88px; height: 31px;
     overflow: hidden; display: inline-block;
     margin-right: 2px; margin-bottom: 2px;
     }
     
     .topsites a {
     border: 0px !important;
     }

     ul#sous-partenaires li img, .topsites img{
     opacity: .5;
     -webkit-transition: all .2s linear;
     transition: all .2s linear;
     }

     ul#sous-partenaires li:hover img, .topsites img:hover {
     opacity: 1;
     -webkit-transition: all .2s linear;
     transition: all .2s linear;
     }
     </style>
    </head>
    <body>
     <div id="pa">
     <ul id="onglets">
     <li onClick="javascript:onglet1()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/o110.jpg" alt="titre de ton 1er onglet" /></li>
     <li onClick="javascript:onglet2()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/o210.jpg" alt="titre de ton 2eme onglet" /></li>
     <li onClick="javascript:onglet3()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/o310.jpg" alt="titre de ton 3eme onglet" /></li>
     </ul>

     <ul id="contentOnglets">
     <li id="part1">
     <!-- LE 1ER ONGLET COMMENCE ICI -->
     <ul id="contentnav">
     <li id="contentcontexte">
     <img src="http://i39.servimg.com/u/f39/19/07/10/81/contex10.jpg" alt="Contexte">
     <div id="contexte">
     <p>Fiore, le plus grand royaume magique connu à ce jour, mais aussi le plus puissant doit faire face à sa plus grande crise. Les guildes clandestines jadis quasi-inoffensives, grandissent et deviennent plus puissantes de jour en jour. Elles sont maintenant bien plus nombreuses que les guildes légales et commencent à contester leur captivité, montrant leur mécontentement par des multiples actes de vandalisme. Les guildes légales, quant à elles, rassemblent leurs forces pour restaurer l'ordre ! Prenant encore ces actes comme des actes sans réelle menace. Mais la vérité est tout autre, les guildes clandestines comptent bien prendre le pouvoir et renverser les guildes légales.</p>

     <p>À Magnolia, il y a une guilde dont les mages sont tous plus puissants les uns que les autres et de grande renommée. Celle-ci atteint l'apogée de sa puissance en mettant un terme à une des guildes noires de l'alliance Baram : Oracion Seis. Remplissant sa guilde de nouveaux membres comme Wendy, Lucy, Gajeel, Jubia et Lisanna au fil de leurs aventures, Fairy Tail était définitivement l'une des guildes légales les plus craintes.</p>

     <p>Cependant en l'an x784, les mages capables de participer à l'examen pour devenir mage de rang S sont envoyés sur l'île Tenro pour y passer de multiples épreuves. Les équipes sont alors formées tandis qu'elles se séparent pour viser ce fameux titre tant convoité. L'examen se déroule correctement lorsque l'ancienne guilde battue une fois par Fairy Tail fit son apparition sur l'île, Grimoire Hearts, avec à son bord Hadès et une équipe de redoutable mages : Les chevaliers du purgatoire. Les combats fusent dans tous les sens. Malheureusement, Acnologia, l'un des « derniers » dragons encore vivants attaqua les mages sous les ordres de Zeleph, et ils luttèrent pour tenter de le battre, mais sans succès. L'île toute entière accompagnée des mages sombra dans les profondeurs océaniques, sans laisser de traces.</p>

     <p>Tout semblait perdu pour les membres les plus puissants de Fairy Tail restés sur la terre féerique, mais un événement réanima cette lumière perdue. La célèbre Mavis Mervillon, ancien maître de la guilde, réussi à les sauver et à les protéger grâce à l'une de ses trois grandes magies : Fairy Sphere.</p>

     <p>7 ans après, en l'an X791, Fairy Tail est de retour !</p>

     <p>Depuis la disparition des membres les plus forts de Fairy Tail à l'île Tenro, de nouvelles guildes ont fait leur apparition, dont Pandora Heart, une guilde que peu connaissent et dont les buts sont tous aussi inconnus, mais le mage noir Zeleph aurait décidé de rejoindre cette guilde mystérieuse pour d'obscures raisons. De plus, la guilde Grimoire Heart, qui avait été battue par Fairy Tail, refait surface avec des membres de plus en plus diaboliques, menaçant l'équilibre du monde féerique.</p>

     <p>Le conseil des mages ayant eu vent des récents évènements, du retour des membres de Fairy Tail et de la croissance ahurissante des guildes noires a accepté la proposition de la recherche d'un sort permettant de relier les deux mondes magiques parallèles, afin de demander l'aide d'Edoras. Cependant, un tel sort était impossible à réaliser, et c'est pourquoi ils virent un espoir fou en l'apparition d'un énorme anima à Earthland. Comme autrefois, cette anima permettait d'accéder à Edoras, mais il n'aspirait personne cette fois-ci. Les edo-fées tombèrent du ciel par ce biais, et c'est ainsi que les mages rencontrèrent leurs doubles. Après quoi, les Edoras firent union avec Fairy Tail, laissant leurs monde derrière eux pour le bien de Fiore. Le monde d'Edoras est cependant accessible par certaines personnes.</p>

     <p>La guerre entre les guildes légales et clandestines est imminente, mais vous, dans quel camp serez-vous ?</p>
     </div>
     </li>
     <li id="contentmenu"><img src="http://i39.servimg.com/u/f39/19/07/10/81/naviga10.jpg" alt="Navigation">
     <div id="menu">
     <a href="">Règlement</a>
     <a href="">Contexte</a>
     <a href="">Personnages libres</a>
     <a href="">Libre service avatar</a>
     <a href="">Guide du débutant</a>
     <a href="">Liste des magies disponbles</a>
     </div>
     </li>
     </ul>

     <ul id="predefinis">
     
     <!-- CHANGEMENT DES POSTES PREDEFINIS -->

     <li><img src="http://i39.servimg.com/u/f39/19/07/10/81/pp10.jpg" alt="Perso prédéfinis ?">
     <span class="info">Ceci est un petit texte qui accompagne le personnage. Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="">Veritatis</a>, dolores.<br /><br /> Perferendis ipsa possimus vel autem ratione veniam ex nulla expedita nostrum labore doloribus nesciunt mollitia odit reiciendis suscipit tempore esse.
     <span class="fleche"><!--fleche invisible--></span></span></li>
     <li><img src="http://i39.servimg.com/u/f39/19/07/10/81/pp10.jpg" alt="Perso prédéfinis ?" />
     <span class="info">Texte 2 ici
     <span class="fleche"><!--fleche invisible--></span></span></li>
     <li><img src="http://i39.servimg.com/u/f39/19/07/10/81/pp10.jpg" alt="Perso prédéfinis ?" />
     <span class="info">Texte 3 ici
     <span class="fleche"><!--fleche invisible--></span></span></li>
     <li><img src="http://i39.servimg.com/u/f39/19/07/10/81/pp10.jpg" alt="Perso prédéfinis ?" />
     <span class="info">Texte 4 ici
     <span class="fleche"><!--fleche invisible--></span></span></li>
     <li><img src="http://i39.servimg.com/u/f39/19/07/10/81/pp10.jpg" alt="Perso prédéfinis ?">
     <span class="info">Texte 5 ici
     <span class="fleche"><!--fleche invisible--></span></span></li>
     <li><img src="http://i39.servimg.com/u/f39/19/07/10/81/pp10.jpg" alt="Perso prédéfinis ?" />
     <span class="info">Texte 6 ici
     <span class="fleche"><!--fleche invisible--></span></span></li>
     <li><img src="http://i39.servimg.com/u/f39/19/07/10/81/pp10.jpg" alt="Perso prédéfinis ?" />
     <span class="info">Texte 7 ici
     <span class="fleche"><!--fleche invisible--></span></span></li>
     <li><img src="http://i39.servimg.com/u/f39/19/07/10/81/pp10.jpg" alt="Perso prédéfinis ?" />
     <span class="info">Texte 8 ici
     <span class="fleche"><!--fleche invisible--></span></span></li>
     </ul>
     </li> <!-- FIN DU PREMIER ONGLET -->

     <li id="part2" style="display: none;">
     <!-- LE 2EME ONGLET COMMENCE ICI -->

     <table border="0" width="650px">
     <tr>
     <td width="230px" valign="top">
     <ul id="presentStaff">

     <!-- CHANGEMENT STAFF 1 -->

     <li onMouseOver="javascript:staff1()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff10.png" alt="Staff" /></li>
     <li onMouseOver="javascript:staff2()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff10.png" alt="Staff" /></li>
     <li onMouseOver="javascript:staff3()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff10.png" alt="Staff" /></li>
     <li class="explic">

     <!-- CHANGEMENT INFOS STAFF -->

     <div id="defaut">
     <h2>Les membres du staff</h2>
     <p>Laissez-nous vous présenter les membres de notre staff.</p>
     </div>
     <div id="staff1" style="display: none;">
     <h2>Membre 1</h2>
     <p>Il est super cool ^^
     </p>
     </div>
     <div id="staff2" style="display: none;">
     <h2>Membre 2</h2>
     <p>Il est méchantttt !
     </p>
     </div>
     <div id="staff3" style="display: none;">
     <h2>Membre 3</h2>
     <p>Il est chinakawah.
     </p>
     </div>
     <div id="staff4" style="display: none;">
     <h2>Membre 4</h2>
     <p>Il est agressif
     </p>
     </div>
     <div id="staff5" style="display: none;">
     <h2>Membre 5</h2>
     <p>Il est dictateur
     </p>
     </div>
     <div id="staff6" style="display: none;">
     <h2>Membre 6</h2>
     <p>Il est amusant
     </p>
     </div>
     </li>

     <!-- CHANGEMENT STAFF 2 -->

     <li onMouseOver="javascript:staff4()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff10.png" alt="Staff" /></li>
     <li onMouseOver="javascript:staff5()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff10.png" alt="Staff" /></li>
     <li onMouseOver="javascript:staff6()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff10.png" alt="Staff" /></li>
     </ul>
     </td>
     <td valign="top"> <!-- SLIDESHOW + VIDEO -->
     
     <!-- Slideshow infini horizontal -->
     <div id="slideshow" class="slideshow">
        <div id="slideshow-container">

         <!-- CHANGEMENT SLIDE ACTUELS -->

       <div class="slide">
                <a href="#"><img src="http://i39.servimg.com/u/f39/19/07/10/81/slide110.png" alt="Image Slide"/></a>
            </div>
            <div class="slide">
                <a href="#"><img src="http://i39.servimg.com/u/f39/19/07/10/81/slide210.png" alt="Image Slide"/></a>
            </div>

            <!-- AJOUT SLIDE AU SLIDESHOW -->      
            <!--
                Vous pouvez ajouter autant de slides que possible avec le template suivant :
                
                <div class="slide">
                    votre contenu ici
                </div>
            -->
        </div>
     </div>

     <!-- fin slideshow  -->
     <!-- bloc video -->
     <div id="slideshowvideo" style="text-align: center;">
     <iframe width="225px" height="168px" src="http://www.youtube.com/embed/vcMHkvEVgVo" frameborder="0" allowfullscreen></iframe>
     </div>
     <!-- fin du bloc video -->

     <div id="credcss">Slideshow by <a href="http://www.css-actif.com/t13010-slideshow-horizontal-infini">CSSActif</a></div>
     </td>
     </tr>
     </table>
     </li> <!-- FIN DU DEUXIEME ONGLET -->

     <li id="part3" style="display: none;">
     <!-- LE 3EME ONGLET COMMENCE ICI -->
     <table width="650px" border="0">
     <tr>
     <td width="280px">
     <ul id="membresofthemonth">

     <!-- CHANGEMENT MEILLEUR VOTEUR -->

     <li><img src="http://i39.servimg.com/u/f39/19/07/10/81/month11.jpg" alt="MEMBRE DU MOIS" />
     <span>voteur</span></li>

     <!-- CHANGEMENT MEILLEUR MEMBRE -->

     <li><img src="http://i39.servimg.com/u/f39/19/07/10/81/month11.jpg" alt="MEMBRE DU MOIS" />
     <span>membre</span></li>

     <!-- CHANGEMENT MEILLEUR RPLAYER -->

     <li><img src="http://i39.servimg.com/u/f39/19/07/10/81/month11.jpg" alt="MEMBRE DU MOIS" />
     <span>rplayer</span></li>
     <li class="infosmembresofthemonth">
     <div id="voteur">
     
     <!-- CHANGEMENT MEILLEUR RP -->

     <a href="#"><img src="http://i39.servimg.com/u/f39/19/07/10/81/meille10.png" alt="Le meilleur RP"></a>
     </div>
     </li>
     </ul>
     </td>
     <td valign="top" id="partenaires"> <!-- partenaires & topsites -->
     <h1><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten10.png" alt="Nos partenaires"></h1>

     <ul id="sous-partenaires">
     <li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
     <li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
     <li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
     <li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
     <li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
     <li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
     <li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
     <li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
     <li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
     <li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
     <li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
     <li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
     <li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
     <li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
     <li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
     <li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
     <li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
     <li><a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/logopa10.png" alt="Nom Partenaire"></a></li>
     </ul>

     <h1 style="margin-top: 30px !important;"><img src="http://i39.servimg.com/u/f39/19/07/10/81/topsit10.png" alt="Nos Topsites"></h1>

     <div class="topsites">

     <!-- CHANGEMENT TOP SITES -->

     <a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/topsit11.png" alt=""></a>
     <a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/topsit11.png" alt=""></a>
     <a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/topsit11.png" alt=""></a>
     <a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/topsit11.png" alt=""></a>
     <a href="#" target="_blank"><img src="http://i39.servimg.com/u/f39/19/07/10/81/topsit11.png" alt=""></a>
     </div>
     </td>
     </tr>
     </table>
     </li>
     </ul>
     <p id="credits">~ Codée avec <span>♥</span> sur <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a> </p>
     </div>

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(function () {
        //VARIABLES MODIFIABLES
        var delaiSwitch    = 5000;                    // Délai (en ms) d'affichage d'un slide
        var delaiTransition = 1000;                    // Délai (en ms) de l'animation de transition
        var direction      = 'left';                  // Sens (left ou right) du défilement
        var idSlideshow    = '#slideshow';            // ID du slideshow
        var idContainer    = '#slideshow-container';  // ID du container
        
        //VARIABLES SYSTEME
        var slideshowWidth  = parseInt($(idSlideshow).css('width'));
        var slideshowHeight  = parseInt($(idSlideshow).css('height'));
        var nbSlides        = $(idContainer+' > .slide').length;
        
        //ADAPTE LA TAILLE DU CONTENEUR AU NOMBRE DE BLOCS QU'IL CONTIENT
        $(idContainer).css('width', slideshowWidth*nbSlides+'px');

            
        //REDEFINIT LE CONTENU POUR SUPPRIMER LES EVENTUELS ECARTS DUS AUX BORDERS
        if(direction==='right') {
            var decalageLeft = -slideshowWidth*(nbSlides-1);
            $(idContainer).css('left', decalageLeft+'px');
            
            $(idContainer+' > .slide').each(function() {
                var el = $(this).remove();
                $(idContainer).prepend(el);
            }, this);
        } else {
            $(idContainer+' > .slide').each(function() {
                var el = $(this).remove();
                $(idContainer).append(el);
            }, this);
        }
        
        //ADAPTE LA TAILLE DES IMAGES AUX DIMENSIONS DU SLIDESHOW
        $(idSlideshow+' img').css('max-width', slideshowWidth);
        $(idSlideshow+' img').css('max-height', slideshowHeight);
        
        //LANCEMENT DE L'ANIMATION
        setInterval(function() {
            slideshow()
        }, delaiSwitch);
        
        //FONCTION DE DEFILEMENT
        function slideshow() {
            var compteur = 0;      // Compte les slides ayant bougé
            
            if(direction==='right') {
                $(idContainer+' > .slide').animate({left: '+='+slideshowWidth}, delaiTransition, function() {
                    compteur++;
                    
                    // Lorsque le dernier slide à bougé, on crée la boucle
                    if(compteur===nbSlides) {
                        var el = $(idContainer+' > .slide:last').remove();
                        $(idContainer).prepend(el);
                        $(idContainer+' > .slide').css('left', '0');
                        
                        compteur = 0;
                    }
                });
            } else {
                $(idContainer+' > .slide').animate({left: '-='+slideshowWidth}, delaiTransition, function() {
                    compteur++;
                    
                    // Lorsque le dernier slide à bougé, on crée la boucle
                    if(compteur===nbSlides) {
                        var el = $(idContainer+' > .slide:first').remove();
                        $(idContainer).append(el);

                        $(idContainer+' > .slide').css('left', '0');
                        
                        compteur = 0;
                    }
                });
            }        
        }
    });

    function onglet1() {
     document.getElementById('part1').style.display='block';
     document.getElementById('part2').style.display='none';
     document.getElementById('part3').style.display='none';}
     function onglet2() {
     document.getElementById('part1').style.display='none';
     document.getElementById('part2').style.display='block';
     document.getElementById('part3').style.display='none';}
     function onglet3() {
     document.getElementById('part1').style.display='none';
     document.getElementById('part2').style.display='none';
     document.getElementById('part3').style.display='block';}

     // FIN ONGLETS
     function staff1() {
     document.getElementById('defaut').style.display='none';
     document.getElementById('staff1').style.display='block';
     document.getElementById('staff2').style.display='none';
     document.getElementById('staff3').style.display='none';
     document.getElementById('staff4').style.display='none';
     document.getElementById('staff5').style.display='none';
     document.getElementById('staff6').style.display='none';}
     function staff2() {
     document.getElementById('defaut').style.display='none';
     document.getElementById('staff1').style.display='none';
     document.getElementById('staff2').style.display='block';
     document.getElementById('staff3').style.display='none';
     document.getElementById('staff4').style.display='none';
     document.getElementById('staff5').style.display='none';
     document.getElementById('staff6').style.display='none';}
     function staff3() {
     document.getElementById('defaut').style.display='none';
     document.getElementById('staff1').style.display='none';
     document.getElementById('staff2').style.display='none';
     document.getElementById('staff3').style.display='block';
     document.getElementById('staff4').style.display='none';
     document.getElementById('staff5').style.display='none';
     document.getElementById('staff6').style.display='none';}
     function staff4() {
     document.getElementById('defaut').style.display='none';
     document.getElementById('staff1').style.display='none';
     document.getElementById('staff2').style.display='none';
     document.getElementById('staff3').style.display='none';
     document.getElementById('staff4').style.display='block';
     document.getElementById('staff5').style.display='none';
     document.getElementById('staff6').style.display='none';}
     function staff5() {
     document.getElementById('defaut').style.display='none';
     document.getElementById('staff1').style.display='none';
     document.getElementById('staff2').style.display='none';
     document.getElementById('staff3').style.display='none';
     document.getElementById('staff4').style.display='none';
     document.getElementById('staff5').style.display='block';
     document.getElementById('staff6').style.display='none';}
     function staff6() {
     document.getElementById('defaut').style.display='none';
     document.getElementById('staff1').style.display='none';
     document.getElementById('staff2').style.display='none';
     document.getElementById('staff3').style.display='none';
     document.getElementById('staff4').style.display='none';
     document.getElementById('staff5').style.display='none';
     document.getElementById('staff6').style.display='block';}
        </script>
    </body>
    </html>

    Enregistrez. Ensuite, copiez quelque part l'adresse internet de cette page fraichement créée car nous en aurons besoin dans quelques instants.

    Installation de la page d'accueil


    Rendez-vous à l'emplacement de votre page d'accueil (PA>Affichage>Page d'accueil>Généralités) et collez-y ce code pour introduire une iframe...

    Code:
    <iframe src="HTTP://ADRESSE-DE-LA-PAGE-HTML-RECEMMENT-CREE" frameborder="0" scrolling="no" style="width: 800px; height: 450px;"></iframe>

    Et donc, remplacez "HTTP://ADRESSE-DE-LA-PAGE-HTML-RECEMMENT-CREE" par l'adresse de la page html que vous avez créée, dont je vous ai dis de garder l'URL quelque part...

    Cette PA fonctionne avec du javascript, il est donc nécessaire de poser cette PA via les pages html, et une iframe ! Aussi : les onglets sont personnalisables via les images.


    Merci de conserver les crédits envers Never-Utopia


    Une question ? Un souci avec le code ?


    Rendez-vous dans la zone appropriée : c'est par ici !



    Des bisous !
    avatar
    A-Lice
    FémininAge : 24Messages : 4939

    le Mer 4 Fév 2015 - 22:28

    Il me semble que pour les transitions il n'y a plus besoin de préfixes non plus ! Même remarque pour les transform. Et toujours même remarque pour le crédit x)

    tu n'as pas fermé la balise de ton image. Elle se ferme comme ceci :
    Code:
    <img src="" alt="" />
    . Ça vaut pour toutes tes images.

    Une fois les modifications faites, je déplacerai (:

    avatar
    A-Lice
    FémininAge : 24Messages : 4939

    le Mar 3 Mar 2015 - 17:56

    Modifications faites.

    avatar
    Mayiie
    FémininAge : 27Messages : 39

    le Mer 4 Mar 2015 - 14:56

    Merci du partage ! Very Happy
    avatar
    Dooh-Nem
    FémininAge : 25Messages : 139

    le Mer 4 Mar 2015 - 23:13

    Merci
    avatar
    Okalem
    FémininAge : 18Messages : 63

    le Ven 6 Mar 2015 - 0:51

    Merci !!
    avatar
    Badaric
    MasculinAge : 28Messages : 26

    le Ven 6 Mar 2015 - 3:36

    Merci du partage ^^
    avatar
    Kimouko
    FémininAge : 23Messages : 19

    le Ven 6 Mar 2015 - 15:07

    Merci du partage o/
    avatar
    Screen
    FémininAge : 26Messages : 92

    le Sam 7 Mar 2015 - 10:04

    Un grand merci pour le partage ovo
    avatar
    Tempy
    FémininAge : 20Messages : 76

    le Sam 7 Mar 2015 - 18:25

    Ouah !
    Elle est vraiment belle ! J'adore les infos bulles !
    Merci du partage !
    avatar
    EverLiam
    FémininAge : 29Messages : 1002

    le Jeu 12 Mar 2015 - 13:26

    magnifique j'adore




    avatar
    Pokebip
    MasculinAge : 20Messages : 69

    le Jeu 12 Mar 2015 - 19:44

    mrc
    avatar
    Rêveuse
    FémininAge : 16Messages : 44

    le Ven 13 Mar 2015 - 19:13

    Magnifique, merci beaucoup!
    avatar
    Nemalus
    FémininAge : 20Messages : 358

    le Ven 13 Mar 2015 - 20:00

    Merci bien
    avatar
    Kaimie
    FémininAge : 20Messages : 66

    le Ven 13 Mar 2015 - 22:53

    Merci encore ! ^^
    avatar
    Kyuusei Ban
    FémininAge : 25Messages : 54

    le Sam 14 Mar 2015 - 10:27

    Merci du partage :3
    avatar
    ginl
    FémininAge : 30Messages : 65

    le Sam 14 Mar 2015 - 12:53

    merci :)
    avatar
    Isiiis
    FémininAge : 25Messages : 39

    le Sam 14 Mar 2015 - 13:00

    C'est magnifique <3
    Merci d'avoir partagé <3
    avatar
    Kyu
    FémininAge : 19Messages : 42

    le Sam 14 Mar 2015 - 15:07

    Merci ! :3
    avatar
    Caine Lornan
    MasculinAge : 37Messages : 78

    le Sam 14 Mar 2015 - 20:35

    Merci c'est top ^^
    avatar
    Akiro
    FémininAge : 26Messages : 54

    le Lun 23 Mar 2015 - 19:02

    Exactement le genre de structure que je cherchais :p
    Merci beaucoup!
    avatar
    Ouat
    FémininAge : 34Messages : 74

    le Jeu 26 Mar 2015 - 8:45

    Merci^^
    avatar
    Eil'liathan Tyan'Lirulin
    FémininAge : 27Messages : 315

    le Jeu 26 Mar 2015 - 22:38

    J'adore !! Merci ^^
    avatar
    Kirito
    MasculinAge : 22Messages : 200

    le Ven 27 Mar 2015 - 1:43

    Waw Magnifique
    Contenu sponsorisé


      La date/heure actuelle est Mer 14 Nov 2018 - 22:40