Plop ! Si je fais le QEEL je peux aussi faire la PA si tu le souhaites. Même réflexion que précédemment sur le fond par contre ^^

Coucou :)
Tout comme le QEEL, je souhaite qu'elle soit de 700px max pour la largueur.
Ensuite la police est Dragon is Coming. Est-il possible de faire l'effet que j'ai fait par exemple avec le titre navigation ?
Voilà si tu as d'autres questions n'hésite pas ^^

Je voulais commencer mais j'ai quelques doutes :

Image du concept 146*67px, image du staff 34*37px, image des postes vacants 39*40px, image évent/concours 130*60, image de l'info bulle 87*65px.

Image ou bloc ? A moins qu'il n'y ait un coulissement d'image laissant apparaitre le texte pour le concept ? Pour les postes vacants, ça se passe comment ? Ce sont des info-bulles ou juste des images cliquables ? Concours/Events, c'est juste du texte ? Et la navigation, une liste de lien ou une barre cliquable ?

Pour les dimensions c'est les dimensions des images.
Pour l'image du concept rien de bien compliquer c'est simplement un image au dessus de la description du concept.
Poste vacants et concours/évent il serai bien d'avoir une info bulle.
Pour ce qui est de la navigation sa serai une liste de lien. (Pense-tu pouvoirs faire le même effet que les liens des sous forums des catégories pour la liste de lien ? si tu ne peux pas ce n'est pas du tout grave ^^)

Et la PA : www.

Ohw Waouwe ! Elle est tout simplement MAGNIFIQUE !! Merci, merci merci !!

Je te passe les codes alors, dis-moi si ça va ^^

CSS

Code:

/* --------------------------------- PA --------------------------------- */

/* Base de la PA */
.fond_PA {
  background-color: #99D9D8;
  width: 690px;
  padding: 20px;
  border-radius: 50px;
  text-align: justify;
  font-size: 11px;
}

.titre_PA {
  position: relative; 
  top: -1.3em;
  font-family: 'Lobster', cursive;
  font-size: 35px;
  color: #25867F;
  text-shadow: 1px 1px 2px white;
  text-align: center;
}

.sous_titre_PA {
  position: relative; 
  top: -0.5em;
  z-index: 1;
  font-family: 'Lobster', cursive;
  font-size: 25px;
  color: #25867F;
  text-shadow: 1px 1px 2px white;
  text-align: center;
}

/* Blocs à fond bleu de la PA + couleur de leurs liens */
.bloc_PA {
  background-color: #B3E3E3;
  color: #377B7A;
  border-radius: 25px;
  padding: 15px;
  font-size: 11px;
  position: relative;
  top:-2em;
  left: -1em;
  text-align: justify !important;
}

.bloc_PA a {
  color: #295654 !important;
  text-decoration: none !important;
}

/* Bloc spécial pour la navigation */
.bloc_PA_navig {
  background-color: #B3E3E3;
  color: #377B7A;
  border-radius: 25px;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 11px;
  position: relative;
  top:-2em;
  left: -1em;
  text-align: justify !important;
}

/* Liens de la navigation */
.bloc_PA_navig a {
  text-decoration: none !important;
  color: #295654 !important;
}

/*Fond "normal" des liens */
#liens_navig a {
  background-color: #8CC8C1;
  display: block;
}

/* Fond des liens au survol */
#liens_navig a:hover {
  background-color: #99CDFF;
  display: block;
}

/* Info-bulles staff et vacants */
a.info{
  position: relative;
  z-index: 24;
  color: #000;
  text-decoration: none;
}
 
a.info:hover{
  z-index: 25;
}
 
a.info span{
  display: none;
}
 
a.info:hover span{
  display: block;
  position: absolute;
  top: -8em;
  right: -10em;
  width: 100px;
  height: 200px;
  border-radius: 25px;
  overflow: auto;
  background-color: #B3E3E3;
  text-align: center;
  font-weight: none;
  padding: 5px;
}

/* Rotations des images au survol du staff et des vacants */
.imgstaff {
  border-radius: 80%;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.imgstaff:hover {
  border-radius: 80%;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

/* Info-bulles Evènements */
a.events{
  position: relative;
  z-index: 24;
  color: #000;
  text-decoration: none;
}
 
a.events:hover{
  z-index: 25;
}
 
a.events span{
  display: none;
}
 
a.events:hover span{
  display: block;
  position: absolute;
  top: -8em;
  right: -10em;
  width: 200px;
  height: 60px;
  overflow: auto;
  border-radius: 25px;
  overflow: auto;
  background-color: #B3E3E3;
  text-align: center;
  font-weight: none;
  padding: 5px;
}

/* Rotation au survol images évènements */
.imgevents {
  border-radius: 25px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.imgevents:hover {
  border-radius: 25px;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

/* --------------------------------- FIN PA --------------------------------- */

PA

Code:

<br /><br />
<div class="fond_PA">
   
   <div class="titre_PA">
       Bienvenue sur Arka Snow
   </div>
   
   <table>
      
      <tbody>
         
         <tr>
            
            <td>
               
               <div class="sous_titre_PA">
                   Concept
               </div>
               
               <div class="bloc_PA" style="width: 150px; height: 230px; overflow: auto;">
                  
                  <center>
                      <img src="http://nsa33.casimages.com/img/2014/06/13/140613065031340116.gif" style="border-radius: 25px;" />
                  </center><br />Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia. Ob haec et huius modi multa, quae cernebantur in paucis, omnibus timeri sunt coepta. et ne tot malis dissimulatis paulatimque serpentibus acervi crescerent aerumnarum, nobilitatis decreto legati mittuntur: Praetextatus ex urbi praefecto et ex vicario Venustus et ex consulari Minervius oraturi, ne delictis supplicia sint grandiora, neve senator quisquam inusitato et inlicito more tormentis exponeretur. Mox dicta finierat, multitudo omnis ad, quae imperator voluit, promptior laudato consilio consensit in pacem ea ratione maxime percita, quod norat expeditionibus crebris fortunam eius in malis tantum civilibus vigilasse, cum autem bella moverentur externa, accidisse plerumque luctuosa, icto post haec foedere gentium ritu perfectaque sollemnitate imperator Mediolanum ad hiberna discessit. <a href="#">La suite</a>
               </div>
               
            </td>
            
            <td style="width: 20px;">
               
            </td>
            
            <td>
               
               <div class="sous_titre_PA">
                   Le staff
               </div>
               
               <div class="bloc_PA" style="width: 170px;">
                  
                  <center>
                      <a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/1511.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a> <a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/1511.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a> <a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/1511.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a> <a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/1511.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a>
                  </center>
                  
               </div>
                <br />
               <div class="sous_titre_PA">
                   Postes vacants
               </div>
               
               <div class="bloc_PA" style="width: 170px;">
                  
                  <center>
                      <a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/sans_t11.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a> <a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/sans_t11.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a> <a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/sans_t11.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a> <a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/sans_t11.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a><br /><a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/sans_t11.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a> <a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/sans_t11.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a> <a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/sans_t11.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a> <a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/sans_t11.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a> <br /><br /><a href="#">Les autres</a> - <a href="#">Les scénarios</a>
                  </center>
                  
               </div>
               
            </td>
            
            <td style="width: 20px;">
               
            </td>
            
            <td>
               
               <div class="sous_titre_PA">
                   Concours & Events
               </div>
               
               <div class="bloc_PA">
                  
                  <center>
                      <nobr><a class="events"><img src="http://i39.servimg.com/u/f39/18/47/68/10/4510.png" class="imgevents" /><span>Le texte que tu veux</span></a> <a class="events"><img src="http://i39.servimg.com/u/f39/18/47/68/10/4510.png" class="imgevents" /><span>Le texte que tu veux</span></a> </nobr>
                  </center>
                  
               </div><br />
               <table>
                  
                  <tbody>
                     
                     <tr>
                        
                        <td>
                           
                           <div class="sous_titre_PA">
                               Navigation
                           </div>
                           
                           <div class="bloc_PA_navig" style="width: 135px;">
                              
                              <center>
                                 
                                 <div id="liens_navig">
                                     <a href="#">Lien</a> <a href="#">Lien</a> <a href="#">Lien</a> <a href="#">Lien</a> <a href="#">Lien</a> <a href="#">Lien</a>
                                 </div>
                                 
                              </center>
                              
                           </div>
                           
                        </td>
                        
                        <td style="width: 20px;">
                        </td>
                        
                        <td>
                           
                           <div class="sous_titre_PA">
                               Annonces
                           </div>
                           
                           <div class="bloc_PA" style="width: 135px;">
                               <span style="color: #77B652;"> XX/XX </span> Nouveauté <a href="#" style="color: #77B652 !important;">La suite</a> <br /> <span style="color: #77B652;"> XX/XX </span> Nouveauté <a href="#" style="color: #77B652 !important;">La suite</a> <br /><span style="color: #77B652;"> XX/XX </span> Nouveauté <a href="#" style="color: #77B652 !important;">La suite</a> <br /><span style="color: #77B652;"> XX/XX </span> Nouveauté <a href="#" style="color: #77B652 !important;">La suite</a> <br /><span style="color: #77B652;"> XX/XX </span> Nouveauté <a href="#" style="color: #77B652 !important;">La suite</a> <br /><span style="color: #77B652;"> XX/XX </span> Nouveauté <a href="#" style="color: #77B652 !important;">La suite</a> <br />
                           </div>
                           
                        </td>
                        
                     </tr>
                     
                  </tbody>
                  
               </table>
               
            </td>
            
         </tr>
         
      </tbody>
      
   </table>
</div>

Magnifique elle marche numéro 1 merci beaucoup !!