Source : [url=https://wikikideow.coraelys.fr/wiki/faq.php?theme=profil&q=faire_html]Wikikideow[/url]
[img=https://data.coraelys.fr/form/u120.png]
Je vais vous donner un code HTML et les explications pour l'adapter à n'importe quelle fiche composée d'un fond et d'une seule rollbox. Et en plus, il est compatible avec tous les navigateurs internet.
Voici un aperçu de ce que vous allez apprendre à faire :
Pour commencer vous devez avoir bien entendu hébergé votre fond de fiche. Si vous ne savez pas comment faire vous trouverez les explications ICI.
Maintenant que votre image est sur internet, vous allez devoir chercher les chiffres qui vont vous servir à créer le code HTML. Pour cela :
- ouvrez l'image avec le logiciel photofiltre
.
- faites une sélection dans le cadre de la rollbox.
- notez les chiffres correspondants comme sur l'exemple ci-dessous (zoomer pour placer précisément la sélection).
- notez les dimensions de l'image. Ce sont les chiffres les plus à gauche (930x620 dans l'exemple).
|
Légende :
1 = espacement de la rollbox par rapport au bord gauche de l'image.
2 = espacement de la rollbox par rapport au bord supérieur de l'image.
3 = largeur de la rollbox.
4 = hauteur de la rollbox.
|
Maintenant vous allez rentrer dans le vif du sujet. Il faut tout mettre dans le code HTML qui va suivre. Ne remplacez que les #x# par les valeurs et ne touchez à rien d'autre. Que ce soit, les 0, les ponctuations, etc. Tout est important :
<div style="width:#1#px;height:#2#px;background:url('#3#');">
<div style="height:1px;margin:0 0 -1px;"></div>
<div style="overflow:auto;width:#4#px;height:#5#px;margin:#6#px 0 0 #7#px;">
<p style="margin:0;padding:0 3px 0;">
Ecrire la présentation ici ...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<brv>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</p>
</div>
</div>
Légende :
- #1# -> largeur de image
- #2# -> hauteur de image
- #3# -> adresse du fond
- #4# -> largeur de la rollbox
- #5# -> hauteur de la rollbox
- #6# -> marge haut
- #7# -> marge gauche
Avec l'image de l'exemple cela donne donc :
<div style="width:930px;height:620px;background:url('https://equideow.coraelys.fr/images/fiche0.jpg');">
<div style="height:1px;margin:0 0 -1px;"></div>
<div style="overflow:auto;width:377px;height:447px;margin:121px 0 0 51px;">
<p style="margin:0;padding:0 3px 0;">
Ecrire la présentation ici ...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</p>
</div>
</div>
Et voila, votre code HTML est terminé. Il ne vous reste plus qu'à l'insérer sur votre fiche. Si vous ne savez pas comment faire, rendez vous ICI