Les relations

Contenu

- Fiche descriptive pour votre personnage
- Fiche de lien n°1
- Fiche de lien n°2
- Utilisation

La fiche descriptive de votre personnage a pour but de présenter de manière concise ce qu'il y a à savoir sur votre personnage afin que des éventuels intéressés puissent vous proposer un lien sur votre topic. Elle constitue le premier message sur votre topic.
La fiche de lien n°1 est un des deux modèles de fiche de lien où vous indiquerez le nom du personnage, y déposerez une image ainsi qu'une description du lien entre votre personnage et ce personnage. Elles constituent le deuxième message sur votre topic et même le troisième si vous séparez masculin et féminins ou personnages joueurs et personnages non joueurs.
La fiche de lien n°2 est le second modèle de fiche de lien, qui a la même fonction que la fiche n°1.

Comment procéder ?

Il y a deux parties importantes : importer le code puis le remplir.

Importer le code

Il y a deux parties : le HTML et le CSS. Le HTML est l'endroit dans lequel vous ajouterez les noms, images et descriptions, tandis que le CSS est à placer à la toute fin du message, en un seul exemplaire, et ce quel que soit le nombre de liens que vous posséder.


Fiche descriptive de votre personnage :
HTML :

Code:

<div class="ficheliendebut"><img src="http://24.media.tumblr.com/tumblr_lvt2tihyoT1qcmhf6o1_500.gif" class="ficheimagedebut" />
◊ Avatar : A remplir ◊ Crédit : A remplir</div><!--

--><div class="fichelientitre">Nom + Prénom
<span class="ficheliencitation">♦ Courte citation ♦</span></div><!--

-->
<div class="fichename">Infos générales</div>
<div class="fichechamp"><span class="cla">◊ Nom :</span> A remplir
<span class="cla">◊ Prénom(s) :</span> A remplir
<span class="cla">◊ Âge :</span> A remplir
<span class="cla">◊ Métier :</span> A remplir
<span class="cla">◊ Grade (si militaire ou dans un gang) :</span> A remplir
<span class="cla">◊ Position amoureuse :</span> Marié / En couple / Célibataire
<span class="cla">◊ Caractère(s) :</span> A remplir </div>

<div class="fichename">Détails intéressants</div>
<div class="fichechamp">Détails à savoir sur le personnage - Détails à savoir sur le personnage - Détails à savoir sur le personnage - Détails à savoir sur le personnage - Détails à savoir sur le personnage - Détails à savoir sur le personnage - Détails à savoir sur le personnage - Détails à savoir sur le personnage - Détails à savoir sur le personnage - Détails à savoir sur le personnage - Détails à savoir sur le personnage - Détails à savoir sur le personnage - Détails à savoir sur le personnage - </div>

<div class="fichename">Les liens que je recherche</div>
<div class="fichechamp">◊ Lien / personnage recherché (M/F)
◊ Lien / personnage recherché (M/F)
◊ Lien / personnage recherché (M/F)
◊ Lien / personnage recherché (M/F)</div>

CSS :

Code:

<style type="text/css">.ficheliendebut{ text-align : center ; letter-spacing : 1px ; font-size : 11px ; color : #B8A664 ; font-family : Electrolize ; border-bottom : 1px dashed #0567a5 ; width : 508px ; margin : auto ; padding-bottom : 5px ; }.ficheimagedebut{ padding : 1px ; border : 1px solid #0567a5 ; border-radius : 10px ; width : 500px ; }.fichelientitre{ font-size:14px ; color : #B8A664 ; text-transform : uppercase ; text-align : center ; font-family : Electrolize ; margin-top:5px ; }.ficheliencitation{ font-size : 10px ; font-style : italic ; }.cla{ color : #B8A664 ; }.fichechamp{ border : 1px dotted #0567a5 ; border-top : 1px dotted black ; width : 660px ; padding : 2.5px 15px ; margin : auto ; border-radius : 2.5px ; color : steelblue ; background-color : rgba(20,20,50,0.2) ; text-align : justify ; }.fichename{ color : #B8A664 ; font-size : 16px ; font-family : Electrolize ; padding : 5px 0px ; padding-left : 35px ; text-align : left ; margin : auto ; width : 655px ; margin-bottom : -18px ; text-shadow : 0px 0px 10px white ; background-color : rgba(40,30,30,0.5) ; border : 1px dotted #0567a5 ; border-bottom : 0px dotted black ; }</style>

Résultat :












____________________________________________________

Modèle de fiche de lien n°1 :
HTML :

Code:

<div class="nameperso">Nom du personnage</div>
<div class="fichecontperso"><img src="http://image.noelshack.com/fichiers/2013/45/1384034749-ls138clean.png" class="imagedeperso" /><div class="fichepersodesc">Informations sur le personnage

</div></div>

CSS :

Code:

<style type="text/css">.nameperso{ color : #B8A664 ; font-size : 16px ; font-family : Electrolize ; padding : 5px 0px ; padding-left : 35px ; text-align : left ; margin : auto ; width : 655px ; margin-bottom : -18px ; text-shadow : 0px 0px 10px white ; background-color : rgba(40,30,30,0.5) ; border : 1px dotted #0567a5 ; border-bottom : 0px dotted black ; }.imagedeperso{ border : 1px dotted #0567a5 ; display : inline-block ; width : 100px ; height : 100px ; padding : 1px ; border : 1px solid #0567a5 ; border-radius : 2px ; vertical-align : top ;}.fichecontperso{ border : 1px dotted #0567a5 ; border-top : 1px dotted black ; width : 685px ; padding : 2.5px 0px ; padding-left : 5px ; margin : auto ; border-radius : 2.5px ; color : steelblue ; background-color : rgba(20,20,50,0.2) ; text-align : justify ; height : 105px ; }.fichepersodesc{ padding : 0px 7.5px ; overflow : auto ; display : inline-block ; width : 565px ; height : 105px ; font-size : 11px ; font-family : Arial ; text-align : justify ; }</style>

Résultat :





Fiche de lien n°2 :
HTML :

Code:

<div class="cadre"><div class="nameperso2 gauche">Nom du perso</div>
<img src="http://nsm08.casimages.com/img/2014/01/05/14010505572011408111872922.png" class="imageperso" /><div class="content">A remplir</div></div><!--

--><div class="cadre"><div class="nameperso2">Nom du perso</div>
<div class="content">A remplir</div><img src="http://nsm08.casimages.com/img/2014/01/05/14010505572011408111872922.png" class="imageperso" /></div>

CSS :

Code:

<style type="text/css">.cadre{ width : 340px ; height : 190px ; border : 1px dotted #0567a5 ; display : inline-block ; margin-right : 3px ; background-color : rgba(40 , 40 , 85 , 0.5) ; }.nameperso2{ color : #B8A664 ; font-size : 16px ; font-family : Electrolize ; padding : 5px 0px ; padding-right : 35px ; text-align : right ; width : 305px ; margin-bottom : -18px ; text-shadow : 0px 0px 10px white ; background-color : rgba(40,30,30,0.5) ; border-bottom : 1px dotted black ; vertical-align : top ; }.content{margin-top : 1px ; display : inline-block ; vertical-align : top ; height : 159px ; width : 230px ; padding : 0px 5px ; overflow : auto ; font-size : 11px ; font-family : Arial ; text-align : justify ; color : paleturquoise ; }.imageperso{ width : 100px ; height : 160px ; }.gauche{ text-align : left ; padding-right : 0px ; padding-left : 35px ; }</style>

Résultat :

Remplir

- Ne pas toucher aux balises
- Ne pas toucher à qui permet d'aérer le code sans prendre en compte l'espace dans le code, ceci n'affectant pas le remplissage du contenu.
- En cas de problèmes, ne pas hésiter à demander de l'aide