Fiche de présentation imagée

Bonsoir amis n'utopiens !

Je vous présente une fiche de présentation un peu plus sophistiquée que d'ordinaire sans pour autant faire trop lourd à mon sens. Les images de droite transite pour laisser apparaître le texte.

Voici un petit apperçu : initialement puis au survol de d'une image de droite.

Les codes permettant la transition venant d'Okhmhaka (que je remercie vraiment chaleureusement ) seul y figure le crédit de NU que vous êtres bien évidemment priés de ne pas retirer.
Les images de droite font 370*185px, celle de gauche fait 178*559px et celle du haut fait 550*112px.


Voici donc la partie CSS à ajouter à la feuille de codage :

Code:

/* ------------------------------- CODES CSS fiches ------------------------------------- */

.bloc_pcp
{
  width: 550px;
  height: 675px;
  margin: auto;
  background-color: #2e2e2c;
  border: 2px solid #202020;
  border-bottom: none;
  color: #101010;
}
.bloc_pcp .entete_pres
{
  width: 550px;
  height: 102px;
  text-align: center;
  padding-top: 10px;
  background: url('http://img15.hostingpics.net/pics/972122Sanstitre.jpg'); /*Image du haut*/
  border-bottom: 2px solid #202020;
 
}
.bloc_pcp .colonne_gauche
{
  width: 172px;
  height: 553px;
  float: left;
  background: url('http://img15.hostingpics.net/pics/887715Sanstitre2.jpg'); /*Image de gauche*/
  padding: 3px;
  border-right: 2px solid #202020;
  border-bottom: 2px solid #202020;
}
.bloc_pcp .colg_text
{
  width: 166px;
  height: 520px;
  overflow: auto;
  overflow-x: hidden
}
.bloc_pcp .police
{
  font-family: Berkshire Swash;
  font-size: 14px;
  letter-spacing: 2px;
}
.bloc_pcp .cate
{
  width: 370px;
  height: 185px;
  overflow: hidden;
  background-color: #a3a3a3;
  border-bottom: 2px solid #202020;
}
.bloc_pcp .cate_img
{
  position: relative;
  z-index: 2;
  width: 370px;
  height: 185px;
  margin-left: 0px;
  -webkit-transition: all ease 2s;
  transition: all ease 2s;
}
.bloc_pcp .cate:hover .cate_img
{
  margin-left: 400px;
  -webkit-transition: all ease 2s;
  transition: all ease 2s;
}
.bloc_pcp .cate_description
{
  position: relative;
  z-index: 1;
  width: 370px;
  height: 185px;
  margin-top: -185px;
  text-align: left;
  font-size: 11px;
  color: #555555;
  padding: 3px;
  overflow: auto;
}

/* ---------------------------- FIN CODES FICHES ------------------------- */

Et la partie HTML à copier dans vos sujets de présentation :

Code:

<link href='http://fonts.googleapis.com/css?family=Berkshire+Swash' rel='stylesheet' type='text/css' />
   <div class="bloc_pcp"><div class="entete_pres"> <br/><span style="font-size: 23px; font-family: Berkshire Swash; letter-spacing: 2px;">[Nom du personnage]</span>

   "citation"</div><div class="colonne_gauche"><div class="colg_text">
   <span class="police">Prénom: </span>


   <span class="police">Nom:</span>


   <span class="police">Date de naissance:</span>


   <span class="police">Clan:</span>


   <span class="police">Rang:</span>


   <span class="police">Arme:</span>


   <span class="police">Signe particulier:</span> </div><a href="http://www.never-utopia.com/" target="_blank"><span style="font-size: 11px;"> |Never Utopia|</span></a></div><div class="cate"><div class="cate_img"><img src="http://img15.hostingpics.net/pics/836909Sanstitre3.jpg" /></div><div class="cate_description"> <br />  <span class="police"> Physique </span>

   texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div></div><div class="cate"><div class="cate_img"><img src="http://img15.hostingpics.net/pics/115164Sanstitre4.jpg" /></div><div class="cate_description"> <br />  <span class="police"> Caractère </span>

   texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div></div><div class="cate"><div class="cate_img"><img src="http://img15.hostingpics.net/pics/353049Sanstitre5.jpg" /></div><div class="cate_description"><br />  <span class="police"> Histoire </span>

   texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div></div>
   </div>

Hey !

Actuellement je ne trie plus des LS en attendant ce qui se dit côté staff, mais ce serait bien de ne pas oublier les sujets précédents (ici). C'est très aimable de proposer un code en LS, mais c'est à toi de te tenir au sujet et de corriger ton code, pas à moi

Merci :)

Je n'attendais pas que tu le fasses à ma place Hallo, j'ai même déjà entamé ça sur un forum test mais je cherche la solution à différents décalages entre prévisualisation et affichage mais aussi ce qui appartient au forum et ce qui appartient au codage, et surtout j'attends la motivation pour me pencher sur cette fichue fiche
Mais ne t'inquiète pas, ce sera fait

J'adore l'idée! Merci

Les images d'aperçu ainsi que dans les codes ne s'affichent plus, il faut les réhéberger. (Sinon j'ai corrigé les petites erreurs de code).

N'ayant pas eu de retour, j'ai procédé aux modifications et je valide.

Merci pour le partage !