• -[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.

    [Tuto] Créer son propre cadre 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

    1
    Mercredi 5 Février 2014 à 15:22

    Super tutoriel ! Merci beaucoup ! 

    2
    Dimanche 9 Février 2014 à 15:07

    Super *-*. Trop bien. *-*

    3
    -Kinder
    Dimanche 2 Mars 2014 à 15:18

    Super *-* j'aime trop se site j'arrive a tout faire maintenant grâce a se site *0* ♥

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    4
    Cynt' ♥
    Jeudi 6 Mars 2014 à 10:49

    Salut,

    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 happy Bonne continuation ! ;)

    Cynthi' ♥

    5
    Jeudi 6 Mars 2014 à 15:39

    Bonjourmoney, 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... yes
    Pourrais tu m'expliquer s'il te plais.
    Si tu as un Lapino envoie le moi par message sur mon compte : Milou-

    Merci ..kiss

    6
    Vendredi 15 Août 2014 à 20:47

    Bravo ! C'est génial, mais quel logiciel faut-il avoir ?biggrin

    7
    Lundi 24 Novembre 2014 à 22:06

    Merci de vos coms Milou- heberge ton image sur zupimage :) et Mlle .D

    8
    Lundi 24 Novembre 2014 à 22:06

    pardon et Mlle .D aucun logiciels :)

     

    9
    Vendredi 12 Février 2016 à 17:47

    Grace à toi LiseFleur, je fait des fiches merveilleuse >w<

      • Samedi 27 Février 2016 à 13:09

        Héhéhé c'est pas si merveilleux que ça éoé (je déconne ._.)

    10
    Onctueuse.
    Vendredi 11 Mars 2016 à 16:32
    J'y comprends que dalle.
    11
    Samedi 5 Novembre 2016 à 12:01

    Coucou, comment peux-ton centrer son cadre ?

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :