Problème avec la PA

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème avec la PA

Message par Charmed Eternity Mar 13 Jan 2015 - 23:39

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 Smile


Dernière édition par Charmed Eternity le Sam 17 Jan 2015 - 15:50, édité 1 fois
avatar

Charmed Eternity
**

Messages : 82
Inscrit(e) le : 29/11/2010

http://charmed-ones.forumactif.com/
Charmed Eternity a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la PA

Message par Scoubifitz Mer 14 Jan 2015 - 12:03

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 ...
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la PA

Message par Charmed Eternity Mer 14 Jan 2015 - 15:42

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

Charmed Eternity
**

Messages : 82
Inscrit(e) le : 29/11/2010

http://charmed-ones.forumactif.com/
Charmed Eternity a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la PA

Message par Scoubifitz Mer 14 Jan 2015 - 21:13

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 .
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la PA

Message par Charmed Eternity Ven 16 Jan 2015 - 20:13

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 Smile
avatar

Charmed Eternity
**

Messages : 82
Inscrit(e) le : 29/11/2010

http://charmed-ones.forumactif.com/
Charmed Eternity a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la PA

Message par Scoubifitz Sam 17 Jan 2015 - 7:02

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>

Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la PA

Message par Charmed Eternity Sam 17 Jan 2015 - 15:50

Problème résolu, merci beaucoup. Very Happy
avatar

Charmed Eternity
**

Messages : 82
Inscrit(e) le : 29/11/2010

http://charmed-ones.forumactif.com/
Charmed Eternity a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum