Wikikideow
La foire aux questions
Soutenez nous
Choisissez votre question
Réponse à la question
Comment faire une fiche HTML avec une rollbox ?
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 :
![[img=https://wikikideow.coraelys.fr/images/fiche0_exemple.jpg]](https://wikikideow.coraelys.fr/images/fiche0_exemple.jpg)
Pour commencer vous devez avoir bien entendu hébergé votre fond de fiche. Si vous ne savez pas comment faire vous trouverez les explications![[url=https://wikikideow.coraelys.fr/wiki/faq.php?theme=general&q=heberger]](https://data.coraelys.fr/images/px.gif)
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 :
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 :
- #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 :
ICI
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).
.- 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).
![[img=https://wikikideow.coraelys.fr/images/html_simple_select_rollbox.jpg]](https://wikikideow.coraelys.fr/images/html_simple_select_rollbox.jpg)
|
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 :<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>
- #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 <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>
ICI
Date de dernière MAJ : 15/05/2023
Les contributeurs
pyrogoto
Schtroumpfette76
Mr.Apluie
Studios Ghibli
Limeila
Jezekel
LunedeMiel
Luus
Scourge-Fléau
CollectionChevaux
Ce site vous est proposé par Schtroumpfette76 et pyrogoto.
Pour toute remarque (notamment correction des fautes d'orthographe) merci de nous contacter par MP sur Equideow ou sur discord.
Pour toute remarque (notamment correction des fautes d'orthographe) merci de nous contacter par MP sur Equideow ou sur discord.