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.


    Personnalisation PA Henrykiki (enlever défilement)

    Partagez
    avatar
    Shylanova
    FémininAge : 28Messages : 27

    le Lun 7 Aoû 2017 - 0:55

    Bonjour :love:

    Je suis tombé en amour avec ce code LS de page d'accueil : http://www.never-utopia.com/t52963-pa-gris-rose-infobulles-staff-news-partenaires-defilants

    Je le travail actuellement sur mon forum-test : http://legendes-demeraude.forumactif.fr

    Cependant, il sera officiellement utilisé pour ce forum : http://legendesdenkidiev.forumactif.com

    Ma question /!\ (ma grande question hihi!) : comment puis-je faire pour enlever le défilement des partenaires ? Plusieurs (moi la première) demandent un emplacement fixe pour les top-partenariat et j'aimerais grandement que cette création puisse répondre à ce petit critère.

    J'ai essayé de faire plusieurs tests, mais sans succès. Je dois clairement passer à côté de quelque chose ! :wall:

    Voici le HTML que j'ai actuellement :

    Code:
    <!doctype html>
    <html lang="fr">
    <head>
            <meta charset="UTF-8" />
      <title>PA grise/rose + scrollbar personnalisée.</title>
     <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css">
      <link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
      <style>

          body {
            background: #e4e1e2;
          }

          #pa h1, #pa h2, #pa h3, #pa h4, #pa h5, #pa h6, #pa p {
            margin: 0; padding: 0; font-weight: normal;
          }

          #pa {
            width: 800px;
            min-height: 400px;
            border-radius: 10px;
            background: #fff;
            margin: 75px auto 20px;
            position: relative;
            padding-top: 50px;
            font-family: "abeatbykai", sans-serif;
            font-size: 12px;
            letter-spacing: 1px;
            color: gray;
          }

          #pa a {
            color: darkgray;
            text-decoration: none;
          }

          #pa a, #pa h2, .news p {
            -webkit-transition: all .2s ease;
            -moz-transition: all .2s ease;
            -ms-transition: all .2s ease;
            -o-transition: all .2s ease;
            transition: all .2s ease;
          }

          #pa a:hover {
            color: #d74e77;
          }
         
          #pa h1 {
            width: 347px;
            height: 70px;
                  position: absolute;

            left: 50%;
            margin-left: -173.5px;
            text-indent: -9999px;
          }

          ul#ticker01, ul#concours, ul.groupes, ul#staff
          {
            list-style-type: none;
            margin: 0;
            padding: 0;
          }

          #pa h2 img {
            position: absolute; top:0;
          }

          #pa table td {
            min-height: 50px;
            border-radius: 10px;
            position: relative;
            padding-top: 25px;
          }

          #pa table td.withbg {
            background: #e4e1e2;
          }

          #pa h2 {
            height: 34px;
            position: absolute;
            top: -12.5px;
            z-index: 3;
            font-size: 22px;
            font-family: Fjalla One;
          }

          #pa h2:hover {
            color: rgba(209,42,97,1);
          }

    /* CONCEPT */

          .concept {
            height: 192px; max-height: 192px;
            overflow-y: scroll;
            padding: 1px;
        text-align : justify;
          }

          .concept p {
            margin-bottom: 20px !important;
            padding-right: 20px !important;
          }

          .concept p:last-child {
            margin-bottom: 0px !important;
          }

    /* GROUPES */

          .groupes {
            height: 60px; max-height: 60px;
            text-align: center;
        font-family:'Cinzel', sans-serif;
        font-size: 14px;
        text-transform: uppercase;
          }

          .groupes li {
            display: inline-block;
            margin: 0 10px;
          }

    /* NEWS */

          .news {
            height: 87px; max-height: 87px;
            overflow-y: scroll;
          }

          .news strong {
            color: #d74e77;
            font-family: sans-serif;
            text-transform: uppercase;
            font-weight: normal;
          }

          .news p {
            border-bottom: 1px solid lightgray;
            padding: 2px 0 !important; margin: 2px 0 !important;
          }

          .news p:hover {
            border-bottom: 1px solid lightgray;
            padding: 2px 0 2px 20px !important; margin: 2px 0 !important;
          }

    /* CONCOURS */
         
          ul#concours {
            width: 280px;
            height: 114px; max-height: 114px;
            margin: 0px auto 0;
            text-align: center;
          }
         
          ul#concours li {
            width: 84px;
            margin: 0 5px;
            display: inline-block;
            position: relative;
            z-index: 4;
          }

          ul#concours li span {
            display: none;
            width: 150px;
            padding: 10px;
            position: absolute;
            bottom: 60px;  right: 50%; margin-right: -75px;
            background: #fff;
            color: #fff;
            z-index: 5;
            border-radius: 10px;
            border-bottom: 1px solid #d74e77;
          }

          ul#concours li:hover span {
            display: block;
          }

          ul#concours li span img {
            max-width: 150px;
            height: auto;
          }

          .fleche {
            width: 26px;
            height: 12px;
            background: url("http://i39.servimg.com/u/f39/19/07/10/81/fleche11.png");
            position: absolute;
            bottom: -12px;
            left: 50%;
            margin-left: -13px;
          }

    /* STAFF */

          #staff img, ul#concours li img.mini {
            -webkit-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
            -moz-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
            -ms-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
            -o-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
            mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
          }

          #staff li {
            display: inline-block;
            width: 80px; max-width: 80px;
          }

          #staff li:hover {
            cursor: help;
          }

          .staff p {
            padding: 10px 0 10px !important;
          }

          .staff{
            text-align: center;
          }

          .staff .pseudo
          {
            display: inline-block;
            color: #d74e77;
          }

    /* PARTENAIRES */
         
          td.partenaires {
            padding-top: 15px !important;
          }

          .tickercontainer { /* the outer div with the black border */
            width: 750px;
            height: 31px;
            margin: 0 auto;
            padding: 0;
            overflow: hidden;
            position: relative;
            z-index: 2;
          }
          .tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
            position: relative;
            left: 0px;
            top: 0px;
            width: 750px;
            overflow: hidden;
          }
          ul.newsticker { /* that's your list */
            position: relative;
            left: 750px;
          }
            ul.newsticker li {
            float: left; /* important: display inline gives incorrect results when you check for elem's width */
            width: 88px;
            margin: 0 2px;
            padding: 0;
          }

     
       
    /* CREDITS */

          #credits {
            position: absolute;
            padding: 0px 10px;
            bottom: -20px;
            right: 0px;
            height: 20px;
            line-height: 20px;
            font-size: 8px;
            color: gray;
            text-transform: uppercase;
            text-shadow: 1px 1px 0px #ffffff;
          }
         
    /* SCROLLBAR */

          ::-webkit-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
          ::-webkit-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
          ::-webkit-scrollbar-corner{background:none;}

          ::-moz-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
          ::-moz-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
          ::-moz-scrollbar-corner{background:none;}

          ::-ms-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
          ::-ms-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
          ::-ms-scrollbar-corner{background:none;}

          ::-o-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
          ::-o-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
          ::-o-scrollbar-corner{background:none;}

          ::-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
          ::-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
          ::-scrollbar-corner{background:none;}
      </style>
    </head>
    <body>
      <div id="pa">
          <h1>Bienvenue sur le forum</h1>
          <table width="800px" cellspacing="15px" cellpadding="10px" id="contenu-general">
            <tr>
                <td rowspan="2" valign="top" class="withbg" width="300px">
                  <h2>Bienvenue</h2>
                  <div class="concept">
                      <p>Je me nomme Animateur et mon rôle ici est d'ajouter un peu d'action ! Je peux autant créer des évènements et missions, qu'apparaitre dans le rp si tu en fais la demande.</p>
                    <p>Toutefois, puisque le forum vient tout juste d'ouvrir ses portes, je me suis dit qu'il serait préférable d'attendre un moment avant d'organiser quelque chose. Qu'en penses-tu ? Après tout, comment ferais-je pour créer un évènement sans participant(e) ?</p>
                    <p>Dès que nous aurons fleuri un peu, j'organiserai un petit quelque chose pour que l'action commence enfin. Tout n'est qu'une question de temps ! Tu as ma parole.♥</p>
                  </div>
                </td>
                <td valign="top" width="450px">
                  <ul class="groupes">
                      <li><a href="">Règlements</a></li>
                      <li><a href="">Contexte</a></li>
                      <li><a href="">Absences</a></li>
                      <li><a href="">Registres des rôles</a></li>
                    <li><a href="">Faire sa présentation</a></li>
                    <li><a href="">/!\ Établir un traité</a></li>
                      <li><a href="">/!\ Invités ?</a></li>
                  </ul>
                </td>
            </tr>
            <tr>
                <!-- <td>lol</td> on supprime cette ligne, car rowspan -->
                <td valign="top" class="withbg">
                  <h2>Les nouveautés de LE</h2>
                  <div class="news">
                      <p><strong>24/04/2017 :</strong> Création du forum</p>
                      <p><strong>16/07/2017 :</strong> Ouverture du forum</p>
                      <p><strong>News 3 :</strong> The style for news</p>
                      <p><strong>News 4 :</strong> The style for news</p>
                      <p><strong>News 5 :</strong> The style for news</p>
                      <p><strong>News 6 :</strong> The style for news</p>
                      <p><strong>News 7 :</strong> The style for news</p>
                      <p><strong>News 8 :</strong> The style for news</p>
                  </div>
                </td>
            </tr>
            <tr>
                <td valign="top" class="withbg">
                  <h2>Âmes à prendre</h2>
                  <ul id="concours">
                      <li>
                        <img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="AOTM" class="mini"> <!-- miniature concours 84*37px -->
                        <div class="titre-concours">AOTM</div> <!-- titre concours -->
                        <span>
                            <img src="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt=""> <!-- infobulle -->
                            <div class="fleche"></div> <!-- tite fleche -->
                        </span>
                      </li>
                      <li>
                        <img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="AOTM" class="mini"> <!-- miniature concours 84*37px -->
                        <div class="titre-concours">AOTM</div> <!-- titre concours -->
                        <span>
                            <img src="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt=""> <!-- infobulle -->
                            <div class="fleche"></div> <!-- tite fleche -->
                        </span>
                      </li>
                          <li>
                        <img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="AOTM" class="mini"> <!-- miniature concours 84*37px -->
                        <div class="titre-concours">AOTM</div> <!-- titre concours -->
                        <span>
                            <img src="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt=""> <!-- infobulle -->
                            <div class="fleche"></div> <!-- tite fleche -->
                        </span>
                      </li>
                      <li>
                        <img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="AOTM" class="mini"> <!-- miniature concours 84*37px -->
                        <div class="titre-concours">AOTM</div> <!-- titre concours -->
                        <span>
                            <img src="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt=""> <!-- infobulle -->
                            <div class="fleche"></div> <!-- tite fleche -->
                        </span>
                      </li>
                      <!--
                        BLOC A DUPLIQUER SI 3 OU 4 CONCOURS :
                      <li>
                        <img src="staff.png" alt="AOTM" class="mini">
                        <div class="titre-concours">AOTM</div>
                        <span>
                            <img src="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt="">
                            <div class="fleche"></div>
                        </span>
                      </li> -->
                  </ul>
                </td>
                <td valign="top" class="withbg">
                  <h2>Personnes ressources</h2>
                      <ul id="staff">
                        <li onMouseOver="javascript:staff1()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
                        <li onMouseOver="javascript:staff2()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
                        <li onMouseOver="javascript:staff3()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
                        <li onMouseOver="javascript:staff4()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
                        <li onMouseOver="javascript:staff5()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
                      </ul>
                  <div class="staff">
                      <div id="staff1">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, sapiente, quos, qui corporis soluta optio aspernatur harum minus asperiores ipsum repudiandae placeat ipsam.</p>
                        <div class="pseudo">Häastrial Venceslas</div> • <a href="">PROFIL</a> • <a href="">MP</a>
                      </div>

                      <div id="staff2" style="display:none;">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, aliquid, laudantium, neque eius nemo amet dolores velit esse voluptas dicta quisquam quos consequuntur provident</p>
                        <div class="pseudo">Kirëanie</div> • <a href="">PROFIL</a> • <a href="">MP</a>
                      </div>

                      <div id="staff3" style="display:none;">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, illo, assumenda, pariatur reprehenderit nam vero tempore nostrum laboriosam molestiae maxime incidunt.</p>
                        <div class="pseudo">Ulrik</div> • <a href="">PROFIL</a> • <a href="">MP</a>
                      </div>

                      <div id="staff4" style="display:none;">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, autem, dolor in quaerat quas quos pariatur iusto aliquid laudantium et ipsum nulla dignissimos.</p>
                        <div class="pseudo">Névénoë</div> • <a href="">PROFIL</a> • <a href="">MP</a>
                      </div>

                      <div id="staff5" style="display:none;">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, voluptate rerum ipsam incidunt magni temporibus voluptatibus voluptas labore praesentium nemo deserunt.</p>
                        <div class="pseudo">Animateur</div> • <a href="">PROFIL</a> • <a href="">MP</a>
                      </div>
                  </div>
                </td>
            </tr>
            <tr>
                <td valign="top" colspan="2" class="withbg partenaires">
                  <h2>Traités royaux</h2>
                  <ul id="ticker01">
                    <li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt=""></a></li>
                      <li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt=""></a></li>
                      <li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt=""></a></li>
                      <li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt=""></a></li>
                      <li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt=""></a></li>
                      <!-- eccetera -->
                        </ul>
                </td>
            </tr>
          </table>
      <div id="credits">
          PA réalisée par Henrykiki sur <a href="http://www.never-utopia.com/t52871-henrykiki-pa-grise-rose-pale" target="_blank">Never-Utopia</a>
      </div>
      </div>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
      <script type="text/javascript">
          /*!
     * liScroll 1.0
     * Examples and documentation at:
     * http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html
     * 2007-2010 Gian Carlo Mingati
     * Version: 1.0.2.1 (22-APRIL-2011)
     * Dual licensed under the MIT and GPL licenses:
     * http://www.opensource.org/licenses/mit-license.php
     * http://www.gnu.org/licenses/gpl.html
     * Requires:
     * jQuery v1.2.x or later
     *
     */

    jQuery.fn.liScroll = function(settings) {
          settings = jQuery.extend({
          travelocity: 0.07
          }, settings);     
          return this.each(function(){
                var $strip = jQuery(this);
                $strip.addClass("newsticker")
                var stripWidth = 1;
                $strip.find("li").each(function(i){
                stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
                });
                var $mask = $strip.wrap("<div class='mask'></div>");
                var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");                       
                var containerWidth = $strip.parent().parent().width();  http://a.k.a. 'mask' width   
                $strip.width(stripWidth);       
                var totalTravel = stripWidth+containerWidth;
                var defTiming = totalTravel/settings.travelocity;  // thanks to Scott Waye     
                function scrollnews(spazio, tempo){
                $strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
                }
                scrollnews(totalTravel, defTiming);           
                $strip.hover(function(){
                jQuery(this).stop();
                },
                function(){
                var offset = jQuery(this).offset();
                var residualSpace = offset.left + stripWidth;
                var residualTime = residualSpace/settings.travelocity;
                scrollnews(residualSpace, residualTime);
                });       
          }); 
    };
      </script>
      <script>
          $(function(){
          $("#ticker01").liScroll();
      });

      function staff1() {
            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';}
          function staff2() {
            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';}
          function staff3() {
            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';}
          function staff4() {
            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';}
          function staff5() {
            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';}
      </script>
    </body>
    </html>

    Un IMMENSE merci à celui ou celle qui sera en mesure de m'aider :hug:
    avatar
    Shylanova
    FémininAge : 28Messages : 27

    le Jeu 10 Aoû 2017 - 16:04

    Bonjour / Bonsoir Razz

    Un simple petit message pour vous dire que ma demande est toujours d'actualité. Je continue à faire des tests pour essayer de trouver la solution moi-même, mais je dois vraiment juste passé a côté d'un truc vraiment simple (haha) Je suis quasi certaine que c'est dans cette partie que cela se règle :

    Code:
    /* PARTENAIRES */
         
          td.partenaires {
            padding-top: 15px !important;
          }

          .tickercontainer { /* the outer div with the black border */
            width: 750px;
            height: 31px;
            margin: 0 auto;
            padding: 0;
            overflow: hidden;
            position: relative;
            z-index: 2;
          }
          .tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
            position: relative;
            left: 0px;
            top: 0px;
            width: 750px;
            overflow: hidden;
          }
          ul.newsticker { /* that's your list */
            position: relative;
            left: 750px;
          }
            ul.newsticker li {
            float: left; /* important: display inline gives incorrect results when you check for elem's width */
            width: 88px;
            margin: 0 2px;
            padding: 0;
          }

    Merci d'avance xxx
    avatar
    Shylanova
    FémininAge : 28Messages : 27

    le Mer 16 Aoû 2017 - 20:55

    Bonjour :love:
    Un petit message pour dire que le sujet est toujours d'actualité.

    Bonne journée à vous,
    Shylanova xxx
    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Jeu 17 Aoû 2017 - 5:14

    Salut!

    Essaie ceci :
    Code:
    <!doctype html>
    <html lang="fr">
    <head>
            <meta charset="UTF-8" />
      <title>PA grise/rose + scrollbar personnalisée.</title>
     <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css">
      <link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
      <style>

          body {
            background: #e4e1e2;
          }

          #pa h1, #pa h2, #pa h3, #pa h4, #pa h5, #pa h6, #pa p {
            margin: 0; padding: 0; font-weight: normal;
          }

          #pa {
            width: 800px;
            min-height: 400px;
            border-radius: 10px;
            background: #fff;
            margin: 75px auto 20px;
            position: relative;
            padding-top: 50px;
            font-family: "abeatbykai", sans-serif;
            font-size: 12px;
            letter-spacing: 1px;
            color: gray;
          }

          #pa a {
            color: darkgray;
            text-decoration: none;
          }

          #pa a, #pa h2, .news p {
            -webkit-transition: all .2s ease;
            -moz-transition: all .2s ease;
            -ms-transition: all .2s ease;
            -o-transition: all .2s ease;
            transition: all .2s ease;
          }

          #pa a:hover {
            color: #d74e77;
          }
         
          #pa h1 {
            width: 347px;
            height: 70px;
                  position: absolute;

            left: 50%;
            margin-left: -173.5px;
            text-indent: -9999px;
          }

          ul#ticker01, ul#concours, ul.groupes, ul#staff
          {
            list-style-type: none;
            margin: 0;
            padding: 0;
          }

          #pa h2 img {
            position: absolute; top:0;
          }

          #pa table td {
            min-height: 50px;
            border-radius: 10px;
            position: relative;
            padding-top: 25px;
          }

          #pa table td.withbg {
            background: #e4e1e2;
          }

          #pa h2 {
            height: 34px;
            position: absolute;
            top: -12.5px;
            z-index: 3;
            font-size: 22px;
            font-family: Fjalla One;
          }

          #pa h2:hover {
            color: rgba(209,42,97,1);
          }

    /* CONCEPT */

          .concept {
            height: 192px; max-height: 192px;
            overflow-y: scroll;
            padding: 1px;
        text-align : justify;
          }

          .concept p {
            margin-bottom: 20px !important;
            padding-right: 20px !important;
          }

          .concept p:last-child {
            margin-bottom: 0px !important;
          }

    /* GROUPES */

          .groupes {
            height: 60px; max-height: 60px;
            text-align: center;
        font-family:'Cinzel', sans-serif;
        font-size: 14px;
        text-transform: uppercase;
          }

          .groupes li {
            display: inline-block;
            margin: 0 10px;
          }

    /* NEWS */

          .news {
            height: 87px; max-height: 87px;
            overflow-y: scroll;
          }

          .news strong {
            color: #d74e77;
            font-family: sans-serif;
            text-transform: uppercase;
            font-weight: normal;
          }

          .news p {
            border-bottom: 1px solid lightgray;
            padding: 2px 0 !important; margin: 2px 0 !important;
          }

          .news p:hover {
            border-bottom: 1px solid lightgray;
            padding: 2px 0 2px 20px !important; margin: 2px 0 !important;
          }

    /* CONCOURS */
         
          ul#concours {
            width: 280px;
            height: 114px; max-height: 114px;
            margin: 0px auto 0;
            text-align: center;
          }
         
          ul#concours li {
            width: 84px;
            margin: 0 5px;
            display: inline-block;
            position: relative;
            z-index: 4;
          }

          ul#concours li span {
            display: none;
            width: 150px;
            padding: 10px;
            position: absolute;
            bottom: 60px;  right: 50%; margin-right: -75px;
            background: #fff;
            color: #fff;
            z-index: 5;
            border-radius: 10px;
            border-bottom: 1px solid #d74e77;
          }

          ul#concours li:hover span {
            display: block;
          }

          ul#concours li span img {
            max-width: 150px;
            height: auto;
          }

          .fleche {
            width: 26px;
            height: 12px;
            background: url("http://i39.servimg.com/u/f39/19/07/10/81/fleche11.png");
            position: absolute;
            bottom: -12px;
            left: 50%;
            margin-left: -13px;
          }

    /* STAFF */

          #staff img, ul#concours li img.mini {
            -webkit-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
            -moz-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
            -ms-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
            -o-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
            mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
          }

          #staff li {
            display: inline-block;
            width: 80px; max-width: 80px;
          }

          #staff li:hover {
            cursor: help;
          }

          .staff p {
            padding: 10px 0 10px !important;
          }

          .staff{
            text-align: center;
          }

          .staff .pseudo
          {
            display: inline-block;
            color: #d74e77;
          }

    /* PARTENAIRES */
         
          td.partenaires {
            padding-top: 15px !important;
          }
          .partenaires ul { /* that's your list */
            position: relative;
            left: 0px;
          }
            .partenaires li {
            display: inline-block;
            float: left; /* important: display inline gives incorrect results when you check for elem's width */
            width: 88px;
            margin: 0 2px;
            padding: 0;
          }

     
       
    /* CREDITS */

          #credits {
            position: absolute;
            padding: 0px 10px;
            bottom: -20px;
            right: 0px;
            height: 20px;
            line-height: 20px;
            font-size: 8px;
            color: gray;
            text-transform: uppercase;
            text-shadow: 1px 1px 0px #ffffff;
          }
         
    /* SCROLLBAR */

          ::-webkit-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
          ::-webkit-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
          ::-webkit-scrollbar-corner{background:none;}

          ::-moz-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
          ::-moz-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
          ::-moz-scrollbar-corner{background:none;}

          ::-ms-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
          ::-ms-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
          ::-ms-scrollbar-corner{background:none;}

          ::-o-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
          ::-o-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
          ::-o-scrollbar-corner{background:none;}

          ::-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
          ::-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
          ::-scrollbar-corner{background:none;}
      </style>
    </head>
    <body>
      <div id="pa">
          <h1>Bienvenue sur le forum</h1>
          <table width="800px" cellspacing="15px" cellpadding="10px" id="contenu-general">
            <tr>
                <td rowspan="2" valign="top" class="withbg" width="300px">
                  <h2>Bienvenue</h2>
                  <div class="concept">
                      <p>Je me nomme Animateur et mon rôle ici est d'ajouter un peu d'action ! Je peux autant créer des évènements et missions, qu'apparaitre dans le rp si tu en fais la demande.</p>
                    <p>Toutefois, puisque le forum vient tout juste d'ouvrir ses portes, je me suis dit qu'il serait préférable d'attendre un moment avant d'organiser quelque chose. Qu'en penses-tu ? Après tout, comment ferais-je pour créer un évènement sans participant(e) ?</p>
                    <p>Dès que nous aurons fleuri un peu, j'organiserai un petit quelque chose pour que l'action commence enfin. Tout n'est qu'une question de temps ! Tu as ma parole.♥</p>
                  </div>
                </td>
                <td valign="top" width="450px">
                  <ul class="groupes">
                      <li><a href="">Règlements</a></li>
                      <li><a href="">Contexte</a></li>
                      <li><a href="">Absences</a></li>
                      <li><a href="">Registres des rôles</a></li>
                    <li><a href="">Faire sa présentation</a></li>
                    <li><a href="">/!\ Établir un traité</a></li>
                      <li><a href="">/!\ Invités ?</a></li>
                  </ul>
                </td>
            </tr>
            <tr>
                <!-- <td>lol</td> on supprime cette ligne, car rowspan -->
                <td valign="top" class="withbg">
                  <h2>Les nouveautés de LE</h2>
                  <div class="news">
                      <p><strong>24/04/2017 :</strong> Création du forum</p>
                      <p><strong>16/07/2017 :</strong> Ouverture du forum</p>
                      <p><strong>News 3 :</strong> The style for news</p>
                      <p><strong>News 4 :</strong> The style for news</p>
                      <p><strong>News 5 :</strong> The style for news</p>
                      <p><strong>News 6 :</strong> The style for news</p>
                      <p><strong>News 7 :</strong> The style for news</p>
                      <p><strong>News 8 :</strong> The style for news</p>
                  </div>
                </td>
            </tr>
            <tr>
                <td valign="top" class="withbg">
                  <h2>Âmes à prendre</h2>
                  <ul id="concours">
                      <li>
                        <img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="AOTM" class="mini" /> <!-- miniature concours 84*37px -->
                        <div class="titre-concours">AOTM</div> <!-- titre concours -->
                        <span>
                          <img src="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt="" /> <!-- infobulle -->
                            <div class="fleche"></div> <!-- tite fleche -->
                        </span>
                      </li>
                      <li>
                        <img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="AOTM" class="mini" /> <!-- miniature concours 84*37px -->
                        <div class="titre-concours">AOTM</div> <!-- titre concours -->
                        <span>
                          <img src="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt="" /> <!-- infobulle -->
                            <div class="fleche"></div> <!-- tite fleche -->
                        </span>
                      </li>
                          <li>
                            <img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="AOTM" class="mini" /> <!-- miniature concours 84*37px -->
                        <div class="titre-concours">AOTM</div> <!-- titre concours -->
                        <span>
                          <img src="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt="" /> <!-- infobulle -->
                            <div class="fleche"></div> <!-- tite fleche -->
                        </span>
                      </li>
                      <li>
                        <img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="AOTM" class="mini" /> <!-- miniature concours 84*37px -->
                        <div class="titre-concours">AOTM</div> <!-- titre concours -->
                        <span>
                          <img src="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt="" /> <!-- infobulle -->
                            <div class="fleche"></div> <!-- tite fleche -->
                        </span>
                      </li>
                      <!--
                        BLOC A DUPLIQUER SI 3 OU 4 CONCOURS :
                      <li>
                        <img src="staff.png" alt="AOTM" class="mini">
                        <div class="titre-concours">AOTM</div>
                        <span>
                          <img src="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt="" />
                            <div class="fleche"></div>
                        </span>
                      </li> -->
                  </ul>
                </td>
                <td valign="top" class="withbg">
                  <h2>Personnes ressources</h2>
                      <ul id="staff">
                        <li onMouseOver="javascript:staff1()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="" /></li>
                        <li onMouseOver="javascript:staff2()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="" /></li>
                        <li onMouseOver="javascript:staff3()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="" /></li>
                        <li onMouseOver="javascript:staff4()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="" /></li>
                        <li onMouseOver="javascript:staff5()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="" /></li>
                      </ul>
                  <div class="staff">
                      <div id="staff1">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, sapiente, quos, qui corporis soluta optio aspernatur harum minus asperiores ipsum repudiandae placeat ipsam.</p>
                        <div class="pseudo">Häastrial Venceslas</div> • <a href="">PROFIL</a> • <a href="">MP</a>
                      </div>

                      <div id="staff2" style="display:none;">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, aliquid, laudantium, neque eius nemo amet dolores velit esse voluptas dicta quisquam quos consequuntur provident</p>
                        <div class="pseudo">Kirëanie</div> • <a href="">PROFIL</a> • <a href="">MP</a>
                      </div>

                      <div id="staff3" style="display:none;">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, illo, assumenda, pariatur reprehenderit nam vero tempore nostrum laboriosam molestiae maxime incidunt.</p>
                        <div class="pseudo">Ulrik</div> • <a href="">PROFIL</a> • <a href="">MP</a>
                      </div>

                      <div id="staff4" style="display:none;">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, autem, dolor in quaerat quas quos pariatur iusto aliquid laudantium et ipsum nulla dignissimos.</p>
                        <div class="pseudo">Névénoë</div> • <a href="">PROFIL</a> • <a href="">MP</a>
                      </div>

                      <div id="staff5" style="display:none;">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, voluptate rerum ipsam incidunt magni temporibus voluptatibus voluptas labore praesentium nemo deserunt.</p>
                        <div class="pseudo">Animateur</div> • <a href="">PROFIL</a> • <a href="">MP</a>
                      </div>
                  </div>
                </td>
            </tr>
            <tr>
                <td valign="top" colspan="2" class="withbg partenaires">
                  <h2>Traités royaux</h2>
                  <ul id="ticker01">
                    <li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt="" /></a></li>
                    <li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt="" /></a></li>
                    <li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt="" /></a></li>
                    <li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt="" /></a></li>
                    <li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt="" /></a></li>
                    <li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt="" /></a></li>
                    <li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt="" /></a></li>
                    <li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt="" /></a></li>
                      <!-- eccetera -->
                        </ul>
                </td>
            </tr>
          </table>
      <div id="credits">
          PA réalisée par Henrykiki sur <a href="http://www.never-utopia.com/t52871-henrykiki-pa-grise-rose-pale" target="_blank">Never-Utopia</a>
      </div>
      </div>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

      <script>

      function staff1() {
            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';}
          function staff2() {
            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';}
          function staff3() {
            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';}
          function staff4() {
            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';}
          function staff5() {
            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';}
      </script>
    </body>
    </html>



    avatar
    Nihil Scar Winspeare
    Messages : 4799

    le Sam 9 Sep 2017 - 18:27

    Hello Shylanova :)

    Est ce que tu as vu la réponse d'Onyx ? :)

    Bonjour, nous sommes sans nouvelles...Ce topic est-il toujours d'actualité ? Merci de nous tenir informés du déroulement de ce problème.
    Attention, l'absence de réponse à ce message entrainera l'archivage du topic d'ici une dizaine de jours.

    Contenu sponsorisé


      La date/heure actuelle est Mer 22 Nov 2017 - 6:10