-
-[Tuto] Créer son propre cadre-
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="text-align: -webkit-auto; background-image: url(http://images.fineartamerica.com/images-medium-large-5/pastel-sky-sunset-texture-jacek-malipan.jpg); margin: 0px 0px 0px 0px; border: 1px solid rgb(102, 51, 51); width: 498px;">
<div style="text-align: center;"><br></div>
<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.
-
Commentaires
3-KinderDimanche 2 Mars 2014 à 15:184Cynt' ♥Jeudi 6 Mars 2014 à 10:49Salut,
Merci pour tout ça ! Cependant, je n'ai pas compris à quoi servait l'image. Quelqu'un peut m'aider please ? Merci.
Je passe régulièrement voir ta fiche pour voir quel(s) nouveau(x) chef-d’œuvres tu as créer Bonne continuation ! ;)
Cynthi' ♥
Bonjour, alors voilà, sur Lapino j'aimerais mettre cette image en arrière plan :
https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcToE9wt-OG9BVRWMpgITyLACnx-cFIXOVO8pctZSSgRqEY_Ltjs
Mais je n'y arrive pas, je n'ai pas vraiment compris ce qu'il faut que je fasse pour insérée cette image...
Pourrais tu m'expliquer s'il te plais.
Si tu as un Lapino envoie le moi par message sur mon compte : Milou-♥Merci ..
10Onctueuse.Vendredi 11 Mars 2016 à 16:32J'y comprends que dalle.
Ajouter un commentaire
Super tutoriel ! Merci beaucoup !