Fiche de lien en accordéon (avec GIF)

Présentation

Voici mon premier codage pour le site ! C'est une fiche de lien en trois parties (Description du personnage, les RPs en cours et les relations).

Les gifs ont été fait par (a) Lady

. Si vous les conserver, merci de garder le crédit la concernant ! Si vous mettez vos propres gifs, vous pouvez le modifier (tout en gardant MON crédit !) Voici un aperçu :

Indications et Code

Concernant la modification :

  • Les liens des Gifs sont à mettre une fois dans le CSS et une fois dans le code HTML si vous désirez qu'il soit identique lorsque vous passez le sourie dessus.
  • Toutes les couleurs sont modifiables.
  • Pour une utilisation sur Forumactif, il faut passer par un iframe, sinon le code ne marche pas ! 
  • Si vous rencontrez un soucis, n'hésitez pas à me poser une question en commentaire, je pourrais vous aider à le personnaliser !

 


Iframe :  <iframe frameborder="0" width="415" height="1000" src="LE LIEN DE LA PAGE QUI CONTIENT VOTRE CODE MODIFIE" > </iframe>

 

Le code :   

<style> /*- Texte -*/


h1 {font-size : 25px ;text-align : center ;color : black ;Font-family: georgia;text-shadow: 3px 3px 3px #D8D8D8 ;}
h2 {font-size : 12px; text-align : center; color : #424242; Font-family: georgia; text-shadow: 1px 1px 1px #D6D6D6 ;}
h3 { font-size : 12px; text-align : left; color : #424242; Font-family: georgia;text-shadow: 1px 1px 1px #D6D6D6 ;}
h4 { font-size : 12px; text-align : right; color : #424242; Font-family: georgia; text-shadow: 1px 1px 1px #D6D6D6 ;}
h5 { font-size : 25px ; text-align : center ; color : #CECECE ; Font-family: georgia; text-shadow: 3px 3px 3px black ;}
a {text-decoration : none ; color : #FCFCFC ;}
.corps {text-align : justify; font-size : 15px; background-color :  #E9E0E4; border-radius : 5px; padding : 5px ;}
.lien_span { color : #CECECE ; text-shadow: 1px 1px 1px black ; Font-family: georgia; font-size : 13px;}


/*- Divisions -*/
.total_lien {width : 400px; border : 1px solid black}

/*- Première partie -*/
.lien_moi {background-image : url("http://zupimages.net/up/15/24/ke2w.gif"); width : 400px; height : 156px; transition-property: height; transition-duration : 1s;}
.texte_moi {opacity : 0 ; width : 400px; height : 150px; overflow : auto ;}
.texte_moi:hover {opacity : 1 ; width : 400px; height : 450px; background : #AFAFAF; transition-property: opacity, height; transition-duration : 1.5s;}
.texte_moi2 {padding : 5px ; text-align : justify;}
.lien_moi:hover { width : 400px; height : 450px; transition-property: height; transition-duration : 1.5s;}

/*- Deuxieme partie -*/
.lien_rp {background-image : url("http://zupimages.net/up/15/24/ioud.gif"); width : 400px; height : 156px;}
.lien_rp:hover { width : 400px; height : auto; transition-property: height; transition-duration : 1.5s;}
.texte_rp { opacity : 0 ; width : 400px; height : 150px; overflow : auto ; transition-property: opacity, height; transition-duration : 1.5s;}
.texte_rp:hover { opacity : 1 ; width : 400px; height : auto; background : #343434; transition-property: opacity, height;}
.texte_rp2 { padding : 5px;}

/*- Troisième partie -*/
.lien_relation {background-image : url("http://zupimages.net/up/15/24/gryp.gif"); width : 400px; height : 168px;}
.lien_relation:hover {width : 400px; height : auto; transition-property: height; transition-duration : 1.5s;}
.texte_relation { opacity : 0 ; width : 400px; height : 160px; overflow : auto ; transition-property: opacity, height; transition-duration : 1.5s;}
.texte_relation:hover {opacity : 1 ; width : 400px; height : auto; background : #AFAFAF; transition-property: opacity, height;}
.texte_relation2 { padding : 5px ;}
.right {text-align: right;}
.description_lien {height : 100px; width : 280px; overflow : auto ; text-align : justify; font-size : 14px ; padding : 1px ;}
</style>

<div class="total_lien"><div class="lien_moi"><div class="texte_moi"><img src="http://zupimages.net/up/15/24/ke2w.gif" /><br /><div class="texte_moi2">

<h1>Pr&eacute;nom Nom </h1>
<h2>Age - Groupe - Orientation - Situation matrimoniale </h2><br /><div class="corps">Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti. </div><br />
<h2>&laquo Citation &raquo - Auteur</h2></div></div></div>
<div class="lien_rp"><div class="texte_rp"><img src="http://zupimages.net/up/15/24/ioud.gif" /><br /><div class="texte_rp2"><h5>Mes RPs </h5>
<span class="lien_span"><a href="LIEN DU RP"><strong>Titre du RP</strong></a> - Avec : <strong>Pr&eacute;nom Nom</strong> <br />[ ] Termin&eacute; [ ] En cours [ ] Abandonn&eacute;</span><br /><br />
<span class="lien_span"><a href="LIEN DU RP"><strong>Titre du RP</strong></a> - Avec : <strong>Pr&eacute;nom Nom</strong> <br />[ ] Termin&eacute; [ ] En cours [ ] Abandonn&eacute;</span><br /><br /></div></div></div>
<div class="lien_relation"><div class="texte_relation"><img src="http://zupimages.net/up/15/24/gryp.gif" /><br /><div class="texte_relation2"><h1>Mes liens</h1>

<table class="lientotal"><tr><td rowspan="3"><img src="http://placehold.it/100x150" /></td><td height="19px">Pr&eacute;nom et Nom</td></tr><tr><td height="13px"><h3>&laquo Sous titre sympa &raquo</h3></td></tr> <tr> <td height="100px"><div class="description_lien">Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</div></td></tr></table><br />


<table><tr><td height="19px"><div class="right">Pr&eacute;nom et Nom</div></td><td rowspan="3"><img src="http://placehold.it/100x150" /></td></tr><tr><td height="13px"><h4>&laquo Sous titre sympa &raquo </h4></td></tr><tr> <td height="100px"><div class="description_lien">Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</div></td></tr></table><br /> <br /></div></div></div></div>
<center><a href="http://elia-ls.e-monsite.com/"><img src="http://zupimages.net/up/15/24/0kn7.png" /></a><span style="color : grey; font-size : 10px;">Avatar par <a href="http://losecontrol.e-monsite.com/" style="font-size:10px; text-align:center; color : black">© Lady</a></center>

Pour ajouter


Si vous désirez ajouter des liens vers vos RP en cours  :

  1. Copiez ce code-ci :   <span class="lien_span"><a href="LIEN DU RP"><strong>Titre du RP</strong></a> - Avec : <strong>Pr&eacute;nom Nom</strong> <br />[ ] Termin&eacute; [ ] En cours [ ] Abandonné</span><br /><br />   
  2. Collez le après un segment identique mais avant le <br /><br /></div></div></div>

Si vous désirez ajouter des relations :

  1. Copiez ce code-ci : <table class="lientotal"><tr><td rowspan="3"><img src="http://placehold.it/100x150" /></td><td height="19px">Pr&eacute;nom et Nom</td></tr><tr><td height="13px"><h3>&laquo Sous titre sympa &raquo</h3></td></tr> <tr> <td height="100px"><div class="description_lien">Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</div></td></tr></table><br />
    <table><tr><td height="19px"><div class="right">Pr&eacute;nom et Nom</div></td><td rowspan="3"><img src="http://placehold.it/100x150" /></td></tr><tr><td height="13px"><h4>&laquo Sous titre sympa &raquo </h4></td></tr> <tr> <td height="100px"><div class="description_lien">Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</div></td></tr></table><br /> <br />
  2. Collez le entre "</div></td></tr></table><br /> <br />" et "</div></div></div></div>".

Commentaires (2)

eli-a

Merci =)

Arya
  • 2. Arya | 27/09/2015

Je trouve la fiche magnifique, je vais l'utiliser pour mes personnages RP (en gardant ta signature, bien sûr ^^ ) Merci et bravo

Ajouter un commentaire

Vous utilisez un logiciel de type AdBlock, qui bloque le service de captchas publicitaires utilisé sur ce site. Pour pouvoir envoyer votre message, désactivez Adblock.

×