Je suis bête mais tellement bête... -_- à déplacer vers Pages d'Accueil please :c

Demande déplacée ~

Dis, il devrait y avoir combien de top-sites? (juste pour savoir)
Et fais attention, ta version de forum est PHPBB2 si je ne me trompe pas

Merci Onyx <3 puis j'ai corrigé!

Pour les top-sites, je pense entre 3 (en ligne) ou 5 (deux en haut trois en bas, genre centré XD)

Toujours d'actualité <3

Toujours d'actualité <3

Je m'y met dessus Pandemonium :)

Merci beaucoup Benox! <3

Bon alors voici l'apercu final.
Tout d'abord les transitions, j'en ai mis sur les image de staff et sur le crédit. Je me permet par ailleurs de te rappeler que le crédit vers N-U ne doit pas être supprimé par respect du droit d'auteur.
Donc voilà les codes pour ta pa :)

A placer dans PA->Affichage->Généralités.

Code:

<div class="backgroundimage_base">
                                                          
   <div class="contexte_pa">
                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut feugiat libero, a elementum nisi. Aenean ultricies ac nunc nec pulvinar. Etiam sagittis eleifend nibh, commodo aliquet augue fringilla nec. Duis et imperdiet nibh. Aliquam aliquam suscipit diam, et ullamcorper risus mollis ut. Nulla efficitur lorem quis lacus tincidunt, in pretium nulla tempor. Nam laoreet lorem et ante malesuada, vitae hendrerit ex auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque auctor molestie orci, a elementum dui varius ut. Sed ante neque, mattis ut urna in, sollicitudin molestie ex. Suspendisse diam leo, ornare eu faucibus suscipit, ultrices non sem. In hac habitasse platea dictumst. Donec et congue nibh, in aliquam massa. Nulla id purus varius ligula sodales vestibulum ac sed ligula. Pellentesque malesuada, sapien eu tempus facilisis, quam felis tristique nulla, eget dictum dui diam ut velit. Pellentesque dapibus lobortis ligula, a luctus eros sodales at. Phasellus porta lacus tellus, nec tempor lacus blandit eu. Pellentesque accumsan et dolor et condimentum. Donec posuere bibendum mauris, a venenatis elit interdum ac. Vestibulum hendrerit metus venenatis tellus laoreet volutpat. <br /><br />Nous te souhaitons la bienvenue {FORUMLASTUSERLINK} !                                     
   </div>
                                                    
   <div class="liens_utiles_pa">
                                <a href="URL_DU_LIEN">•Lien n°1</a><br /><br /><a href="URL_DU_LIEN">•Lien n°2</a><br /><br /><a href="URL_DU_LIEN">•Lien n°3</a><br /><br /><a href="URL_DU_LIEN">•Lien n°4</a><br /><br /><a href="URL_DU_LIEN">•Lien n°5</a>                         
   </div>
                                            
   <div class="liens_votes_pa">
                          <a href="LIEN_DU_TOPSITE"><img src="http://image.noelshack.com/fichiers/2014/48/1417185985-image-topsite.png" /></a><a href="LIEN_DU_TOPSITE"><img src="http://image.noelshack.com/fichiers/2014/48/1417185985-image-topsite.png" /></a><a href="LIEN_DU_TOPSITE"><img src="http://image.noelshack.com/fichiers/2014/48/1417185985-image-topsite.png" /></a>                     
   </div>
                                      
   <div class="staff_pa">
                                       
      <div class="staff_pa-image1">
                         <a href="URL_DE_L'UTILISATEUR"><img src="http://image.noelshack.com/fichiers/2014/48/1417185985-carre.png" /></a>       
      </div>
                   
      <div class="staff_pa-image2">
                   <a href="URL_DE_L'UTILISATEUR"><img src="http://image.noelshack.com/fichiers/2014/48/1417185985-carre.png" /></a>       
      </div>
                   
      <div class="staff_pa-image3">
                 <a href="URL_DE_L'UTILISATEUR"><img src="http://image.noelshack.com/fichiers/2014/48/1417185985-carre.png" />  </a>       
      </div>
                   
      <div class="staff_pa-image4">
                 <a href="URL_DE_L'UTILISATEUR"><img src="http://image.noelshack.com/fichiers/2014/48/1417185985-carre.png" />  </a>       
      </div>
                   
      <div class="staff_pa-image5">
                 <a href="URL_DE_L'UTILISATEUR"><img src="http://image.noelshack.com/fichiers/2014/48/1417185985-carre.png" />  </a>       
      </div>
                           
   </div>
              
   <div class="news_pa">
               
      <marquee direction="up" scrollamount="2">
             •Actu n°1<br />•Actu n°2<br />•Actu n°3<br />•Actu n°4<br />•Actu n°5<br />•Actu n°6<br />   
      </marquee>
               
   </div>
</div>
<div class="credit_nu_pa">
    <a href="http://www.never-utopia.com/u17714">By Benox</a> <a href="http://www.never-utopia.com/">Never-Utopia</a>
</div>

A placer dans PA->Affichage->Couleurs->Feuille de style CSS.

Code:

/*--------------------------------------------PA PARCHEMIN--------------------------------------------*/
.backgroundimage_base {
  width: 100%;
  height: 779px;
  background-image: url('http://image.noelshack.com/fichiers/2014/48/1417185986-base.png');
  overflow: hidden;
  background-repeat: no-repeat;
  position: static;
  z-index: 1;
}

/*---Contexte---*/
.contexte_pa {
  width: 346px;
  height: 320px;
  position: relative;
  z-index: 2;
  background-color: transparent;
  font-family: Georgia;
  font-color: #434544;
  float: left;
  margin-top: 200px;
  margin-left: 93px;
  border-radius: 5px 5px 5px 5px;
  padding-top: 10px;
  overflow-y: auto;
}

/*---Liens Utiles---*/
.liens_utiles_pa {
  width: 200px;
  height: 200px;
  position: relative;
  z-index: 3;
  background-color: transparent;
  font-family: Georgia;
  font-size: 28px;
  font-color: #434544;
  text-align: right;
  float: right;
  margin-top: 200px;
  margin-right: 135px;
  padding-top: 15px;
}

/*---Votes---*/
.liens_votes_pa {
  width: 240px;
  height: 80px;
  position: relative;
  z-index: 4;
  background-color: transparent;
  float: right;
  margin-top: 25px;
  margin-right: 115px;
}

/*---Staff---*/
.staff_pa {
  width: 346px;
  height: 170px;
  position: relative;
  z-index: 5;
  background-color: transparent;
  float: left;
  margin-left: -346px;
  margin-top: 135px;
}

.staff_pa-image1 {
  width: 50px;
  height: 88px;
  position: relative;
  z-index: 6;
  float: left;
  top: 40px;
  left: 15px;
  display: inline;
  overflow: hidden;
  transition: 1s all;
  opacity: 0.6;
}
.staff_pa-image1:hover {
  transition: 1s all;
  opacity: 1;
  transform : rotate(5deg);
  box-shadow: 0px 0px 3px #897E53;
}

.staff_pa-image2 {
  width: 50px;
  height: 88px;
  position: relative;
  z-index: 6;
  float: left;
  top: 40px;
  left: 25px;
  display: inline;
  overflow: hidden;
  transition: 1s all;
  opacity: 0.6;
}
.staff_pa-image2:hover {
  transition: 1s all;
  opacity: 1;
  transform : rotate(5deg);
  box-shadow: 0px 0px 3px #897E53;
}

.staff_pa-image3 {
  width: 50px;
  height: 88px;
  position: relative;
  z-index: 6;
  float: left;
  top: 40px;
  left: 35px;
  display: inline;
  overflow: hidden;
  transition: 1s all;
  opacity: 0.6;
}
.staff_pa-image3:hover {
  transition: 1s all;
  opacity: 1;
  transform : rotate(5deg);
  box-shadow: 0px 0px 3px #897E53;
}

.staff_pa-image4 {
  width: 50px;
  height: 88px;
  position: relative;
  z-index: 6;
  float: left;
  top: 40px;
  left: 45px;
  display: inline;
  overflow: hidden;
  transition: 1s all;
  opacity: 0.6;
}
.staff_pa-image4:hover {
  transition: 1s all;
  opacity: 1;
  transform : rotate(5deg);
  box-shadow: 0px 0px 3px #897E53;
}

.staff_pa-image5 {
  width: 50px;
  height: 88px;
  position: relative;
  z-index: 6;
  float: left;
  top: 40px;
  left: 55px;
  display: inline;
  overflow: hidden;
  transition: 1s all;
  opacity: 0.6;
}
.staff_pa-image5:hover {
  transition: 1s all;
  opacity: 1;
  transform : rotate(5deg);
  box-shadow: 0px 0px 3px #897E53;
}

/*---Nouveautés---*/
.news_pa {
  width: 228px;
  height: 160px;
  position: relative;
  z-index: 7;
  background-color: transparent;
  float: right;
  margin-right: 122px;
  margin-top: 40px;
  font-familty: Georgia;
  overflow: hidden;
  padding-left: 5px;
}

/*---Crédits---*/
.credit_nu_pa {
  width: 125px;
  height: 30px;
  font-family: Georgia;
  font-size: 16px;
  position: relative;
  z-index: 8;
  float: right;
  right: 40px;
  top: -25px;
  opacity: 0.2;
  transition: 1s all;
}
.credit_nu_pa:hover {
  transition: 1s all;
  font-size: 20px;
  opacity: 1;
  transform: rotate(360deg);
}

Voilà pour toi en espérant que ça te plaise si il y a quelque chose à modifier, n'hésite pas à me mp

Merciii!
Je l'ai installé pourtant et ça me fait ceci:
http://lazuli.forumactif.org/

Bizarre D:

Mmmh, je crois savoir d'ou ca vient, je vais rectifier ca et on verras ce que ca donne
essaie de faire avec ca pour le code css :

Code:

/*--------------------------------------------PA PARCHEMIN--------------------------------------------*/
.backgroundimage_base {
  width: 100%;
  height: 779px;
  background-image: url('http://image.noelshack.com/fichiers/2014/48/1417185986-base.png');
  overflow: hidden;
  background-repeat: no-repeat;
  position: static;
  z-index: 1;
}

/*---Contexte---*/
.contexte_pa {
  width: 346px;
  height: 320px;
  position: relative;
  z-index: 2;
  background-color: transparent;
  font-family: Georgia;
  font-color: #434544;
  float: left;
  margin-top: 200px;
  margin-left: 93px;
  border-radius: 5px 5px 5px 5px;
  padding-top: 10px;
  overflow-y: auto;
}

/*---Liens Utiles---*/
.liens_utiles_pa {
  width: 200px;
  height: 200px;
  position: relative;
  z-index: 3;
  background-color: transparent;
  font-family: Georgia;
  font-size: 28px;
  font-color: #434544;
  text-align: right;
  float: right;
  margin-top: 180px;
  margin-right: 155px;
  padding-top: 10px;
  overflow: hidden;
}

/*---Votes---*/
.liens_votes_pa {
  width: 240px;
  height: 80px;
  position: relative;
  z-index: 4;
  background-color: transparent;
  float: right;
  margin-top: 25px;
  margin-right: 135px;
}

/*---Staff---*/
.staff_pa {
  width: 346px;
  height: 170px;
  position: relative;
  z-index: 5;
  background-color: transparent;
  float: left;
  margin-left: -346px;
  margin-top: 135px;
}

.staff_pa-image1 {
  width: 50px;
  height: 88px;
  position: relative;
  z-index: 6;
  float: left;
  top: 40px;
  left: 15px;
  display: inline;
  overflow: hidden;
  transition: 1s all;
  opacity: 0.6;
}
.staff_pa-image1:hover {
  transition: 1s all;
  opacity: 1;
  transform : rotate(5deg);
  box-shadow: 0px 0px 3px #897E53;
}

.staff_pa-image2 {
  width: 50px;
  height: 88px;
  position: relative;
  z-index: 6;
  float: left;
  top: 40px;
  left: 25px;
  display: inline;
  overflow: hidden;
  transition: 1s all;
  opacity: 0.6;
}
.staff_pa-image2:hover {
  transition: 1s all;
  opacity: 1;
  transform : rotate(5deg);
  box-shadow: 0px 0px 3px #897E53;
}

.staff_pa-image3 {
  width: 50px;
  height: 88px;
  position: relative;
  z-index: 6;
  float: left;
  top: 40px;
  left: 35px;
  display: inline;
  overflow: hidden;
  transition: 1s all;
  opacity: 0.6;
}
.staff_pa-image3:hover {
  transition: 1s all;
  opacity: 1;
  transform : rotate(5deg);
  box-shadow: 0px 0px 3px #897E53;
}

.staff_pa-image4 {
  width: 50px;
  height: 88px;
  position: relative;
  z-index: 6;
  float: left;
  top: 40px;
  left: 45px;
  display: inline;
  overflow: hidden;
  transition: 1s all;
  opacity: 0.6;
}
.staff_pa-image4:hover {
  transition: 1s all;
  opacity: 1;
  transform : rotate(5deg);
  box-shadow: 0px 0px 3px #897E53;
}

.staff_pa-image5 {
  width: 50px;
  height: 88px;
  position: relative;
  z-index: 6;
  float: left;
  top: 40px;
  left: 55px;
  display: inline;
  overflow: hidden;
  transition: 1s all;
  opacity: 0.6;
}
.staff_pa-image5:hover {
  transition: 1s all;
  opacity: 1;
  transform : rotate(5deg);
  box-shadow: 0px 0px 3px #897E53;
}

/*---Nouveautés---*/
.news_pa {
  width: 228px;
  height: 160px;
  position: relative;
  z-index: 7;
  background-color: transparent;
  float: right;
  margin-right: 135px;
  margin-top: 40px;
  font-familty: Georgia;
  overflow: hidden;
  text-align: left;
}

/*---Crédits---*/
.credit_nu_pa {
  width: 125px;
  height: 30px;
  font-family: Georgia;
  font-size: 16px;
  position: relative;
  z-index: 8;
  float: right;
  right: 40px;
  top: -25px;
  opacity: 0.2;
  transition: 1s all;
}
.credit_nu_pa:hover {
  transition: 1s all;
  font-size: 20px;
  opacity: 1;
  transform: rotate(360deg);
}

Essaie avec ca et remet moi le lien après ^^

Ça continue tout aussi bizarre D:

Bon, c'est ce que je pensais c'est un probleme de transition parce que mon forum test est en PHPBB3 et nous n'avons pas la même largeur de forum donc ce qu'on va faire si tu es d'accord c'est que je vais m'inscrire sur ton forum, nomme moi administrateur, je règle ces petits détails ensuite tu supprime mon compte ok ?

Nope.

Donner un accès fondateur/admin n'est pas interdit, mais certainement pas recommandé. Je sais que c'est frustrant, mais il y a d'autres manières de régler le problème. Par exemple, tu aurais pu demander le CSS entier de Pandemonium pour voir s'il n'y avait pas quelque chose qui intéragi avec tes codes. Ou tu aurais pu essayer d'optimiser ton code pour que la largeur du forum n'ait pas d'influence. Sachant que la plupart des forums n'ont pas la même largeur et qu'une demande doit ensuite être mise en LA, ce serait même plus que recommandé.

Je suis en train de regarder le code et je te reviens avec cela pour te montrer quelques trucs

Ca devrait passer si Pandemonium au tout début du code ".backgroundimage_base" change le :

Code:

width: 100%;

par

Code:

width: 815px;

Personnellement, cela bug toujours sur mon forum test T_T

Quelques petits trucs:
> L'image de la PA fait 779px de largeur et 750px de hauteur. Tu pourrais garder ces dimensions pour y ajuster le reste
> Fait attention, la propriété "font-color" n'existe pas. On met tout simplement "color".
> Il ne peux pas y avoir de problème de comptabilité entre PHPBB3 et PHPBB2 sur une PA. Il peut y en avoir par rapport aux templates qui sont différents, mais pas par rapport à la PA.
> Tu n'as pas besoin de mettre un "background: transparent;" puisque c'est le background par défaut.
> Pour les "transitions" et les "transform", il faut s'assurer de leur donner aussi l'équivalent pour les navigateurs comme Opéra et Safari. I faut donc le mettre une deuxième fois avec le préfixe "-webkit-".
> Lorsqu'on met une transition, on la met seulement dans la classe de base, pas celle avec hover. Il faut aussi s'assurer que tout ce qui change dans l'hover (le transform:rotate par exemple) soit aussi là dans la classe de base.

Tu peux aussi fonctionner avec la position "absolute" à la place de la position "relative", le float et les marges.
Pour cela, tu peux commencer par donner les bonnes dimensions à ton image de fond. Tu lui donnes aussi la position "relative".
Ensuite, pour chacun des 4 sections, tu leur donne une position "absolute". Tu enlèves les marges qui ne servent plus à rien. Puis, tu ajustes la position des sections à l'aide des propriétés "top", "bottom", "right" et "left". "Top" collera la section en haut, "bottom" colle la section en bas, "right" colle la section à droite et "left" colle la section à gauche.

j'aime pas la position absolute T-T

Ha, t'es pas le seul je crois bien XD

Cela peut très bien marcher tu l'as fait aussi (c'est juste moi qui n'aime pas le float en fait ). Assures-toi juste de mettre les bonnes dimensions à ton ".backgroundimage_base" (soit 779 de large et 750 de haut) afin de partir sur de bonnes bases

Je ne pourrais pas m'en occuper avant mercredi, je suis en cours lundi mardi sans une seule heure de trou ^^

Merci tout deux! :O
Okidou pas de prob ^^

Bon c'est modifié déjà pour les position essaie avec ce code pandemonium :

Code:

/*--------------------------------------------PA PARCHEMIN--------------------------------------------*/
.backgroundimage_base {
  width: 779px;
  height: 780px;
  background-image: url('http://image.noelshack.com/fichiers/2014/48/1417185986-base.png');
  overflow: hidden;
  background-repeat: no-repeat;
  position: static;
  z-index: 1;
}

/*---Contexte---*/
.contexte_pa {
  width: 346px;
  height: 320px;
  position: absolute;
  z-index: 2;
  background-color: transparent;
  font-family: Georgia;
  color: #fff;
  top: 850px;
  left: 320px;
  border-radius: 5px 5px 5px 5px;
  overflow-y: auto;
}

/*---Liens Utiles---*/
.liens_utiles_pa {
  width: 200px;
  height: 200px;
  position: absolute;
  z-index: 3;
  background-color: transparent;
  font-family: Georgia;
  font-size: 28px;
  text-align: right;
  top: 870px;
  right: 400px;
  padding-top: 15px;
}

/*---Votes---*/
.liens_votes_pa {
  width: 240px;
  height: 80px;
  position: absolute;
  z-index: 4;
  background-color: transparent;
  top: 1080px;
  right: 335px;
}

/*---Staff---*/
.staff_pa {
  width: 346px;
  height: 170px;
  position: absolute;
  z-index: 5;
  background-color: transparent;
  left: 330px;
  top: 1180px;
}

.staff_pa-image1 {
  width: 50px;
  height: 88px;
  position: relative;
  z-index: 6;
  float: left;
  top: 40px;
  left: 15px;
  display: inline;
  overflow: hidden;
  transition: 1s all;
  opacity: 0.6;
}
.staff_pa-image1:hover {
  transition: 1s all;
  opacity: 1;
  transform : rotate(5deg);
  box-shadow: 0px 0px 3px #897E53;
}

.staff_pa-image2 {
  width: 50px;
  height: 88px;
  position: relative;
  z-index: 6;
  float: left;
  top: 40px;
  left: 25px;
  display: inline;
  overflow: hidden;
  transition: 1s all;
  opacity: 0.6;
}
.staff_pa-image2:hover {
  transition: 1s all;
  opacity: 1;
  transform : rotate(5deg);
  box-shadow: 0px 0px 3px #897E53;
}

.staff_pa-image3 {
  width: 50px;
  height: 88px;
  position: relative;
  z-index: 6;
  float: left;
  top: 40px;
  left: 35px;
  display: inline;
  overflow: hidden;
  transition: 1s all;
  opacity: 0.6;
}
.staff_pa-image3:hover {
  transition: 1s all;
  opacity: 1;
  transform : rotate(5deg);
  box-shadow: 0px 0px 3px #897E53;
}

.staff_pa-image4 {
  width: 50px;
  height: 88px;
  position: relative;
  z-index: 6;
  float: left;
  top: 40px;
  left: 45px;
  display: inline;
  overflow: hidden;
  transition: 1s all;
  opacity: 0.6;
}
.staff_pa-image4:hover {
  transition: 1s all;
  opacity: 1;
  transform : rotate(5deg);
  box-shadow: 0px 0px 3px #897E53;
}

.staff_pa-image5 {
  width: 50px;
  height: 88px;
  position: relative;
  z-index: 6;
  float: left;
  top: 40px;
  left: 55px;
  display: inline;
  overflow: hidden;
  transition: 1s all;
  opacity: 0.6;
}
.staff_pa-image5:hover {
  transition: 1s all;
  opacity: 1;
  transform : rotate(5deg);
  box-shadow: 0px 0px 3px #897E53;
}

/*---Nouveautés---*/
.news_pa {
  width: 228px;
  height: 160px;
  position: absolute;
  z-index: 7;
  background-color: transparent;
  right: 350px;
  top: 1190px;
  font-familty: Georgia;
  overflow: hidden;
  padding-left: 5px;
}

/*---Crédits---*/
.credit_nu_pa {
  width: 125px;
  height: 30px;
  font-family: Georgia;
  font-size: 16px;
  position: relative;
  z-index: 8;
  float: right;
  right: 60px;
  top: -25px;
  opacity: 0.2;
  transition: 1s all;
}
.credit_nu_pa:hover {
  transition: 1s all;
  font-size: 20px;
  opacity: 1;
  transform: rotate(360deg);
}

Ça fait encore un truc zarb! http://lazuli.forumactif.org/

Oui voilà, c'est ce qu'il me semblait, la position absolute ne change rien, c'est juste du réglage sur la position des différentes div donc y'a le moyen long, c'est le fait que je te file à chaque fois un code différent jusqu'à trouver la bonne combinaison, soit tu me met admin et en 10 minutes c'est réglé et tu supprime mon compte après, même si ce n'est pas recommandé, c'est le moyen le plus rapide de régler ça parce que je peux pas régler chaque div au pixel près juste à l'oeil c'est pas possible ^^

^^"

Je vais laisser tomber le "non-recommandé" et dire "interdit" si c'est ce qui bloque. Le principe de faire des demandes, c'est de créer un code à partir d'un schéma et de le mettre ensuite en LS. Si tu es obligé de passer directement par le site de Pandemonium à la place d'avoir un code correct qui fonctionne, cela veut dire que tu va devoir faire la même chose pour tous ceux qui vondront ensuite utiliser ton code parce qu'il ne fonctionnera pas sinon. Alors soit tu va être envahi de MP rageux qui disent que ton code ne marche pas, soit la section "un problème en codage" va être envahi. Les deux situations ne sont pas souhaitables.

Pour ce qui est de la position absolute, elle n'a pas vraiment été très bien utilisée de ce que je peux voir. Du coup, je suis retournée à ta méthode initiale, avec les float et les margins. On ne peut peut-être pas tout placer au pixel près, mais on peut arriver pas si mal quand même.
La première chose à faire, c'est de mettre le qeel aux bonnes dimensions. Je ne sais pas combien de fois je le dis, mais cela ne sera jamais correct tant qu'on continue à fonctionner avec des données erronées. Ensuite, tu positionnes 1 élément à la fois. Pour ce faire, il peut être pratique de mettre un background de couleur à l'élément que tu veux placer pour bien le voir. Ensuite, tu ajustes ses dimensions et ses margins pour qu'il soit où tu le veux. Puis, tu recommences avec les autres éléments.


Pandemonium : Essaies ça dans ton CSS
(D'ailleurs, si tu mets plus que trois images pour les top-sites, il n'y aura plus assez de place. Alors du coup, j'ai rajouté un ".liens_votes_pa img" où tu peux redimensionner la taille de tes images jusqu'à ce que cela soit comme tu le veux).

Code:

/*--------------------------------------------PA PARCHEMIN--------------------------------------------*/
.backgroundimage_base {
  width: 779px;
  height: 750px;
  background-image: url('http://image.noelshack.com/fichiers/2014/48/1417185986-base.png');
  overflow: hidden;
}

/*---Contexte---*/
.contexte_pa {
  width: 340px;
  height: 295px;
  float: left;
  margin-left: 95px;
  margin-top: 220px;
  font-family: Georgia;
  color: #fff;
  overflow-y: auto;
}

/*---Liens Utiles---*/
.liens_utiles_pa {
  width: 200px;
  height: 175px;
  float: left;
  font-family: Georgia;
  font-size: 28px;
  text-align: right;
  margin-top: 220;
  margin-left: 50px;
  padding-right: 5px;
  overflow-y: auto;
}

/*---Votes---*/
.liens_votes_pa {
  width: 228px;
  height: 78px;
  float: left;
  margin-left: 22px;
  margin-top: 42px;
}
.liens_votes_pa img {
  width: ;
  height: ;
}

/*---Staff---*/
.staff_pa {
  width: 346px;
  height: 160px;
  float: left;
  margin-top: 40px;
  margin-left: 92px;
}

.staff_pa-image1 {
  width: 50px;
  height: 88px;
  position: relative;
  z-index: 6;
  float: left;
  top: 40px;
  left: 30px;
  display: inline;
  overflow: hidden;
  transition: 1s all;
  -webkit-transition: 1s all;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  opacity: 0.6;
}
.staff_pa-image1:hover {
  opacity: 1;
  transform : rotate(5deg);
  -webkit-transform: rotate(5deg);
  box-shadow: 0px 0px 3px #897E53;
}

.staff_pa-image2 {
  width: 50px;
  height: 88px;
  position: relative;
  z-index: 6;
  float: left;
  top: 40px;
  left: 40px;
  display: inline;
  overflow: hidden;
  transition: 1s all;
  -webkit-transition: 1s all;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  opacity: 0.6;
}
.staff_pa-image2:hover {
  opacity: 1;
  transform : rotate(5deg);
  -webkit-transform: rotate(5deg);
  box-shadow: 0px 0px 3px #897E53;
}

.staff_pa-image3 {
  width: 50px;
  height: 88px;
  position: relative;
  z-index: 6;
  float: left;
  top: 40px;
  left: 50px;
  display: inline;
  overflow: hidden;
  transition: 1s all;
  -webkit-transition: 1s all;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  opacity: 0.6;
}
.staff_pa-image3:hover {
  opacity: 1;
  transform : rotate(5deg);
  -webkit-transform: rotate(5deg);
  box-shadow: 0px 0px 3px #897E53;
}

.staff_pa-image4 {
  width: 50px;
  height: 88px;
  position: relative;
  z-index: 6;
  float: left;
  top: 40px;
  left: 60px;
  display: inline;
  overflow: hidden;
  transition: 1s all;
  -webkit-transition: 1s all;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  opacity: 0.6;
}
.staff_pa-image4:hover {
  opacity: 1;
  transform : rotate(5deg);
  -webkit-transform: rotate(5deg);
  box-shadow: 0px 0px 3px #897E53;
}

.staff_pa-image5 {
  width: 50px;
  height: 88px;
  position: relative;
  z-index: 6;
  float: left;
  top: 40px;
  left: 70px;
  display: inline;
  overflow: hidden;
  transition: 1s all;
  -webkit-transition: 1s all;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  opacity: 0.6;
}
.staff_pa-image5:hover {
  opacity: 1;
  transform : rotate(5deg);
  -webkit-transform: rotate(5deg);
  box-shadow: 0px 0px 3px #897E53;
}

/*---Nouveautés---*/
.news_pa {
  width: 220px;
  height: 160px;
  float: left;
  font-familty: Georgia;
  overflow: hidden;
  padding-left: 5px;
  margin-top: 45px;
  margin-left: 22px;
}
.new_pa marquee {
  width: 220px;
  height: 155px;
}

/*---Crédits---*/
.credit_nu_pa {
  width: 125px;
  height: 30px;
  font-family: Georgia;
  font-size: 16px;
  position: relative;
  z-index: 8;
  float: right;
  right: 60px;
  top: -25px;
  opacity: 0.2;
  transition: 1s all;
  -webkit-transition: 1s all;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.credit_nu_pa:hover {
  font-size: 20px;
  opacity: 1;
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
}

EDIT: Je sais pas si tu as déjà pris le code Pandemonium, mais j'avais oublié un chiffre que j'ai ensuite corrigé, alors tu vas peut-être devoir le recopier, désolée ><

Celui d'Onyx fonctionne en fait! Merci vous deux pour la patience
Mais j'ai quelques petits soucis: comment j'augmente l'espace que prend le scroll? Ce que je vois lá c'est genre 10px de hauteur (dans la zone nouveautés)
Et puis dans le texte du contexte, où devrais-je mettre le code du justify?