Hey ! C'est le premier exercice que je fais, mais j'ai essayé de faire au mieux :D
Je savais pas si le titre devait être de la taille du cadre du texte ou de la taille du fond, donc j'ai fait selon ce que je trouvais le plus pratique (flemmarde/20)
Pareil, vu que je suis une flemmarde, j'ai fait en sorte que le fond et le cadre du texte s'adapte selon la taille du texte.

Je mets le lien vers le code en hide, vu que les gens peuvent le modifier à leur guise dès qu'ils y ont accès, je préfère pas qu'ils cassent tout ^^'
(Et de toute façon, je viens de voir dans les règles de la section qu'il fallait faire comme ça 8D Comme c'est pratique !)



Voilà Des bisous

Hello @Adèlys !

Alors premièrement ton code est très bien =D mais comme le but des exercice est de vous aider a vous amélioré j'ai chercher toute les petite erreur et/ou les chose que j'aurais fait autrement.

Alors premièrement, pour ton image de fond tu a utiliser " background-size: cover;" ce qui en soit n'est pas mal, mais la valeur "cover" demande a notre image de prendre toute l'espace possible à l'intérieur de notre bloc tout en gardent un ratio proportionnelle pour ne pas déformer l'image. Du coup lorsque la fiche est plus longe (car il y a plus de texte a l'intérieur) l'image s'étire vers le bas et la droite. Donc notre image est tronquer. Personnellement j'aurais préféré utiliser "background-size: 100% auto;" pour que mon image prenne toute la largeurs de ma fiche et qu'elle garde sa valeur original en hauteur. de toute façons, l'image est dégrader vers un couleur unis que tu a mis en background du coup on ne voie pas de démarcation entre l'image et le fond. Même que dans ce cas précis avec cette image précise je n'aurais pas mis de "background-size: 100% auto;" puisque l'image est déjà a la bonne taille =P

Ensuite dans ta div nommé .bl1 tu a mis height: 100%;. J'imagine que tu souhaitait que cette div prenne toute l'espace en hauteur à l'intérieur de ton conteneur. Comme un width: 100%; peut le faire. Par contre le height n'agit pas de la même façon. Il prend toute la hauteur de la fenêtre et on obtiens Ceci. Ce qui n'est surment pas le résultat voulu. Du coup moi je n'aurais tout simplement pas spécifier de hauteur. Ainsi, cette div va s'étiré selon sont contenue. C'est son comportement par défaut.

Voilà ! c'est en gros les seul chose que j'aurais modifier/fait autrement. Du coup c'est un très bon code =P

Hoho, comme je suis contente ! On m'a dit que mon code était bien **
Bon après c'est une simple fiche, comment je me débrouillerai avec des templates ? ;-;

C'est vraiment pas bête pour le background. J'ai tellement l'habitude d'utiliser le cover pour ce genre de choses que je n'ai pas fait gaffe !

Haaaaan, oui exact. Du coup, bye bye height:100% 8D

Bah merci beaucoup ! Ca va m'être très utile !

Je suis sur que tu peux réussir avec les Template si tu fait ça comme il le faut et sans te précipiter ;)

Je te conseille de faire ton code au côté en premier lieu. Fait la mise en page comme une fiche. Une fois que c'est à ton goût utilise le tuto a propos de ce Template et positionne les balise : {BALISE} au bon endroit en faisant gaffe à ne pas supprimer les boucle (c'est les commentaire en orange). Finalement tu remplace le tableau de FA par ton code tout neuf.

Si tu le souhaite je peux t'aider a faire ton premier template. Sélectionne un exercice, monte ton code en "fiche" et tag moi je te donnerais un mini cours et te guiderais =P

Une fois qu'on la fait une fois et qu'on a compris c'est simple ^^

Fini ! Ici :

@Nanto
Bonjour toi :D Ça rend vachement bien, mais pour commencer je te laisserai corriger ta fiche avec les balises comme je te l'ai expliqué dans ton autre exercice (ici), on verra ensuite s'il reste deux-trois petits trucs à corriger x)

Voilà ce que j'ai fais ! :3

Coucou @Emi !
Alors, si le rendu est plutôt similaire, ton code gagnerait à être plus propre. Je vois que le positionnement te pose problème (ou que tu ne connais pas encore ces propriétés-là) car tu positionnes en margin, et ça cépabien. 8D En effet, les margins ne servent pas à positionner des blocks, mais, comme leur nom semble l'indiquer, à créer de petites marges entre les blocks afin de les espacer de quelques pixels, par exemple. Là, tu places tes blocks avec de très gros margins négatifs, ce qui n'est pas fait pour. ;)

Ensuite, je vois du CSS dans le HTML. Pourtant, tu as séparé la plupart du CSS, alors pourquoi ne pas l'avoir fait en entier ?

Code:

<span style="font-size:60px; font-family: 'Kristi', cursive; color:#F7DC6F;padding:10px;text-shadow: 1px 1px 2px black;">Titre du RP</span>

Même si ce n'est pas faux en soit, c'est pas propre (et donc pas lisible). Ce n'est pas grave si tu ne sais pas tout à fait cibler tes balises avec le CSS (c'est sans doute pour ça que tu as opté pour le mettre directement dans le HTML), mais tu verras qu'avec les sélecteurs, on peut cibler précisément les balises ! Je te donnerai le lien du tuto à la fin du post, mais vas-y à ton rythme, une chose à la fois, l'idée n'est pas de t'assommer de jargon mais de te donner quelques conseils. :3

Ensuite, ce morceau de code :

Code:

<div class="cadretexte"><div class="texte">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt venenatis euismod.
</div></div>

Tu n'as pas vraiment besoin de créer deux balises pour mettre en place ton texte. Tu peux le mettre dans une balise p, par exemple, qui est une balise block (comme les div) et donc fusionner le CSS de cadretexte et texte :

Code:

.cadretexte {
  margin: -10px 10px 10px;
  width:300px;
  height:600px;
  background-color : rgb(255, 255, 255,50%);
  display:inline-block;
  vertical-align:top;
}
.texte {
  font-family:Times new roman;
  font-size: 11px;
  height:580px;
  color:#ffffff;
  padding:4px;
  text-align:justify;
  overflow:auto;
  display:inline-block;
  margin:5px;

comme ceci :

Code:

.cadretexte {
  margin: -10px 10px 10px;
  width:300px;
  height:600px;
  background-color : rgb(255, 255, 255,50%);
  vertical-align:top;
  font-family:Times new roman;
  font-size: 11px;
  color:#ffffff;
  padding:4px;
  text-align:justify;
  overflow:auto;
  display:inline-block;

Tu verras que le résultat est le même. <3

Je vois également que tu places très souvent la valeur inline-block dans tes blocks, or on l'utilise souvent pour mettre deux blocks côte à côte par exemple, ce qui n'est pas le cas ici... Essaye de retirer ces valeurs, tu verras que rien ne change. Si tu as du mal à savoir exactement à quoi ça sert et ce que ça fait, pas d'inquiétude, c'est expliqué dans les tutos que je vais te passer. c:

Enfin, voici quelques tutos qui vont t'être super utiles, je n'en doute pas, et qui vont te faciliter la vie à l'avenir 8D
Ce tutoriel te récapitule les balises et t'explique leurs fonctions. Cela va t'aider à avoir un html plus lisible en utilisant sémantiquement les balises ! Et tu verras qu'avec plus de sémantique, il est beaucoup plus simple de cibler les éléments dans le CSS (en effet, c'est plus facile de cibler une balise p bien utilisée qu'une énième div sans trop de signification sémantique).

Ce tutoriel sur le positionnement te permettra, tout d'abord, de connaître d'autres manières de positionner tes éléments. Tes images par exemple, auraient pu être placées en absolute (c'est une autre manière de sortir les éléments du flux, un peu comme le float, sauf que positionner en float cépa top, mais ça, le tuto te l'expliquera 8D)

Et pour finir (mais c'est facultatif à ton niveau, c'est vraiment à titre informatif, pour commencer à appréhender les sélecteurs, donc no stress si tu comprends pas !) Une bonne introduction aux sélecteurs afin de voir qu'il est possible de cibler un élément dans ton HTML sans forcément utiliser de class ou d'intégrer le style directement dans la balise. (;

En tout cas, c'est un très bon début ! Ne te décourage pas face à ce petit pavé, moi aussi, en débutant, je positionnais en margins, mon code était plein de div et de spans pas joulis et finalement, avec un peu de pratique, ça vient tout seul ! Bon, j'ai arrêté les cours sur le forum mais si tu as des questions, n'hésite pas à venir en MP

Coucou ! Alors tout d’abord je te remercie d’avoir analysé mon codage ! Effectivement je débute TOTALEMENT donc ça ne me fera pas de mal xD

C’est vrai que j’aurai pu tout séparé, je t’avoue que je sais pas trop pourquoi j’ai mis un <span style>, ça me paraissait “mieux” vu que c’était juste pour le titre.

Pour le cadre texte et le texte, je n’ai effectivement pas pensé à tôt rassembler. J’avais peur qu’avec mes margin etc ça bougerai tout ! (Avec tous les margin que j’ai mis effectivement xD)

En tout cas merci pour tous ces bons conseils, je vais les appliquer et aller jeter un œil à tous ces tutoriels ! Et j’ai quelques questions donc pour ne pas polluer tout le topic ici je vais t’envoyer tout ça en MP. x3

Merci beaucoup encore une fois !

Bonjour !
Je me suis testé sur ce code (qui est beaucoup trop beau, j'adore le rendu) !
Voilà le résultat c:

Bonjour !

J'ai fait ce petit exercice car j'aimais bien le thème du code et je n'ai jamais essayé de faire de la décoration avec plusieurs images ! La seule chose j'ai bloqué c'était sur les lanternes, j'ai pas réussi à les faire superposer aux avatars D:  

HTML:

CSS:

Rendu:

Hello @Avalonne !

Je m'en viens te donner quelques petits conseils pour améliorer ton code après cette tentative tout à fait honorable ^^

Mes remarques relatives à ton précédent exercice s'appliquent ici également, notamment en ce qui concerne les largeurs (et hauteurs) et l'utilisation des balises de titre plutôt que des balises <div>.

Ce qui me chagrine dans cette tentative, c'est qu'il y a moins ce bel agencement des blocs que l'on voit dans la maquette. Ton bloc de texte est collé à droite, le bloc des avatars n'est pas centré dans la deuxième "colonne". Tu pouvais attribuer une marge interne (un padding) à ton bloc conteneur principal, et pour les deux conteneurs enfants (les colonnes), vu qu'ils sont flexibles, attribuer à celui de droite la largeur de l'image des lanternes (et une marge côté gauche) et laisser à flexbox le soin d'ajuster la largeur du bloc de gauche avec un petit flex:1.

Il y a un vieux tutoriel sur flexbox sur Epicode (qui gagnerait à être mis à jour) mais si tu es à l'aise avec l'anglais, ma bible est cet article de CSS Tricks que je ressors dès que je sais plus où j'en suis. Les illustrations sont fabuleuses pour se faire une idée !

J'allais dire que y'avait trop de flexbox, mais en réalité c'était effectivement utile partout, même si tu n'as pas tout exploité idéalement :
- Sur toute la fiche, pour avoir les deux colonnes de contenu côte à côte (en gardant en mémoire que ce flex-direction:row; n'est pas utile)
- Sur la colonne de droite, pour s'assurer que le conteneur du texte prenne bien toute la hauteur sans avoir à calculer la hauteur parfaite

- Sur la colonne de gauche, pour ajuster son contenu verticalement à partir du bas et centrer le tout horizontalement
(pas besoin de marges pour éloigner du bord haut ! ON NE POSITIONNE PAS AVEC DES MARGES (╬▔皿▔)╯)


Concernant les lanternes, tu avais plusieurs façons de gérer leur affichage. Une façon "classique" est de rajouter dans la fiche un bloc contenant l'image des lanternes et de le positionner en absolu en haut à droite. Une autre façon (que j'aurais faite) aurait été d'utiliser le pseudo-élément ::after sur ton conteneur principal, par exemple de cette façon :

(désolée, lecteurs de passage, je mets en hide, vous en saurez plus sur cette solution après avoir posté vos essais XD)

Pour l'essentiel, sur le code complet de cette fiche, tu n'avais besoin de spécifier qu'une hauteur et deux largeurs pour avoir un code fonctionnel :) Pour la hauteur des blocs de texte, il vaut mieux jouer avec la propriété line-height ! (en utilisant l'unité em pour avoir de bons résultats)

Voilà voilà, je pense que j'ai dit l'essentiel, à toi de voir si tu veux essayer de faire mieux !

Ahah encore merci d'avoir pris le temps pour cette exercice !

Beaucoup de chose lié à l'autre exercice comme tu dis ! Donc j'ai pas pu les appliquer ici mais j'en prends toujours note !

Je prends aussi en compte les solutions pour la superposition des images pour la prochaine fois. Je ne savais pas trop comment faire je dois l'avouer ! Je ne connaissais pas du tout l'élément :after non plus je vais devoir regarder ce que ça fait !

Pour les :auto je vais essayé ça des mon prochain code.

Je te remercie encore du temps passé pour mon exercice !

Voilà le code pour ton exercice ! Il y un truc qui cloche, si tu pouvais me dire ce que c’est, ça serait vraiment top ! Merci !

J'aime très très fort tes maquettes et tes idées Milou
Voici mon résultat, je me suis un peu amusé avec les lanternes



Le HTML :

Code:

<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&family=Kristi&display=swap" rel="stylesheet"><div class="ficheRP3"><!--
--><h1>Titre du RP</h1><!--
--><div class="deco1RP3"><!--
--><img src="https://zupimages.net/up/23/10/qnnm.png"/><!--
--></div><div class="deco2RP3"><!--
--><img src="https://zupimages.net/up/23/10/a6fg.png"/><!--
--></div><!--
--><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p><!--
--><h2><b>feat.</b>
Prénom Nom</h2><!--
--><img src="https://zupimages.net/up/23/10/2w6x.png" class="ava1"/><!--
--><img src="https://zupimages.net/up/23/10/i0s5.png" class="ava2"/><!--
--><div class="credRP3">milou & void — <a href="https://www.epicode-entraide.com/t12951-facile-exercice-6-fiche-simple-reine#355973">epicode</a></div></div>

Le CSS :

Code:

/*********************EXERCICE 10*********************/
.ficheRP3 {
 position: relative;
    width: 500px;
    height: 700px;
    margin: 0 auto;
    background-color: #332e29;
    background-image: url(https://zupimages.net/up/23/10/ru4j.png);
    display: grid;
    grid-template-columns: repeat(50, 10px);
    grid-template-rows: repeat(70, 10px);
}

.ficheRP3 h1 {
    grid-column: 1/51;
    grid-row: 1/5;
    margin: 0;
    border: none;
    font: 50px Kristi, cursive;
    color: #fda943;
    padding: 0 15px;
    text-shadow: 2px 2px 0px #000;
}

.deco1RP3 {
 position: absolute;
 top: 0;
 right: -75px;
}

.deco2RP3 {
 position: absolute;
 top: 0;
 right: -75px;
    opacity: 0;
    transition: all 0.7s ease-out;
}

.deco2RP3:hover {
    opacity: 1;
    transition: all 0.7s ease-out;
}

.ficheRP3 p {
    grid-column: 3/35;
    grid-row: 7/69;
    padding: 5px 10px;
    margin: 0;
    text-align: justify;
    font: 13px roboto, sans-serif;
 color: #000;
    overflow: auto;
    background-color: rgba(255, 255, 255, 0.5);
}

.ficheRP3 p::-webkit-scrollbar {
    width: 1px;
}

.ficheRP3 p::-webkit-scrollbar-thumb {
    background-color: #ffffff;
}

.ficheRP3 p::-webkit-scrollbar-track {
    background: transparent;
}

.ficheRP3 img.ava1 {
    width: 120px;
    height: 150px;
    grid-column: 37/49;
    grid-row: 34/49;
}

.ficheRP3 img.ava2 {
    width: 120px;
    height: 150px;
    grid-column: 37/49;
    grid-row: 54/69;
}

.ficheRP3 h2 {
    grid-column: 37/49;
    grid-row: 49/54;
    padding: 8px 0;
    margin: 0;
    border: none;
    padding-left: 10px;
    font: 18px 'Annie Use Your Telescope', cursive;
    color: #fda943;
    font-weight: bolder;
    text-shadow: 1px 1px 0px #000;
    line-height: 16px;
}

.ficheRP3 h2 b {
    font: 10px roboto, sans-serif;
    text-transform: uppercase;
    text-shadow: 0 0 0;
    font-weight: normal;
    font-style: italic;
    color: #fff;
}

.credRP3, .credRP3 a {
    grid-column: 1/51;
    grid-row: 69/71;
    text-align: center;
    font: 10px roboto, sans-serif;
    line-height: 20px;
    color: #ffffff;
    text-decoration: none;
}

.credRP3 a:hover {
    color: #fda943;
}
/*********************FIN EX 10*********************/

Coucou
J'ai voulu essayer un exercice pour m'entrainer aux positionnement en évitant de margin:-545266px a tout va et me voici avec un essai qui me semble plutôt concluant pour un début hihi ! bien sur : je fais la bouffonne mais mon truc est bien moche.  J'ai pas fait de vraie jolie mise en forme parce que c'est pas sur ca que je voulais me concentrer pour apprendre et j'aime bcp mettre en forme...

les étapes tentées & pour lesquelles j'ai pas réussi à m'en sortir, on a :
• le z-index que j'ai essayé de manipuler sans succès, je m'y pencherais quand j'aurais plus lu + essayé a ce sujet
• le "avec pseudo" j'ai essayé de mettre un nom plus long pour voir si ca allait dépasser et la réponse est : oui. malheureusement je ne sais pas comment y remédier, je suis sûre que c'est un truc tout bête  edit : ben oui, mettre une largeur tout simplement
• j'ai d'abord tenté de positionner avec de la flexbox mais ça ne m'a pas réussi, j'ai bien lu le tutoriel mais j'ai peut-être pas été assez attentive, je finirais bien par y arriver un de ces 4

passage au hide ->


prenez votre temps pour me corriger, des gros bisous et merci pour votre temps <3

Salut @esté ! Voyons un peu comment tu t'en es sortie avec tout ça !

Au préalable, j'ai du mal à saisir pourquoi tu sautes pas de lignes si ton écran est tout petit XD Tu veux que tout rentre dedans ? Ca m'a l'air de te compliquer la vie plus qu'autre chose...

Le rendu

Esthétiquement, on se rapproche de la maquette, à quelques défauts près. Dans la maquette, les lanternes ont pour intéressante caractéristique de recouvrir partiellement ce qui les entoure, ce qui est un résultat que je m'attends à voir dans l'exercice. En plus, je ne sais pas si c'est voulu, mais l'image des lanternes a un contour blanc.

C'est dommage que tu n'aies pas utilisé les typos disponibles alors qu'elles sont mentionnées dans l'exercice. Tu n'es pas familière avec Google Fonts ou tu as juste eu la flemme ?

Effectivement, si on rallonge le texte, beaucoup de choses partent en vrille. Le titre se retrouve sous les lanternes, les pseudos débordent sur le côté. Et la boite de texte centrale déroulante... dépasse du conteneur principal (si le titre prend plusieurs lignes)

Le HTML

Okay, il va falloir m'expliquer pourquoi tu utilises des éléments <img> si c'est pour ne pas mettre d'images à l'intérieur. C'est une nouveauté parmi tous les codes de débutants que j'ai pu lire, ça surprend.

Sur un plan plus accessoire, l'attribut alt est obligatoire pour toutes les images (question d'accessibilité).

La construction du code reste relativement simple. Pour la logique du code, il aurait mieux valu placer le bloc des "participants" à la suite du bloc de contenu.

Je vais épiloguer sur les lanternes un peu plus loin.

Les conventions d'accessibilité modernes demandent à ce qu'on évite d'utiliser plus d'un seul élément <h1> par page. Comme il s'agit d'un code de fiche, destiné à être utilisé sur Forumactif, qui a déjà ses titres principaux, tu peux utiliser <h2> à la place. Il serait même possible d'utiliser un titre de niveau inférieur (<h3> donc si on prend h2) pour le titre du bloc des participants.

J'en suis pas encore au CSS, mais je peux d'ores et déjà te dire que niveau nom de classes, c'est pas encore ça. Une bonne pratique de codage consiste à nommer tes classes de façon claire et compréhensible, de manière à savoir à quoi elles servent  même si tu reprends ton code deux mois plus tard. "ifond", "test", "avec", "cha", "squel", etc, ça n'a de sens que sur le moment. A la place, "conteneur-fiche", "bloc-lateral", "titre-participants", "icon-1" et "icon-2" auraient déjà eu plus de sens.

Le CSS

.ifond {} :
La classe attribuée au bloc conteneur est le point de départ de la fiche. Ses dimensions sont fixées, son image de fond aussi, rien à redire là dessus. Si tu regardes la maquette, tu réalises que les lanternes sont positionnées en haut à droite de la fiche, ce qui fait du bloc conteneur le "bloc de référence" en cas de positionnement absolu. Moralité, il aurait fallu placer un position:relative à ce stade.

h1 {} :
Le titre, comme dit plus haut, aurait dû être une balise h2 a minima.

Attention cependant, telle que tu as écrit ta déclaration, elle va affecter TOUS les titres du forum sur lequel tu publierais cette fiche. Pour limiter son influence, il faut préciser un peu plus le sélecteur : .ifond h1 {}, pour ne cibler que les titres <h1> à l'intérieur d'un élément de classe .ifond

On note que tu n'as pas trop tenu en compte de ses marges par défaut. Le titre est très près du bord supérieur de la fiche dans la maquette, ça aurait pu être exploré. Par défaut, la plupart des navigateurs attribuent une marge aux titres, donc tu aurais pu jouer dessus.

D'ailleurs, en parlant de marges par défaut ! Si tu utilisais ce code sur Epicode, tu réaliserais certainement que le rendu de ta balise <h1> serait très très différent. En effet, nous avons nous aussi notre propre CSS qui s'appliquerait, naturellement, à ta fiche. Il te faut donc penser à ces cas de figure et penser à les prévenir.

Par exemple, nous avons des bordures. Un border:none serait alors nécessaire pour t'éviter des ennuis. Le titre pourrait également être en majuscules, ou une couleur de fond être présente. Autant de cas de figures auxquels tu dois penser quand tu codes une fiche.

Ceci étant dit, si on code hors contexte forumactif, c'est un début tout à fait honorable.

Un souci se pose, cependant : si le texte est trop long, il passe sous les lanternes. Une solution "simple" aurait été de limiter sa largeur.

.text {} :
*marmonement de vieille activé* Encore une classe qui aurait gagnée à être mieux nommée. Genre, "texte-rp", déjà, on gagne une certaine contextualisation. Et en plus, compte tenu du fait qu'on va surtout préciser la zone où sera cantonné le texte du RP, ce serait plutôt "conteneur-rp" ! *fin du marmonement de vieille*

Premier problème, tu as dimensionné le bloc. Comme indiqué plus haut, si le titre fait plusieurs lignes, ça va dépasser en hauteur ! Mais comment résoudre ce souci, alors ? Un "height:100%" ne marchera pas, surtout avec un overflow. Plusieurs solutions sont possibles, par exemple prévoir un titre de trois lignes de haut et calculer en conséquences, en s'assurant que le "vide" laissé par un titre d'une seule ligne de haut ne rende pas trop mal. L'autre solution, c'est flexbox, qui a réponse à tout, mais on en parlera plus tard.

.test {} :
On sent que tu as galéré XD Quand il est question de positionnement absolu et relatif, l'élément positionné en absolu se positionnera par rapport à l'ancêtre positionné le plus proche. En l'occurence, comme j'ai mentionné plus haut, le plus simple aurait été simplement de "positionner" le bloc conteneur complet de la fiche avec un position:relative;

Il devient alors plus simple de positionner les éléments à positionner par rapport à notre bloc conteneur. Donc, si on conserve tes choix, ça aurait été plus avisé de positionner d'une part la lanterne en haut à droite, d'autre part le bloc des participants en bas à droite.

.lantern {} :
L'usage du float ici n'est pas pertinent, voire pourrait considérablement te compliquer la vie. Pour le reste, le code est pertinent.

.avec {} :
Le début de la grosse galère d'après moi. A partir de ce niveau là, tu es obligée d'y aller à la règle pour t'assurer que chaque bloc ne recouvre pas son voisin, et c'est bien barbant. En plus, un titre aurait probablement été plus avisé à ce niveau là.

.sqel {} et .cha {} :
On a le même problème niveau positionnement pénible, d'une part, et d'autre part, tu n'as pas la vague impression qu'il y a des choses qui se répètent ? Un des principes d'un bon code CSS c'est de ne jamais se répéter ;) N'oublie pas que tu peux attribuer plus d'une classe à un élément (genre <div class="icon cha"> avec les classes icon et cha), mais que tu peux également attribuer les mêmes propriétés à plusieurs sélecteurs :

Code:

.sqel, .cha {
    border-radius: 10px;
    background-size: cover;
    width: 100px;
    height: 100px;
    position: absolute;
    right: 0px;
}

.sqel {
    background: url('https://i.pinimg.com/564x/49/88/21/498821435726040a731f849a8c9d9244.jpg');
    top: 350px
}

.cha {
    background: url('https://i.pinimg.com/564x/27/9f/9f/279f9f3d4948bee5b97efc05d5fe8e0b.jpg');
    top: 450px;
    margin-top: 5px;
}

Tout de suite c'est plus facile si jamais on doit faire quelques personnalisations !

Des solutions possibles

Déjà, on oublie cette idée saugrenue d'utiliser des images vides XD

En plus, vu que l'objectif est de créer une fiche personnalisée et réutilisable, ça serait bien que les icones des participants soient faciles à modifier, en l'occurence, donc il vaudrait mieux utiliser de vraies images.

Il aurait été plus pratique de créer un bloc complet pour les participants qui contienne le titre et les images ensuite, et de positionner ce bloc complet.

La lanterne, elle, peut-être gérée directement en arrière plan d'un élément <div> ou bien via CSS avec le pseudo-élément ::before par exemple.

On pourrait utiliser grid pour placer tout ça efficacement, mais flex marche également très bien dans ce contexte. On peut l'utiliser à deux endroits, d'une part pour que le bloc contenant le texte du RP et le bloc contenant les participants restent bien côte à côte, et d'autre part pour aligner verticalement et simplement le contenu du bloc des participants, avec un petit flex-direction:column et probablement un justify-content:flex-end pour aller avec. Enfin, un petit gap permettra de gérer les marges entre chaque élément !

La gestion des dimensions est plus complexe. Beaucoup de débutants tiennent absolument à rester dans les clous niveau dimensions. En vrai, il faut juste être conscient de quelles dimensions sont vraiment importantes pour avoir le rendu que vous attendez. Ici, ce qu'on veut surtout, c'est que le bloc qui contient le texte ait une hauteur limitée. Le reste de la fiche n'a pas besoin de hauteur fixée ! Pareil au niveau des largeurs, en fin de compte, c'est surtout la barre latérale qui a besoin d'une largeur fixe, pour laisser la place aux icones, mais pour ce qui est du texte central, ça occupera toute la dimension restante (un petit flex:1 s'en assurera aisément la plupart du temps).

Ce qui fait qu'à la fin, on a une fiche facile à personnaliser car très peu limitée par des réglages ultra précis !



Je crois que c'est tout pour ce que je souhaitais relever. Il doit rester deux trois détails à étudier, mais tu as déjà de nouvelles pistes de réflexion pour arriver à tes fins !