Coucou @Sora !
Désolée pour le temps de réponse, je n'avais pas vu le nouveau message. :c

Ton HTML est plutôt propre pour une débutante, c'est un bon début !
Ce qui me saute aux yeux, néanmoins et au premier abord, c'est la petite maladresse dans les balises sémantiques ; tu n'en utilises pas vraiment quand il faudrait, et lorsque tu le fais, notamment pour les balises h2 et h5, c'est assez approximatif. En soit, il faut privilégier l'ordre hiérarchique des balises ; tu peux commencer par un h2 si tu le souhaites, mais il n'est pas vraiment conseillé de poursuivre directement avec un h5, il faut aller dans l'ordre. c:

Les balises de descriptions peuvent également être remplacées par des balises p ; tu verras, c'est plus facile de cibler ensuite tes éléments via le CSS quand tu prends soin de diversifier les balises. Tu limites les class et rends ton code plus propre.

Le code en lui-même, maintenant :
Bien que le rendu soit là, tu t'es vraiment compliqué la vie. xDD
Le fait de placer l'icon en tant que background est une manière de faire, mais si tu souhaites une image différente pour chaque "catégorie", comment tu fais ? De même, tu n'as pas besoin de position: absolute pour coder quelque chose qui peut l'être en deux gros blocs et un petit float des familles. Voilà comment je l'aurais codé :

HTML

Code:

<div class="bloc_content">
 <img src="https://66.media.tumblr.com/20c9fba0599713bb7affccc3c8bb17f9/4a601ffad93dea84-58/s128x128u_c1/d5ac75c5f849db1d940f73a7d453564ede727fcc.pnj" alt="icon"/>
 <div>
 <span>Nom créature ou objet</span>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra elit id arcu mattis, vitae sodales nunc rhoncus. Aliquam eu metus risus. Quisque bibendum a ex non iaculis. Cras elementum, nisl sed ultricies mattis, sem diam molestie ex, congue gravida enim mauris vel lorem. Cras velit orci, sagittis sed nibh ac, aliquet gravida orci.
 </p>
 </div>
</div>


Tu vois ? Le HTML est très court ; j'ai un block qui contient tout, et des balises qui décrivent strictement leur contenu.

CSS

Code:


.bloc_content {
  width: 500px;
  height: 100px;
}

.bloc_content > img {
  float: left;
  width: 100px;
  height: 100px;
  -o-object-fit: cover;
     object-fit: cover;
}

.bloc_content > div {
  width: 380px;
  height: 100;
  float: right;
}

.bloc_content > div > span {
  display: block;
  background-color: #a3a3c7;
   height: 30px;
   text-align: center;
   outline: 2px solid white;
  outline-offset: -4px;
  color: white;
  font: 12px arial;
  line-height: 29px;
}

.bloc_content > div > p {
  height: 65px;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 5px;
  margin-top: 5px;
  overflow: auto;
  text-align: justify;
  font: 12px calibri;
  line-height: 12px;
}

Alors évidemment, tu débutes, c'est pour ça que tu ne connais pas le sélecteur que j'utilise.
Tu peux néanmoins t'apercevoir que je cible ainsi les balises et dépouille le CSS de class inutiles c:
Dans le fond, tu peux constater que j'ai attribué un float left à l'image, et un float right au deuxième bloc, qui lui englobe le span contenant "Nom créature ou objet" et le paragraphe de description. A noter que j'ai mis un span pour le transformer en bloc, tu dois te demander pourquoi C'est une manière de faire ; j'estime que quand c'est une toute petite phrase de rien du tout, dans le HTML je préfère la considérer comme un span, quitte à modifier un peu ça dans le CSS pour qu'elle soit mise en forme correctement. Tu aurais pu mettre une div sans souci c:

En fait, quand tu codes, il faut que tu réfléchisses en terme de bloc. Tout le temps.
Quand tu vois une maquette, essaye de rassembler les éléments dans des grands blocs, où tu vas pouvoir placer les plus petits ; c'est la base du positionnement ! c: Ca t'évitera ainsi des marges ou des position: absolute inutiles, et crois-moi, ça te permettra de coder plus vite et plus efficacement :3

Voilà !
N'hésite pas si tu as des questions.
A l'avenir, si tu fais un autre exercice, n'hésite pas non plus à me taguer si besoin, histoire que je vois quand tu postes quelque chose et que je corrige au plus vite. Des bisous !  

Salut ! J'up le sujet du coup apparemment haha
Si vous avez des suggestions ou des conseils, je prend avec grand plaisir !

J'ai pris la liberté de modifier la taille des images (150*150 au lieu de 100*100), sinon j'ai essayé de rester fidèle à la maquette.



Merci beaucoup~

Hello !

Quand je vois qu'on a tendance à ne pas remarquer les gens qui font des exercices, je me dis qu'il faudrait revoir ce système Ça me désole qu'on laisse des gens dans l'expectative quand ils veulent un avis :'( Désolée @Kietah, si tu veux toujours un avis après tout ce temps, n'hésite pas à te manifester !

Au moins, pour cette fois, je suis là !

Alors, niveau rendu pur et simple, en tant qu'utilisatrice de Firefox, je constate que le contenu des différents blocs dépasse en largeur au point de créer une barre de défilement horizontale. J'ai vérifié sur Edge (qui utilise le même moteur de rendu que Chrome) et ça a l'air d'être le même résultat. Est ce que c'est volontaire ? Ce n'est jamais très agréable de devoir scroller horizontalement, donc idéalement si tu peux l'éviter, n'hésite pas.

Côté code, je vois que tu as compressé ton HTML pour qu'il soit compatible avec les messages Forumactif. C'est une parenthèse, mais savais-tu que tu peux utiliser les commentaires HTML (avec <!-- et -->) pour "commenter" les sauts de ligne et rendre le code un tout petit peu plus lisible ? Ça donnerait ceci par exemple :

Ce n'est pas essentiel (et c'est un peu dangereux à utiliser si on fait pas gaffe XD) mais c'est un truc que j'aime bien enseigner aux débutants XD

Sinon, pour améliorer ton code, quelques conseils :

- Les noms de classes : Il vaut mieux essayer de ne pas utiliser des noms "génériques" comme titre ou cadre, parce qu'il se peut que ces classes soient utilisées par d'autres éléments du forum s'il est personnalisé (ou même, le code d'un autre membre XD). C'est une bonne pratique que de les préfixer ou suffixer pour les différencier du code de quelqu'un d'autre. Genre ficheSolelh-cadre par exemple.

- Les balises : Quand tu peux, essaie de mettre à profit les balises HTML plus spécialisées, comme les balises de titres, telles que <h1> ou <h2>. Tu peux facilement les personnaliser via CSS en utilisant les sélecteurs CSS. Par exemple :

Code:

<div class="maFiche"><h1>Le titre de ma fiche</h1>
Du texte dans ma fiche
</div>

Code:

.maFiche { /* propriétés du bloc */ }
.maFiche h1 { /* Propriétés de l'élément h1 à l'intérieur du bloc de classe .maFiche */ }

Dans ce code, j'aurais mis le "Un joli texte ici" avec une balise de titre (genre <h1>), un paragraphe pour le sous titre, puis j'aurais mis une balise de titre de niveau hiérarchique inférieur (genre <h2>) pour les titres des blocs "Nom créature ou objet".

- L'attribut alt des images est impératif à utiliser pour des raisons d'accessibilité. Il sert à décrire l'image si elle ne s'affiche pas, ou si elle n'est pas lisible pour les personnes malvoyantes. Du coup

Code:

<img src="https://via.placeholder.com/150" />

Devrait devenir :

Code:

<img src="https://via.placeholder.com/150" alt="Une image d'illustration" />

Par exemple.

- Les dimensions : c'est un problème qu'ont beaucoup de débutants, mais à part quelques cas spécifiques, un bloc prend toujours la largeur de son conteneur. Ce n'est donc pas nécessaire de constamment redéfinir une largeur à un bloc, c'est beaucoup plus avisé de spécifier des marges externes ! Du coup, tu pourrais par exemple donner un conteneur global à ta fiche/ton code, lui fixer une largeur, puis simplement donner aux éléments à l'intérieur des marges internes ou externes selon tes besoins (ça évite également de batailler en comptant ou non la valeur des marges internes et des bordures XD). Je pense que tu peux intégralement écrire ce code en n'utilisant qu'une seule largeur globale.

- Les polices : Lorsque tu définis une police d'écriture avec font-family, il est d'usage de toujours préciser une police générique en guise d'alternative (pour le cas où la police que tu définis n'existe pas sur l'ordinateur de la personne qui voit ton code ou ne parvient pas à être téléchargée). Donc dans ton cas, il faudra écrire : font-family: Tahoma, sans-serif;.

- A quoi servent ces bouts de code ?

Code:

position: relative;
left: 50%;
transform: translateX(-50%);

Si tu veux centrer un bloc en CSS, s'il a une largeur fixée, tu peux lui attribuer des marges (horizontales) automatiques :

Code:

.monBloc {
  width:500px;
  margin:auto;
}

Le bloc sera automatiquement centré dans ta page.

- Par contre, bien trouvé pour le position:sticky, j'y aurais pas pensé et c'est plutôt efficace !

- Bon usage également de la flexbox ^^ Un petit flex:1 pour remplacer la largeur fixe du bloc sans image devrait suffire à gérer sa largeur (il prendra tout l'espace disponible restant).

- Au niveau de l'image, je ne comprends pas ce bout de code :

Code:

.cadre img{
  display: flex;
  justify-content: flex-start;
}

Un élément qui a la propriété display:flex voit ses enfants directs devenir des éléments flexibles. En l'occurence, une image ne peut pas avoir d'enfants, vu que c'est une balise orpheline.

- Enfin, une règle primordiale en CSS, c'est de ne pas se répéter. Les différents titres ont des apparences similaires, tu pourrais mettre leurs propriétés en commun, soit en utilisant une classe commune, soit en utilisant une déclaration CSS pour rassembler les propriétés communes aux deux. Par exemple :

Code:

.titre, .cadretitre {
  outline: 2px solid #ffffff;
  outline-offset: -10px;
  background-color: #a3a3c7;
  text-transform: uppercase;
  font-family: Tahoma, sans-serif;
  color:white;
}

.titre {
  /* les propriétés spécifiques à .titre seulement */
}

.cadretitre {
  /* les propriétés spécifiques à .cadretitre seulement */
}

Voilà ! J'ai probablement manqué des détails parce que je suis un peu fatiguée en ce moment, mais je crois avoir dit tout ce qui me semblait important. Bon travail en tout cas !

Me revoilà !
J'ai fait l'exercice, voilà mon rendu (merci d'avance ) :



Voilà le code HTML :

Code:

<div class="fiche_bes"><div class="bes_tit"><!--
--><h2>Mon Titre</h2><!--
--><h4>Mon petit sous titre juste comme ça</h4><!--
--></div><div class="bes_cont"><div class="bes_ele"><!--
--><img src="https://via.placeholder.com/100"><!--
--><span>Nom Créature ou Objet</span><!--
--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><!--
--></div><div class="bes_ele"><!--
--><img src="https://via.placeholder.com/100"><!--
--><span>Nom Créature ou Objet</span><!--
--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><!--
--></div><div class="bes_ele"><!--
--><img src="https://via.placeholder.com/100"><!--
--><span>Nom Créature ou Objet</span><!--
--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><!--
--></div><div class="bes_ele"><!--
--><img src="https://via.placeholder.com/100"><!--
--><span>Nom Créature ou Objet</span><!--
--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><!--
--></div><div class="bes_ele"><!--
--><img src="https://via.placeholder.com/100"><!--
--><span>Nom Créature ou Objet</span><!--
--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><!--
--></div><div class="bes_ele"><!--
--><img src="https://via.placeholder.com/100"><!--
--><span>Nom Créature ou Objet</span><!--
--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><!--
--></div></div></div>

Et voici mon css :

Code:

/********************EXERCICE 4********************/
.fiche_bes {
    width: 500px;
    height: auto;
    background-color: rgba(104, 97, 138, 0.205);
    margin: auto;
}

.bes_tit {
    width: 100%;
    height: 60px;
    background-color: #a3a3c7;
    outline: 1px solid #fff;
    outline-offset: -5px;
}

.bes_tit h2 {
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-weight: normal;
    font-family: 'Roboto', sans-serif;
    line-height: 50px;
    font-size: 24px;
 border: none;
}

.bes_tit h4 {
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-weight: normal;
    font-family: 'Roboto', sans-serif;
    line-height: 10px;
    font-size: 10px;
    margin-top: -27px;
}

.bes_cont {
    margin-top: 10px;
    border-bottom: 20px solid #a3a3c7;
    padding-bottom: 10px;
}

.bes_ele {
    width: 100%;
    height: 112px;
    display: inline-block;
    margin: 10px;
}

.bes_ele img {
    width: 100px;
    height: 100px;
    float: left;
    outline: 1px solid #fff;
    outline-offset: 5px;
    margin: 6px 0px 0px 15px;
}

.bes_ele span {
    display: inline-block;
    margin-left: 25px;
    width: 330px;
    height: 25px;
    text-align: center;
    background-color: #a3a3c7;
    outline: 1px solid #fff;
    outline-offset: -5px;
    font: 12px roboto, sans-serif;
    text-transform: uppercase;
    color: #fff;
    line-height: 26px;
}

.bes_ele p {
    display: inline-block;
    width: 330px;
    height: 87px;
    padding: 5px 10px;
    margin: 0px 0px 0px 25px;
    background-color: #fff;
    text-align: justify;
    font: 11px roboto, sans-serif;
    overflow: auto;
}

.bes_ele p::-webkit-scrollbar {
    width: 5px;
}

.bes_ele p::-webkit-scrollbar-thumb {
    background: whitesmoke;
    background: linear-gradient(#7f71a5, #a3a3c7);
}

.bes_ele p::-webkit-scrollbar-track {
    background: #f5f5f5;
}
/*********************FIN EX 4*********************/

OMG j'ai pas fait attention parce que je suis pas super dispo depuis fin février mais t'as fait trouze mille exercices ces dernières semaines dis donc XD Du coup, je m'en vais jetter un oeil à tout ça code après code @_@

Le HTML

• Je vois que tu as utilisé les balises de titre <h1> et <h4>. Comme je le dis occasionnellement à mes vict élèves, le HTML étant un language sémantique, tu dois choisir tes balises en fonction de leur usage/utilité et non en fonction de leur apparence. Si le titre est de niveau h1, dans l'ordre logique le titre suivant devrait être de niveau 2 (ou bien le sous-titre devrait être un paragraphe).

En fait, vu comment s'agence cette fiche, cela aurait été plus logique d'utiliser le titre de niveau 1 pour le titre de la fiche, un sous titre sous forme de paragraphe, et les titres de niveau 2 pour "nom créature ou objet" plutôt qu'un <span> pour ces éléments.

• La meilleure pratique quand il s'agit d'images en HTML est de toujours mettre et remplir l'attribut alt. Evidemment, rien ne va exploser si tu ne l'utilises pas, mais prends l'habitude de toujours le mettre, même si c'est juste pour indiquer "image".

Le CSS

• Le height: auto sur la classe .fiche_bes n'est pas utile, auto est la valeur par défaut.

• Le width:100% sur la classe .bes_tit est inutile : un bloc prendra automatiquement la largeur de son conteneur.

• Un principe clé en CSS est le DRY : Don't Repeat Yourself. Tu pourrais "factoriser" certains éléments qui se ressemblent beaucoup, par exemple au lieu d'avoir

Code:


.bes_tit h2 {
    /*plein de trucs */
    /* et des trucs différents pour h1 */
}

.bes_tit h4 {
    /* plein de trucs */
    /* et des trucs différents pour h4 */
}


Tu pourrais avoir :

Code:

.bes_tit h2, .bes_tit h4 {
    /*plein de trucs */
}

.bes_tit h2 {
    /* des trucs différents pour h2 */
}

.bes_tit h4 {
    /* des trucs différents pour h4 */
}

Évidemment, ça se gère au cas par cas, mais dans l'exemple que je prends, on avait quand même cinq propriétés en commun entre les deux titres. Autre exemple, on utilise la police Roboto partout sur la fiche : ça aurait sans doute été plus simple de déclarer ça une seule fois.

•  Le bloc de titre : J'ai l'impression que tu t'es beaucoup compliqué la vie, entre la hauteur fixe et cette marge négative ^^ Une solution plus simple et probablement plus compatible entre les différentes versions de Forumactif aurait été :
- De ne pas fixer la hauteur du bloc de titre, mais de rajouter une marge interne (padding)
- De s'assurer que le titre et son sous-titre aient des marges verticales nulles (ou à peu près)
- Si besoin, de fixer la valeur du line-height à 1 (100% de la taille de police). Mais ce n'est pas forcément l'idéal, pour le cas où il y aurait un titre ou sous-titre très long, la lisibilité du tout en pâtirait, surtout pour le sous-titre.

Dans l'ensemble, c'est quelque chose que je conseille toujours : évite au maximum les largeurs et hauteurs fixes, essaie de prévoir un minimum de flexibilité. Que se passe-t-il si le texte est plus long que ce que tu as prévu ? Avec l'existence de flexbox et des grid CSS, on peut s'en sortir pas trop mal avec un minimum de dimensions fixées (par exemple, à vue de nez, la largeur de la fiche et la largeur/hauteur de l'image sont les seules dimensions nécessaires, le reste peut se gérer avec les marges entre chaque élément)

L'avantage, d'ailleurs, d'utiliser grid ou flex, c'est qu'on peut manipuler l'ordre d'affichage et conserver un ordre "logique" dans le HTML (notamment en gardant le titre en premier dans le bloc).

• L'usage de display:inline-block pour les blocs de classe .bes_ele n'a pas l'air très utile à première vue puisque tu n'utilises pas de comportement spécifique aux éléments inline dans cet affichage.

Les remarques sans rapport avec la qualité du code

Mon habituelle plaidoirie pro-Firefox (je ne sais plus si tu en as déjà été victime lors de mes précédentes interventions, mais comme dirait ma mère, de la répétition nait la connaissance) : j'attire ton attention sur l'existence de scrollbar-color et scrollbar-width pour les barres de défilement sous Firefox. Je sais bien que la part de marché de Mozilla s'est réduite à peau de chagrin face aux titans que sont Google, Microsoft et Apple, mais ce n'est pas une raison.

FIOOOUUU.
Après moouulte péripéties pour régler mon problème de caractère invisible, j'ai ENFIN réussi à raccorder correctement ma feuille de style externe xDD (merci Acode) Voilà donc ma correction, le rendu est sur mon post précédent, je voulais pas faire trop de redondance ! (j'ai juste dû doubler un font-family en plus dans les class des titres pour éviter qu'ils prennent la police d'Epicode) J'espère que j'ai rien oublié et que j'ai correctement appliqué tes conseils !

Edit : J'en ai profité pour appliquer ces corrections sur les codes des autres exercices que j'ai fait, il faut juste que je repasse rapidement sur le 7 pour le DRY vu que je l'ai proposé en LS et que Sunhae et toi êtes déjà passées dessus o/ (du coup pas besoin de corriger le 7)

Le HTML :

Code:

<div class="fiche_bes"><div class="bes_tit"><!--
--><h1>Mon Titre</h1><!--
--><p>Mon petit sous titre juste comme ça</p><!--
--></div><div class="bes_cont"><div class="bes_ele"><!--
--><img src="https://via.placeholder.com/100" alt="img-bestiaire" /><!--
--><div class="bes_ele_txt"><!--
--><h2>Nom Créature ou Objet</h2><!--
--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><!--
--></div></div><div class="bes_ele"><!--
--><img src="https://via.placeholder.com/100" alt="img-bestiaire" /><!--
--><div class="bes_ele_txt"><!--
--><h2>Nom Créature ou Objet</h2><!--
--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><!--
--></div></div><div class="bes_ele"><!--
--><img src="https://via.placeholder.com/100" alt="img-bestiaire" /><!--
--><div class="bes_ele_txt"><!--
--><h2>Nom Créature ou Objet</h2><!--
--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><!--
--></div></div><div class="bes_ele"><!--
--><img src="https://via.placeholder.com/100" alt="img-bestiaire" /><!--
--><div class="bes_ele_txt"><!--
--><h2>Nom Créature ou Objet</h2><!--
--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><!--
--></div></div><div class="bes_ele"><!--
--><img src="https://via.placeholder.com/100" alt="img-bestiaire" /><!--
--><div class="bes_ele_txt"><!--
--><h2>Nom Créature ou Objet</h2><!--
--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><!--
--></div></div><div class="bes_ele"><!--
--><img src="https://via.placeholder.com/100" alt="img-bestiaire" /><!--
--><div class="bes_ele_txt"><!--
--><h2>Nom Créature ou Objet</h2><!--
--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><!--
--></div></div></div></div>

Le CSS :

Code:

/********************EXERCICE 4********************/
.fiche_bes {
  width: 500px;
  background-color: rgba(104, 97, 138, 0.205);
  margin: 0 auto;
  font-family: 'Roboto', sans-serif;
}

.bes_tit {
  padding: 15px 0;
  background-color: #a3a3c7;
  outline: 1px solid #fff;
  outline-offset: -5px;
}

.bes_tit h1, .bes_tit p, .bes_ele h2 {
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  border: none;
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
}

.bes_tit h1 {
  font-size: 24px;
}

.bes_tit p {
  font-size: 10px;
}

.bes_cont {
  border-bottom: 20px solid #a3a3c7;
  padding: 15px 15px 0 20px;
}

.bes_ele {
  height: 112px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.bes_ele img {
  width: 100px;
  height: 100px;
  align-self: center;
  outline: 1px solid #fff;
  outline-offset: 5px;
}

.bes_ele_txt {
  width: 74%;
}

.bes_ele h2 {
  padding: 8px 0;
  text-align: center;
  background-color: #a3a3c7;
  outline: 1px solid #fff;
  outline-offset: -5px;
  font-size: 12px;
}

.bes_ele p {
  margin: 0;
  height: 75%;
  padding: 5px 10px;
  background-color: #fff;
  text-align: justify;
  font-size: 11px;
  overflow: auto;
  scrollbar-color: #7f71a5 #a3a3c7;
  scrollbar-width: thin;
}

.bes_ele p::-webkit-scrollbar {
  width: 5px;
}

.bes_ele p::-webkit-scrollbar-thumb {
  background: linear-gradient(#7f71a5, #a3a3c7);
}

.bes_ele p::-webkit-scrollbar-track {
  background: #f5f5f5;
}
/*********************FIN EX 4*********************/