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