LE HTML : -à placer dans le template overall_header après la barre de navigation ou avant, selon si vous la voulez au-dessus ou au-dessous de votre barre-

Code:

<div id="wrap">
  <div class="staff">
  <div class="staff_title">STAFF</div>
   <div class="img_staff1">
     <span class="break">
       <div class="staff_pseudo">Staff</div>
      <div class="staff_text"><a href="/">MP</a> ♕ <a href="/">Profil</a></div>
      </span>
   </div>
   <div class="clicke"><a href="/"><img src="http://via.placeholder.com/250x150"></a></div>
   <div class="img_staff2">
     <span class="break">
       <div class="staff_pseudo">Staff</div>
      <div class="staff_text"><a href="/">MP</a> ♕ <a href="/">Profil</a></div>
      </span>
   </div>
   <div class="img_staff3">
     <span class="break">
       <div class="staff_pseudo">Staff</div>
       <div class="staff_text"> <a href="/">MP</a> ♕ <a href="/">Profil</a> </div>
      </span>
   </div>
   <div class="img_staff4">
     <span class="break">
       <div class="staff_pseudo">Staff</div>
       <div class="staff_text"> <a href="/">MP</a> ♕ <a href="/">Profil</a> </div>
      </span>
   </div>
  </div>
  <div class="news_credits">
    <div class="news">
      <p><span>date</span> NEWS</p>
    </div>
    <div class="credits">
      <div class="credit_title">CRÉDITS</div>
      <p>Codage de la PA réalisé par @ <a href="http://epsilon-ls.forumactif.com/">E P S I L O N</a>.</p>
    </div>
  </div>
  <div class="contexte">
  Contexte.
  </div>
  <div class="predefs_rumeurs">
  <div class="predef_title">Prédéfinis</div>
    <div class="predefinis">
      <div class="predefini">
        <span class="hover_predef"><div class="hover_predef_text">Predef'</div></span><a href="" target="_blank"><img src="http://via.placeholder.com/50x50" /></a>
      </div>
      <div class="predefini">
        <span class="hover_predef"><div class="hover_predef_text">Predef'</div></span><a href="" target="_blank"><img src="http://via.placeholder.com/50x50" /></a>
      </div>
      <div class="predefini">
        <span class="hover_predef"><div class="hover_predef_text">Predef'</div></span><a href="" target="_blank"><img src="http://via.placeholder.com/50x50" /></a>
      </div>
      <div class="predefini">
        <span class="hover_predef"><div class="hover_predef_text">Predef'</div></span><a href="" target="_blank"><img src="http://via.placeholder.com/50x50" /></a>  
      </div></div>
      
      <span class="ara"><img src="https://imgur.com/Cn8G1FC.png"></span>
<div class="partenaires_pa">
<div class="hoverparto"><span class="icistp">Nom forum</span><a href="http://ariesten.forumactif.org/" class="bouton_part_pa" target="_blank"><img src="http://via.placeholder.com/50x50"/></a></div>
<div class="hoverparto"><span class="icistp">Nom forum</span><a href="http://reload.forumactif.org/" class="bouton_part_pa" target="_blank"><img src="http://via.placeholder.com/50x50"/></a></div>
<div class="hoverparto"><span class="icistp">Nom forum</span><a href="http://brightshadowrebirth.forumactif.com/" class="bouton_part_pa" target="_blank"><img src="http://via.placeholder.com/50x50"/></a></div>
<div class="hoverparto"><span class="icistp">Nom forum</span><a href="http://nevadas-godfathers.forumactif.org/" class="bouton_part_pa" target="_blank"><img src="http://via.placeholder.com/50x50"></a></div>
<div class="hoverparto"><span class="icistp">Nom forum</span><a href="http://ethiareal.forumrpg.org/" class="bouton_part_pa" target="_blank"><img src="http://via.placeholder.com/50x50"></a></div>
<div class="hoverparto"><span class="icistp">Nom forum</span><a href="http://moonlights.forumotion.com/" class="bouton_part_pa" target="_blank"><img src="http://via.placeholder.com/50x50"/></a></div>
<div class="hoverparto"><span class="icistp">Nom forum</span> <a href="http://www.just-married-rpg.com/" class="bouton_part_pa" target="_blank"><img src="http://via.placeholder.com/50x50"/></a></div>
<div class="hoverparto"><span class="icistp">Nom forum</span><a href="http://crimsonday.forumactif.com/" class="bouton_part_pa" target="_blank"><img src="http://via.placeholder.com/50x50"/></a></div>
<div class="hoverparto"><span class="icistp">Nom forum</span><a href="http://terrae.forumpro.fr/" class="bouton_part_pa" target="_blank"><img src="http://via.placeholder.com/50x50"/></a></div>
<div class="hoverparto"><span class="icistp">Nom forum</span><a href="http://inclavatus.forumactif.com/" class="bouton_part_pa" target="_blank"><img src="http://via.placeholder.com/50x50"/></a></div>
<div class="hoverparto"><span class="icistp">Nom forum</span><a href="http://exanthrop.forumactif.org/" class="bouton_part_pa" target="_blank"><img src="http://via.placeholder.com/50x50"/></a></div></div></div> </div>
  

LE CSS :

Code:

#wrap{
  background-image:url('https://imgur.com/FS1MmCY.png');
  text-align: justify;
  width:100%;
  height:550px;
  border-bottom:solid 15px #331919;
}

.staff_title{
  padding-left: 15px;
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-size: 35px;
  text-transform: uppercase;
  border-bottom: 1px solid #eaeaea;
  color: #a33f3f;
  text-shadow: 1px 1px 0px #eaeaea;
}

.staff{
  width: 190px;
  text-align: left;
  display: inline-block;
  vertical-align:top;
}

.img_staff1{
  width: 80px;
  height: 150px;
  background-color: #a33f3f;
  margin: 5px;
  display: inline-block;
  background-image:url('http://via.placeholder.com/80x150');
  transition: 0.5s all;
}

.img_staff2{
  width: 80px;
  height: 150px;
  background-color: #a33f3f;
  margin: 5px;
  display: inline-block;
  background-image:url('http://via.placeholder.com/80x150');
  transition: 0.5s all;
}

.img_staff3{
  width: 80px;
  height: 150px;
  background-color: #a33f3f;
  margin: 5px;
  display: inline-block;
  background-image:url('http://via.placeholder.com/80x150');
  transition: 0.5s all;
}

.img_staff4{
  width: 80px;
  height: 150px;
  background-color: #a33f3f;
  margin: 5px;
  display: inline-block;
  background-image:url('http://via.placeholder.com/80x150');
  transition: 0.5s all;
}

.break{
  position: absolute;
  width: 68px;
  background-color:#eaeaea;
  border: 1px solid #a33f3f;
  padding: 3px 5px;
  height: 142px;
  color: #a33f3f;
  opacity: 0;
  transition: all 500ms;
}

.img_staff1:hover .break{
  opacity: 0.8;
}
.img_staff2:hover .break{
  opacity: 0.8;
}
.img_staff3:hover .break{
  opacity: 0.8;
}
.img_staff4:hover .break{
  opacity: 0.8;
}

.staff_pseudo{
  text-align: center;
  font-size: 18px;
  font-family: 'Roboto';
  font-style: italic;
  text-transform: uppercase;
}

.staff_text{
  color: #a33f3f;
  font-family:'Open Sans Condensed', serif;
  font-size:12px;
  overflow: auto;
  height: 90px;
  text-align: center;
}

.news_credits{
  width: 190px;
  display: inline-block;
  vertical-align:top;
  margin-top: 42px;
}

.news{
  font-family: 'Roboto';
  font-size: 11px;
  line-height: 15px;
  width: 190px;
  height:185px;
  background-color:#eaeaea;
  padding:1px;
  color:#181818;
  overflow: auto;
}

.news a{
  color: #eaeaea;
}

.news span{
  font-family: 'Montserrat';
  text-transform : uppercase;
  font-weight: 900;
  font-size: 13px;
  background-color: #a33f3f;
  border-radius: 20px;
  color: #fff;
}

.credits{
  margin-top: 10px;
  width:170px;
  height:105px;
  font-size:10px;
  background-color:#a33f3f;
  padding:10px;
  color:white;
  font-family:"cousine";
}

.credit_title{
  font-size:15px;
  padding-bottom:5px;
  text-align:center;
  font-family:'roboto';
  font-style:italic;
  text-transform:uppercase;
  border-bottom:solid 1px white;
}

.contexte{
  width: 250px;
  height: 304px;
  text-align: justify;
  overflow: auto;
  font-size: 11px;
  background-color:#a33f3f;
  border: 4px solid #a33f3f;
  padding:5px;
  color: #eaeaea;
  font-weight:200;
  font-family:'cousine';
  display:inline-block;
  vertical-align:top;
  margin:42px 0 10px 10px;
}

.predefs_rumeurs{
  display: inline-block;
  width: 170px;
}

.predef_title{
  padding-left: 10px;
  font-family: 'Roboto Condensed';
  text-transform:uppercase;
  font-style: italic;
  font-size: 15px;
  margin-top:15px;
  color: #a33f3f;
}

.predefini{
  width: 50px;
  height: 50px;
  margin-top: 15px;
  padding: 10px;
  
}

.hover_predef{
  position: absolute;
  min-width:50px;
  margin-left:-1px;
  margin-top:50px;
  background-color:#e9dcdc;
  border:1px solid #a33f3f;
  padding:3px 5px;
  height:20px;
  color:#a33f3f;
  opacity:0;
  transition:all 900ms;
}

.predefini:hover .hover_predef{
  opacity: 0.8;
}

.hover_predef_text{
  text-align:center;
  font-size:13px;
  font-family:'Roboto';
  font-style:italic;
  text-transform:uppercase;
}

.clicke {
    right: 15%;
    margin-top:100px;
    position: absolute;
}
.ara {
    float: left;
    position:relative;
    margin-left:-450px;
}
  .partenaires_pa {
float:left;
margin-left:-650px;
position:relative;
width:900px;
}
.hoverparto {
  display:inline-block;
  padding:2px;
}
.icistp{
   position:absolute;
   min-width:50px;
  margin-left:-1px;
  top:55px;
   background-color:#e9dcdc;
   border:1px solid #a33f3f;
   padding:3px 5px;
  height:20px;
  color:#a33f3f;
   opacity:0;
   transition:all 500ms;
}
.hoverparto:hover .icistp{
   opacity:0.8;
}