Coder une fiche

Salut à toutes et à tous,

Aujourd'hui je vais vous apprendre à coder une fiche.

Nous allons donc prendre la fiche que j'ai créé pour le RP "Protection Raproché" avec Lucille Cole comme exemple.



Voici ce qu'il y a derrière la fiche ci dessus :

Code:

<DIV style="background-image : url('') ; #FFFFFF ; border : solid 4px #000001 ; border-radius : 90% 90% 0% 0% ; width : 712px ; height : 85px ; text-shadow: 1px 1px 1px #262626 ; padding-left : 15px ; padding-right : 15px ; text-align : center ; padding-top : 15px;">
<font size=9 ; face=halo ; color=orange>P</font><font size=6 ; face=halo ; color=orange>rotection raproche</font></div><div style="background-image : url('http://d6.e-loader.net/vPb5I7P0CY.png') ; border : solid 4px #000001 ; border-radius: 3px ; width : 702px ; height : auto ; text-align : justify ; color : black ; padding : 10px 20px ;">

</div><DIV style="background-image : url('') ; #FFFFFF;border:solid 4px #000001;border-radius: 0% 0% 0% 00%; width:742px; height:100px ; text-align : center ; padding-top : 5px ;">

<font size=8 ; face=book antiqua ; color=red>Lucille Cole</font></div>

Vous ne comprenez surement rien à tous ces codes, je vais donc tout détailler :


Tout d'abord, entrez cette ligne de code dans votre message :

Code:

<DIV style="background-image : url('') ; #000001 ; border : solid 0px #000001 ; border-radius : 0% 0% 0% 0% ; width : 0px ; height : 0px ; text-shadow: 0px 0px #000001 ; padding-left : 0px ; padding-right : 0px ; text-align : center ; padding-top : 0px"></div>

Après avoir mit ce code dans votre message, vous allez pouvoir modifier votre fiche :

• Pour mettre une image en arrière plan, ajouter l'URL de celle-ci dans la parenthèse avec les deux apostrophes comme ceci : url('http://d6.e-loader.net/vPb5I7P0CY.png')
  
  
• Pour mettre une couleur en arrière plan, modifier tout d'abord le début de la ligne de code, transformez le background-image : url('') ; #000001 en background-color : #000001. Modifier ensuite votre couleur en indiquant son code après le signe #
  
  
• Pour changer la couleur et l'épaisseur de la bordure, modifier le code : border : solid 0px #000001, "px" signifie pixels, mettez donc le nombre de pixels voulu juste devant celui-ci, comme ceci : 5px. Pour changer la couleur, le principe reste le même, indiquer le code de la couleur après le signe #
  
  
• Pour modifier les angles de votre fiche vous allez devoir modifier les données de ce code : border-radius : 0% 0% 0% 0%. Chaque pourcentage représente l'arrondi d'un angle, 0% est un angle droit. Le premier pourcentage représente l'angle en haut à gauche et le second en celui en haut à droite, le troisième étant l'angle en bas à gauche, le dernier est donc celui en bas à droite. Modifier le pourcentage de votre angle pour en modifier l'arrondi.
  
  
• Pour modifier la largeur et la hauteur, modifier ces codes : width : 0px ; height : 0px. "Width" signifie largeur et "height" hauteur, changer le nombre précédant le "px" pour avoir le nombre de pixels voulu.
  
  
• Pour le texte contenu dans la fiche utilisez la fin de la ligne de code : text-shadow: 0px 0px #000001 ; padding-left : 0px ; padding-right : 0px ; text-align : center ; padding-top : 0px. Le code text-shadow: 0px 0px permet de mettre une ombre au texte, le premier "px" dirige l'ombre vers la droite tandis que le second la dirige vers le bas, à vous de bien régler ces paramètres sachant que vous pouvez également changer la couleur de l'ombre grace au signe #. Les trois codes padding-... permettent de modifier la position du texte, left vers la droite, right vers la gauche et top vers le bas. Le code text-align permet de géré la mise en page du texte, vous pouvez mettre le texte, soit centré avec le code center, soit justifié avec justify, soit à droite avec left ou bien encore à gauche avec right.
  

Maintenat que vous savez faire une fiche je vais appronfondir un petit peu les textes. Pour placer un texte dans une fiche placez cette ligne de code :

Code:

<font size=0 ; face=? ; color=?></font>

Il faut placez cette ligne de code juste avant le

Code:

</div>

Après le size= indiquez la taille de police souhaité.
Après le face= indiquez la police d'écriture souhaité
Après le color= indiquez la couleur de police souhaité comme ceci : color=black ou comme ceci : color=#000001

J'espère que vous avez tout compris, si ce n'est pas le cas demandez moi.

Salut,
Spartan D-129

L'idée est bien, mais pour lire, ça défonce les yeux.
Je te conseille une autre image, ou une autre couleur de police.

Tu parle pour le RP de Lucille ou de tous les textes en rouges sur ce sujet ??

Je te parle du RP.

Merci Nap². Vill j'ai changé le fond pour le RP et normalement c'est bon

O.K, ça va mieux. ^^