Aide sur un code de fiche de présentation

[Runa Moon]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis toujours

Description du problème

Amis du jour, bonsoir, amis du soir, bonjour !

Merci de vous pencher sur mon message !

Que je vous explique le problème : J'ai, comme vous pouvez le voir sur l'image, commencé à coder une fiche de présentation pour mon forum. Malheureusement, étant une BILLE en codage, il y a certains éléments que je n'arrive pas à mettre en place.

Number One - J'aimerais que le joueur puisse mettre une image de son perso sous le cadre présenté et qu'il y ait un ombrage côté droit et en bas du cadre polaroïde (déjà présent sur l'image, mais je le retirerais du cadre que j'ai fait).

Number Two - J'aimerais que le nom du personnage apparaisse sur le cadre photo.

Number Three - Ce serait top si on pouvait créer 3 onglets avec ce code. Je m'explique : J'aimerais garder le même fond, mais qu'en cliquant sur des mini boutons placé dans la bordure grise en haut à droite, on puisse switcher le contenu des pages.

Comme ceci :

Eeeeeet voici le code :

Code:

<center><div style="width : 550px; height : 700px ; background-image: url(https://zupimages.net/up/20/13/zpul.png);  font-size : 20px">
<img src="https://zupimages.net/up/20/01/7mit.png" style="transform: rotate(-15deg); float: left; margin-top: -30px; margin-right: -30px;" /><div style="width : 485px; height : 610px; margin-top: 12px; text-align: left"><div style="padding-left: 250px; ">
Sexe et âge :
Groupe :
Réputation :
Animal et pourcentage si hybridation :  
Divinité révérée :
Situation Matrimoniale
Orientation sexuelle :
Métier :
Secteur de Naissance :
Secteur Actuel :
Lieu de résidence (type d'habitation) :</div>
<div style="text-align: center;">CARACTERE</div><div style="width : 460px; height : 155px; text-align: justify; padding-left: 15px; overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis. Suspendisse massa risus, pretium vitae ex ac, sodales finibus mauris. Etiam mollis diam sed elementum consequat. Nullam convallis ut tellus ac convallis. Nullam ac ex nec augue viverra egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean accumsan semper velit a aliquet. Duis laoreet sollicitudin lorem, nec ornare felis bibendum non. Proin vitae metus accumsan odio cursus laoreet. Vivamus placerat posuere sapien, id pellentesque tellus. Curabitur mollis diam vitae sodales lobortis. Mauris volutpat enim rhoncus consectetur sollicitudin. Maecenas imperdiet ullamcorper lectus, quis ullamcorper massa finibus sed. In hac habitasse platea dictumst. Nulla at auctor quam, non varius lectus. Curabitur vel blandit massa. Fusce lacinia commodo metus eget consequat. Duis ut malesuada sapien. Vestibulum augue risus, condimentum non rutrum ac, ultrices ut justo. Proin mauris libero, feugiat ac tempor in, volutpat a libero. Donec pellentesque nunc dolor, non rhoncus massa fermentum quis. Vestibulum massa nunc, gravida eget tellus sit amet, accumsan convallis odio. Phasellus ac vulputate dolor, et semper purus. Fusce at porttitor dui. Praesent pulvinar libero condimentum, tempor nulla et, vestibulum risus. Vivamus non elementum purus, sed interdum nunc. Nam hendrerit sed sapien sit amet scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed lacinia malesuada elit, a laoreet est aliquet ac. Nullam ac augue at erat tristique sodales. Phasellus facilisis dolor eget tellus varius gravida. Donec suscipit eros quam, vel mattis erat ultrices quis. Donec ac viverra dolor, ac accumsan ex. Sed rhoncus mollis velit vel facilisis. Aliquam fermentum nec felis nec porttitor. Morbi enim ipsum, sagittis interdum hendrerit feugiat, tempus vitae lectus. Vestibulum eleifend felis sit amet tortor sagittis aliquet. Duis lacinia tristique urna, eu iaculis urna pretium et. Sed ut placerat nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis.</div>
<div style="text-align: center;">PHYSIQUE</div><div style="width : 460px; height : 155px; text-align: justify; padding-left: 15px; overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis. Suspendisse massa risus, pretium vitae ex ac, sodales finibus mauris. Etiam mollis diam sed elementum consequat. Nullam convallis ut tellus ac convallis. Nullam ac ex nec augue viverra egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean accumsan semper velit a aliquet. Duis laoreet sollicitudin lorem, nec ornare felis bibendum non. Proin vitae metus accumsan odio cursus laoreet. Vivamus placerat posuere sapien, id pellentesque tellus. Curabitur mollis diam vitae sodales lobortis. Mauris volutpat enim rhoncus consectetur sollicitudin. Maecenas imperdiet ullamcorper lectus, quis ullamcorper massa finibus sed. In hac habitasse platea dictumst. Nulla at auctor quam, non varius lectus. Curabitur vel blandit massa. Fusce lacinia commodo metus eget consequat. Duis ut malesuada sapien. Vestibulum augue risus, condimentum non rutrum ac, ultrices ut justo. Proin mauris libero, feugiat ac tempor in, volutpat a libero. Donec pellentesque nunc dolor, non rhoncus massa fermentum quis. Vestibulum massa nunc, gravida eget tellus sit amet, accumsan convallis odio. Phasellus ac vulputate dolor, et semper purus. Fusce at porttitor dui. Praesent pulvinar libero condimentum, tempor nulla et, vestibulum risus. Vivamus non elementum purus, sed interdum nunc. Nam hendrerit sed sapien sit amet scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed lacinia malesuada elit, a laoreet est aliquet ac. Nullam ac augue at erat tristique sodales. Phasellus facilisis dolor eget tellus varius gravida. Donec suscipit eros quam, vel mattis erat ultrices quis. Donec ac viverra dolor, ac accumsan ex. Sed rhoncus mollis velit vel facilisis. Aliquam fermentum nec felis nec porttitor. Morbi enim ipsum, sagittis interdum hendrerit feugiat, tempus vitae lectus. Vestibulum eleifend felis sit amet tortor sagittis aliquet. Duis lacinia tristique urna, eu iaculis urna pretium et. Sed ut placerat nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis.</div></div></div>:copyright: Galatée</center>

D'avance, je vous remercie pour votre aide <3

[Lixyr]

Bonjour,

Si vous voulez que quelqu'un vous aide, pouvez-vous fournir le code (vierge de préférence) de la fiche, ainsi que la fameuse image polaroid ?

[Runa Moon]

Je suis un cornichon >_<'

J'avais oublié de mettre le code.
Par contre je ne comprends pas, pourquoi y aurait-il besoin du cadre polaroïd ?

C'est pas que je veuille pas le mettre hein....
Je suis juste curieuse :3

[Lixyr]

Pour le cadre polaroid, parce que je n'ai pas compris s'il doit être compris dans le code, ou s'il est déjà intégré à l'image. S'il doit être compris dans le code, il faut fournir le lien.

[Runa Moon]

Aaaaaaaaaaaah d'accccccooord

Le cadre est une image à part, le lien se trouve dans mon code :3
Voulez-vous que je le remette hors du code en plus ?

[Lixyr]

Non, si le lien est déjà présent dans le code, c'est bon.

[mSyx]

Hello o/
Je travaille dessus ~
Deux petites questions: ce code est seulement pour ton forum ou pour plusieurs forums RP ? Tu préfères que je laisse le style dans les éléments ou le fait de transformer le tout en class/ids avec un CSS à mettre dans le panel admin (ou <style>) ne te dérange pas ?

edit: Troisième p'tite question: la taille des avatars serait de combien ?
edit2: Pas le choix pour la deuxième question, tout le CSS devra aller dans les balises <style> (ou feuille de style CSS du forum si tu en es le fondateur/la fondatrice)

[Runa Moon]

Ow nice, merci !

Eh bien dans l'idéal j'aimerais pouvoir l'utiliser sur plusieurs forums, dont certains ne sont pas les miens (du coup je n'ai pas accès au CSS desdits fows :/ ). N'y a t'il vraiment aucun moyen de coder ça sans ?

Si c'est impossible, oui, bien sûr, j'irais installer ce qu'il faut dans le CSS :3

L'image est de 250 x 250 px :3

N'hésite pas si je n'ai pas été claire

[mSyx]

Re o/
Vu que ce serait sur plusieurs forums, j'ai mis ça en <style>; du coup:

Aperçu:

Pour voir ça par toi-même:
https://syxtestspace.forumactif.com/t13-aide-sur-un-code-de-fiche-de-presentation-runa-moon#49

J'imagine qu'il y aura quelques éléments à modifier, n'hésite pas à demander si tu bloques :b
Le code:

Code:

<style>.cadregeneral {width : 550px;height : 700px ;background-image: url(https://zupimages.net/up/20/13/zpul.png);font-size : 20px;margin: 0 auto;position: relative;}.polaroid {float: left;position: relative;transform: rotate(-18deg);top: -35px;left: -60px;padding: 10px 10px 30px 10px;background-color: white;margin-top: -10px;}.container {width: 485px;height: 610px;margin-top: 12px;text-align: left;font-size: 14px;position: relative;color: #2c4058;padding-left: 30px;}.container::before {content: "Pages";position: absolute;right: 105px;top: 6px;font-size: 11px;opacity: .75;}.contenu {position: absolute;top: 28px;left: 30px;right: 0;bottom: 0;}.floatleft {margin-top: 10px;margin-bottom: -10px;}.titre {text-align: center;}.texte {width: 460px;height: 120px;text-align: justify;padding-left: 15px;overflow: auto;}.pseudo {font-size: 18px;text-align: center;position: relative;top: 13px;}.page label {position: absolute;top: 1px;right: 0;padding: 5px;cursor: pointer;}.page [type="radio"] {opacity: 0;}.contenu > * {opacity: 0;transition: opacity .6s ease;}[type="radio"]:focus ~ label {ouline: 2px solid blue;}[type="radio"]:checked ~ label {z-index: 2;font-weight: bold;}[type="radio"]:checked ~ label ~ .contenu {z-index: 1;}[type="radio"]:checked ~ label ~ .contenu > * {opacity: 1;}label[for="page-1"] {right: 70px;}label[for="page-2"] {right: 35px;}.page2 .contenu, .page3 .contenu {position: absolute;top: 28px;left: 30px;right: 0;bottom: 0;padding: 15px 25px;text-align: justify;}</style>


<div class="cadregeneral"><div class="container"><div class="page"><input type="radio" id="page-1" name="page-g1" checked><label for="page-1">1</label>
<div class="contenu"><div class="polaroid"><img src="https://via.placeholder.com/250" /><div class="pseudo">Prénom Nom</div></div><div class="floatleft">
Sexe et âge :
Groupe :
Réputation :
Animal et pourcentage si hybridation :  
Divinité révérée :
Situation Matrimoniale
Orientation sexuelle :
Métier :
Secteur de Naissance :
Secteur Actuel :
Lieu de résidence (type d'habitation) :</div>
<div class="titre" style="margin-top: 30px;">CARACTÈRE</div><div class="texte">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis. Suspendisse massa risus, pretium vitae ex ac, sodales finibus mauris. Etiam mollis diam sed elementum consequat. Nullam convallis ut tellus ac convallis. Nullam ac ex nec augue viverra egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean accumsan semper velit a aliquet. Duis laoreet sollicitudin lorem, nec ornare felis bibendum non. Proin vitae metus accumsan odio cursus laoreet. Vivamus placerat posuere sapien, id pellentesque tellus. Curabitur mollis diam vitae sodales lobortis. Mauris volutpat enim rhoncus consectetur sollicitudin. Maecenas imperdiet ullamcorper lectus, quis ullamcorper massa finibus sed. In hac habitasse platea dictumst. Nulla at auctor quam, non varius lectus. Curabitur vel blandit massa. Fusce lacinia commodo metus eget consequat. Duis ut malesuada sapien. Vestibulum augue risus, condimentum non rutrum ac, ultrices ut justo. Proin mauris libero, feugiat ac tempor in, volutpat a libero. Donec pellentesque nunc dolor, non rhoncus massa fermentum quis. Vestibulum massa nunc, gravida eget tellus sit amet, accumsan convallis odio. Phasellus ac vulputate dolor, et semper purus. Fusce at porttitor dui. Praesent pulvinar libero condimentum, tempor nulla et, vestibulum risus. Vivamus non elementum purus, sed interdum nunc. Nam hendrerit sed sapien sit amet scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed lacinia malesuada elit, a laoreet est aliquet ac. Nullam ac augue at erat tristique sodales. Phasellus facilisis dolor eget tellus varius gravida. Donec suscipit eros quam, vel mattis erat ultrices quis. Donec ac viverra dolor, ac accumsan ex. Sed rhoncus mollis velit vel facilisis. Aliquam fermentum nec felis nec porttitor. Morbi enim ipsum, sagittis interdum hendrerit feugiat, tempus vitae lectus. Vestibulum eleifend felis sit amet tortor sagittis aliquet. Duis lacinia tristique urna, eu iaculis urna pretium et. Sed ut placerat nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis.</div>
<div class="titre">PHYSIQUE</div><div class="texte">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis. Suspendisse massa risus, pretium vitae ex ac, sodales finibus mauris. Etiam mollis diam sed elementum consequat. Nullam convallis ut tellus ac convallis. Nullam ac ex nec augue viverra egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean accumsan semper velit a aliquet. Duis laoreet sollicitudin lorem, nec ornare felis bibendum non. Proin vitae metus accumsan odio cursus laoreet. Vivamus placerat posuere sapien, id pellentesque tellus. Curabitur mollis diam vitae sodales lobortis. Mauris volutpat enim rhoncus consectetur sollicitudin. Maecenas imperdiet ullamcorper lectus, quis ullamcorper massa finibus sed. In hac habitasse platea dictumst. Nulla at auctor quam, non varius lectus. Curabitur vel blandit massa. Fusce lacinia commodo metus eget consequat. Duis ut malesuada sapien. Vestibulum augue risus, condimentum non rutrum ac, ultrices ut justo. Proin mauris libero, feugiat ac tempor in, volutpat a libero. Donec pellentesque nunc dolor, non rhoncus massa fermentum quis. Vestibulum massa nunc, gravida eget tellus sit amet, accumsan convallis odio. Phasellus ac vulputate dolor, et semper purus. Fusce at porttitor dui. Praesent pulvinar libero condimentum, tempor nulla et, vestibulum risus. Vivamus non elementum purus, sed interdum nunc. Nam hendrerit sed sapien sit amet scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed lacinia malesuada elit, a laoreet est aliquet ac. Nullam ac augue at erat tristique sodales. Phasellus facilisis dolor eget tellus varius gravida. Donec suscipit eros quam, vel mattis erat ultrices quis. Donec ac viverra dolor, ac accumsan ex. Sed rhoncus mollis velit vel facilisis. Aliquam fermentum nec felis nec porttitor. Morbi enim ipsum, sagittis interdum hendrerit feugiat, tempus vitae lectus. Vestibulum eleifend felis sit amet tortor sagittis aliquet. Duis lacinia tristique urna, eu iaculis urna pretium et. Sed ut placerat nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis.</div></div></div>
<div class="page page2"><input type="radio" id="page-2" name="page-g1"><label for="page-2">2</label><div class="contenu"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet.</span></div></div>
<div class="page page3"><input type="radio" id="page-3" name="page-g1"><label for="page-3">3</label><div class="contenu"><span>Page numéro 3 - contenu</span></div></div>
</div></div><div style="text-align: center;">:copyright: Galatée</div>

[Runa Moon]

WOUAOW
C'est DU FEU DE ZEUS TON TRUC, ça déchiiire !!

Eh bien franchement, c'est quasi nickel, à un chouia de détail près :3

La taille de mon cadre (bords extérieurs) est de 250 x 250. En fait le cadre est inclu dans la taille que je t'ai donnée.
Du coup est-ce que ce serait possible de garder ce format ? Paske là je trouve ça vraiment trop grand  

Si tu regarde comment est fait mon cadre :

La taille de l'image est de 250 x 250.

J'avais compris ta question, mais j'ai mal expliqué ^^'

[mSyx]

Reuh o/
C'est mieux comme ça ?:

Aperçu:

Le block est considéré comme plus grand que 250x250 vu qu'il est incliné, mais la taille est bien celle-ci cette fois-ci. :b

[Runa Moon]

Awwww, fordimable !
Mais du coup le cadre est fait en code et pas avec une image ?

[mSyx]

C'est bien ça, je trouve ça vraiment plus simple pour l'utiliser sans trop de problèmes :b
Pour le code (avec l'ombre du polaroid ajoutée):

Code:

<style>.cadregeneral {width : 550px;height : 700px ;background-image: url(https://zupimages.net/up/20/13/zpul.png);font-size : 20px;margin: 0 auto;position: relative;}.polaroid {float: left;position: relative;box-shadow: 2px 2px 2px 1px #0000004d;transform: rotate(-18deg);top: -10px;left: -50px;padding: 10px 10px 30px 10px;background-color: white;margin-top: -10px;width: 250px;height: 250px;box-sizing: border-box;}.container {width: 485px;height: 610px;margin-top: 12px;text-align: left;font-size: 14px;position: relative;color: #2c4058;padding-left: 30px;}.container::before {content: "Pages";position: absolute;right: 105px;top: 6px;font-size: 11px;opacity: .75;}.contenu {position: absolute;top: 28px;left: 30px;right: 0;bottom: 0;}.floatleft {margin-top: -8px;margin-bottom: -20px;}.titre {text-align: center;}.texte {width: 460px;height: 135px;text-align: justify;padding-left: 15px;overflow: auto;}.pseudo {font-size: 18px;text-align: center;position: relative;top: 5px;}.page label {position: absolute;top: 1px;right: 0;padding: 5px;cursor: pointer;}.page [type="radio"] {opacity: 0;}.contenu > * {opacity: 0;transition: opacity .6s ease;}[type="radio"]:focus ~ label {ouline: 2px solid blue;}[type="radio"]:checked ~ label {z-index: 2;font-weight: bold;}[type="radio"]:checked ~ label ~ .contenu {z-index: 1;}[type="radio"]:checked ~ label ~ .contenu > * {opacity: 1;}label[for="page-1"] {right: 70px;}label[for="page-2"] {right: 35px;}.page2 .contenu, .page3 .contenu {position: absolute;top: 28px;left: 30px;right: 0;bottom: 0;padding: 15px 25px;text-align: justify;}</style>


<div class="cadregeneral"><div class="container"><div class="page"><input type="radio" id="page-1" name="page-g1" checked><label for="page-1">1</label>
<div class="contenu"><div class="polaroid"><img src="https://via.placeholder.com/230x210" /><div class="pseudo">Prénom Nom</div></div><div class="floatleft">
Sexe et âge :
Groupe :
Réputation :
Animal et pourcentage si hybridation :  
Divinité révérée :
Situation Matrimoniale
Orientation sexuelle :
Métier :
Secteur de Naissance :
Secteur Actuel :
Lieu de résidence (type d'habitation) :</div>
<div class="titre" style="margin-top: 30px;">CARACTÈRE</div><div class="texte">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis. Suspendisse massa risus, pretium vitae ex ac, sodales finibus mauris. Etiam mollis diam sed elementum consequat. Nullam convallis ut tellus ac convallis. Nullam ac ex nec augue viverra egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean accumsan semper velit a aliquet. Duis laoreet sollicitudin lorem, nec ornare felis bibendum non. Proin vitae metus accumsan odio cursus laoreet. Vivamus placerat posuere sapien, id pellentesque tellus. Curabitur mollis diam vitae sodales lobortis. Mauris volutpat enim rhoncus consectetur sollicitudin. Maecenas imperdiet ullamcorper lectus, quis ullamcorper massa finibus sed. In hac habitasse platea dictumst. Nulla at auctor quam, non varius lectus. Curabitur vel blandit massa. Fusce lacinia commodo metus eget consequat. Duis ut malesuada sapien. Vestibulum augue risus, condimentum non rutrum ac, ultrices ut justo. Proin mauris libero, feugiat ac tempor in, volutpat a libero. Donec pellentesque nunc dolor, non rhoncus massa fermentum quis. Vestibulum massa nunc, gravida eget tellus sit amet, accumsan convallis odio. Phasellus ac vulputate dolor, et semper purus. Fusce at porttitor dui. Praesent pulvinar libero condimentum, tempor nulla et, vestibulum risus. Vivamus non elementum purus, sed interdum nunc. Nam hendrerit sed sapien sit amet scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed lacinia malesuada elit, a laoreet est aliquet ac. Nullam ac augue at erat tristique sodales. Phasellus facilisis dolor eget tellus varius gravida. Donec suscipit eros quam, vel mattis erat ultrices quis. Donec ac viverra dolor, ac accumsan ex. Sed rhoncus mollis velit vel facilisis. Aliquam fermentum nec felis nec porttitor. Morbi enim ipsum, sagittis interdum hendrerit feugiat, tempus vitae lectus. Vestibulum eleifend felis sit amet tortor sagittis aliquet. Duis lacinia tristique urna, eu iaculis urna pretium et. Sed ut placerat nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis.</div>
<div class="titre">PHYSIQUE</div><div class="texte">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis. Suspendisse massa risus, pretium vitae ex ac, sodales finibus mauris. Etiam mollis diam sed elementum consequat. Nullam convallis ut tellus ac convallis. Nullam ac ex nec augue viverra egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean accumsan semper velit a aliquet. Duis laoreet sollicitudin lorem, nec ornare felis bibendum non. Proin vitae metus accumsan odio cursus laoreet. Vivamus placerat posuere sapien, id pellentesque tellus. Curabitur mollis diam vitae sodales lobortis. Mauris volutpat enim rhoncus consectetur sollicitudin. Maecenas imperdiet ullamcorper lectus, quis ullamcorper massa finibus sed. In hac habitasse platea dictumst. Nulla at auctor quam, non varius lectus. Curabitur vel blandit massa. Fusce lacinia commodo metus eget consequat. Duis ut malesuada sapien. Vestibulum augue risus, condimentum non rutrum ac, ultrices ut justo. Proin mauris libero, feugiat ac tempor in, volutpat a libero. Donec pellentesque nunc dolor, non rhoncus massa fermentum quis. Vestibulum massa nunc, gravida eget tellus sit amet, accumsan convallis odio. Phasellus ac vulputate dolor, et semper purus. Fusce at porttitor dui. Praesent pulvinar libero condimentum, tempor nulla et, vestibulum risus. Vivamus non elementum purus, sed interdum nunc. Nam hendrerit sed sapien sit amet scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed lacinia malesuada elit, a laoreet est aliquet ac. Nullam ac augue at erat tristique sodales. Phasellus facilisis dolor eget tellus varius gravida. Donec suscipit eros quam, vel mattis erat ultrices quis. Donec ac viverra dolor, ac accumsan ex. Sed rhoncus mollis velit vel facilisis. Aliquam fermentum nec felis nec porttitor. Morbi enim ipsum, sagittis interdum hendrerit feugiat, tempus vitae lectus. Vestibulum eleifend felis sit amet tortor sagittis aliquet. Duis lacinia tristique urna, eu iaculis urna pretium et. Sed ut placerat nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis.</div></div></div>
<div class="page page2"><input type="radio" id="page-2" name="page-g1"><label for="page-2">2</label><div class="contenu"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet.</span></div></div>
<div class="page page3"><input type="radio" id="page-3" name="page-g1"><label for="page-3">3</label><div class="contenu"><span>Page numéro 3 - contenu</span></div></div>
</div></div><div style="text-align: center;">:copyright: Galatée</div>

[Runa Moon]

C'est topissime !
Je suis un peu triste d'avoir perdu le cadre que j'avais fait, mais bon, tant pis.

En tous cas, merci beaucoup ! C'est exactement ce que j'espérais <3