Up

Salut,

Es-tu allée voir du côté du libre service ? (il y a même un index des codes disponibles là) Je pense que tu devrais pouvoir trouver des codes intéressants. On peut ensuite t'aider à les personnaliser si là est ton problème

Mais sinon, il nous faudra un schéma. Soit réalisé sur un logiciel graphique comme photofiltre soit à un schéma à la main scanné. C'est comme ça que travaillent les codeurs. Ils ont déjà réalisé plein de codes pour le libre-service donc ils ne sauront pas quoi faire pour toi si tu ne leur dis pas :)

Oui, merci 

Je ne suis pas très douée malheureusement pour faire aussi beaux  

J'avais pensée un plus comme ça au faite : https://www.never-utopia.com/t52963-pa-gris-rose-infobulles-staff-news-partenaires-defilants#798643

J'ai essayée de mettres mes liens mais même avec les images ça ne rentrent pas correctement

Tu peux nous montrer comment tu as essayé de le faire, qu'on t'aide à résoudre le problème ? :)

Pour montrer je ne sais pas , faut que je vois... Mais, tout ce que je sais est que l'image met une croix à la place dans les bulles pour les modos déjà j'ai posée l'adresse de l'image .

Ensuite, pour le petit widget défilant les "nouveaux sujets" , je ne sais pas comment enlever les mots qu'il a mit pour mettre le défilement des nouveaux sujets. ---> les nouveautés 

Le contexte, encore ça passe j'arrive à écrire mon texte  

Merci pour l'aide je désespérée

Ce que je veux dire par "montrer"c'est donner le code en fait

Ah ok! J'avais pas compris :')

Alors, j'arrive je re édit quand ce sera fait

Attendez je mélange tout

Premier code arrangé : ( ça ne se marie pas trop sur mon forum,  enfin bon)

Code:

<iframe style="width: 850px; height: 650px;" scrolling="no" frameborder="0" src="http://mariahcareyinfos.forumactif.com/h1-ls-pa-gris-rose"></iframe>

J'arrive , j'insère les images maintenant... euh ou estce que je change les photos pour le staff dans tout ce bordel   faut en plus que je les redimensionnent

Pff je ne sais même pas où mettre la photo je viens de mettre ça : https://i.servimg.com/u/f68/14/12/75/55/aakwli10.jpg

Et il n'y a pas de changement du tout ou alors je ne comprends plus rien...

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

/* GROUPES */

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

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

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

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

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

      .fleche {
         width: 26px;
         height: 12px;
         background: url(" http://i68.servimg.com/u/f68/14/12/75/55/aakwli10.jpg");
         position: absolute;
         bottom: -12px;
         left: 50%;
         margin-left: -13px;
      }

/* STAFF */

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

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

      #staff li:hover {
         cursor: help;
      }

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

      .staff{
         text-align: center;
      }

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

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

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

/* CREDITS */

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

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

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

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

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

      ::-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
      ::-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
      ::-scrollbar-corner{background:none;}
   </style>    
<div id="pa">
        
 <h1>
 Bienvenue !
 </h1>
        
 <table cellspacing="15px" cellpadding="10px" id="contenu-general" style="width: 800px;">
          
 <tbody>
 
 <tr>
              
 <td rowspan="2" valign="top" class="withbg" style="width: 300px;">
                
 <h2>
 Le concept
 </h2>
                
 <div class="concept">
                    
 <p>
 Bien le bonjour
 </p>
                    
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, itaque, cum veniam vel sed dicta <a href="">quaerat modi</a> ab soluta molestias voluptas ipsam sit omnis. Nemo, natus facilis suscipit sequi ratione. Lorem ipsum dolor sit amet, consectetur adipisicing  
 </p>
                    
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, ab, voluptates, porro totam omnis eos hic mollitia beatae quia dolores corrupti delectus sequi recusandae molestiae sit. Magni saepe repellendus voluptas.
 </p>
                
 </div>
              
 </td>
              
 <td valign="top" style="width: 450px;">
                
 <ul class="groupes">
                    
 <li>
 <a href="" style="color: red;">groupe 1</a>
 </li>
                    
 <li>
 <a href="" style="color: green;">groupe 2</a>
 </li>
                    
 <li>
 <a href="" style="color: orange;">groupe 3</a>
 </li>
                    
 <li>
 <a href="" style="color: blue;">groupe 4</a>
 </li>
                    
 <li>
 <a href="" style="color: magenta;">groupe 5</a>
 </li>
                
 </ul>
              
 </td>
          
 </tr>
          
 <tr>
              
 <!--   <td>lol</td> on supprime cette ligne, car rowspan   -->            
 <td valign="top" class="withbg">
                
 <h2>
 Les nouveautés
 </h2>
                
 <div class="news">
                    
 <p>
 <strong>News 1 :</strong> <a href="">Les fourmis ont des pattes!</a>
 </p>
                    
 <p>
 <strong>News 2 :</strong> Quoi, une news sans lien ?  
 </p>
                    
 <p>
 <strong>News 3 :</strong> <a href="">Pas touche la mouche</a>
 </p>
                    
 <p>
 <strong>News 4 :</strong> <a href="">T'as pas pris ta douche</a>
 </p>
                    
 <p>
 <strong>News 5 :</strong> The style for news
 </p>
                    
 <p>
 <strong>News 6 :</strong> The style for news
 </p>
                    
 <p>
 <strong>News 7 :</strong> The style for news
 </p>
                    
 <p>
 <strong>News 8 :</strong> The style for news
 </p>
                
 </div>
              
 </td>
          
 </tr>
          
 <tr>
              
 <td valign="top" class="withbg">
                
 <h2>
 Concours
 </h2>
                
 <ul id="concours">
                    
 <li>
                      <img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="AOTM" class="mini" />  
 <!--   miniature concours 84*37px   -->                      
 <div class="titre-concours">
 AOTM
 </div>
  
 <!--   titre concours   -->                     <span>                        <img src="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt="" />  
 <!--   infobulle   -->                        </span>
 <div 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/2915/57/91/98/avatars/17369-57.jpg" alt="" />  
 <!--   infobulle   -->                        </span>
 <div 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/2915/57/91/98/avatars/17369-57.jpg" alt="">
                        <div class="fleche"></div>
                     </span>
                  </li>   -->                
 </ul>
              
 </td>
              
 <td valign="top" class="withbg">
                
 <h2>
 Le staff
 </h2>
                    
 <ul id="staff">
                      
 <li onmouseover="javascript:staff1()">
 <img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="" />
 </li>
                      
 <li onmouseover="javascript:staff2()">
 <img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="" />
 </li>
                      
 <li onmouseover="javascript:staff3()">
 <img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="" />
 </li>
                      
 <li onmouseover="javascript:staff4()">
 <img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="" />
 </li>
                      
 <li onmouseover="javascript:staff5()">
 <img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="" />
 </li>
                    
 </ul>
                
 <div class="staff">
                    
 <div id="staff1">
                      
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, sapiente, quos, qui corporis soluta optio aspernatur harum minus asperiores ipsum repudiandae placeat ipsam.
 </p>
                      
 <div class="pseudo">
 PSEUDO
 </div>
  • <a href="">PROFIL</a> • <a href="">MP</a>                  
 </div>
                    
 <div id="staff2" style="display:none;">
                      
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, aliquid, laudantium, neque eius nemo amet dolores velit esse voluptas dicta quisquam quos consequuntur provident
 </p>
                      
 <div class="pseudo">
 PSEUDO
 </div>
  • <a href="">PROFIL</a> • <a href="">MP</a>                  
 </div>
                    
 <div id="staff3" style="display:none;">
                      
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, illo, assumenda, pariatur reprehenderit nam vero tempore nostrum laboriosam molestiae maxime incidunt.
 </p>
                      
 <div class="pseudo">
 PSEUDO
 </div>
  • <a href="">PROFIL</a> • <a href="">MP</a>                  
 </div>
                    
 <div id="staff4" style="display:none;">
                      
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, autem, dolor in quaerat quas quos pariatur iusto aliquid laudantium et ipsum nulla dignissimos.
 </p>
                      
 <div class="pseudo">
 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 valign="top" colspan="2" class="withbg partenaires">
                
 <h2>
 Partenaires
 </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>

Ça fait les petites croix à la'place de l'avatar que je veux changer 

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

/* GROUPES */

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

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

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

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

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

      .fleche {
         width: 26px;
         height: 12px;
         background: url(" http://i68.servimg.com/u/f68/14/12/75/55/aakwli10.jpg");
         position: absolute;
         bottom: -12px;
         left: 50%;
         margin-left: -13px;
      }

/* STAFF */

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

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

      #staff li:hover {
         cursor: help;
      }

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

      .staff{
         text-align: center;
      }

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

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

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

/* CREDITS */

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

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

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

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

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

      ::-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
      ::-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
      ::-scrollbar-corner{background:none;}
   </style>    
<div id="pa">
        
 <h1>
 Bienvenue !
 </h1>
        
 <table cellspacing="15px" cellpadding="10px" id="contenu-general" style="width: 800px;">
          
 <tbody>
 
 <tr>
              
 <td rowspan="2" valign="top" class="withbg" style="width: 300px;">
                
 <h2>
 Le concept
 </h2>
                
 <div class="concept">
                    
 <p>
 Bien le bonjour
 </p>
                    
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, itaque, cum veniam vel sed dicta <a href="">quaerat modi</a> ab soluta molestias voluptas ipsam sit omnis. Nemo, natus facilis suscipit sequi ratione. Lorem ipsum dolor sit amet, consectetur adipisicing  
 </p>
                    
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, ab, voluptates, porro totam omnis eos hic mollitia beatae quia dolores corrupti delectus sequi recusandae molestiae sit. Magni saepe repellendus voluptas.
 </p>
                
 </div>
              
 </td>
              
 <td valign="top" style="width: 450px;">
                
 <ul class="groupes">
                    
 <li>
 <a href="" style="color: red;">groupe 1</a>
 </li>
                    
 <li>
 <a href="" style="color: green;">groupe 2</a>
 </li>
                    
 <li>
 <a href="" style="color: orange;">groupe 3</a>
 </li>
                    
 <li>
 <a href="" style="color: blue;">groupe 4</a>
 </li>
                    
 <li>
 <a href="" style="color: magenta;">groupe 5</a>
 </li>
                
 </ul>
              
 </td>
          
 </tr>
          
 <tr>
              
 <!--   <td>lol</td> on supprime cette ligne, car rowspan   -->            
 <td valign="top" class="withbg">
                
 <h2>
 Les nouveautés
 </h2>
                
 <div class="news">
                    
 <p>
 <strong>News 1 :</strong> <a href="">Les fourmis ont des pattes!</a>
 </p>
                    
 <p>
 <strong>News 2 :</strong> Quoi, une news sans lien ?  
 </p>
                    
 <p>
 <strong>News 3 :</strong> <a href="">Pas touche la mouche</a>
 </p>
                    
 <p>
 <strong>News 4 :</strong> <a href="">T'as pas pris ta douche</a>
 </p>
                    
 <p>
 <strong>News 5 :</strong> The style for news
 </p>
                    
 <p>
 <strong>News 6 :</strong> The style for news
 </p>
                    
 <p>
 <strong>News 7 :</strong> The style for news
 </p>
                    
 <p>
 <strong>News 8 :</strong> The style for news
 </p>
                
 </div>
              
 </td>
          
 </tr>
          
 <tr>
              
 <td valign="top" class="withbg">
                
 <h2>
 Concours
 </h2>
                
 <ul id="concours">
                    
 <li>
                      <img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="AOTM" class="mini" />  
 <!--   miniature concours 84*37px   -->                      
 <div class="titre-concours">
 AOTM
 </div>
  
 <!--   titre concours   -->                     <span>                        <img src="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt="" />  
 <!--   infobulle   -->                        </span>
 <div 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/2915/57/91/98/avatars/17369-57.jpg" alt="" />  
 <!--   infobulle   -->                        </span>
 <div 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/2915/57/91/98/avatars/17369-57.jpg" alt="">
                        <div class="fleche"></div>
                     </span>
                  </li>   -->                
 </ul>
              
 </td>
              
 <td valign="top" class="withbg">
                
 <h2>
 Le staff
 </h2>
                    
 <ul id="staff">
                      
 <li onmouseover="javascript:staff1()">
 <img src="http://www.servimg.com/view/14127555/6289 " alt="" />
 </li>
                      
 <li onmouseover="javascript:staff2()">
 <img src="http://www.servimg.com/view/14127555/6289" alt="" />
 </li>
                      
 <li onmouseover="javascript:staff3()">
 <img src="http://www.servimg.com/view/14127555/6289" alt=" />
 </li>
                      
 <li onmouseover="javascript:staff4()">
 <img src="http://www.servimg.com/view/14127555/6289" alt="" />
 </li>
                      
 <li onmouseover="javascript:staff5()">
 <img src="http://www.servimg.com/view/14127555/6289" alt="" />
 </li>
                    
 </ul>
                
 <div class="staff">
                    
 <div id="staff1">
                      
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, sapiente, quos, qui corporis soluta optio aspernatur harum minus asperiores ipsum repudiandae placeat ipsam.
 </p>
                      
 <div class="pseudo">
 PSEUDO
 </div>
  • <a href="">PROFIL</a> • <a href="">MP</a>                  
 </div>
                    
 <div id="staff2" style="display:none;">
                      
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, aliquid, laudantium, neque eius nemo amet dolores velit esse voluptas dicta quisquam quos consequuntur provident
 </p>
                      
 <div class="pseudo">
 PSEUDO
 </div>
  • <a href="">PROFIL</a> • <a href="">MP</a>                  
 </div>
                    
 <div id="staff3" style="display:none;">
                      
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, illo, assumenda, pariatur reprehenderit nam vero tempore nostrum laboriosam molestiae maxime incidunt.
 </p>
                      
 <div class="pseudo">
 PSEUDO
 </div>
  • <a href="">PROFIL</a> • <a href="">MP</a>                  
 </div>
                    
 <div id="staff4" style="display:none;">
                      
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, autem, dolor in quaerat quas quos pariatur iusto aliquid laudantium et ipsum nulla dignissimos.
 </p>
                      
 <div class="pseudo">
 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 valign="top" colspan="2" class="withbg partenaires">
                
 <h2>
 Partenaires
 </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>

Finalement je reste sur celui là c'est celui qui m'arrange mieux :

https://www.never-utopia.com/t52406-page-d-accueil-toute-simple#788035

(Les problèmes restent les mêmes)

Faut je mette les liens de mp du staff 

[code:1:8be7]<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css" />
<table cellspacing="10" style="margin: auto;">

<tbody>

<tr>

<td colspan="3">

<div class="nomfow">
nous te souhaitons la bienvenue au forum francais sur Mariah Carey, {USERNAME}
</div>

</td>

</tr>

<tr>

<td>

<div class="bloc2">

<div class="titrep">
contexte du forum
</div>

<div class="bloc2texte">
<br />Bienvenue dans le monde de la lambily ! Le niveau d'études y est très élevé, le corps enseignant visant à offrir à ses étudiants la meilleure formation possible pour pouvoir atteindre les universités les plus compétentes du pays. Pourtant, l'école a toujours accueilli un grand nombre de types d'élèves différents : des adolescents de bonne famille aux voyous et bagarreurs invétérés, tout le monde était accepté, à condition d'avoir un potentiel dans un domaine quelconque. Un grand nombre de clubs existent ou peuvent être créés, tels que le club de journalisme, d'échecs, de lecture, de cinéma...etc. Chaque passion peut être représentée par un club, pour autant qu'il y ait assez d'élèves pour la célébrer. Sachez, chers étudiants, que c'est vous tous, autant que vous êtes, qui faîtes vivre cette école, alors soyez imaginatifs dans ce que vous voulez créer, chaque pierre ajoutée à l'édifice ne peut être que constructive ! <br /><br /> <a href="http://pensionnat-seido.forumgratuit.fr/t2-le-lycee-seido?tid=75221d9d102504b18b37bedbb464c4ba" style="margin: auto;">La suite ?</a> <br />
</div>

</div>

</td>

<td>

<div class="bloc3">

<div class="titrep">
nouveautés
</div>
<br />12.07.14 - Bienvenue à B.Lamb !<br />10.07.14 - Bienvenue à Nathanael !<br />10.07.14 - Bienvenue à Asahi !<br /> 09.07.14 - Bienvenue à Lambily974 !<br />07.07.14 - Bienvenue à TiwineAshe! <br /> 05.07.14 - Bienvenue à Yukine !<br />05.07.14 - Ouverture du forum.<br />01.06.14 - Fin des posts administratifs<br />26.05.14 - Staff au complet !<br />24.05.14 - Création du forum ! <br />
</div>

</td>

</tr>

</tbody>

</table>

<div style="margin: auto; background: #; height: auto; width: 600px; color: black; font-family: arial; font-size: 10px; margin-bottom: -4px;">
<br /> <br />
<div style="background-color: #A2A9B8; width: 600px; border-radius: 20px; padding: 4px;">

<table>

<tbody>

<tr>

<td>

<div class="infobulle">
<a href="http://pensionnat-seido.forumgratuit.fr/u2contact"> <img src="http://i68.servimg.com/u/f68/14/12/75/55/aakwli11.jpg" style="border-radius: 50px;" /> </a><span>Nathanael i ★ modérateur </span>
</div>

</td>

<td>

<div style="width: 35px">

</div>

</td>

<td>

<div class="infobulle">
<a href="http://pensionnat-seido.forumgratuit.fr/u1contact"> <img src="http://i68.servimg.com/u/f68/14/12/75/55/aakwli11.jpg " style="border-radius: 50px;" /></a> <span>Yui Isashiki ★ B.Lamb </span>
</div>

</td>

<td>

<div style="width:35px">

</div>

</td>

<td>

<div class="infobulle">
<a href="http://pensionnat-seido.forumgratuit.fr/u3contact"> <img src="http://i68.servimg.com/u/f68/14/12/75/55/aakwli11.jpg" style="border-radius: 50px;" /></a> <span>Sweetheart ★ Administrateur </span>
</div>

</td>

</

Hello! ^^
Du coup je déplace dans les personnalisations plutôt, vu que tu demandes qu'on personnalise les PA que tu as fournies plutôt que d'en créer une nouvelle ^^

Serait t'il possible de m'en faire une qui correspond avec mon forum s'il vous plaît ?

Mon rendu:

Merci pour l'encouragement 

Bof !  Elle est un peu de travers et il y a quelque chose qui ne va pas, les couleur ne vont pas avec l'ensemble de mon forum faut je change 

Salut!
Bon un up c'est toutes les 48h minimum, et ce que tu fais là, c'est un peu des up cachés. Si tu veux ajouter quelque chose à ce que tu dis, édite ton dernier message.
Ensuite, euhm, tu attends quoi maintenant? tu le fais seule ou alors...? Enfin je comprends pas vraiment ce que tu attends des codeurs.

Ah merde! J'avais oubliée désolée   moi qui suis habituellement soigneuse et ordonnée avec ça c'est vraiment pas mon jour...

J'ai passée une dure journée je calcule plus rien aujourd'hui aie... bon, oui finalement on m'a orientée alors j'ai du refaire au propre comme j'ai un peu démandée 

https://www.never-utopia.com/t58327-p-a-avec-widget-dernieres-sujet

Oui, non mais ça va pas ce que j'ai fais j'avoue j'ai bien fais mais c'est de travers,  pas du tout comme l'original de la petite membre et en plus pas de la même couleur que l'ensemble de mon forum alors j'espère avoir fais une bonne initiative avec le lien (c'est un membre d'ici qui m'à montrée le chemin alors que j'étais en train de désespérée et je vous prie de m'excuser mon inatention   Je vais tachée de faire attentions ne vous inquiétez. (J'ai un enfant pas facile à gérer à la maison en même temps je me sens un peu fatiguée là, enfin bon)

Cordialement