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.

-Code pour les fiches Lapino.-

Fond

★ Créer un fond de fiche :

<div style="background: url(URL DU FOND) no-repeat #FFFFFF; width: 480px; padding: 10px 10px 10px 10px;">
<div style="text-align: left;">Texte</div></div>

Repeat: Le fait de répéter ou non le fond :

- no-repeat = pas de répétition du fond.

- repeat-y = répétition verticale.

- repeat-x = répétition horizontale du fond.

- repeat = répétition  dans tous les sens du fond.

#Couleur = la couleur derrière le fond.

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

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

Padding: ..px ..px ..px ..px = C'est la distance entre le texte et le cadre. Dans l'ordre : haut, droite, bas, gauche.

-Code pour les fiches Lapino.-

Cadre

★ Cadre arrondi, à droite :

<div style="background-image: url(URL DU FOND); width: 488px; border: 1px solid #000; padding: 5px 5px 5px 5px; margin: auto;">
<div style="text-align: center;"><br></div>
<div align="left" style="margin: auto auto auto 250px; padding: 5px; background-color: rgba(255, 255, 255, 0.5); border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-right-radius: 100px; border-bottom-left-radius: 100px; border: 1px solid #000; width: 200px;">
<div style="text-align: center;">Texte</div>
</div><div style="text-align: center;"><br></div>
</div>

-Code pour les fiches Lapino.-

Cadre

★ Cadre transparent contours blancs :

<div style="text-align: -webkit-auto; background-image: url('URL DU FOND'); margin: auto; border: 1px solid #663333; width: 498px;"><div style="text-align: center;"><br></div>
<div style="background-color: rgba(255, 255, 255, 0.5); margin: auto; padding: 20px 20px 20px 20px; width: 400px; border: 1px solid #ffffff;">
<div style="text-align: center;">Texte</div>
</div><div style="text-align: center;">
<br></div>
</div>

-Code pour les fiches Lapino.-

Cadre

★ Cadre arrondi blanc, à droite :

 <div style="text-align: -webkit-auto; background-image: url('URL DU FOND'); margin: auto; border: 1px solid #663333; width: 498px;">
<div style="text-align: center;"></div>
<div align="right">
<div style="background-color: rgba(255, 255, 255, 0.9); padding: 20px 20px 20px 20px; width: 200px; border: 0px solid white; border-bottom-left-radius: 75px; box-shadow: 0px 0px 10px #000">
<div style="text-align: center;">Texte</div></div><br>
</div>
</div>  

-Code pour les fiches Lapino.-

Cadre

★ Cadre transparent en amande contours blancs :

<div style="text-align: -webkit-auto; background-image: url('URL DU FOND'); margin: auto; border: 1px solid #663333; width: 498px;">

<div style="text-align: center;"><br></div>

<div style="background-color: rgba(255, 255, 255, 0.6); margin: auto; padding: 20px 20px 20px 20px; width: 400px; border-top: 4px solid white; border-bottom: 1px solid white; border-left: 4px solid white; border-right: 1px solid white; border-top-left-radius: 0px; border-top-right-radius: 100px; border-bottom-right-radius: 0px; border-bottom-left-radius: 100px; box-shadow: 0px 0px 5px #000">

<div style="text-align: center;">Texte<br></div></div><br>

</div>

-Code pour les fiches Lapino.-

Cadre

★ Cadre rectangulaire, à droite :

<div style="background-image: url(URL DU FOND); width: 488px; border: 1px solid #000; padding: 5px 5px 5px 5px; margin: auto;">
<div style="text-align: center;"><br></div>
<div align="left" style="margin: auto auto auto 235px; padding: 5px; background-color: rgba(255, 255, 255, 0.5); border: 1px solid #000; width: 220px;">
<div style="text-align: center;">Texte</div>
</div><div style="text-align: center;"><br></div>
</div>

★ Cadre rectangulaire, à gauche :

<div style="background-image: url(URL DU FOND); width: 488px; border: 1px solid #000; padding: 5px 5px 5px 5px; margin: auto;">
<div style="text-align: center;"><br></div>
<div align="left" style="margin: auto auto auto 15px; padding: 5px; background-color: rgba(255, 255, 255, 0.5); border: 1px solid #000; width: 220px;">
<div style="text-align: center;">Texte</div>
</div><div style="text-align: center;"><br></div>
</div>

-Code pour les fiches Lapino.-

Cadre

★ Cadre transparent, sans contours :

<div style="text-align: -webkit-auto; background-image: url('URL DU FOND'); margin: auto; width: 500px;">
<div style="text-align: center;"><br></div>
<div style="text-align: center;"><br></div>
<div style="text-align: center;"><br></div>
<div style="text-align: center;"><br></div>
<div style="background-color: rgba(255, 255, 255, 0.7); margin: auto; padding:20px 20px 20px 20px; width: 400px;">
<div style="text-align: center;">Texte</div>
</div>
</div>

-Code pour les fiches Lapino.-

 Cadres

★ Cadre rouge :

<center><div class="erreur">Texte</div></center>

★ Cadre blanc : 

<div class="texteClair"><b>Texte</b></div>

-Code pour les fiches Lapino.-

Cadre

★ Double cadre blanc avec pseudo :

<div style="text-align: -webkit-auto; background-image: url('URL DU FOND'); margin: auto; border: 1px solid #663333; width: 498px;"><div style="text-align: center;"><br></div><div style="text-align: center;"><font size="30" color="#ffffff" style="text-shadow: 2px 2px 2px #505050;"><b>Pseudo</b></font></div><div style="text-align: center;"><br></div>
<div style="background-color: rgba(255, 255, 255, 1); margin: 0 ; padding: 5px; width: 300px; box-shadow: 2px 2px 2px #505050;">
<div style="text-align: center;">Texte</div>
</div><div style="text-align: center;"><br></div>
<div style="background-color: rgba(255, 255, 255, 1); margin: auto; padding: 20px 20px 20px 20px; width: 400px; box-shadow: 2px 2px 2px #505050;">
<div style="text-align: center;">Texte</div>
</div><div style="text-align: center;"><br></div>
</div>

-Code pour les fiches Lapino.-

En dehors de sa fiche

★ Écrire à droite de sa fiche :

<center style="text-align: left; left: 575px; top: 570px; width: 320px; position: absolute;">Texte </center>

Left: ..px = Distance à partir de la gauche de la fiche.

Top: ..px = Distance à partir du haut de la fiche.

-Code pour les fiches Lapino.-

Cadre

★ Fiche en deux parties :

EDIT : Si vous voulez changer la couleur du fond du cadre et du texte, il faut changer les éléments en gras dans le code.

-Code pour les fiches Lapino.-

Image

★ Choisir la taille d'une image :

<img height="Hauteur en pixels" width="Largeur en pixels"
src="URL de l'image"/>
<br />

Je ne vous conseil pas de mettre la hauteur et la largeur, sinon l'image est déformée, donc mettez sois l'un, sois l'autre.

-Code pour les fiches Lapino.-

Fiche Lollipop simple

 

Pseudo

Texte

Fiche Lollipop avec sommaire

  

 

Pseudo

PARTIE 1  -  PARTIE 2  -  PARTIE 3

 

Titre Partie 1

Texte

Titre Partie 2

Texte

Titre Partie 3

Texte

 

-Code pour les fiches Lapino.-

Vidéo & musique

Tout d'abord, il faut choisir votre musique ou vidéo. Rendez vous YouTube, sur la page de votre vidéo/musique.

Regardez l'url de la page, et copier le code qui se trouve derrière V=

Voilà le code de votre musique/vidéo, plus qu'à le coller dans un des codes ci-dessous :

★ Code vidéo normale :

<div style="text-align: center;"><object width="500" height="282" data="https://www.youtube.com/v/CODE?"></object></div>

★ Code vidéo qui se lance toute seule :

<div style="text-align: center;"><object width="500" height="282" data="https://www.youtube.com/v/CODE?autoplay=1"></object></div>

★ Code musique :

<div style="text-align: center;"><object width="0" height="0" data="https://www.youtube.com/v/CODE?autoplay=1"></object></div>

-Code pour les fiches Lapino.-

Ascenseur 

★ Voici le code ascenseur :

<div style="height: 330px; width: 500px; overflow: auto;"><div align="center">Texte</div></div>

Height: ...px = Hauteur de l'ascenseur en pixels

Width: ...px = Largeur de l'ascenseur en pixels

-Code pour les fiches Lapino.-

Sommaire cliquable

★ Sommaire, à droite :

<div style="background-image: url(URL DU FOND); width: 500px; margin: 0px;">
<table>
<tbody>
<tr>
<td>
<div style="margin: 10px; background-color: rgba(255, 255, 255, 0.5); border: 1px dashed white ; width: 306px; height:305px; box-shadow: 0px 0px 3px #000; overflow: hidden;">
 

<div style="height: 285px; width: 286px; overflow: auto; padding:10px;">
<a name="1"></a>
<div style="text-align: center;"><br>
<b>Titre Partie 1</b></div>
<div style="text-align: left;">Texte</div>
</div>

<div style="height: 285px; width: 286px; overflow: auto; padding:10px;">
<a name="2"></a>
<div style="text-align: center;"><br>
<b>Titre Partie 2</b></div>
<div style="text-align: left;">Texte</div>
</div>
 

<div style="height: 285px; width: 286px; overflow: auto; padding:10px;">
<a name="3"></a>
<div style="text-align: center;"><br>
<b>Titre Partie 3</b></div>
<div style="text-align: left;">Texte</div>
</div>

<div style="height: 285px; width: 286px; overflow: auto; padding:10px;"></div>
</div>
</td>
<td>
<div style="margin: 0px; padding:10px; background-color: rgba(255, 255, 255, 0.5); border: 1px dashed white ; width: 130px; height:285px; box-shadow: 0px 0px 3px #000;">
<div style="text-align: center;"><b><br></b></div>
<div style="text-align: center;"><b>Sommaire</b></div>
<div style="text-align: center;"><br></div>
<div style="text-align: center;"><a href="#1" title="" target="">Titre Partie 1</a></div>
<div style="text-align: center;"><a href="#2" title="" target="">Titre Partie 2</a><br></div>
<div style="text-align: center;"><a href="#3" title="" target="">Titre Partie 3</a><br></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>

 ↑ Ne faites pas attention au modèle, il ne marche pas, mais c'est pour vous donner une idée de l'apparence ↑

Explications 

Changez les éléments en rouge.

Pour modifier le texte qui se trouve sur les parties suivantes, placez votre curseurdans le texte, et descendez avec la touche flèche en bas  jusqu’à arriver à l'endroit que vous voulez éditer. 

-Code pour les fiches Lapino.-

Texte

★ Voici un code pour changer la police de votre texte :

<font color="#000000" face="Nom de la police" size="5">Texte</font>

Texte

★ Un autre code pour mettre de l'ombre derrière le texte :

<div style="text-shadow: rgb(119, 119, 119) 0px 0px 5px;" align="center">Texte<br></div>

★ Un texte qui défile :

<marquee>Texte</marquee>

Texte

    ★ Un texte qui bouge horizontalement :

<marquee behavior="alternate"><marquee="" width="150">Texte</marquee=""></marquee> 

 -Code pour les fiches Lapino.-

Cadres

★ Trois cadres :

<div style="background-color: NomDeLaCouleur*; width: 500px; height : 435px; margin: auto;">
<div style="text-align: center;"><br></div>
<div style="float: left; width: 40%;">
<div style="background-color: rgba(255, 255, 255, 1); margin: auto; padding: 10px 10px 10px 10px; width: 130px; height: 130px; border: 0px solid #3399cc; border-radius: 10px; box-shadow: 0px 0px 6px #8F8F8F;">
<div style="height: 131px; width: 131px; overflow: auto;">
<div style="text-align: center;">Texte / image<br></div>
</div>
</div>
<div style="text-align: center;"><br></div>
</div>
<div style="float: right; width: 60%;">
<div style="background-color: rgba(255, 255, 255, 1); margin: left; padding: 10px 10px 10px 10px; width: 254px; height: 130px; border: 0px solid #3399cc; border-radius: 10px; box-shadow: 0px 0px 6px #8F8F8F;">
<div style="height: 130px; width: 254px; overflow: auto;">
<div style="text-align: center;">Texte / image</div>
</div>
</div>
<div style="text-align: center;"><br></div>
</div>
<div style="float: left; width: 100%;">
<div style="background-color: rgba(255, 255, 255, 1); margin: auto; padding: 15px 15px 15px 15px; width: 420px; border: 0px solid #3399cc; border-radius: 10px; box-shadow: 0px 0px 6px #8F8F8F;">
<div style="height: 200px; width: 420px; overflow: auto;">
<div style="text-align: center;">Texte / image</div>
</div>
</div></div></div>

*J'ai mis le nom des toutes les couleurs ICI