-
les codes HTLM
je vais vous donnez des codes htlm valables pour vos fiches LAPINO le reste je ne sais pas
Les Codes HTML
C'est ici que vous allez trouver vos codes pour vos fiches !!
Alors si il y a quelque chose que vous ne comprenez pas, n'hésitez pas à laisser un commentaire :)
Si vous êtes sur EkaBlog, venez visiter le forum :D
-
Par léa53 le 5 Février 2014 à 14:50
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](http://ekladata.com/gy_g4JmDIY6eVEJ4O8kFHsFYeXs@181x105.png)
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.
5 commentaires -
Par léa53 le 7 Mars 2014 à 14:36
-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.
votre commentaire -
Par léa53 le 7 Mars 2014 à 18:46
-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>Texte votre commentaire -
Par léa53 le 4 Mars 2014 à 15:20
-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>
Texte 1 commentaire -
Par léa53 le 11 Mars 2014 à 16:02
-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>Texte★ 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>Texte votre commentaire -
Par léa53 le 9 Mars 2014 à 13:34
-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.5); margin: auto; padding:20px 20px 20px 20px; width: 400px;">
<div style="text-align: center;">Texte</div>
</div>
</div>Texte 2 commentaires -
Par léa53 le 21 Septembre 2013 à 11:22
-Code pour les fiches Lapino.-
Cadres
★ Cadre rouge :
<center><div class="erreur">Texte</div></center>
★ Cadre blanc :
<div class="texteClair"><b>Texte</b></div>
1 commentaire -
Par léa53 le 21 Septembre 2013 à 15:41
-Code pour les fiches Lapino.-
Curseur et InfoBulles
★ Curseur :
Ça au début du HTML :
<div style="cursor: url('URL du curseur'), pointer;">
Et ça à la fin du HTML :
</div>
★ InfoBulle blanc :
<span TITLE="Texte de l'infobulle">
7 commentaires -
Par léa53 le 11 Mars 2014 à 21:37
-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.
1 commentaire -
Par léa53 le 7 Mars 2014 à 19:02
-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.
1 commentaire -
Par léa53 le 21 Mars 2014 à 18:18
-Code pour les fiches Lapino.-
Vidéo & image
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 :
<object data="http://youtube.googleapis.com/v/CODE" height="310" width="500"></object>
★ Code vidéo qui se lance toute seule :
<object width="500" height="310" data="http://www.youtube.com/v/CODE?autoplay=1;" type="application/x-shockwave-flash"></object>
★ Code musique :
<object width="0" height="0" data="http://www.youtube.com/v/CODE?autoplay=1;" type="application/x-shockwave-flash"></object>
4 commentaires -
Par léa53 le 26 Mars 2014 à 14:15
-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
6 commentaires -
Par léa53 le 18 Septembre 2013 à 13:52
-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>
Texte★ Un texte qui défile :
<marquee>Texte</marquee>
★ Un texte qui bouge horizontalement :
<marquee behavior="alternate"><marquee="" width="150">Texte</marquee=""></marquee>
11 commentaires
n'oubliez pas les coms
Tags : div, text, style, align, code
-
-
Commentaires
![[Tuto] Créer son propre cadre](http://www.zupmage.eu/i/xoxkoTU5qv.png)
Suivre le flux RSS des commentaires
Ajouter un commentaire
|
 Créer mon blog |
Créer mon compte |