/************************************* FICHE PV ET PRÉSENTATIONS NYO *************************************/
.dossier_contour {
  position: relative;
  z-index: 0;
  padding-top: 30px;
  width: 600px;
  height: 770px;
  background: url('http://i.imgur.com/WJm2Q9D.jpg');
  background-size: 300px;
  margin: auto;
  margin-bottom: 10px;
  margin-top: 10px;
  border-radius: 20px;
}

.dossier_contour:after {
  content: '';
  position: absolute;
  z-index: -3;
  bottom: 0px;
  right: -50px;
  width: 100px;
  height: 600px;
  background: url('http://i.imgur.com/WJm2Q9D.jpg');
  background-size: 300px;
  border-radius: 30px;
}

.dossier_nom {
  position: absolute;
  bottom: 290px;
  left: 320px;
  width: 600px;
  height: 80px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  line-height: 80px;
  font-size: 35px;
  text-align: right;
  font-family: 'Special Elite';
  opacity: 0.5;
}

.feuilles_internes {
  position: relative;
  margin-left: 30px;
  width: 510px;
  height: 710px;
  padding: 20px;
  background: url('http://i.imgur.com/kbJBHwj.jpg');
  background-position: center center;
  background-size: auto;
  box-shadow: 1px 1px 20px grey;
}

.torchwood_fiche {
  background: url('http://i.imgur.com/oaTOOYu.png') no-repeat;
  background-position: center center;
  background-size: 300px;
}

.feuilles_internes:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0px;
  left: 0px;
  width: 550px;
  height: 750px;
  background-image: url('http://i.imgur.com/kbJBHwj.jpg');
  box-shadow: 1px 1px 20px grey;
  -webkit-transform: rotate(2deg);
  transform: rotate(2deg);
}

.feuilles_internes:after {
  content: '';
  position: absolute;
  z-index: -2;
  top: 0px;
  left: 0px;
  width: 550px;
  height: 750px;
  background-image: url('http://i.imgur.com/kbJBHwj.jpg');
  box-shadow: 1px 1px 20px grey;
  -webkit-transform: rotate(-2deg);
  transform: rotate(-2deg);
}

.toutes_les_pages {
  psoition: relative;
  width: 100%;
  height: 700px;
}

.contenu_fiche {
  position: relative;
  width: 100%;
  height: 700px;
  font-family: 'Special Elite';
  font-size: 15px;
}

.tabs-onglets {
  width: 100%;
  text-align: right;
  font-weight: bold;
}

.tabs-onglets a {
  display: inline-block;
  vertical-align: top;
  font-weight: bold;
  color: black;
  margin-left: 5px;
}

.tabs-onglets a.selected {
  color: red;
}

.avatar_perso {
  float: left;
  margin-left: -15px;
  margin-right: 20px;
  border: 5px solid white;
  -webkit-transform: rotate(-2deg);
  transform: rotate(-2deg);
}

.paperclip {
  position: absolute;
  top: 100px;
  left: -43px;
  z-index: 1;
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg);
}

.info_perso {
  font-weight: bold;
}

.limitation_hauteur {
  width: auto;
  height: 300px;
  padding-right: 10px;
  text-align: justify;
  overflow: auto;
}

.limitation_hauteur2 {
  width: auto;
  height: 650px;
  padding-right: 10px;
  text-align: justify;
  overflow: auto;
}

.lien_type1, .lien_type2 {
  position: relative;
  width: 200px;
  height: 200px;
  border: 5px solid white;
  border-bottom: 30px solid white;
  box-shadow: 3px 3px 10px black;
  transition: all ease 0.5s;
}

.lien_type1 span, .lien_type2 span {
  position: absolute;
  left: 0px;
  bottom: -25px;
  display: block;
  width: 200px;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}

.lien_type1:hover, .lien_type2:hover {
  -webkit-transform: scale(1) rotate(0deg);
  transform: scale(1) rotate(0deg);
  transition: all ease 0.5s;
}

.lien_type1 {
  float: left;
  margin-right: -40px;
  -webkit-transform: scale(0.5) rotate(15deg);
  transform: scale(0.5) rotate(15deg);
}

.lien_type2 {
  float: right;
  margin-left: -100px;
  -webkit-transform: scale(0.5) rotate(-15deg);
  transform: scale(0.5) rotate(-15deg);
}

.texte_lien {
  padding-right: 10px;
  height: 200px;
  width: 290px;
  overflow: auto;
}

<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<div class="dossier_contour"><div class="dossier_nom">HARKNESS, Jack</div><div class="feuilles_internes torchwood_fiche"><div class="tabs-onglets">Page <a href="#ongletp1_jack">1</a><a href="#ongletp2_jack">2</a><a href="#ongletp3_jack">3</a></div>
<div class="toutes_les_pages">
<div class="contenu_fiche" id="ongletp1_jack"><img src="http://i.imgur.com/nFgYC6U.png" class="paperclip" /><img class="avatar_perso" src="http://i.imgur.com/1QgR3nx.png">
<span class="info_perso">Nom:</span> Harkness
<span class="info_perso">Prénom:</span> Jack
<span class="info_perso">Âge:</span> Plus de 115 ans
<span class="info_perso">Race:</span> Humaine
<span class="info_perso">Sexe:</span> Masculin
<span class="info_perso">Nationalité:</span> Anglaise
<span class="info_perso">Affiliations:</span> Torchwood, Compagnons du Docteur, Agence du Temps
<span class="info_perso">Date de Naissance:</span> Au choix, 51ième siècle
<span class="info_perso">Lieu de Naissance:</span> Péninsule de Boeshane
<span class="info_perso">Lieu de Résidence:</span> Cardiff, UK

<span class="info_perso">Avatar:</span> John Barrowman
<span class="info_perso">Autres:</span> Chef de Torchwood 3, surnommé Face de Boe. Est immortel.
<span class="info_perso">Actuellement:</span> [color=green][b]Libre[/b][/color]
<div style="clear: both;"></div>

<span class="info_perso">Sommaire du Profil</span>
<div class="limitation_hauteur">Ici, la description du caractère du personnage.</div>
</div><div class="contenu_fiche" id="ongletp2_jack" style="display: none;"> <span class="info_perso">Historique</span>
<div class="limitation_hauteur2">Ici, l'histoire du personnage.</div>
</div><div class="contenu_fiche" id="ongletp3_jack" style="display: none;"><div class="limitation_hauteur2"><div style="background-image:url('http://i.imgur.com/pw0Ism6.jpg');" class="lien_type1"><span>Jack Harkness</span></div><div class="texte_lien"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dignissim commodo urna, in ultricies velit imperdiet sed. Praesent id ornare nibh. Aenean sit amet lorem molestie, mattis lacus vitae, tempor ex. Phasellus nec ante sed sapien luctus suscipit. Donec suscipit lorem nec nulla accumsan, vitae placerat massa scelerisque. Vivamus sed felis vestibulum, vehicula magna vitae, finibus elit. Aliquam molestie faucibus viverra. Nunc imperdiet vestibulum est, placerat commodo felis pellentesque in. Fusce nec urna feugiat, placerat ante nec, vehicula est. Nam eget neque vulputate, maximus lacus eget, vestibulum sem. Fusce malesuada, augue in tempor aliquam, ipsum est tempus mi, nec gravida orci enim sit amet arcu. Fusce porttitor sodales justo id laoreet. Nulla vehicula finibus dui et suscipit. Cras non tristique felis.

Fusce imperdiet lacinia purus, vitae lacinia nunc bibendum vitae. Praesent ut metus lobortis, volutpat tortor viverra, fermentum ante. Fusce ut mattis risus. Suspendisse sed ante est. In porttitor sem eu purus suscipit, in blandit odio tincidunt. Quisque hendrerit mi ac urna pulvinar iaculis. Donec sed feugiat odio. </div>

<div style="background-image:url('http://i.imgur.com/pw0Ism6.jpg');" class="lien_type2" /><span>Prénom Nom</span></div><div class="texte_lien"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dignissim commodo urna, in ultricies velit imperdiet sed. Praesent id ornare nibh. Aenean sit amet lorem molestie, mattis lacus vitae, tempor ex. Phasellus nec ante sed sapien luctus suscipit. Donec suscipit lorem nec nulla accumsan, vitae placerat massa scelerisque. Vivamus sed felis vestibulum, vehicula magna vitae, finibus elit. Aliquam molestie faucibus viverra. Nunc imperdiet vestibulum est, placerat commodo felis pellentesque in. Fusce nec urna feugiat, placerat ante nec, vehicula est. Nam eget neque vulputate, maximus lacus eget, vestibulum sem. Fusce malesuada, augue in tempor aliquam, ipsum est tempus mi, nec gravida orci enim sit amet arcu. Fusce porttitor sodales justo id laoreet. Nulla vehicula finibus dui et suscipit. Cras non tristique felis.

Fusce imperdiet lacinia purus, vitae lacinia nunc bibendum vitae. Praesent ut metus lobortis, volutpat tortor viverra, fermentum ante. Fusce ut mattis risus. Suspendisse sed ante est. In porttitor sem eu purus suscipit, in blandit odio tincidunt. Quisque hendrerit mi ac urna pulvinar iaculis. Donec sed feugiat odio. </div>

<div style="background-image:url('http://i.imgur.com/pw0Ism6.jpg');" class="lien_type1" /><span>Prénom Nom</span></div><div class="texte_lien"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dignissim commodo urna, in ultricies velit imperdiet sed. Praesent id ornare nibh. Aenean sit amet lorem molestie, mattis lacus vitae, tempor ex. Phasellus nec ante sed sapien luctus suscipit. Donec suscipit lorem nec nulla accumsan, vitae placerat massa scelerisque. Vivamus sed felis vestibulum, vehicula magna vitae, finibus elit. Aliquam molestie faucibus viverra. Nunc imperdiet vestibulum est, placerat commodo felis pellentesque in. Fusce nec urna feugiat, placerat ante nec, vehicula est. Nam eget neque vulputate, maximus lacus eget, vestibulum sem. Fusce malesuada, augue in tempor aliquam, ipsum est tempus mi, nec gravida orci enim sit amet arcu. Fusce porttitor sodales justo id laoreet. Nulla vehicula finibus dui et suscipit. Cras non tristique felis.

Fusce imperdiet lacinia purus, vitae lacinia nunc bibendum vitae. Praesent ut metus lobortis, volutpat tortor viverra, fermentum ante. Fusce ut mattis risus. Suspendisse sed ante est. In porttitor sem eu purus suscipit, in blandit odio tincidunt. Quisque hendrerit mi ac urna pulvinar iaculis. Donec sed feugiat odio. </div></div>
</div></div>
</div></div>

/**
    * Système d'onglets automatisé
    * Version : 1.0
    * Par Emmanuel "Manumanu" B.
    **/

    $(document).ready(function() {
      var ongletActuel = null;
      ongletActuel = $('.tabs-onglets a:first').attr('href');

      // Ajout de classe au premier onglet
      $('.tabs-onglets').find('a[href="'+ ongletActuel +'"]').addClass('selected');

      // Afficher l'élément par défaut correspondant à celui de l'onglet par défaut
      $(ongletActuel).show().siblings().hide();

      // Gestion de l'événement clic
      $('.tabs-onglets a').click(function(e) {
          idOnglet = $(this).attr('href');

          // Si l'élément est déjà sélectionné, ne rien faire
          if (idOnglet == ongletActuel)
            e.preventDefault();
          else {
            // Afficher le contenu demandé et masquer le contenu restant
            $(idOnglet).fadeIn().siblings().hide();

            // Retirer la classe des autres onglets et l'ajouter sur l'élément sélectionné
            $(this).addClass('selected').siblings().removeClass('selected');
            ongletActuel = idOnglet;
          }

          // Empêche le déclenchement du lien
          e.preventDefault();
      });
    });