• Aide au Code •

Introduction au code

• color:#71A0F7; → Tout simplement, la couleur de votre texte. Pour un maximum de couleurs à utiliser : http://www.code-couleur.com/


 

Code:

<div style="color:#71A0F7;">Exemple</div>

• background-color:#ffffff; → La couleur de fond du texte. Seule, cette balise se contentera de surligner votre texte sur toute la largeur du forum.


 

Code:

<div style="background-color:#D1D1D1;">Exemple</div>

• padding: 20px; → Le "padding", en gros, c'est la marge. Vous pouvez choisir son épaisseur et, à coup de "padding-left" ou "padding-right" ou "padding-top", décider de où elle sera.


 

Code:

<div style="background-color:#D1D1D1;padding: 20px;">Exemple</div>

 

Code:

<div style="background-color:#D1D1D1;padding-top: 20px;">Exemple</div>

• border-right:solid 7px #93AAC4;
border-left:solid 7px #93AAC4;
border:1px solid #000000
border-bottom: 1px dotted #999999;

→ Les balises "border" en tous genre servent à mettre un cadre. "border" seul mettra un cadre tout autour de votre texte ; en y ajoutant "right", "left", "top" ou "bottom", vous pouvez choisir de ne pas mettre de cadre partout =3
Vous pouvez le constater, lorsqu'une seule balise a plusieurs caractéristiques, elles sont placées toutes à la suite, séparées uniquement par des espaces.
Il existe de plus plusieurs style de borders :

     dotted (pointillé)
     dashed (tirets)
     solid (solide)
     double (double)
     groove (rainurée)
     ridge (relief)
     inset (relief intérieur)
     outset (relief extérieur)



 

Code:

<div style="border:1px solid #000000;">Exemple</div>

 

Code:

<div style="border-bottom: 1px dotted #999999;">Exemple</div>

• text-align:center; → L'alignement de votre texte ! "right", "left", "center" ou "justify"

• font-variant: small-caps;
• font-size:20px; → Taille du texte
• font-family: 'century gothic'; → Police de charactère
• letter-spacing: 4px; → Espace entre les lettres
→ Les divers moyens de personnaliser le texte en lui-même.
A savoir que toutes les polices ne fonctionnent pas, seules les plus "classiques" sont autorisées ! (mais il existe d'autres moyens d'être original là-dessus, on en parlera une autre fois ♥)


 

Code:

<div style="font-variant: small-caps;font-size:20px;font-family: 'century gothic';letter-spacing: 4px;">Exemple</div>

• width:200px; → Largeur
• height:200px; → Hauteur
→ Ça, c'est primordial, c'est ce qui détermine la largeur et la hauteur de votre cadre !
Vous pouvez bien sûr utiliser les deux séparément.


 

Code:

<div style="background-color:#ffccff;padding:20px;width:200px;height:200px;">Exemple</div>

Et si vous craignez d'avoir trop de texte comparé à la taille de votre box, il suffit d'ajouter overflow: auto;, qui, au besoin, ajoutera une barre de défilement sur le côté \o/


 

Code:

<div style="background-color:#ffccff;padding:20px;width:200px;height:200px;overflow: auto;">Exemple</div>

• border-radius:30px;
border-top-left-radius:60px;
border-bottom-right-radius:60px;

→ La balise "border-radius" s'utilise pour arrondir les bords. En utilisant "top", "bottom", "left" et "right", on peut choisir quel coin arrondir.


 

Code:

<div style="background-color:#ffccff;padding:20px;width:200px;height:200px;border-radius:30px;">Exemple</div>

A prendre en compte : on ne peut arrondir un coin où il y a une barre de défilement.

 

Code:

<div style="background-color:#C7CCE2;color:#1B2651;padding:20px;width:400px;height:200px;overflow: auto;border: 1px solid #DCE1F7;font-variant: small-caps;border-top-left-radius:60px;">Exemple</div>

Allez, courage ! Surtout, n'oubliez pas de fermer vos div, vérifiez les points-virgule et les guillemets, et, avant tout, soyez patients ♥

Des polices pour vos titres

Vous voilà donc sur la page de la police que vous avez choisi.

Les cadres 1 et 2 sont généralement déjà configurés comme il faut, vous n'aurez donc probablement pas à y toucher.
Dans le cadre 1, vous trouverez les différentes versions de la police sélectionnée - ici, par exemple, il n'y en a qu'une seule.



Le cadre 2 concerne les différents types de caractères. Si vous choisissez de ne sélectionner que "Latin", vous aurez uniquement notre alphabet. En ajoutant "Cyrillic", vous pourrez écrire en Russe o/ C'est pas magnifique ?

Le cadre 3 est une étape indispensable. En gras italique souligné, oui, j'insiste.
Ici, vous devrez sélectionner le code disponible dans l'onglet "Standard", et le coller dans votre message. Peu importe l'endroit où il sera, il n'apparaîtra pas une fois le message posté, et il fonctionnera pour toute la page (généralement, on le met en haut du premier message).

Viens ensuite le moment d'utiliser ladite police dans une div !



A partir de là, on retombe sur les principes expliqués par Jin dans le premier post : intégrez le code disponible dans le cadre 4 comme suit, sans oublier d'ajouter la taille souhaitée pour votre texte :

Code:

<div style="font-family: 'Lobster', cursive; font-size: 24px;">Exemple</div>

De bien beaux tableaux

C'est le dernier de cette ligne, si vous vous posez la question ♥

Le code d'un tableau simple à deux colonnes et deux lignes se présente comme ceci :

Code:

[table][tr][td][/td][td][/td][/tr]
[tr][td][/td][td][/td][/tr][/table]

Vu comme ça, c'est barbare.
La balise "table" correspond au tableau dans son ensemble.
La balise "tr" désigne une ligne, et c'est dans celle-ci que se trouveront les balises "td" qui correspondent aux colonnes.

BLA	BLA
BLA	BLA

Les tableaux peuvent être centrés, alignés à gauche, ou à droite (ce n'était pas le cas il y a quelques temps, vous avez de la chance ♥)

Ils peuvent être placé dans une "div", et chaque cellule (les "td") peut en contenir également ! En revanche, ce n'est pas le cas des "tr".

Code:

<div style="background-color:#74A4ED;padding:10px;">[table][tr][td]<div style="background-color:#E5E7EA;padding:10px;">BLA</div>[/td]
[td]<div style="background-color:#E5E7EA;padding:10px;">BLA</div>[/td][/tr]
[tr][td]<div style="background-color:#E5E7EA;padding:10px;">BLA</div>[/td]
[td]<div style="background-color:#E5E7EA;padding:10px;">BLA</div>[/td][/tr][/table]
</div>

Évidemment, toutes les méthodes de personnalisation des div fonctionnent ici.
C'est d'ailleurs grâce à elles que vous pourrez, notamment, délimiter proprement vos cellules, décider de leur taille, etc... ! En effet, la taille des cellules dépend entièrement de leur contenu ; ainsi, si une cellule contient une div de 50x50 px, elle fera 50x50 px. Tout simplement ! Veillez tout de même à prendre en compte la petite marge qui est automatiquement ajoutée autour des cellules.

Code:

<div style="background-color:#74A4ED;padding:10px;height:150px;width:150px;border:1px dotted black;">[table][tr][td]<div style="background-color:#E5E7EA;padding:10px;height:50px;width:50px;">BLA</div>[/td][td]<div style="background-color:#E5E7EA;padding:10px;height:50px;width:50px;">BLA</div>[/td][/tr]
[tr][td]<div style="background-color:#E5E7EA;padding:10px;height:50px;width:50px;">BLA</div>[/td][td]<div style="background-color:#E5E7EA;padding:10px;height:50px;width:50px;">BLA</div>[/td][/tr]
[/table]
</div>

Dernier point : chaque fois qu'on édite ou qu'on prévisualise, Forumactif a tendance à mettre des passages à la ligne partout ; c'est assez moche et ça peut tout décaler u_u Veillez à ce qu'il n'y en ai pas quand vous postez !