Hey ! Je veux bien essayer de te faire ta PA :3

EDIT : Petite question, pour les news, il y a une image par-dessus le bloc des news, c'est bien ça ?

Heyy mercii beaucoup c'est sympa de ta part

Vouip Vouip c'est ça ( et si possible la même pour le membre du mois et l'événement en cours)

Mais de rien :3
Merci de l'éclaircissement x)
Par contre les partenaires qui défilent me paraissent compliqués à faire en HTML, je peux essayer de te le bidouiller en Javascript mais
1-Je ne te promets rien, mes connaissances en java sont très réduites
2-Il faudra passer par une page HTML et une iframe du coup

Si jamais tu n'est pas obliger de les faire défiler t'inquiète pas

Bonjour !
Je pense avoir fini alors voilà le rendu !
http://eerie-ange-test.forumactif.org/
Si quelque chose ne te satisfait pas, je m'en occuperai :3

Wouahw je suis fane ! C'est mon croquis en réel ! ** <3
Du coup petites questions :
Toute les couleurs et les écritures sont modifiable du coup ?
Et tu crois que se serais possible d'ajouter "Happy" au dessus des liens, "Crazy" au dessus des news, et "Family" au dessus du contexte ?

Oui, elles sont toutes modifiables, pas d'inquiétude :3
Et c'est ajouté o/

C'est à tomber j'adore grave !
Merci infiniment

Mais de rien ♥

Du coup, voilà les codes o/

HTML

Code:

<div class="fond_pa">
                                                                                              
 <div class="img_top_pa" style="float:left;">
                                                                    
 <div class="membre_mois_pa">
                                                                                            <img src="http://image.noelshack.com/fichiers/2016/20/1463387843-lily-250x50.jpg" />      <span>Nom Membre du Mois</span>                                                                                      
 </div>
                                                                  
 </div>
                                                                                                                                                                              
 <div class="staff_pa">
                                                                                                          
 <div class="staff_bloc_pa" style="margin-right:5px;">
              <img src="http://image.noelshack.com/fichiers/2016/20/1463387842-lily-100x50.jpg" /><span>Pseudo <br />Présence<br />DC<br /><a href="#">Mp</a></span>              
 </div>
                                        
 <div class="staff_bloc_pa" style="margin-left:5px;">
              <img src="http://image.noelshack.com/fichiers/2016/20/1463387842-lily-100x50.jpg" /><span>Pseudo <br />Présence<br />DC<br /><a href="#">Mp</a></span>              
 </div>
                                                                                                          
 </div>
                                                                                
 <div class="img_top_pa" style="float:right;">
                                                                                                                                                        
 <div class="event_pa">
                                                                                            <img src="http://image.noelshack.com/fichiers/2016/20/1463387843-lily-250x50.jpg" />  <span>Evénement en cours</span>                                                                                                                                                                
 </div>
                                                                
 </div>
                                                                                                                                                                                                                
 <table cellspacing="5" valign="top" class="table_pa">
                                                                                                                                                  
 <tbody>
 
 <tr>
 
 <th>
 Happy
 </th>
 
 <th>
 Crazy
 </th>
 
 <th>
 Family
 </th>
 
 </tr>
                                                                                                                                                  
 <tr>
                                                                                                                                                  
 <td valign="top" class="cell_cote_pa">
                                                                                                                                          
 <div class="lien_pa">
                                                                 <a href="#">Lien</a>                                                                
 </div>
                                                                                                                            
 <div class="lien_pa">
                                                                 <a href="#">Lien</a>                                                                
 </div>
                                                                                                                            
 <div class="lien_pa">
                                                                 <a href="#">Lien</a>                                                                
 </div>
                                                                            
 <div class="lien_pa">
                                                                 <a href="#">Lien</a>                                                                
 </div>
                                                                            
 <div class="lien_pa">
                                                                 <a href="#">Lien</a>                                                                
 </div>
                                                                                                                    
 <div class="credits_pa">
    PA réalisée par <a href="http://www.never-utopia.com/">Eerie Ange's</a>.    
 </div>
                                                                                                                            
 </td>
                                                                                                                                                  
 <td valign="top" class="cell_milieu_pa">
                                                                    
 <div class="news_pa">
           <span>News 1 - Résumé - <a href="#">www</a><br />News 2 - Résumé - <a href="#">www</a></span>                                          <img src="http://image.noelshack.com/fichiers/2016/20/1463390229-250x125.jpg" />                                                      
 </div>
                                                                      
 <table cellspacing="10">
                                                                                                          
 <tbody>
                                                                                                          
 <tr>
                                                                                                          
 <td>
                                                      <img class="scenario_pa" src="http://image.noelshack.com/fichiers/2016/20/1463387842-lily-50x50.jpg" />                                                      
 </td>
                                                                                                          
 <td>
                                                      <img class="scenario_pa" src="http://image.noelshack.com/fichiers/2016/20/1463387842-lily-50x50.jpg" />                                                      
 </td>
                                                                                                          
 <td>
                                                      <img class="scenario_pa" src="http://image.noelshack.com/fichiers/2016/20/1463387842-lily-50x50.jpg" />                                                      
 </td>
                                      
 <td>
                                                      <img class="scenario_pa" src="http://image.noelshack.com/fichiers/2016/20/1463387842-lily-50x50.jpg" />                                                      
 </td>
                                                                                                        
 </tr>
                          
 <tr>
                                                                                                          
 <td>
                                                      <img class="scenario_pa" src="http://image.noelshack.com/fichiers/2016/20/1463387842-lily-50x50.jpg" />                                                      
 </td>
                                                                                                          
 <td>
                                                      <img class="scenario_pa" src="http://image.noelshack.com/fichiers/2016/20/1463387842-lily-50x50.jpg" />                                                      
 </td>
                                                                                                          
 <td>
                                                      <img class="scenario_pa" src="http://image.noelshack.com/fichiers/2016/20/1463387842-lily-50x50.jpg" />                                                      
 </td>
                                      
 <td>
                                                      <img class="scenario_pa" src="http://image.noelshack.com/fichiers/2016/20/1463387842-lily-50x50.jpg" />                                                      
 </td>
                                                                                                        
 </tr>
          
 <tr>
                                                                                                          
 <td>
                                                      <img class="scenario_pa" src="http://image.noelshack.com/fichiers/2016/20/1463387842-lily-50x50.jpg" />                                                      
 </td>
                                                                                                          
 <td>
                                                      <img class="scenario_pa" src="http://image.noelshack.com/fichiers/2016/20/1463387842-lily-50x50.jpg" />                                                      
 </td>
                                                                                                          
 <td>
                                                      <img class="scenario_pa" src="http://image.noelshack.com/fichiers/2016/20/1463387842-lily-50x50.jpg" />                                                      
 </td>
                                      
 <td>
                                                      <img class="scenario_pa" src="http://image.noelshack.com/fichiers/2016/20/1463387842-lily-50x50.jpg" />                                                      
 </td>
                                                                                                        
 </tr>
                                                                                            
 </tbody>
                                                                                                          
 </table>
                                                                                                            
 </td>
                                                                                                                                                  
 <td valign="top" class="cell_cote_pa">
                                                                                                            
 <div class="contexte_pa">
            Excogitatum est super his, ut homines quidam ignoti, vilitate ipsa parum cavendi ad colligendos rumores per Antiochiae latera cuncta destinarentur relaturi quae audirent. hi peragranter et dissimulanter honoratorum circulis adsistendo pervadendoque divites domus egentium habitu quicquid noscere poterant vel audire latenter intromissi per posticas in regiam nuntiabant, id observantes conspiratione concordi, ut fingerent quaedam et cognita duplicarent in peius, laudes vero supprimerent Caesaris, quas invitis conpluribus formido malorum inpendentium exprimebat.            
 </div>
                      
 <div class="partenaires_pa">
       <a href="#"><img src="http://image.noelshack.com/fichiers/2016/19/1463077310-lily-100x35.png" /></a><a href="#"><img src="http://image.noelshack.com/fichiers/2016/19/1463077310-lily-100x35.png" /></a><a href="#"><img src="http://image.noelshack.com/fichiers/2016/19/1463077310-lily-100x35.png" /></a><a href="#"><img src="http://image.noelshack.com/fichiers/2016/19/1463077310-lily-100x35.png" /></a><a href="#"><img src="http://image.noelshack.com/fichiers/2016/19/1463077310-lily-100x35.png" /></a>      
 </div>
                                                                                                    
 </td>
                                                                                        
 </tr>
                                                                                        
 </tbody>
                                                                                        
 </table>
</div>

CSS

Code:

.fond_pa {
  background-color:#C7C7C7;
  width:750px;
  color:#707070;
}

.img_top_pa {
padding:10px 5px;
background-color:#3D3D3D;
}

.membre_mois_pa {
  width:250px;
  height:50px;
  overflow:hidden;
 -webkit-transition: 1s;
  transition:1s;
}

.membre_mois_pa img {
  width:250px;
  height:50px;
 -webkit-transition: 1s;
  transition:1s;
  z-index:5;
  position:relative;
}
 
.membre_mois_pa span {
  display:block;
  background-color:#242424;
  position:absolute;
 -webkit-transition: 1s;
  transition:1s;
  margin-top:-50px;
  color:#C7C7C7;
  font-size:25px;
  font-family:'Arizonia';
  z-index:2;
  padding:10px;
  width:230px;
  height:30px;
}

.membre_mois_pa:hover img {
  margin-left:-500px;
 -webkit-transition: 1s;
  transition:1s;
}
 
.staff_pa {
  margin-left:5px;
  margin-right:5px;
  display:inline-block;
  margin-top:10px;
}

.staff_bloc_pa a {
  color: #707070;
  text-decoration:none!important;
 -webkit-transition: 1s;
  transition:1s;
}

.staff_bloc_pa a:hover {
  color: #ffffff;
  text-decoration:none!important;
 -webkit-transition: 1s;
  transition:1s;
}

.staff_bloc_pa {
  width:100px;
  height:50px;
  overflow:hidden;
 -webkit-transition: 1s;
  transition:1s;
  display:inline-block;
}

.staff_bloc_pa img {
  width:100px;
  height:50px;
 -webkit-transition: 1s;
  transition:1s;
  z-index:5;
  position:relative;
}
 
.staff_bloc_pa span {
  display:block;
  background-color:#242424;
  position:absolute;
 -webkit-transition: 1s;
  transition:1s;
  margin-top:-50px;
  color:#C7C7C7;
  font-size:10px;
  z-index:2;
  width:100px;
  height:50px;
}

.staff_bloc_pa:hover img {
  margin-top:-100px;
 -webkit-transition: 1s;
  transition:1s;
}

.event_pa {
  width:250px;
  height:50px;
  overflow:hidden;
 -webkit-transition: 1s;
  transition:1s;
}

.event_pa img {
  width:250px;
  height:50px;
 -webkit-transition: 1s;
  transition:1s;
  z-index:5;
  position:relative;
}
 
.event_pa span {
  display:block;
  background-color:#242424;
  position:absolute;
 -webkit-transition: 1s;
  transition:1s;
  margin-top:-50px;
  color:#C7C7C7;
  font-size:25px;
  font-family:'Arizonia';
  z-index:2;
  padding:10px;
  width:230px;
  height:30px;
}

.event_pa:hover img {
  margin-left:500px;
 -webkit-transition: 1s;
  transition:1s;
}

.table_pa {
  margin-top:20px;
}

.table_pa th {
  background-color:transparent;
  background-image:none;
  font-family:'Arizonia';
  font-weight:normal;
  font-size:18px;
  color:#242424;
}

.cell_cote_pa {
  width:235px;
}

.cell_milieu_pa {
  width:260px;
  background-color:#242424;
}

.news_pa {
  margin:10px 5px;
  width:250px;
  height:125px;
  overflow:hidden;
}

.news_pa span {
  display:block;
  width:250px;
  height:125px;
  overflow:auto;
  margin-top:-125px;
 -webkit-transition: 1s;
  transition:1s;
  background-color:#3D3D3D;
}

.news_pa:hover span {
  margin-top:0px;
 -webkit-transition: 1s;
  transition:1s;
}

.news_pa a {
  color:#707070;
  text-decoration:none;
 -webkit-transition: 1s;
  transition:1s;
}

.news_pa a:hover {
  color:#ffffff;
  text-decoration:none!important;
 -webkit-transition: 1s;
  transition:1s;
}
 
.lien_pa {
  margin:5px;
  padding:5px 10px;
  text-align:center;
}

.lien_pa a {
  font-family:'Arizonia';
  font-size:22px;
  color:#707070;
  background-color:#121212;
  padding:2px;
  height:22px;
  text-decoration:none;
 -webkit-transition: 1s;
  transition:1s;
  display:block;
}

.lien_pa a:hover {
  color:#ffffff;
  text-decoration:none!important;
 -webkit-transition: 1s;
  transition:1s;
}

.credits_pa {
  height:100px;
  overflow:auto;
  padding:5px;
  margin:5px;
  background-color:#121212;
  text-align:justify;
}
.scenario_pa {
  width:50px;
  height:50px;
  filter: grayscale(100%);
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
 -ms-filter: grayscale(100%);
 -o-filter: grayscale(100%);
 -webkit-transition: 1s;
  transition:1s;
}

.scenario_pa:hover {
  filter: grayscale(0%);
 -webkit-filter: grayscale(0%);
 -moz-filter: grayscale(0%);
 -ms-filter: grayscale(0%);
 -o-filter: grayscale(0%);
 -webkit-transition: 1s;
  transition:1s;
}

.contexte_pa {
  margin:10px;
  background-color:#121212;
  padding:5px;
  height:210px;
  overflow:auto;
  text-align:justify;
}

.partenaires_pa {
  margin:5px;
  background-color:#121212;
  height:90px;
  overflow:auto;
  width:235px;
}

.partenaires_pa img {
 margin:4px;
}

Bonne continuation :3

Merci **
Dit au risque de passer pour une idiote, l'écriture que tu as mise toi (et qui est canon faut l'avouer) ne s'afiche pas sur mon forum il faut que je l'a rajoute quelque part ?
(ahw et je viens de remarquer un truc, le cadre des liens il ne peux pas être d'une taille fixe ça fait étrange quand ils sont de taille différentes ><)
Je te rajoute du travail désolée xD

Pas grave x')
Pour les liens, ça y est, ils ont une largeur fixe ! J'ai modifié le CSS dans mon post un peu avant du coup. J'ai centré le texte en passant, mais si ça te plaît pas je peux enlever ça
Pour la police, c'est assez simple. Etant donné que c'est une police Google Fonts (ils en ont plein de trop bien va voir non je fais pas du tout de la pub) tu as juste à mettre une petite ligne de code dans ta page et c'est bon !
(Tu peux la mettre sur la page d'accueil directement, mais la mettre dans le template overall_header permet qu'elle soit affichée sur toutes les pages de ton forum, plutôt pratique !)

Code:

<link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet' type='text/css'>

(J'espère que mes explications sont claires ><)

Vouip c'est très clair ! xD Merci beaucoup comme ça c'est encore plus parfait ! ♥

Désolée de dp >< mais pour augmenter la taille du " Happy Crazy Family" c'est ou ? (a)

C'est dans "table_pa th" (dans le CSS donc) :3

Mercii beaucoup ! (a et tu a raison les Polices sunt super, j'ai fait le plein ! xD )

De rien :3

Coucou ♥︎

Petite question, cette demande de Libre Service est finie ? Si oui Nelra, tu peux éditer ton premier message pour cocher l'icone "Terminé" :3
Merci pour ton boulot Eerie Ange's, n'hésite pas à proposer ta PA dans le libre service *w*