Accueil
Maquette d'Exercice - Fiche
Créée par : Batty
Informations
Niveau estimé : Facile
Sujet mis à jour en mars 2023
Présentation
Voici pour vous une nouvelle fiche de niveau facile ! Elle a une largeur de 550px mais libre à vous de mettre ce que vous souhaitez =)
La maquette
![[Facile] Exercice 5 - Fiche - Batty FlY0ROn](https://i.imgur.com/FlY0ROn.png)
Détails
• Image de fond : https://i.imgur.com/x1iVNxN.jpg
• Je vous recommande d'ajouter une barre de défilement (scrollbar) à votre texte. Le "défi" sera de l'ajouter seulement à votre bloc de texte ;)
Compétences suggérées
Rien ne vous oblige à utiliser toutes les suggestions si vous préférez vous concentrer sur un concept précis que vous ne maîtrisez pas encore. Chaque notion est accompagnée d'un lien pour en savoir plus.
- Bases du HTML : (Tutoriel Epicode sur les balises HTML / Documentation HTML francophone)
- Balises de titres (
<h1>,<h2>, etc.) ; - Blocs paragraphes
<p>ou génériques<div>; - Liens
<a>.
- Balises de titres (
- Bases de CSS : (Tutoriel Epicode sur les propriétés CSS / Référence CSS francophone)
- Couleurs de fond avec la propriété
background-color, image de fond avec la propriétébackground-image, voire la propriété raccourciebackground; - Couleurs de texte avec
color; - Marges externes
marginet internespadding; - Propriétés de mise en page du texte
font-family,font-size,font-weight, etc. ; - Dimensions des blocs avec
heightet (si besoin)width.
- Couleurs de fond avec la propriété
- La propriété CSS
overflowpour gérer les dépassements ; - Les barres de défilement sur les navigateurs Chromium ainsi que
scrollbar-coloretscrollbar-widthsur Mozilla. - La propriété CSS
box-shadowpour l'ombre interne du cadre (avecinset) ; - La propriété
borderpour les bordures ; - La propriété CSS
opacityou la notationrgba()pour gérer la transparence, lisez le tutoriel pour savoir quelle méthode utiliser.
Indications diverses
• Attention quand vous fixez des dimensions, pensez aux cas particuliers, un texte très long pour un titre par exemple.
• Il y a plusieurs méthodes possibles pour positionner le bloc de texte sur les côté. Par défaut,
margin fera l'affaire, mais pour vous entrainer, vous pouvez également tester d'autres méthodes :- La propriété CSS
float - La propriété CSS
position(même tutoriel, oui) - Flexbox peut également être intéressant
Merci d'informer le staff d'Epicode en cas de lien mort !
_______________
Chouette un nouvel exercice ! =)
Voila mon essai !![[Facile] Exercice 5 - Fiche - Batty 2702986051](/users/1416/13/16/78/smiles/2702986051.gif)
Visuel :
HTML :
CSS :
Voila mon essai !
Visuel :
HTML :
CSS :
_______________
Hello miss !
Tu à été rapide sur ce coups ! Le schéma n'est même pas là depuis 24h ! XD
Alors au niveau du rendu c'est quand même assez près, mais sur mon schéma on retrouve une marge en haut de ton bloc "fiche". Je suis assez surprise de voir où tu a mis la scroll-bar je l'imaginais englober tout le texte même le rectangle jaune qui est surtout là pour "styliser" les paroles des personnages, mais l'important c'est que tu es relever le défis ! Je lui aurais mis un height de 430px au lieu de 450px pour qu'il reste dans l'encadré blanc mais là je chipote ! XD
Concernent ton code j'ai du mal à comprendre pourquoi tu à utiliser une tableau pour le titre et la citation![[Facile] Exercice 5 - Fiche - Batty 3313101865](/users/1416/13/16/78/smiles/3313101865.png)
Bon je comprend un peux, tu voulais qu'il y est des marge de chaque côté de ta bordure. Qu'elle ne colle pas les côté du cadre blanc. C'est ça ? Mais à ce moment là, pourquoi ne pas avoir tout simplement mis des marge extérieur ? Quelque chose comme : margin: 0 20%;
Ainsi plus besoin d'une marge extérieur négative pour la citation. Par contre on peux changer la valeur par défaut et "forcer" une marge de 0px pour que ce soit plus jolie. D'ailleurs, fait attention tu ouvre une balise h3 pour fermer avec une balise h2. C'est probablement une faute d’inattention ou de c/c ;)
Pour le bloc "dialogue" tu à ajouter une hauteur (height: 20px;). Or le texte dans cette section peux être plus ou moins longue. Il aurais été mieux de ne pas la spécifier comme ça si le texte est long le bloc va suivre ;)
Finalement, pour l'opacité. Tu à appliquer une opacité général. Ce qui veux dire que tout ce qui ce trouve dans ton bloc est transparent. Dans ce cas-ci le niveaux de transparence est minime, mais lorsqu'on veux mettre un fond semi-transparent il est préférable d'utiliser une variable alpha (la troisième proposition dans le tuto : background-color: RGBa (0,0,0, 0.5);
Je crois avoir fait le tour de la fiche o/
Bravo d'avoir déjà appliquer ce que j'ai dit à propos des titre ;)
Tu à été rapide sur ce coups ! Le schéma n'est même pas là depuis 24h ! XD
Alors au niveau du rendu c'est quand même assez près, mais sur mon schéma on retrouve une marge en haut de ton bloc "fiche". Je suis assez surprise de voir où tu a mis la scroll-bar je l'imaginais englober tout le texte même le rectangle jaune qui est surtout là pour "styliser" les paroles des personnages, mais l'important c'est que tu es relever le défis ! Je lui aurais mis un height de 430px au lieu de 450px pour qu'il reste dans l'encadré blanc mais là je chipote ! XD
Concernent ton code j'ai du mal à comprendre pourquoi tu à utiliser une tableau pour le titre et la citation
Bon je comprend un peux, tu voulais qu'il y est des marge de chaque côté de ta bordure. Qu'elle ne colle pas les côté du cadre blanc. C'est ça ? Mais à ce moment là, pourquoi ne pas avoir tout simplement mis des marge extérieur ? Quelque chose comme : margin: 0 20%;Ainsi plus besoin d'une marge extérieur négative pour la citation. Par contre on peux changer la valeur par défaut et "forcer" une marge de 0px pour que ce soit plus jolie. D'ailleurs, fait attention tu ouvre une balise h3 pour fermer avec une balise h2. C'est probablement une faute d’inattention ou de c/c ;)
Pour le bloc "dialogue" tu à ajouter une hauteur (height: 20px;). Or le texte dans cette section peux être plus ou moins longue. Il aurais été mieux de ne pas la spécifier comme ça si le texte est long le bloc va suivre ;)
Finalement, pour l'opacité. Tu à appliquer une opacité général. Ce qui veux dire que tout ce qui ce trouve dans ton bloc est transparent. Dans ce cas-ci le niveaux de transparence est minime, mais lorsqu'on veux mettre un fond semi-transparent il est préférable d'utiliser une variable alpha (la troisième proposition dans le tuto : background-color: RGBa (0,0,0, 0.5);
Je crois avoir fait le tour de la fiche o/
Bravo d'avoir déjà appliquer ce que j'ai dit à propos des titre ;)
_______________
Coucou ! 
Ahah oui, j'ai du temps devant moi en ce moment alors j'en profite. =)
J'ai tenté de mettre la marge tout en haut, mais je n'ai pas réussi via le CSS. J'ai un peu tendance à confondre margin et padding, donc j'ai essayé les deux, et la fiche blanche ne voulait pas se décoller du haut de la page. Après reflexion, un < br /> aurait simplement pu faire l'affaire, j'ai un peu trop chercher la complication sur le coup. ^^
Effectivement, je voulais que les marges ne fasse pas toute la longueur de la fiche. J'ai essayé de bidouiller, j'ai fais quelques recherches, et je ne trouvais pas de moyen pour régler cette longueur.![[Facile] Exercice 5 - Fiche - Batty 2979024130](/users/1416/13/16/78/smiles/2979024130.gif)
JsBin ne m'aide visiblement pas pour la relecture, étant donné qu'il n'y a pas de saut de ligne c'est moins pratique. ^^ Je vais essayé Codepen pour la prochaine, il m'a l'air plus lisible. :P J'évite au maximum de faire des copier coller en plus, sauf lorsqu'il s'agit d'un même bloc qui se répète plusieurs fois. Je préfère tout écrire de moi même, ça me permet de mieux assimiler. ^^
J'ai retiré la hauteur dans le bloc de dialogue. =)
J'avais essayé d'utiliser la variable alpha, sauf que mon fond se retrouvait entièrement transparent.
Si je mettais ça dans mon CSS :
Ca me donne un rendu tel que celui ci.
Et puis en corrigeant mon code en suivant tes recommandations, j'ai vu qu'il suffisait simplement d'enlever l'espace entre le RGBa et la parenthèse. Je le saurais au moins. :P
En tout cas j'ai bien pris en note toute ce que tu m'as dis là, et j'en ai profité pour remettre ma fiche au propre avec tout tes conseils. :)
Merci à toi !![[Facile] Exercice 5 - Fiche - Batty 3775839356](/users/1416/13/16/78/smiles/3775839356.gif)
Ahah oui, j'ai du temps devant moi en ce moment alors j'en profite. =)
J'ai tenté de mettre la marge tout en haut, mais je n'ai pas réussi via le CSS. J'ai un peu tendance à confondre margin et padding, donc j'ai essayé les deux, et la fiche blanche ne voulait pas se décoller du haut de la page. Après reflexion, un < br /> aurait simplement pu faire l'affaire, j'ai un peu trop chercher la complication sur le coup. ^^
Effectivement, je voulais que les marges ne fasse pas toute la longueur de la fiche. J'ai essayé de bidouiller, j'ai fais quelques recherches, et je ne trouvais pas de moyen pour régler cette longueur.
JsBin ne m'aide visiblement pas pour la relecture, étant donné qu'il n'y a pas de saut de ligne c'est moins pratique. ^^ Je vais essayé Codepen pour la prochaine, il m'a l'air plus lisible. :P J'évite au maximum de faire des copier coller en plus, sauf lorsqu'il s'agit d'un même bloc qui se répète plusieurs fois. Je préfère tout écrire de moi même, ça me permet de mieux assimiler. ^^
J'ai retiré la hauteur dans le bloc de dialogue. =)
J'avais essayé d'utiliser la variable alpha, sauf que mon fond se retrouvait entièrement transparent.
Si je mettais ça dans mon CSS :
Ca me donne un rendu tel que celui ci.
Et puis en corrigeant mon code en suivant tes recommandations, j'ai vu qu'il suffisait simplement d'enlever l'espace entre le RGBa et la parenthèse. Je le saurais au moins. :P
En tout cas j'ai bien pris en note toute ce que tu m'as dis là, et j'en ai profité pour remettre ma fiche au propre avec tout tes conseils. :)
Merci à toi !
_______________
Coucou ^^ Alors voilà, je m'essais, mon code me semble correct, mais à voir s'il y a des fautes XD Je ne mettrai pas le résultat, l'ayant codé sur codepen, j'ai des sauts de ligne qui, une fois sur FA, déforment énormément le code et j'avoue ne pas avoir la motivation de tout modifier >< Un détail qui m'a bien fait rire : chaque fois que j'essayais de mettre 0.8 d'opacité, la parenthèse transformait une partie du code en smiley, ce qui brisait complètement le code, je comprenais rien XD En tout cas j'ai eu beaucoup de plaisir à construire cette fiche, merci ![[Facile] Exercice 5 - Fiche - Batty 1840524174](/users/1416/13/16/78/smiles/1840524174.gif)
_______________
Bonjour ! Désolée du temps de réponse, je pensais avoir répondu, mais non ! Bon, ma réponse risque d'être un peu courte aussi, forumactif a bug et mangé mon message, j'avais écris un joli pavé 
Pour le CSS, je devais revoir comment l'intégrer grâce à la balise style, mais ça m'est complètement sortie de la tête. La dernière fois que je l'avais utilisé, ça avait bug, donc je devais revoir, mais j'y ai pas repensé :') J'ai pris l'habitude de le séparer surtout pour permettre le changement rapide de toutes les fiches si je veux modifier une couleur par exemple sans avoir à revoir chaque fiche une par une. Pour les codes en LS, je serais du genre à offrir deux versions, une avec CSS séparé et une avec CSS intégré. Est-ce que ce serait correct ? Le CSS ne serait pas sur codepen comme dans l'exemple que j'avais donné, je le mettrais, mais ce serait aux membres de voir où le mettre (donc soit dans le CSS du forum sur lequel ils utilisent la fiche s'ils ont accès au CSS, soit ailleurs comme sur codepen, mais ce serait à eux de gérer justement pour leur permettre de modifier à leur guise). Je ne sais pas si c'est bon de faire ça ?
Ah, ça m'amène à une autre question. Si je mets le CSS entre balise style, qu'est-ce qui va s'y rapporter ? Est-ce que seul le poste dans lequel il y a le style va être touché ou est-ce que tous les postes qui vont être dans le même sujet où la balise style est vont être affecté ? Je m'en souviens plus >< il me semble que ce n'est que le poste non ? Il faudrait que je revois cette balise XD
Pour les balises paragraphes, j'ai pris l'habitude de coder comme ça en dehors de forumactif et maintenant, c'est resté sur FA, mais je vais devoir m'adapter oui je remarque que ça pose plusieurs problèmes, comme par exemple utilisé une balise titre dans un code rp risque d'être affecté par le CSS du forum sur lequel la fiche est postée, vue que le staff a son propre CSS aussi Je me demandais cependant, s'agit-il d'une erreur en programmation ou juste que je dois m'adapter selon l'endroit où je code ? J'aimerais un jour travailler dans le domaine, alors j'aimerais connaître les bonnes règles à suivre
Merci beaucoup pour ton aide en tout cas, encore une fois désolée pour le temps de réponse :O
Pour le CSS, je devais revoir comment l'intégrer grâce à la balise style, mais ça m'est complètement sortie de la tête. La dernière fois que je l'avais utilisé, ça avait bug, donc je devais revoir, mais j'y ai pas repensé :') J'ai pris l'habitude de le séparer surtout pour permettre le changement rapide de toutes les fiches si je veux modifier une couleur par exemple sans avoir à revoir chaque fiche une par une. Pour les codes en LS, je serais du genre à offrir deux versions, une avec CSS séparé et une avec CSS intégré. Est-ce que ce serait correct ? Le CSS ne serait pas sur codepen comme dans l'exemple que j'avais donné, je le mettrais, mais ce serait aux membres de voir où le mettre (donc soit dans le CSS du forum sur lequel ils utilisent la fiche s'ils ont accès au CSS, soit ailleurs comme sur codepen, mais ce serait à eux de gérer justement pour leur permettre de modifier à leur guise). Je ne sais pas si c'est bon de faire ça ?
Ah, ça m'amène à une autre question. Si je mets le CSS entre balise style, qu'est-ce qui va s'y rapporter ? Est-ce que seul le poste dans lequel il y a le style va être touché ou est-ce que tous les postes qui vont être dans le même sujet où la balise style est vont être affecté ? Je m'en souviens plus >< il me semble que ce n'est que le poste non ? Il faudrait que je revois cette balise XD
Pour les balises paragraphes, j'ai pris l'habitude de coder comme ça en dehors de forumactif et maintenant, c'est resté sur FA, mais je vais devoir m'adapter oui
je remarque que ça pose plusieurs problèmes, comme par exemple utilisé une balise titre dans un code rp risque d'être affecté par le CSS du forum sur lequel la fiche est postée, vue que le staff a son propre CSS aussi Je me demandais cependant, s'agit-il d'une erreur en programmation ou juste que je dois m'adapter selon l'endroit où je code ? J'aimerais un jour travailler dans le domaine, alors j'aimerais connaître les bonnes règles à suivre Merci beaucoup pour ton aide en tout cas, encore une fois désolée pour le temps de réponse :O
_______________
Coucou :3
Contente de te revoir par ici :3
Ton rendu est parfait, c'est génial ! De plus ton code est bon aussi.
J'aime bien le hover sur le titre :3
En parcourant ton HTML je vois un élément entouré de deux div ici :
La div barre est inutile, une seule div suffira ici. Tu peux appliquer donc tout le CSS directement sur la div citation.
Et juste pour information, mettre un line-height de ma même taille que le font-size revient à mettre un line-height qui égal à 1 (line-height : 1;)
Bravo
Contente de te revoir par ici :3
Ton rendu est parfait, c'est génial ! De plus ton code est bon aussi.
J'aime bien le hover sur le titre :3
En parcourant ton HTML je vois un élément entouré de deux div ici :
- Code:
<div class="barre_exof5">
<div class="citation_exof5">Petite citation du plaisir.</div>
</div>
La div barre est inutile, une seule div suffira ici. Tu peux appliquer donc tout le CSS directement sur la div citation.
Et juste pour information, mettre un line-height de ma même taille que le font-size revient à mettre un line-height qui égal à 1 (line-height : 1;)
Bravo
_______________
Bonjour
J'ai tenté l'exercice, merci de l'avoir proposé il était sympathique à faire ** Ca m'aura sans doute pas empêchée de faire des bêtises cela dit, du coup à vous de me dire o/
CSS
HTML
J'ai tenté l'exercice, merci de l'avoir proposé il était sympathique à faire ** Ca m'aura sans doute pas empêchée de faire des bêtises cela dit, du coup à vous de me dire o/
CSS
HTML
_______________
Bonsoir (à l'arrache certes) o/
Déjà merci @Reine des Ténèbres d'avoir répondu, pas de soucis pour le retard ce n'était pas pressé x')
Concernant le background, comme j'ai l'habitude de coder pour des trucs sur forum je met généralement l'image de fond dans le HTML au cas où on veuille la modifier; mais dans ce cas là c'est pas nécessaire et effectivement plus propre dans le CSS, du coup j'y penserai next time o/
+ c'est bien noté pour la hauteur et concernant le <.p> j'avais essayé de mettre en span mais de mémoire ça rendait pas comme je voulais du côté de la 'boîte' jaune autour du texte Je pense réessayer tho, à moins d'avoir de bien longs dialogues ça semble plus approprié
En tout cas merci beaucoup pour tes corrections, des keurs
Déjà merci @Reine des Ténèbres d'avoir répondu, pas de soucis pour le retard ce n'était pas pressé x')
Concernant le background, comme j'ai l'habitude de coder pour des trucs sur forum je met généralement l'image de fond dans le HTML au cas où on veuille la modifier; mais dans ce cas là c'est pas nécessaire et effectivement plus propre dans le CSS, du coup j'y penserai next time o/
+ c'est bien noté pour la hauteur et concernant le <.p> j'avais essayé de mettre en span mais de mémoire ça rendait pas comme je voulais du côté de la 'boîte' jaune autour du texte
Je pense réessayer tho, à moins d'avoir de bien longs dialogues ça semble plus appropriéEn tout cas merci beaucoup pour tes corrections, des keurs
_______________
Re-coucou 8D
Globalement, il y a les mêmes soucis que dans ton exercice sur la fiche Japanese Night, donc je ne vais pas revenir là-dessus. ;)
Pour unir le tout, en fait, on va mettre ton CSS entre balises style. Pour que ça marche, cependant, il faut que ton CSS soit minifié (dons sans sauts de lignes). Pour faire ça rapidement, tu prends la partie CSS, tu la colles dans ce site qui va retirer tous les sauts de ligne automatiquement, puis tu mets le résultat entre balises style, comme ceci :
Il faut également minifier le HTML (forumactif prenant en compte les sauts de ligne, ça risque de déformer ton code si tu ne le fais pas), donc tu appliques la même méthode que pour le CSS. c: Et tu mets les deux dans ton message, comme ceci :
A noter que, du coup, le site retire les sauts de ligne dans le texte, mais tu peux les garder xD Le tout est seulement d'éviter les sauts de lignes/espaces entre les balises, c'est tout. :3
Le CSS entre balises style peut se trouver avant ou après le HTML, peu importe
Globalement, il y a les mêmes soucis que dans ton exercice sur la fiche Japanese Night, donc je ne vais pas revenir là-dessus. ;)
Pour unir le tout, en fait, on va mettre ton CSS entre balises style. Pour que ça marche, cependant, il faut que ton CSS soit minifié (dons sans sauts de lignes). Pour faire ça rapidement, tu prends la partie CSS, tu la colles dans ce site qui va retirer tous les sauts de ligne automatiquement, puis tu mets le résultat entre balises style, comme ceci :
Il faut également minifier le HTML (forumactif prenant en compte les sauts de ligne, ça risque de déformer ton code si tu ne le fais pas), donc tu appliques la même méthode que pour le CSS. c: Et tu mets les deux dans ton message, comme ceci :
A noter que, du coup, le site retire les sauts de ligne dans le texte, mais tu peux les garder xD Le tout est seulement d'éviter les sauts de lignes/espaces entre les balises, c'est tout. :3
Le CSS entre balises style peut se trouver avant ou après le HTML, peu importe
_______________
Salut @Void
Très jolie tentative :) Dans l'ensemble, il n'y a pas d'erreurs particulières de conception, mais je t'ai quand même pondu un pavé parce que rien n'est parfait (et moi non plus, certes).
Ma première remarque porte sur le positionnement du fond. La différence de dimensions entre modernBB et phpbb2 créée par la présence de
Une méthode pour compenser ça, pour une image qui est supposée recouvrir l'espace disponible, est d'utiliser
Tu as oublié d'importer les polices d'écriture que tu utilises dans le code que tu partages. Et puisqu'on parle de polices, c'est une question d'accessibilité plus que de code, mais réserve la police Satisty aux textes de titrage (titres) plutôt qu'aux textes de labeur (paragraphes de texte), parce qu'elle est difficile à lire.
Tu l'as potentiellement remarqué lors de ma dernière review, mais je ne suis pas une grande fan d'utiliser
Pour le positionnement du bloc de texte,
Pense aussi à te renseigner sur les propriétés que tu utilises quand tu ne les connais pas. La propriété
Voilà, je crois que c'est tout pour mes petits chipotages ! o/
Très jolie tentative :) Dans l'ensemble, il n'y a pas d'erreurs particulières de conception, mais je t'ai quand même pondu un pavé parce que rien n'est parfait (et moi non plus, certes).
Ma première remarque porte sur le positionnement du fond. La différence de dimensions entre modernBB et phpbb2 créée par la présence de
box-sizing: border-box fait que le fond va se "répéter" sur phpbb2 (entre autres) parce que le bloc est plus grand que prévu. Par défaut sur une page web quelconque, la valeur de la propriété
Dans la pratique, cela veut dire que si on fixe la largeur d'un bloc à 500px avec
Sur modernBB - entre autres - la valeur de la propriété
Généralement, on préfère avoir des blocs qui font les dimensions qu'on leur demande plutôt que de devoir calculer la bonne dimension à mettre en prenant en compte les marges et bordures,
box-sizing est content-box. Dans la pratique, cela veut dire que si on fixe la largeur d'un bloc à 500px avec
width, sa largeur d'affichage effective sera 500px additionnée à la valeur des marges internes créées par la propriété padding et la valeur des bordules latérales créées par la propriété border. Soit, pour un padding de 10px et une bordure de 2px, une largeur totale de 524px.Sur modernBB - entre autres - la valeur de la propriété
box-sizing est réglée à border-box pour tous les blocs. C'est à dire que si on fixe la largeur d'un bloc à 500px, il fera effectivement 500px de large et le contenu s'adaptera si l'on fixe des marges internes ou une bordure. Ainsi, dans le même cas de figure que précédemment, avec une marge interne (padding) de 10px et une bordure de 2px, l'espace restant destiné au texte (ou autre) sera de 478px.Généralement, on préfère avoir des blocs qui font les dimensions qu'on leur demande plutôt que de devoir calculer la bonne dimension à mettre en prenant en compte les marges et bordures,
box-sizing est donc assez plébiscité sur les sites web moderne.Une méthode pour compenser ça, pour une image qui est supposée recouvrir l'espace disponible, est d'utiliser
background-size: cover;. Tu peux également approfondir tes connaissances sur la propriété background et le fait qu'il s'agisse d'une propriété raccourcie (qui inclut donc background-repeat et background-position).Tu as oublié d'importer les polices d'écriture que tu utilises dans le code que tu partages. Et puisqu'on parle de polices, c'est une question d'accessibilité plus que de code, mais réserve la police Satisty aux textes de titrage (titres) plutôt qu'aux textes de labeur (paragraphes de texte), parce qu'elle est difficile à lire.
Tu l'as potentiellement remarqué lors de ma dernière review, mais je ne suis pas une grande fan d'utiliser
<h2> pour des sous-titres, parce que ça n'a pas de sens "logique" dans la structure du document. Personne n'écrit ses cours comme ça :- comment ça mes exemples sont pourris ?:
Partie I - Les Grandes Puissances Mondiales
I-1) Ô rage ! Ô désespoir ! Ô vieillesse ennemie ! N'ai-je donc tant vécu que pour cette infâmie ?
Pour le positionnement du bloc de texte,
float est une solution possible, mais je t'invite à expérimenter d'autres solutions qui ne te forcent pas à fixer la largeur du bloc de texte (voire sa hauteur). Les marges externes avec margin (ou internes avec padding) peuvent te permettre d'avoir le même résultat sans sortir du flux et sans devoir sortir un mètre ruban. Le modèle flexbox a également une flexibilité très utile pour les cas où un titre ou une citation deviennent trop longs (en utilisant flex-direction et flex-grow voire flex à bon escient).Pense aussi à te renseigner sur les propriétés que tu utilises quand tu ne les connais pas. La propriété
scrollbar-width n'accepte que des mots clés, et particulièrement la valeur thin (La documentation MDN francophone n'est pas très claire sur le sujet, j'avoue) et la propriété scrollbar-color prend deux valeurs, la couleur du curseur et la couleur de la piste.Voilà, je crois que c'est tout pour mes petits chipotages ! o/
_______________
![[Facile] Exercice 5 - Fiche - Batty 14n2](https://zupimages.net/up/21/30/14n2.png)
![[Facile] Exercice 5 - Fiche - Batty Rwns](https://zupimages.net/up/21/30/rwns.png)
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
![[Facile] Exercice 5 - Fiche - Batty 7WZJTfh](https://i.imgur.com/7WZJTfh.png)
|
|
|