Estrée a écrit:Cependant il me faudrait ce code juste en HTML, puisqu'il servira à l'usage d'un post RP particulier ^^

Code:

<div class="msg-progression">
<div class="msg-p-titre">Texte ici</div>
<div class="msg-p-sous-titre">Texte ici</div>
<div class="msg-p-barre" data-placement="haut-gauche">Texte ici</div>
<div class="msg-p-barre" data-placement="haut-droite">Texte ici</div>
<div class="msg-p-barre" data-placement="bas-gauche">Texte ici</div>
<div class="msg-p-barre" data-placement="bas-droite">Texte ici</div>
<div class="msg-p-texte-gauche">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure nihil sed ipsum totam aspernatur dolores corporis, deserunt animi ipsam fugiat porro delectus saepe fugit nisi adipisci ullam quisquam hic. ipsum dolor sit amet, consectetur adipisicing
elit. Aliquid, alias perferendis ab magnam qui assumenda, atque reiciendis fugit illo impedit, sit earum mollitia quas modi distinctio omnis praesentium error laudantium.</div>
<div class="msg-p-texte-principal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At hic ut ab quaerat tempore dicta delectus laboriosam, laborum fugiat officiis possimus dolor libero ipsum est assumenda minima molestias et. Similique. ipsum dolor sit amet, consectetur adipisicing
elit. Totam quos, quod ab maxime modi iure minus, porro earum vitae quaerat! Impedit vel quia, aspernatur quae iste porro eveniet delectus quidem. ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus quia aut eaque minima ipsa. Quasi
nulla, harum error doloremque, debitis, vero, nemo laudantium numquam provident qui quam perspiciatis! Itaque, facere.</div>
</div>

Code:

.msg-progression {
  background-image: url('http://img4.hostingpics.net/pics/149650Sanstitre3.png');
  width: 533px;
  height: 378px;
  margin: auto;
  position: relative;
  font-size: 14px;
  color: black;
}

.msg-progression > div {
  position: absolute;
}

.msg-p-texte-gauche {
  top: 90px;
  left: 30px;
  width: 105px;
  height: 270px;
  overflow: auto;
}

.msg-p-texte-principal {
  top: 153px;
  left: 163px;
  width: 347px;
  height: 200px;
  overflow: auto;
}

.msg-p-titre {
  color: white;
  text-align: center;
  left: 225px;
  top: 10px;
  width: 115px;
}

.msg-p-sous-titre {
  color: white;
  top: 26px;
  left: 244px;
  font-size: 12px;
  width: 78px;
  text-align: center;
}

.msg-p-barre {
  width: 160px;
  text-align: center;
  font-size: 12px;
}

.msg-p-barre[data-placement*="haut"] {
  top: 88px;
}

.msg-p-barre[data-placement*="bas"] {
  top: 115px;
}

.msg-p-barre[data-placement*="gauche"] {
  left: 165px;
}

.msg-p-barre[data-placement*="droite"] {
  left: 342px;
}