Problème avec la PA

[Charmed Eternity]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 2015-01-13
Lien du forum : http://lonney-t-pub.monfofo.net/

Description du problème

Bonjour à vous. Voilà mon problème, lorsque je clique sur Profil ou MP dans la section staff( sur la PA) la PA disparait et l'entête du forum devient la PA . J'ai pourtant ajouter les liens qu'il fallait à ma page HTML. La voici d'ailleurs:

Code:

<meta charset="UTF-8" />  <title>PA grise/rose + scrollbar personnalisée.</title>  <link href="http://fonts.googleapis.com/css?family=Covered+By+Your+Grace" rel="stylesheet" type="text/css" />  <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;
        background: url("http://i39.servimg.com/u/f39/19/07/10/81/titre-10.png") no-repeat;
        position: absolute;
        top: -55px;
        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: 34px;
        font-family: 'Covered By Your Grace', cursive;
      }

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

/* CONCEPT */

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

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

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

/* Top Partenaire */

      .groupes {
        height: 60px; max-height: 60px;
        text-align: center;
      }

      .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;
      }

/* Tooniens Du mois*/
     
      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;
      }

/* Référencement */
     
      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>   
<div id="pa">
                                  
   <h1>
                  Bienvenue !           
   </h1>
                                  
   <table style="width: 800px;" id="contenu-general" cellpadding="10px" cellspacing="15px">
                                       
      <tbody>
                                
         <tr>
                                                 
            <td style="width: 300px;" rowspan="2" class="withbg" valign="top">
                                                      
               <h2>
                              Looney Tunes Pub         
               </h2>
                                                      
               <div class="concept">
                                                                                       
                  <p>
                               Bienvenue sur  Looney Tunes Pub !         
                  </p>
                                                             
                  <p>
                                 Looney Tunes Pub est un forum de Publicité, sur lequel vous pouvez faire votre Pub, bien sur. Nous vous offrons aussi la possibilité de faire des commandes pour vos Design et pour vos Codages, mais aussi des Concours et des EVENt à vous couper le souffle. Rejoignez nous pour plus de plaisir et d'amusement.     
                  </p>
                                                         
               </div>
                                                    
            </td>
                                                 
            <td style="width: 450px;" valign="top">
                                                      
               <ul class="groupes">
                                                             
                  <li>
                                 <a href="" style="color: red;">Top 1</a>           
                  </li>
                                                             
                  <li>
                                 <a href="" style="color: green;">Top 2</a>           
                  </li>
                                                             
                  <li>
                                 <a href="" style="color: orange;">Top 3</a>           
                  </li>
                                                             
                  <li>
                                 <a href="" style="color: blue;">Top 4</a>           
                  </li>
                                                             
                  <li>
                                 <a href="" style="color: magenta;">Top 5</a>           
                  </li>
                                                         
               </ul>
                                                    
            </td>
                                             
         </tr>
                                          
         <tr>
                                                 
            <!--              <td>lol</td> on supprime cette ligne, car rowspan              -->                       
            <td class="withbg" valign="top">
                                                      
               <h2>
                              Les nouveautés           
               </h2>
                                                      
               <div class="news">
                                                             
                  <p>
                                 <strong> ../../.... </strong> <a href=""> Texte </a>           
                  </p>
                           
                  <p>
                                 <strong> ../../.... </strong> <a href=""> Texte </a>           
                  </p>
                                     
                  <p>
                                 <strong> ../../.... </strong> <a href=""> Texte </a>           
                  </p>
                                     
                  <p>
                                 <strong> ../../.... </strong> <a href=""> Texte </a>           
                  </p>
                                     
                  <p>
                                 <strong> ../../.... </strong> <a href=""> Texte </a>           
                  </p>
                                                                                     
               </div>
                                                    
            </td>
                                             
         </tr>
                                          
         <tr>
                                                 
            <td class="withbg" valign="top">
                                                      
               <h2>
                              Tooniens Du mois           
               </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/2415/57/91/98/avatars/17369-57.jpg" alt="" />             
                        <!--              infobulle              -->                        </span>           
                     <div style="" class="fleche">
                                               
                     </div><span>             
                        <!--              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/2415/57/91/98/avatars/17369-57.jpg" alt="" />             
                        <!--              infobulle              -->                        </span>           
                     <div style="" class="fleche">
                                               
                     </div><span>             
                        <!--              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/2415/57/91/98/avatars/17369-57.jpg" alt="">
                        <div class="fleche"></div>
                    </span>
                  </li>              -->                           
               </ul>
                                                    
            </td>
                                                 
            <td class="withbg" valign="top">
                                                      
               <h2>
                              Le staff du forum :           
               </h2>
                                                          
               <ul id="staff">
                                                               
                  <li onmouseover="javascript:staff1()">
                                 <img src="http://img15.hostingpics.net/pics/143830choux.jpg" alt="" />           
                  </li>
                                                               
                  <li onmouseover="javascript:staff2()">
                                 <img src=" http://img15.hostingpics.net/pics/822819doudou.jpg" alt="" />           
                  </li>
                                                               
                  <li onmouseover="javascript:staff3()">
                                 <img src="http://img15.hostingpics.net/pics/968925luda.jpg" 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>
                              Fondateur du forum     
                     </p>
                                                                  
                     <div class="pseudo">
                                    ChouXblanC           
                     </div>
                                   • <a href="http://lonney-t-pub.monfofo.net/u1">PROFIL</a> • <a href="http://lonney-t-pub.monfofo.net/privmsg?mode=post&u=1">MP</a>                             
                  </div>
                                                             
                  <div id="staff2" style="display:none;">
                                                                  
                     <p>
                                  Administratrice         
                     </p>
                                                                  
                     <div class="pseudo">
                                    Bacadoudou         
                     </div>
                                   • <a href="http://lonney-t-pub.monfofo.net/u2">PROFIL</a> • <a href="http://lonney-t-pub.monfofo.net/privmsg?mode=post&u=2">MP</a>                             
                  </div>
                                                             
                  <div id="staff3" style="display:none;">
                                                                  
                     <p>
                                    Administrateur       
                     </p>
                                                                  
                     <div class="pseudo">
                                    Ludaweb01         
                     </div>
                                   • <a href="http://lonney-t-pub.monfofo.net/u3">PROFIL</a> • <a href="http://lonney-t-pub.monfofo.net/privmsg?mode=post&u=3">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">
                                    PSEUDO           
                     </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">
                                    PSEUDO           
                     </div>
                                   • <a href="">PROFIL</a> • <a href="">MP</a>                             
                  </div>
                                                         
               </div>
                                                    
            </td>
                                             
         </tr>
                                          
         <tr>
                                                 
            <td colspan="2" class="withbg partenaires" valign="top">
                                                      
               <h2>
                              Référencement           
               </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>
                                                             
                  <!--              eccetera              -->                           
               </ul>
                                                    
            </td>
                                             
         </tr>
                                        
      </tbody>
                             
   </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>

Voilà et merci à l'avance de votre aide

[Scoubifitz]

bonjour,

comme votre PA est dans une iframe , tous vos liens s'ouvriront dans cette iframe ...

Il faut rajouter :

Code:

 target="_parent"

à tous les liens de votre PA ...

[Charmed Eternity]

J'ajoute ça comment? Serait-ce possible d'avoir un exemple s'il vous plait?

[Scoubifitz]

par exemple :

Code:

<div class="pseudo">ChouXblanC</div>
• <a href="http://lonney-t-pub.monfofo.net/u1" target="_parent">PROFIL</a> • <a href="http://lonney-t-pub.monfofo.net/privmsg?mode=post&u=1" target="_parent">MP</a>

à faire sur tous les liens qui pointent vers le forum , ou une page html .

[Charmed Eternity]

Alors j'ai installé comme mentionné, mais le problème est que le tout apparait sur la PA, quand je passe la souris sur le premier icône, je vois profil, et MP, mais sur les autres images je ne le vois pas. Voilà le codage modifié avec ce que vous m'avez dit d'ajouter:

Code:

<meta charset="UTF-8" />  <title>PA grise/rose + scrollbar personnalisée.</title>  <link href="http://fonts.googleapis.com/css?family=Covered+By+Your+Grace" rel="stylesheet" type="text/css" />  <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;
        background: url("http://i39.servimg.com/u/f39/19/07/10/81/titre-10.png") no-repeat;
        position: absolute;
        top: -55px;
        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: 34px;
        font-family: 'Covered By Your Grace', cursive;
      }

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

/* CONCEPT */

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

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

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

/* Top Partenaire */

      .groupes {
        height: 60px; max-height: 60px;
        text-align: center;
      }

      .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;
      }

/* Tooniens Du mois*/
     
      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;
      }

/* Référencement */
     
      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>   
<div id="pa">
                                        
   <h1>
                      Bienvenue !               
   </h1>
                                        
   <table style="width: 800px;" id="contenu-general" cellpadding="10px" cellspacing="15px">
                                             
      <tbody>
                                      
         <tr>
                                                       
            <td style="width: 300px;" rowspan="2" class="withbg" valign="top">
                                                            
               <h2>
                                  Looney Tunes Pub           
               </h2>
                                                            
               <div class="concept">
                                                                                             
                  <p>
                                 Bienvenue sur  Looney Tunes Pub !           
                  </p>
                                                                   
                  <p>
                                     Looney Tunes Pub est un forum de Publicité, sur lequel vous pouvez faire votre Pub, bien sur. Nous vous offrons aussi la possibilité de faire des commandes pour vos Design et pour vos Codages, mais aussi des Concours et des EVENt à vous couper le souffle. Rejoignez nous pour plus de plaisir et d'amusement.         
                  </p>
                                                               
               </div>
                                                          
            </td>
                                                       
            <td style="width: 450px;" valign="top">
                                                            
               <ul class="groupes">
                                                                   
                  <li>
                                     <a href="" style="color: red;">Top 1</a>               
                  </li>
                                                                   
                  <li>
                                     <a href="" style="color: green;">Top 2</a>               
                  </li>
                                                                   
                  <li>
                                     <a href="" style="color: orange;">Top 3</a>               
                  </li>
                                                                   
                  <li>
                                     <a href="" style="color: blue;">Top 4</a>               
                  </li>
                                                                   
                  <li>
                                     <a href="" style="color: magenta;">Top 5</a>               
                  </li>
                                                               
               </ul>
                                                          
            </td>
                                                   
         </tr>
                                                
         <tr>
                                                       
            <!--                  <td>lol</td> on supprime cette ligne, car rowspan                  -->                           
            <td class="withbg" valign="top">
                                                            
               <h2>
                                  Les nouveautés               
               </h2>
                                                            
               <div class="news">
                                                                   
                  <p>
                                     <strong> ../../.... </strong> <a href=""> Texte </a>               
                  </p>
                                 
                  <p>
                                     <strong> ../../.... </strong> <a href=""> Texte </a>               
                  </p>
                                           
                  <p>
                                     <strong> ../../.... </strong> <a href=""> Texte </a>               
                  </p>
                                           
                  <p>
                                     <strong> ../../.... </strong> <a href=""> Texte </a>               
                  </p>
                                           
                  <p>
                                     <strong> ../../.... </strong> <a href=""> Texte </a>               
                  </p>
                                                                                           
               </div>
                                                          
            </td>
                                                   
         </tr>
                                                
         <tr>
                                                       
            <td class="withbg" valign="top">
                                                            
               <h2>
                                  Tooniens Du mois             
               </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/2415/57/91/98/avatars/17369-57.jpg" alt="" />               
                        <!--                  infobulle                  -->                        </span>               
                     <div style="" class="fleche">
                                                     
                     </div><span>               
                        <!--                  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/2415/57/91/98/avatars/17369-57.jpg" alt="" />               
                        <!--                  infobulle                  -->                        </span>               
                     <div style="" class="fleche">
                                                     
                     </div><span>               
                        <!--                  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/2415/57/91/98/avatars/17369-57.jpg" alt="">
                        <div class="fleche"></div>
                    </span>
                  </li>                  -->                             
               </ul>
                                                          
            </td>
                                                       
            <td class="withbg" valign="top">
                                                            
               <h2>
                                  Le staff du forum :               
               </h2>
                                                                
               <ul id="staff">
                                                                     
                  <li onmouseover="javascript:staff1()">
                                     <img src="http://img15.hostingpics.net/pics/143830choux.jpg" alt="" />               
                  </li>
                                                                     
                  <li onmouseover="javascript:staff2()">
                                     <img src=" http://img15.hostingpics.net/pics/822819doudou.jpg" alt="" />               
                  </li>
                                                                     
                  <li onmouseover="javascript:staff3()">
                                     <img src="http://img15.hostingpics.net/pics/968925luda.jpg" alt="" />               
                  </li>
                                                                     
                  <li onmouseover="javascript:staff4()">
                                     <img src="IMG ici" alt="" />               
                  </li>
                                                                     
                  <li onmouseover="javascript:staff5()">
                                     <img src="IMG ici" alt="" />               
                  </li>
                                                                   
               </ul>
                                                            
               <div class="staff">
                                                                   
                  <div id="staff1">
                                                                        
                     <p>
                                  Fondateur du forum       
                     </p>
                                                                                
                     <div class="pseudo">
                          ChouXblanC 
                     </div>
                               • <a href="http://lonney-t-pub.monfofo.net/u1" target="_parent">PROFIL</a> • <a href="http://lonney-t-pub.monfofo.net/privmsg?mode=post&u=1" target="_parent">MP</a>                                               
                     <div id="staff2">
                                                                           
                        <p>
                                         Administratrice           
                        </p>
                                                                                   
                        <div class="pseudo">
                             Bacadoudou 
                        </div>
                                  • <a href="http://lonney-t-pub.monfofo.net/u2" target="_parent">PROFIL</a> • <a href="http://lonney-t-pub.monfofo.net/privmsg?mode=post&u=2" target="_parent">MP</a>                                               
                        <div id="staff3">
                                                                              
                           <p>
                                              Administrateur           
                           </p>
                                                                                      
                           <div class="pseudo">
                                Ludaweb01 
                           </div>
                                     • <a href="http://lonney-t-pub.monfofo.net/u3" target="_parent">PROFIL</a> • <a href="http://lonney-t-pub.monfofo.net/privmsg?mode=post&u=3" target="_parent">MP</a>                                               
                           <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">
                                                 PSEUDO               
                              </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">
                                                 PSEUDO               
                              </div>
                                              • <a href="">PROFIL</a> • <a href="">MP</a>                                 
                           </div>
                                                                        
                        </div>
                                                                   
                     </div>
                      
                  </div>
                   
               </div>
                
            </td>
                                                   
         </tr>
                                                
         <tr>
                                                       
            <td colspan="2" class="withbg partenaires" valign="top">
                                                            
               <h2>
                                  Référencement               
               </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>
                                                                   
                  <!--                  eccetera                  -->                             
               </ul>
                                                          
            </td>
                                                   
         </tr>
                                              
      </tbody>
                                   
   </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>

Le forum ici: http://lonney-t-pub.monfofo.net/

Vous allez pouvoir voir sur la PA le problème que j'ai maintenant. Merci d'avance

[Scoubifitz]

bonjour,

si je pars du premier code que vous avez fourni , ça fonctionne ...

Code:

<meta charset="UTF-8"/>
<title>PA grise/rose + scrollbar personnalisée.</title>
<link href="http://fonts.googleapis.com/css?family=Covered+By+Your+Grace" rel="stylesheet" type="text/css"/>
<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;
background: url("http://i39.servimg.com/u/f39/19/07/10/81/titre-10.png") no-repeat;
position: absolute;
top: -55px;
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: 34px;
font-family: 'Covered By Your Grace', cursive;
}
#pa h2:hover {
color: rgba(209,42,97,1);
}
/* CONCEPT */
.concept {
height: 192px; max-height: 192px;
overflow-y: scroll;
padding: 1px;
}
.concept p {
margin-bottom: 20px !important;
padding-right: 20px !important;
}
.concept p:last-child {
margin-bottom: 0px !important;
}
/* Top Partenaire */
.groupes {
height: 60px; max-height: 60px;
text-align: center;
}
.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;
}
/* Tooniens Du mois*/
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;
}
/* Référencement */
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>
<div id="pa">
<h1>
Bienvenue ! </h1>
<table style="width: 800px;" id="contenu-general" cellpadding="10px" cellspacing="15px">
<tbody>
<tr>
<td style="width: 300px;" rowspan="2" class="withbg" valign="top">
<h2>
Looney Tunes Pub </h2>
<div class="concept">
<p>
Bienvenue sur Looney Tunes Pub !
</p>
<p>
Looney Tunes Pub est un forum de Publicité, sur lequel vous pouvez faire votre Pub, bien sur. Nous vous offrons aussi la possibilité de faire des commandes pour vos Design et pour vos Codages, mais aussi des Concours et des EVENt à vous couper le souffle. Rejoignez nous pour plus de plaisir et d'amusement.
</p>
</div>
</td>
<td style="width: 450px;" valign="top">
<ul class="groupes">
<li>
<a href="" style="color: red;">Top 1</a>
</li>
<li>
<a href="" style="color: green;">Top 2</a>
</li>
<li>
<a href="" style="color: orange;">Top 3</a>
</li>
<li>
<a href="" style="color: blue;">Top 4</a>
</li>
<li>
<a href="" style="color: magenta;">Top 5</a>
</li>
</ul>
</td>
</tr>
<tr>
<!-- <td>lol</td> on supprime cette ligne, car rowspan -->
<td class="withbg" valign="top">
<h2>
Les nouveautés </h2>
<div class="news">
<p>
<strong> ../../.... </strong><a href=""> Texte </a>
</p>
<p>
<strong> ../../.... </strong><a href=""> Texte </a>
</p>
<p>
<strong> ../../.... </strong><a href=""> Texte </a>
</p>
<p>
<strong> ../../.... </strong><a href=""> Texte </a>
</p>
<p>
<strong> ../../.... </strong><a href=""> Texte </a>
</p>
</div>
</td>
</tr>
<tr>
<td class="withbg" valign="top">
<h2>
Tooniens Du mois </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/2415/57/91/98/avatars/17369-57.jpg" alt=""/>
<!-- infobulle -->
</span>
<div style="" class="fleche">
</div>
<span>
<!-- 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/2415/57/91/98/avatars/17369-57.jpg" alt=""/>
<!-- infobulle -->
</span>
<div style="" class="fleche">
</div>
<span>
<!-- 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/2415/57/91/98/avatars/17369-57.jpg" alt="">
<div class="fleche"></div>
</span>
</li> -->
</ul>
</td>
<td class="withbg" valign="top">
<h2>
Le staff du forum : </h2>
<ul id="staff">
<li onmouseover="javascript:staff1()">
<img src="http://img15.hostingpics.net/pics/143830choux.jpg" alt=""/>
</li>
<li onmouseover="javascript:staff2()">
<img src=" http://img15.hostingpics.net/pics/822819doudou.jpg" alt=""/>
</li>
<li onmouseover="javascript:staff3()">
<img src="http://img15.hostingpics.net/pics/968925luda.jpg" 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>
Fondateur du forum
</p>
<div class="pseudo">
ChouXblanC
</div>
• <a href="http://lonney-t-pub.monfofo.net/u1" target="_parent">PROFIL</a> • <a href="http://lonney-t-pub.monfofo.net/privmsg?mode=post&u=1" target="_parent">MP</a>
</div>
<div id="staff2" style="display:none;">
<p>
Administratrice
</p>
<div class="pseudo">
Bacadoudou
</div>
• <a href="http://lonney-t-pub.monfofo.net/u2" target="_parent">PROFIL</a> • <a href="http://lonney-t-pub.monfofo.net/privmsg?mode=post&u=2" target="_parent">MP</a>
</div>
<div id="staff3" style="display:none;">
<p>
Administrateur
</p>
<div class="pseudo">
Ludaweb01
</div>
• <a href="http://lonney-t-pub.monfofo.net/u3" target="_parent">PROFIL</a> • <a href="http://lonney-t-pub.monfofo.net/privmsg?mode=post&u=3" target="_parent">MP</a>
</div>
<div id="staff4" style="display:none;">
<p>
Lorem ipsum dolor sit amet
</p>
<div class="pseudo">
PSEUDO
</div>
• <a href="" target="_parent">PROFIL</a> • <a href="" target="_parent">MP</a>
</div>
<div id="staff5" style="display:none;">
<p>Lorem ipsum dolor sit amet</p>
<div class="pseudo">PSEUDO</div>
• <a href=""  target="_parent">PROFIL</a> • <a href="" target="_parent">MP</a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2" class="withbg partenaires" valign="top">
<h2>
Référencement </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>
<!-- eccetera -->
</ul>
</td>
</tr>
</tbody>
</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();
$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>

[Charmed Eternity]

Problème résolu, merci beaucoup.