Fiche de PV
/!\ Attention, pour que les infobulles s'affichent, mettre le reste du code dans le CSS. Il faut avoir accès au panneau d'administration.

Code:

 <center><div style="color: #df0035; vertical-align: middle;"><div style="width: 500px; display: inline-block; margin: 10px; border-radius: 50px; border: 5px solid #3bff00; background: #fffcc5; border-left: solid #3bff00 2px; border-right: #3bff00 2px solid; padding: 5px;"><h10 style="font: 30px bold; text-transform: lowercase; color: #ff003c;">[center]Prénom Prénom² Nom[/center]</h10><center><p style="border-radius: 50px; border: 5px solid #3bff00; border-left: 2px solid #3bff00; border-right: 2px solid #3bff00; padding: 15px; height: 100px; max-width: 400px; text-align: justify;"><img src="http://obsession27.free.fr/boutons/iconemmawatsonch10.jpg" style="border-radius: 50px; border: 4px solid #df0035; float: right;" />Nom :
Prénom :
Date de naissance :
Domicile :
Copyright : Faith, Diamine.
</p></center>
<table><tr><td style="height: 320px; width: 100%; vertical-align: top; margin-left: 10px; margin-right: 10px;"><div style="height: 10px; background: #df0035; padding: 4px; color: #fffcc5; text-align: center; font-variant: small-caps; border-radius: 30px 30px 0 0; border: #df0035 2px solid;">Mon histoire...</div><div style="height: 310px; padding-left: 10px; padding-right: 10px; text-align: justify; border-radius: 0 0 30px 30px; border: #df0035 2px solid; border-bottom: #df0035 solid 5px; overflow: auto;">NE PAS ENLEVER LE CRÉDIT. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.

</div>
</td>
<td><img src="http://i.imgur.com/Em4uf8B.png" style="display: table-cell; width: 200px; border-radius: 100px/160px; -webkit-border-radius: 100px/160px; -moz-border-radius: 100px/160px; -o-border-radius: 100px/160px; border: 4px solid #df0035;" /></td></tr></table>[size=10]Code par Joy[/size]</div>
<div class="liens"><p class="bulle"><img src="http://www.servimg.com/u/f48/17/58/70/58/rose1010.png" style="border-radius: 30px 0 0 30px;" /><span><span class="np">Prénom Nom [i]ft. Nom de la célébrité[/i]</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. </span></p><p class="bulle"><img src="http://www.servimg.com/u/f48/17/58/70/58/rose1010.png" /><span><span class="np">Prénom Nom [i]ft. Nom de la célébrité[/i]</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. </span></p><p class="bulle"><img src="http://www.servimg.com/u/f48/17/58/70/58/rose1010.png" style="border-radius: 0 30px 30px 0;" /><span><span class="np" >Prénom Nom [i]ft. Nom de la célébrité[/i]</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. </span></p></div>
</center>

Code:

 div.liens {
  margin: 5px;
  border: solid #df0035 4px;
  border-left: 2px solid #df0035;
  border-right: 2px solid #df0035;
  border-radius: 35px;
  padding: 0;
  height: 100px;
  width: 300px;
}
p.bulle {
  display: inline;
  color: black;
  text-decoration: none;
  text-align: justify;
}
p.bulle > span {
  display: none;
}
p.bulle:hover {
  background: none;
  z-index: 500;
}
p.bulle:hover > span {  
  display: block;
  position: absolute;
  margin-top: 10px;
  background: #fffcc5;
  height: 150px;
  width: 270px;
  overflow: auto;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -o-border-radius: 50px;
  -webkit-border-radius: 50px;
  border: 5px solid #3bff00;
  border-left: solid #3bff00 2px;
  border-right: #3bff00 2px solid;
  color: #df0035;
  padding: 15px;
}
span.np {
  border-bottom: 3px #df0035 dotted;
}