-[Tuto] Créer son propre cadre-

05.02.2014

Hello, je vais vous apprendre à faire votre propre cadre.

Pour faire un code HTML, il faut assembler des balises.

Pour vous montrer, je vais vous expliquer à partir d'un code qui est séparé en deux parties (la première le fond et la deuxième le cadre) :

<div style="background-image: url(http://www.zupmage.eu/i/NNSoP4GVKv.png); margin: 0px 0px 0px 15px; padding: 10px 10px 10px 10px; width: 400px; border: 1px solid rgb(255, 255, 255);">
<div align="center" style="text-align: center;">
<div align="center">Texte</div>
<div align="center"><br></div>
</div>
</div>
<br></div>

Balises :

Width: ...px = Largeur du cadre/du fond en pixels (px). La largeur d'une fiche Lapino est de 500 pixels.

Background-image: url(...) = Image du fond.

Margin: ..px ..px ..px ..px = C'est la marge entre le bord de la fiche et le cadre. Dans l'ordre : haut, droite, bas, gauche.

Padding: ..px ..px ..px ..px = C'est la distance entre le texte et le cadre. Se règle de même façon que les marges.

Border: 1px solid rgb(.., .., ..) = Les bordures du cadre.

1px c'est la largeur de la bordure (Il faut mettre au moins 4px si vous avez une double bordure)
Solid c'est la forme, vous pouvez aussi mettre : dotted (à pois); dashed (pointillés); ou double.
Couleur : sois mettre : rgb(rouge, vert, bleu,) sois #code de la couleur.

Clique sur l'image pour l'agrandir.

Remarques :

Il faut mettre des ; entre les balises
Il ne faut pas oublier les </div> qui "ferment" les codes. Pour chaque <div> il faut un </div>
<br> permet de sauter une ligne.