Je vais vous expliquer comment remplir le code, et le faire tout beau. Parce que c'est joli mais c'est aussi un codage assez complexe donc pour éviter de vous perdre, voilà quelques explications.
sont collées les unes aux autres, sauf celle qui se trouve sous le sous-titre et c'est normal. Si vous sautez des lignes,ça va tout casser.
1. Le fond et l'image
Classique mais je vous le mets quand même comme ça vous avez le code. Pour l'image, laissez celle-là car je vais m'en occuper (mais ça serait gentil de poster le lien de la ou les images que vous voulez sous le codage, comme ça j'aurai pas à rechercher. Ou si vous voulez pas éditer tous les posts à la fin, faites un gros topic avec tous les liens des images pour ce codage.
- Code:
-
<div class="ffond"><div class="ftitre"><div class="ftitre2">Nom de la zone</div></div><div class="ffdeco"></div><div class="ffimage"><div class="fimagezone"><div class="fimagezone1"><img src="https://image.noelshack.com/fichiers/2017/27/5/1499464644-test0.png"/></div><div class="fimagetexte"><div class="fimaget2">Lignerives</div></div></div></div><div class="ftexte"></div></div>
2. Les pokémons
Faut comprendre que dans le code que je vais vous donner, il y a toutes les informations : la rareté,le sprite, le gif, le nom et même l'effet sur l'image.
Voilà le fameux code magique :
- Code:
-
<div class="fzone11"><div class="fzone11i"><div class="fzonedet"><div class="fzonerond"><img width="70" src="http://www.pokemontrash.com/pokedex/images/anime-6g/131.gif" /></img></div><div class="fzonenom">Lokhlass</div><div class="fzoneinfo">rare</div></div></div><div class="fzoner1"></div><img src="http://www.pokemontrash.com/pokedex/images/minixy/131.png"/></div>
- Code:
-
<div class="fpoke1"></div>
C'est le bloc qui entoure les pokémons de la zone, c'est dedans que vous mettez le code pour chaque pokémon.
- Code:
-
<div class="fzone11">
C'est le bloc que vous voyez en couleur avec le petit sprite du pokémon. "11" car c'est le pokémon de la première ligne et le premier pokémon de cette ligne. Pour les esprits lents, vous aurez compris que comme il y a 8 pokémons par ligne, le max c'est "28".
- Code:
-
<div class="fzone11i">
J'explique pas car c'est trop compliqué mais c'est le même fonctionnement, "11", "12"...
- Code:
-
<img width="70" src="http://www.pokemontrash.com/pokedex/images/anime-6g/131.gif" /></img>
C'est là que vous intervenez grave, parce que si c'est mal fait, je vais devoir me retaper tout votre boulot seule pour ça soit harmonieux.
Donc ce code permet de mettre le sprite animé du pokémon. Pour les trouver c'est ici :
http://www.pokemontrash.com/pokedex/liste-pokemon.php (c'est rapide et en plus, ça plante jamais (enfin moi j'ai jamais eu de soucis par rapport à poképédia etc). Sauf qu'à la base, ben le Lokhlass il est plus grand et dépasse du rond noir. Or à là il est bien centré, c'est harmonieux, bref, j'ai bien bossé. Vous prenez le sprite gif, vous le mettez puis vous réglez la taille du gif avec le width="xx". Le but c'est vraiment qu'il soit bien au centre, pas trop petit, bref, essayez d'avoir un rendu comme le Lokhlass. Par exemple le Solochi, pour que ça fasse beau, c'est width="37".
Je sais que c'est chiant mais vu que les sprite gif ont pas une taille fixe à la différence des petits, ben faut bosser.
- Code:
-
<div class="fzoner1"></div>
C'est la couleur de fond, soit la rareté. Vous ne mettez rien dans la div, par contre vous pouvez changer le nom :
- fzoner1 = vert = commun
- fzoner2 = jaune = peu commun
- fzoner3 = rouge = rare
Pour le petit sprite, vous utilisez le même site, pas besoin de redimensionner.
En vrai le mieux à faire c'est utiliser ce code :
Une ancienne fortification...
Sed cautela nimia in peiores haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus, acerbum et inplacabilem et in hoc causarum titulo dissimilem sui.
- Code:
-
<div class="ffond2"><div class="ftitree"><div class="ftitre3">Nom de la zone</div></div><div class="ffdeco2"></div><div class="ffimagee"><div class="fimagezone"><div class="fimagezone1"><img src="https://image.noelshack.com/fichiers/2017/27/5/1499464644-test0.png"/></div><div class="fimagetexte"><div class="fimaget2">Lignerives</div></div></div></div><div class="ftextee"><div class="fpoke1"><div class="fzone11"><div class="fzone11i"><div class="fzonedet"><div class="fzonerond"><img width="70" src="http://www.pokemontrash.com/pokedex/images/anime-6g/131.gif" /></img></div><div class="fzonenom">Lokhlass</div><div class="fzoneinfo">rare</div></div></div><div class="fzoner1"></div><img src="http://www.pokemontrash.com/pokedex/images/minixy/131.png"/></div><div class="fzone12"><div class="fzone12i"><div class="fzonedet"><div class="fzonerond"><img width="37" src="http://www.pokemontrash.com/pokedex/images/anime-6g/633.gif" /></img></div><div class="fzonenom">Solochi</div><div class="fzoneinfo">peu commun</div></div></div><div class="fzoner2"></div><img src="http://www.pokemontrash.com/pokedex/images/minixy/633.png"/></div><div class="fzone13"><div class="fzone13i"><div class="fzonedet"><div class="fzonerond"><img width="37" src="http://www.pokemontrash.com/pokedex/images/anime-6g/633.gif" /></img></div><div class="fzonenom">Solochi</div><div class="fzoneinfo">peu commun</div></div></div><div class="fzoner3"></div><img src="http://www.pokemontrash.com/pokedex/images/minixy/633.png"/></div><div class="fzone14"><div class="fzone14i"><div class="fzonedet"><div class="fzonerond"><img width="37" src="http://www.pokemontrash.com/pokedex/images/anime-6g/633.gif" /></img></div><div class="fzonenom">Solochi</div><div class="fzoneinfo">peu commun</div></div></div><div class="fzoner1"></div><img src="http://www.pokemontrash.com/pokedex/images/minixy/633.png"/></div><div class="fzone15"><div class="fzone15i"><div class="fzonedet"><div class="fzonerond"><img width="37" src="http://www.pokemontrash.com/pokedex/images/anime-6g/633.gif" /></img></div><div class="fzonenom">Solochi</div><div class="fzoneinfo">peu commun</div></div></div><div class="fzoner1"></div><img src="http://www.pokemontrash.com/pokedex/images/minixy/633.png"/></div><div class="fzone16"><div class="fzone16i"><div class="fzonedet"><div class="fzonerond"><img width="37" src="http://www.pokemontrash.com/pokedex/images/anime-6g/633.gif" /></img></div><div class="fzonenom">Solochi</div><div class="fzoneinfo">peu commun</div></div></div><div class="fzoner1"></div><img src="http://www.pokemontrash.com/pokedex/images/minixy/633.png"/></div><div class="fzone17"><div class="fzone17i"><div class="fzonedet"><div class="fzonerond"><img width="37" src="http://www.pokemontrash.com/pokedex/images/anime-6g/633.gif" /></img></div><div class="fzonenom">Solochi</div><div class="fzoneinfo">peu commun</div></div></div><div class="fzoner1"></div><img src="http://www.pokemontrash.com/pokedex/images/minixy/633.png"/></div><div class="fzone18"><div class="fzone18i"><div class="fzonedet"><div class="fzonerond"><img width="37" src="http://www.pokemontrash.com/pokedex/images/anime-6g/633.gif" /></img></div><div class="fzonenom">Solochi</div><div class="fzoneinfo">peu commun</div></div></div><div class="fzoner1"></div><img src="http://www.pokemontrash.com/pokedex/images/minixy/633.png"/></div><div class="fzone21"><div class="fzone21i"><div class="fzonedet"><div class="fzonerond"><img width="37" src="http://www.pokemontrash.com/pokedex/images/anime-6g/633.gif" /></img></div><div class="fzonenom">Solochi</div><div class="fzoneinfo">peu commun</div></div></div><div class="fzoner1"></div><img src="http://www.pokemontrash.com/pokedex/images/minixy/633.png"/></div><div class="fzone22"><div class="fzone22i"><div class="fzonedet"><div class="fzonerond"><img width="37" src="http://www.pokemontrash.com/pokedex/images/anime-6g/633.gif" /></img></div><div class="fzonenom">Solochi</div><div class="fzoneinfo">peu commun</div></div></div><div class="fzoner1"></div><img src="http://www.pokemontrash.com/pokedex/images/minixy/633.png"/></div><div class="fzone23"><div class="fzone23i"><div class="fzonedet"><div class="fzonerond"><img width="37" src="http://www.pokemontrash.com/pokedex/images/anime-6g/633.gif" /></img></div><div class="fzonenom">Solochi</div><div class="fzoneinfo">peu commun</div></div></div><div class="fzoner1"></div><img src="http://www.pokemontrash.com/pokedex/images/minixy/633.png"/></div><div class="fzone24"><div class="fzone24i"><div class="fzonedet"><div class="fzonerond"><img width="37" src="http://www.pokemontrash.com/pokedex/images/anime-6g/633.gif" /></img></div><div class="fzonenom">Solochi</div><div class="fzoneinfo">peu commun</div></div></div><div class="fzoner1"></div><img src="http://www.pokemontrash.com/pokedex/images/minixy/633.png"/></div><div class="fzone25"><div class="fzone25i"><div class="fzonedet"><div class="fzonerond"><img width="37" src="http://www.pokemontrash.com/pokedex/images/anime-6g/633.gif" /></img></div><div class="fzonenom">Solochi</div><div class="fzoneinfo">peu commun</div></div></div><div class="fzoner1"></div><img src="http://www.pokemontrash.com/pokedex/images/minixy/633.png"/></div><div class="fzone26"><div class="fzone26i"><div class="fzonedet"><div class="fzonerond"><img width="37" src="http://www.pokemontrash.com/pokedex/images/anime-6g/633.gif" /></img></div><div class="fzonenom">Solochi</div><div class="fzoneinfo">peu commun</div></div></div><div class="fzoner1"></div><img src="http://www.pokemontrash.com/pokedex/images/minixy/633.png"/></div><div class="fzone27"><div class="fzone27i"><div class="fzonedet"><div class="fzonerond"><img width="37" src="http://www.pokemontrash.com/pokedex/images/anime-6g/633.gif" /></img></div><div class="fzonenom">Solochi</div><div class="fzoneinfo">peu commun</div></div></div><div class="fzoner1"></div><img src="http://www.pokemontrash.com/pokedex/images/minixy/633.png"/></div><div class="fzone28"><div class="fzone28i"><div class="fzonedet"><div class="fzonerond"><img width="37" src="http://www.pokemontrash.com/pokedex/images/anime-6g/633.gif" /></img></div><div class="fzonenom">Solochi</div><div class="fzoneinfo">peu commun</div></div></div><div class="fzoner1"></div><img src="http://www.pokemontrash.com/pokedex/images/minixy/633.png"/></div></div>
<div class="fst4">Une ancienne fortification...</div><div style="margin-left:8px; width:444px;">Sed cautela nimia in peiores haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus, acerbum et inplacabilem et in hoc causarum titulo dissimilem sui.</div></div></div>
Comme ça vous avez juste à remplacer mais j'ai fait ces explications si vous êtes totalement perdus.
Good luck !