Dim 20 Aoû - 14:34

Re-coucou, du coup !
Je poste la commande tout en sachant bien que tu es occupée avec celle d'Ukrysis et que du coup ça peut prendre du temps, no soucis pour moi, c'est déjà bien gentil de bien vouloir continuer   .

Forum : www
Version : PHPBB2
Taille du forum :900 px
Elément(s) demandé(s) : Une PA, s'il-vous-plait ! Avec de jolis effets de survolement !
Maquette :
Description (peut remplacer la maquette ou la compléter) : Pour les prédéfinis avec "barbec'" et "morues", j'aimerais que ça s'applique aux quatre images, grosso modo c'est un voile semi-transparent avec le nom du groupe (sur lequel on pourrait cliquer) qui s'affiche quand on passe la souris au-dessus (je rappelle les noms des groupes si jamais c'est nécessaire : morues, barbec', pâquerettes et perchés) ! Idem pour le "veinard du mois" et son équivalent "poissard du mois" juste en-dessous. Sinon, je constate que j'ai négligé de mettre une petite barre blanche pour montrer le défilement (comme les news et l'intrigue) pour les rumeurs :/. Les partenariats sont en 40x40 (mais tu vas avoir un petit carré blanc dans les images) et pour le staff, j'aimerais qu'on puisse cliquer sur les flèches pour passer au membre suivant, si possible (même si je suis seule pour l'instant, j'aime à croire que ça ne sera pas éternel XD). Pour le "VOTEZ", ça seraient en fait plusieurs images mais comme je n'ai pas encore décidé de ce que je voulais, je vais juste fournir celle-là. Et pour finir, pour les images défilantes, ça serait des images d'event, news importantes, ce genre de choses qui défilent sans qu'on n'ait rien à faire pour ça (je sais pas si c'est clair ? Oo) et sur lesquelles on pourrait éventuellement cliquer en fonction de ce à quoi elles réfèrent.
Couleurs (si pas de maquette graphique) :
Polices à utiliser :Oswald encore et toujours !
Images à utiliser :
Prédéfinis :
https://i.servimg.com/u/f11/15/29/91/94/barbec10.png
https://i.servimg.com/u/f11/15/29/91/94/morues10.png
https://i.servimg.com/u/f11/15/29/91/94/pyquer10.png
https://i.servimg.com/u/f11/15/29/91/94/perchy10.png

Veinard/poissard du mois :
https://i.servimg.com/u/f11/15/29/91/94/veinar10.png

Votes (j'en ai qu'une mais s'il t'en faut plusieurs, je peux le faire !) :
https://i.servimg.com/u/f11/15/29/91/94/vote_t10.png

Staff :
https://i.servimg.com/u/f11/15/29/91/94/staff10.png

Flèche gauche du staff :
https://i.servimg.com/u/f11/15/29/91/94/flyche11.png

Flèche droit du staff :
https://i.servimg.com/u/f11/15/29/91/94/flyche10.png

Partenaires :
https://i.servimg.com/u/f11/15/29/91/94/partos11.png

Et le petit + des partenaires :
https://i.servimg.com/u/f11/15/29/91/94/partos10.png

Les images défilantes :
https://i.servimg.com/u/f11/15/29/91/94/image_12.png
https://i.servimg.com/u/f11/15/29/91/94/image_10.png
https://i.servimg.com/u/f11/15/29/91/94/image_11.png

Puis le fond :
https://i.servimg.com/u/f11/15/29/91/94/fond_p12.png

Eeeeeeet... ça devrait être tout, j'ai essayé d'être aussi complète que possible. Si j'ai oublié un truc, faut pas frapper !  
Acceptez-vous que le code finisse en LS ? Yep /o/
Mode de rendu : via le sujet
Autre chose à ajouter ? Encore merci ! Et si jamais il y a des trucs qui semblent bizarres, mal expliqués ou irréalisables, n'hésite pas /o/ (puis désolée si la maquette est pas parfaite, si jamais je peux en refaire une !).

Dim 20 Aoû - 18:48

Pouet !

J'ai un premier soucis : pour le staff, je t'avoue que je ne sais pas faire ce genre de défilement :/ Tout ce que je sais faire, c'est un système de slide comme pour les news de ce forum. Du coup à toi de voir :/

Ensuite pour le défilement des images, c'est comme un slide ou un effet marquee (un défilement fluide) ? Et j'ai pas compris pour les votes, du coup je mets un seul bouton ou plusieurs ? Si plusieurs je les mets comment ?

Dim 20 Aoû - 22:10

Coucou !

Oh navrée, mais du coup, si on le met en slide, il y a moyen d'afficher le texte en-dessous en même temps ou pas ? .x. Sinon je penserai à une autre variante pour le staff !

Ensuite, pour le défilement des images, c'est euh... un slide je dirais, c'est plus l'idée que je m'en fais. Et pour les votes, tu peux n'en mettre qu'un pour l'instant comme je n'ai pas encore décidé quels tops prendre, sous quelle image/forme les mettre/..., je devrais pouvoir m'arranger plus tard pour en mettre plusieurs (si j'arrive à me souvenir de comment on fait, ce qui n'est pas encore trop trop compliqué si mes souvenirs sont bons ).

Dim 20 Aoû - 22:28

Oui oui, y a moyen de faire correspondre le texte avec l'image ^^ C'est juste qu'on ne peut pas arrêter le défilement, du coup c'est pas forcément adapté :$

Au pire pour les images tu n'auras qu'à me recontacter à ce moment-là.

EDIT : Sinon je peux te proposer quelque chose comme ça :



Au clic sur un cercle, un nouveau membre du staff apparaît (comme une PA à onglet). Par contre les couleurs c'pas encore ça XD

Dim 20 Aoû - 22:48

Mmm... je vais faire autrement pour le staff du coup ! Je te fournis les images demain soir/mardi !

Dim 20 Aoû - 22:52

Ah merde, j'ai édité en même temps ><

EDIT : Sinon je peux te proposer quelque chose comme ça :



Au clic sur un cercle, un nouveau membre du staff apparaît (comme une PA à onglet). Par contre les couleurs c'pas encore ça XD

Dim 20 Aoû - 23:01

Oooooh mais c'est parfait comme ça ! Et quelles couleurs ? .c.

Dim 20 Aoû - 23:02

Des p'tits ronds u.u
Bon bah je commence ça demain alors ^^

Dim 20 Aoû - 23:08

D'ac ! Merci

Dim 27 Aoû - 0:05

J'ai commencé hein ! Toujours au même lien www. Je finis ça ce week-end :)


EDIT : Bon bah fini

Dim 27 Aoû - 12:50

Ahah, j'ai même pas eu le temps de voir ton message que t'avais déjà terminé ! (Direquequandj'essaiedecodercameprendtroisplombes ) ! C'est absolument parfait sinon, pile comme je voulais et l'astuce des petits points pour passer d'un staffeux à l'autre, c'est encore mieux que ce que je voulais de base avec les flèches ! Un grand merci, c'est trop bien !

Dim 27 Aoû - 12:56

Bah j'ai mis du temps aussi, faut pas croire XD J'ai pas encore tous les codes qui me viennent tout seuls

Alors, voyons les beugs maintenant XDD

CSS

Code:

/*********************************** PAGE D'ACCUEIL ***********************************/

#pa {
  width: 100%;
  margin: auto;
  background: url('https://i11.servimg.com/u/f11/15/29/91/94/fond_p12.png') #1a1519;
  background-repeat: repeat-x;
  font-family: arial;
  color: #fff;
  padding: 0.5% 0;
}

#pa h2 {
  background: #2f1926;
  padding: 1%;
  font-family: 'Oswald', sans-serif;
  margin-right: 3%;
  display: inline;
  font-weight: normal;
  color: #fff;
  font-size: 14px;
}

/* Mise en forme des deux colonnes principales*/
#bloc_gauche_pa {
  float: left;
  width: 55%;
}

#bloc_droite_pa {
  float: left;
  width: 43%;
}

/* Mise en forme du staff */
#staff_pa {
  width: 65%;
  padding: 1%;
  margin: auto;
  float: left;
  background: #271721;
}

.staff_pa {
  width: 150px;
  height: 90px;
  display: inline-block;
  margin: 1%;
}

.staff_pa_image {
  position: relative;
  z-index: 2;
  margin: 0;
}

.staff_pa:hover .staff_pa_image {
  z-index: 1;
}

.contenu_staff_pa {
  position: relative;
  display: block;
  width: 150px;
  margin-top: -60%;
  height: 60px;
  padding-top: 20%;
  z-index: 1;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  background: rgba(0,0,0,0.5);
}

/* Mise en forme du bloc "Rumeurs" et du bouton "Votez" */
#bloc2_pa {
  width: 30%;
  float: left;
  margin: auto;
}

#bloc_rumeurs {
  width: 90%;
  height: 131px;
  margin: 0 3% 6% 3%;
  overflow: auto;
  background: #271721;
  font-size: 11px;
  text-align: left;
  padding: 5%;
}

/* Mise en forme des liens rapides */
.liens_pa {
  background: #2f1926;
  padding: 1%;
  margin: 3% 1%;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  width: 20%;
  display: inline-block;  color: #fff !important;
}

/* Mise en forme des blocs "Veinard", "Poissard" et "Période" */
#veinard_periode_pa {
  width: 45%;
  float: left;
  margin-left: -1%;
}

/* Infobulles du "Veinard" et du "Poissard" */
.veinards_pa {
  width: 150px;
  height: 90px;
  display: inline-block;
  margin: 0 0 -5% -10%;
}

.veinards_pa_image {
  position: relative;
  z-index: 2;
  margin: 0;
}

.veinards_pa:hover .veinards_pa_image {
  z-index: 1;
}

.contenu_veinards_pa {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  background: rgba(0,0,0,0.5);
  height: 53px;
  margin-top: -50%;
  padding-top: 15%;
  position: relative;
  width: 170px;
  z-index: 1;
  color: #eaaa3e;
}

/* Mise en forme du bloc "Période" */
#periodes_pa {
  background: #2f1926;
  width: 96%;
  padding: 2%;
  font-family: 'Oswald', sans-serif;
}

#periodes_pa h2 {
  text-align: center;
  color: #fff;
  font-size: 20px;
  background: none;
  display: block;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}

/* Position et taille de la colonne du staff */
#colonne_staff {
  width: 55%;
  float: left;
  margin-left: 1%;
}

/* Mise en forme des images défilantes */
.slideshow, .slide {
  height: 150px;
  width: 210px;
}

.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.slideshow {
  margin: 0;
  overflow: hidden;
  background: rgba(0,0,0,0.3);
  position: relative;
}

.slide {
  margin: auto;
  overflow: auto;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  color: white;
}

/* Mise en forme du bloc "Staff" */
#bloc_staff_pa {
  background: #2f1926;
  width: 100%;
  margin-top: 4%;
}

.paonglet {
  display: inline-block;
  cursor: pointer;
  color: #995d81;
  font-size: 30px;
  margin-top: -5%;
  padding: 0;
}

.paonglet_1 {
  color: #fff;
}

.contenu_paonglet {
  padding: 5% 5% 0 5%;
  font-size: 14px;
  display: none;
  font-family: 'Oswald', sans-serif;
}

/* Mise en forme des blocs "News" et "Intrigue" */
.news_intrigue {
  width: 33%;
  height: 150px;
  overflow: auto;
  background: #22151c;
  padding: 1%;
  font-size: 11px;
  text-align: left;
  float: left;
  margin: 0 1%;
}

.date_pa {
  background: #2f1926;
  font-family: 'Oswald', sans-serif;
  margin-right: 3%;
  padding: 5%;
  font-size: 9px;
  float: left;
  font-weight: normal;
  color: #fff;
}
 
/* Mise en forme des partenaires */
#partenaires_pa {
  width: 25%;
  float: left;
}


PA

Code:

<div id="pa">
                                                                        
 <div id="bloc_gauche_pa">
                                                                  
 <div id="staff_pa">
                                                                            
 <div class="staff_pa">
                                                  <img class="staff_pa_image" src="https://i11.servimg.com/u/f11/15/29/91/94/pyquer10.png" />                                                  
 <div class="contenu_staff_pa" style="color: #66c937;">
                                                 Pâquerettes                                        
 </div>
                                                                                                  
 </div>
                                                                      
 <div class="staff_pa">
                                                  <img class="staff_pa_image" src="https://i11.servimg.com/u/f11/15/29/91/94/barbec10.png" />                                                  
 <div class="contenu_staff_pa" style="color: #c64335;">
                                                 Barbec'                                      
 </div>
                                                                                                  
 </div>
                                                                      
 <div class="staff_pa">
                                                  <img class="staff_pa_image" src="https://i11.servimg.com/u/f11/15/29/91/94/morues10.png" />                                                  
 <div class="contenu_staff_pa" style="color: #044fd2;">
                                                 Morues                                      
 </div>
                                                                                                  
 </div>
                                                                      
 <div class="staff_pa">
                                                  <img class="staff_pa_image" src="https://i11.servimg.com/u/f11/15/29/91/94/perchy10.png" />                                                  
 <div class="contenu_staff_pa" style="color: #f3dc53;">
                                                Perchés                                    
 </div>
                                                                                                  
 </div>
                                                                            
 </div>
                                                                
 <div id="bloc2_pa">
                                                                
 <div id="bloc_rumeurs">
                                                                
 <h2>
                                 Rumeurs                                
 </h2>
                                  Bonjour visiteur, je suis une rumeur. Je ne sais pas quoi dire, je me sens comme un cupcake dans un gratin dauphinois : anormale. Poutoux                                
 </div><a target="_blank" href="#"><img alt="" src="https://i11.servimg.com/u/f11/15/29/91/94/vote_t10.png" /></a>                                
 </div>
                                                                    
 <div class="clear">
                                                                  
 </div>
                                            <a href="#" class="liens_pa">Règlement</a> <a href="#" class="liens_pa">Contexte</a> <a href="#" class="liens_pa">Annexes</a> <a href="#" class="liens_pa">Bottins</a>                                  
 </div>
                                                      
 <div id="bloc_droite_pa">
                                                      
 <div id="veinard_periode_pa">
                                                      
 <div class="veinards_pa">
                                                  <img class="veinards_pa_image" src="https://i11.servimg.com/u/f11/15/29/91/94/veinar10.png" />                                                  
 <div class="contenu_veinards_pa">
                                                Veinard du mois                                      
 </div>
                                                                                                  
 </div>
                                                                      
 <div class="veinards_pa">
                                                  <img class="veinards_pa_image" src="https://i11.servimg.com/u/f11/15/29/91/94/veinar10.png" />                                                  
 <div class="contenu_veinards_pa">
                                                 Poissard du mois                                      
 </div>
                                                                                                  
 </div>
                                                      
 <div id="periodes_pa">
                                                
 <h2>
                         Periode : Eau                        
 </h2>
                         Les barbecs sont priés d'attacher leur ceinture durant la durée de ce vol.                        
 </div>
                                                  
 </div>
                                                  
 <div id="colonne_staff">
                                                              
 <!--                                   Slideshow infini horizontal                                   -->                                
 <div id="slideshow" class="slideshow">
                                                                      
 <div id="slideshow-container">
                                                                          
 <div class="slide">
                                                        <img src="https://i11.servimg.com/u/f11/15/29/91/94/image_12.png" />                                        
 </div>
                                                                              
 <div class="slide">
                         <img src="https://i11.servimg.com/u/f11/15/29/91/94/image_10.png" />                                  
 </div>
                                                                                  
 <div class="slide">
                          <img src="https://i11.servimg.com/u/f11/15/29/91/94/image_11.png" />                        
 </div>
                                                                                                            
 <!--                                  
            Vous pouvez ajouter autant de slides que possible avec le template suivant :
          
            <div class="slide">
                --- votre contenu ici ---
            </div>
                                          -->                                    
 </div>
                                                              
 </div>
                                      
 <div id="bloc_staff_pa">
                       <script type="text/javascript">
            //<!--
                    function change_paonglet(name)
                    {
                            document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
                            document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
                            document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
                            document.getElementById('contenu_paonglet_'+name).style.display = 'block';
                            anc_paonglet = name;
                    }
            //-->
            </script>                                
 <div class="contenu_paonglets">
                                                
 <div id="contenu_paonglet_accueil" class="contenu_paonglet">
                    <img src="https://i11.servimg.com/u/f11/15/29/91/94/staff10.png" alt="" /><br />Fonda Machin              
 </div>
                                                
 <div id="contenu_paonglet_effectif" class="contenu_paonglet">
                     <img src="https://i11.servimg.com/u/f11/15/29/91/94/staff10.png" alt="" /><br />Fonda Machin 2                    
 </div>
                                                
 <div id="contenu_paonglet_autre" class="contenu_paonglet">
                    <img src="https://i11.servimg.com/u/f11/15/29/91/94/staff10.png" alt="" /><br />Fonda Machin 3                  
 </div>
                              
 </div>
                          
 <div class="paonglets">
                                <span onclick="javascript:change_paonglet('accueil');" id="paonglet_accueil" class="paonglet_0 paonglet">•</span>                <span onclick="javascript:change_paonglet('effectif');" id="paonglet_effectif" class="paonglet_0 paonglet">•</span>                <span onclick="javascript:change_paonglet('autre');" id="paonglet_autre" class="paonglet_0 paonglet">•</span>                            
 </div>
                        <script type="text/javascript">
            //<!--
                    var anc_paonglet = 'accueil';
                    change_paonglet(anc_paonglet);
            //-->
            </script>                          
 </div>
                                    
 </div>
                                            
 </div>
                                                                      
 <div class="clear">
                                                                  
 </div>
                  
 <div class="news_intrigue">
                  
 <div class="date_pa">
          XX/XX          
 </div>
          Les chaussettes de l'archiduchesse (j'sais même pas l'écrire) sont-elles sèches archi-sèches ?<br /><br />          
 <div class="date_pa">
          XX/XX          
 </div>
          Les chaussettes de l'archiduchesse (j'sais même pas l'écrire) sont-elles sèches archi-sèches ?<br /><br />          
 <div class="date_pa">
          XX/XX          
 </div>
          Les chaussettes de l'archiduchesse (j'sais même pas l'écrire) sont-elles sèches archi-sèches ?<br /><br />          
 <div class="date_pa">
          XX/XX          
 </div>
          Les chaussettes de l'archiduchesse (j'sais même pas l'écrire) sont-elles sèches archi-sèches ?          
 </div>
              
 <div class="news_intrigue">
                  
 <div class="date_pa" style="padding: 1% 5%; font-size: 12px;">
          Intrigue          
 </div>
          Trois choses ne peuvent être cachées éternellement : le soleil, la lune, la vérité. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nunc dui, semper nec lobortis molestie, fringilla ut lorem.        
 </div>
            
 <div id="partenaires_pa">
  <a target="_blank" href="#"><img alt="" src="https://i11.servimg.com/u/f11/15/29/91/94/partos11.png" /></a> <a target="_blank" href="#"><img alt="" src="https://i11.servimg.com/u/f11/15/29/91/94/partos11.png" /></a> <a target="_blank" href="#"><img alt="" src="https://i11.servimg.com/u/f11/15/29/91/94/partos11.png" /></a> <a target="_blank" href="#"><img alt="" src="https://i11.servimg.com/u/f11/15/29/91/94/partos11.png" /></a> <a target="_blank" href="#"><img alt="" src="https://i11.servimg.com/u/f11/15/29/91/94/partos11.png" /></a> <a target="_blank" href="#"><img alt="" src="https://i11.servimg.com/u/f11/15/29/91/94/partos11.png" /></a> <a target="_blank" href="#"><img alt="" src="https://i11.servimg.com/u/f11/15/29/91/94/partos11.png" /></a> <a target="_blank" href="#"><img alt="" src="https://i11.servimg.com/u/f11/15/29/91/94/partos11.png" /></a> <a target="_blank" href="#"><img alt="" src="https://i11.servimg.com/u/f11/15/29/91/94/partos11.png" /></a> <a target="_blank" href="#"><img alt="" src="https://i11.servimg.com/u/f11/15/29/91/94/partos11.png" /></a> <a target="_blank" href="#"><img alt="" src="https://i11.servimg.com/u/f11/15/29/91/94/partos11.png" /></a> <a target="_blank" href="#"><img alt="" src="https://i11.servimg.com/u/f11/15/29/91/94/partos11.png" /></a> <a target="_blank" href="#"><img alt="" src="https://i11.servimg.com/u/f11/15/29/91/94/partos11.png" /></a> <a target="_blank" href="#"><img alt="" src="https://i11.servimg.com/u/f11/15/29/91/94/partos11.png" /></a> <a target="_blank" href="#"><img alt="" src="https://i11.servimg.com/u/f11/15/29/91/94/partos10.png" /></a>  
 </div>
    
 <div class="clear">
            
 </div>
                                                                                          
</div>
  

EDIT : ATTAAAAAAA J'ai oublié le JS ! Tu vas dans "Modules", "Gestion des codes Javascript", tu les actives, tu enregistres, et tu créé un nouveau javascript (tu peux l’appeler "Slider" par exemple) à afficher sur l'accueil uniquement.

Code:

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

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

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

Dim 27 Aoû - 21:41

Coucou !

Alors, c'est presque totalement parfait si ce n'est que le bloc période est plus petit et je ne sais point pourquoi. .x.

.

Tu as besoin de mon css pour ça, peut-être ?

Ps : c'est dommage qu'ils ne viennent pas seuls, mais c'est pour ça qu'on fait appel à toi à la place fufufu. ~ 

Dim 27 Aoû - 21:44

Hum, dans ton CSS à "#periodes_pa" tu peux essayer d'augmenter un peu le "Width" (genre 96.5% ou 97%) mais après ça va se coller au reste :/

Faudrait demander ça à Noël, des codes qui viennent seuls XD

Dim 27 Aoû - 21:47

Le width change juste la largeur et pas du tout la hauteur (j'ai quand même essayé au cas où mais... ben non ).

Si le père Noël est généreux, qui sait... xD