Revenir en haut Aller en bas
Epicode
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le Deal du moment : -20%
(Adhérents Fnac) Enceinte Bluetooth Marshall ...
Voir le deal
199.99 €

Aller en bas
Batty
Batty
Ancien.ne du staff
  • Date d'inscription : 05/06/2014
  • Messages : 3514
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

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.

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 !


_______________
Mer 7 Fév 2018 - 10:08
Peluushe
Peluushe
Fidèle au poste !
  • Date d'inscription : 13/01/2018
  • Messages : 596
Chouette un nouvel exercice ! =)

Voila mon essai ! [Facile] Exercice 5 - Fiche - Batty 2702986051

Visuel :


HTML :


CSS :
_______________
Mer 7 Fév 2018 - 14:18
Batty
Batty
Ancien.ne du staff
  • Date d'inscription : 05/06/2014
  • Messages : 3514
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 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 ;)
_______________
Mer 7 Fév 2018 - 16:22
Peluushe
Peluushe
Fidèle au poste !
  • Date d'inscription : 13/01/2018
  • Messages : 596
Coucou !  Happyness
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

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
_______________
Jeu 8 Fév 2018 - 12:19
Hiyorin
Hiyorin
Membre timide
  • Date d'inscription : 05/03/2017
  • Messages : 117
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



_______________
Ven 16 Fév 2018 - 4:27
Batty
Batty
Ancien.ne du staff
  • Date d'inscription : 05/06/2014
  • Messages : 3514
Hello !

Désoler du temps qu'on à mis à répondre à ta demande !

Je sais que tu à un peux vue ce code avec ton professeur Kjaran je vais donc essayer de complété ce qui selon moi n'as pas été aborder =P

Premièrement pour ton problème de smiley => 8) c'est que le code de ce dernier est mal foutu x) normalement on va préféré un code comme :8*): pour évité ce genre de souci (sans l’astérisque) Bref il n'y a pas vraiment de solution autre que de changer ton 0.8 pour quelque chose comme 0.75 qui ne devrais pas crée un smiley x)

Ensuite dans ton cours Kjaran ta demander de séparer ton CSS et ton html. Ce que tu à fait c'Est bien =) Mais tu as du te heurté à un problème. Ton css ne devais pas s'afficher ? Puisque tu à lier une page CSS à ton code.

Dans l'optique où cette fiche serais mis en LS. Donc partagé il est désagréable pour les membres de ne pas avoir accès au CSS. Que ce soit pour changer l'image de fond et/ou les couleurs de la fiche. Du coup on va inclure le CSS dans une balise style qui ce trouvera en haut de ta fiche. Par contre pour que le CSS fonctionne à l'intérieur de celle-ci il ne faut pas de saut de ligne. Pareille comme ton CSS dans le code plus haut.

Finalement, oui la balise P est la balise paragraphe. Dans une page HTML et/ou sur un site web statique on va l'utiliser pour crée dans saut de ligne. Par contre à l'intérieur d'un message sur un forum, les saut de ligne sont pris en compte. Du coup, il est inutile de crée un saut de ligne en code. De plus le membre qui utilisera ton code n'aura peut-être pas de bonne base en programmation. Ce qu'il veux faire c'est copier/coller sont texte à l'intérieur de ton code. Il ne veux pas forcément entouré chaque paragraphe par une balise.

Il aurais été plus simple de mettre une seul balise p pour encadré tout le text. Or on ce bute à un autre problème; il est impossible de mettre une DIV à l'intérieur d'une balise P... ce qui nous pause problème si on veux utilisé la belle présentation pour les dialogue entre les personnage (la DIV jaune).

Dans ce cas précis il serais préférable d'utiliser une DIV à la place de la balise P. Parfois codé sur un forum "obliger" à mettre de côté quelque pratique en programmation qu'on utiliserais normalement pour un site web statique ;)

Bref j'espère t'avoir aidé ! En somme ton code est vraiment bien =D
_______________
Ven 2 Mar 2018 - 11:32
Hiyorin
Hiyorin
Membre timide
  • Date d'inscription : 05/03/2017
  • Messages : 117
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é Sad

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 [Facile] Exercice 5 - Fiche - Batty 3313101865 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 [Facile] Exercice 5 - Fiche - Batty 3313101865 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 [Facile] Exercice 5 - Fiche - Batty 3313101865

Merci beaucoup pour ton aide en tout cas, encore une fois désolée pour le temps de réponse :O
_______________
Mar 20 Mar 2018 - 21:58
Batty
Batty
Ancien.ne du staff
  • Date d'inscription : 05/06/2014
  • Messages : 3514
Hello !

Si tu utilise le CSS à l'intérieur d'une balise style il ne faut pas avoir de saut de ligne à l'intérieur. C'est peut-pêtre pour ça que ça ne fonctionnais pas =P

Puis le CSS touchera tout ce qui ce trouve sur la même page que lui. Tu pourais par exemple mettre ton CSS sur le premier poste et pas sur les autre, mais lorsqu'on change de page il faut le remettre.

Pour les LS tu peux proposer les deux option sans problème ^^

Pour les titre ce n'est pas vraiment une erreur de programmation. Toi lorsque tu va programmer un site web tu va mettre tes titre h1 h2 etc... pour le référencement, mais il sera rare que derrière des gens programme des fiches et qui vont utiliser les même balise. Normalement tu aura fait un site plus ou moins statique pour une compagnie et personne codera dessus.

En fait c'est plus ou moins nous dans nos fiche qui fait une erreur car notre titre de fiche n'a pas forcément besoin d'être référé sur les plateforme de recherche.
_______________
Mer 21 Mar 2018 - 8:56
Dorea McH
Dorea McH
Membre timide
  • Date d'inscription : 08/01/2017
  • Messages : 182
Coucou! Merci pour l'exercice! (je l'ai plus fait parce que l'image était superbe qu'autre chose ;))

Voilà mon travail:

CSS:

HTML:

Et le rendu!:
_______________
Jeu 22 Mar 2018 - 10:57
Reine des Ténèbres
Reine des Ténèbres
Ancien.ne du staff
  • Date d'inscription : 15/08/2017
  • Messages : 3183
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 :
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 [Facile] Exercice 5 - Fiche - Batty 3775839356
_______________
Mar 27 Mar 2018 - 21:10
Wonder
Wonder
Newbie
  • Date d'inscription : 02/02/2018
  • Messages : 77
Bonjour  [Facile] Exercice 5 - Fiche - Batty 3775839356
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
_______________
Mar 17 Juil 2018 - 9:26
Reine des Ténèbres
Reine des Ténèbres
Ancien.ne du staff
  • Date d'inscription : 15/08/2017
  • Messages : 3183
Hello, @wonder.

D'abord je m'excuse pour le retard :3

Le rendu est fidèle au schéma donc bravo.
Tu as séparé le HTML du CSS c'est très bien, n'oublie pas que quand tu sépares les deux, il ne faut pas mettre du CSS dans le HTML mais avoir un code totalement propre.

Code:
<div class="fond" style="background-image:url('https://zupimages.net/up/18/27/grla.jpg');background-size:100% auto;">
La valeur dans l'attribut style doit donc aller dans le sélecteur .fond dans le CSS.

Sinon quand tu mets une seule valeur en background-size, la hauteur est par défaut en auto donc pas besoin de l'écrire.

Le "encore toi" serait plus logique dans une span, vu que ce n'est pas un vrai paragraphe mais s'il y avait beaucoup de texte ça pourrait l'être.

C'est tout pour les remarques, ton code est plutôt correct, bravo :3
_______________
Jeu 2 Aoû 2018 - 23:00
Invité
Anonymous
Invité
    Coucou :3 Voici pour moi. Je sais pas si le code est bon par contre :'D

    _______________
    Ven 3 Aoû 2018 - 23:33
    Nanto
    Nanto
    Fidèle au poste !
    • Date d'inscription : 07/06/2016
    • Messages : 334
    Voilà ! Fait !

    _______________
    Ven 10 Aoû 2018 - 16:03
    Batty
    Batty
    Ancien.ne du staff
    • Date d'inscription : 05/06/2014
    • Messages : 3514
    Désoler du temps d'attente pour vos exercices ! Je ne les avais même pas vue =o honte sur mon x) Bref je vais vous donner mon avis sur vos code maintenant que j'en est pris connaissance =)

    @Shanriya

    Ton code est vraiment bien ! Je n'ai pas grand chose à dire dessus il est presque fait comme je l'aurais fait bravo !

    Par contre, la première chose que je voie de "mal" dans ton code c'est ta citation en h5... Pourquoi h5 ? J'imagine que tu t'es dit "la citation c'est peux important donc je vais lui donner moins d'importance avec un h plus bas". Mais à ce moment là pourquoi ne pas lui avoir donner un h6 (qui est la plus petite valeur)?

    Tout fois, lorsqu'on utilise les titre (h1,h2,h3) normalement on ne "peu pas" sauter les niveau. Il faut utiliser le h1 (sur FA ses le titre du forum), ensuite le h2, le h3 et ainsi de suite. Pourquoi on ne peux pas sauté des niveau ?... parce que c'est comme ça x) je n'est pas vraiment d'explication c'est la façon de faire haha. Comme lorsqu'on écrit de gauche à droite =P

    Sinon en soit ton raisonnement était bien ! Et tu a raison la citation est beaucoup moins importante. C'est plus esthétique qu'informatif. Du coup, (et c'est ma propre façon de pence et non une règle) je ne mettrais pas les citation dans une balise titre. Pourquoi ? Parce que normalement les balise titre sont là pour décrie brièvement le sujet de la section qu'il introduit et ils ont des fonctions de référencement. La citation n'introduit pas vraiment le sujet et si on la cherche sur google ce n'est pas vraiment le RP qu'on souhaite trouver (normalement). Mais bon ça c'est ma vision des chose =) Personnellement je l'aurais mis dans un balise paragraphe (P) ou de contenu (div).

    Finalement ce ne comprend pas ta div :

    Code:
    <div id="shan_contenuoverflow">

    Premièrement elle est lier à aucun CSS, deuxièmement elle est inutile et finalement elle utilise un ID. Un ID doit être unique sur une page web. Comme c'est une fiche RP elle se répétera sur la page Web donc le ID aussi. Normalement dans les fiche RP on n'utilise pas les ID. Une fiche de présentation pourrais en avoir, car normalement cette fiche n'est pas copier plusieurs fois =)

    Oh et pourquoi avoir mis un opacity: 1; à ta div dialogue ? la valeur 1 est celle par défaut sur les Div ce n'est donc pas nécessaire.

    Bref ton code était vraiment bien et j'espère t'avoir appris des chose !

    --------------------------------------------------------------------------------------

    @Nanto

    Ton code est bien ! Tu a un rendu presque identique au schémas et bravo pour la scroll bar =) Mais bon mon but est de pointé tout les petit "défaut" de ton code alors je vais débuté, mais sache que tu n'a pas fait de faute "grave" ;)

    La première chose que je voie ses ton titre de fiche. Le fait d'utiliser une div n'est pas forcément mal tout dépend de comment on réfléchi et interprète la fonction des balise titre (h1,h2,h3). Sache que tu aurais pue mettre ton titre de fiche dans un H2 =)

    Par contre ce qui n'est "pas bon" c'est d'avoir utiliser une span pour coloré le titre. En fait pour réaliser le même effet que le schémas il aurais fallu mettre une bordure de bas et des marges droite/gauche à ta DIV .titreexcinq. Ainsi tu n'aurais pas eu besoin de la span. Par contre elle était en effet nécessaire si on crée le code comme tu là fait =)

    Ensuite, pourquoi avoir mis un opacity: 1; à ta div dialogue ? la valeur 1 est celle par défaut sur les Div ce n'est donc pas nécessaire. Sinon il manque aussi la petite ombre interne sur la DIV ... je te l'accorde c'est discret =P et ce n'est pas une faute de programmation haha =)

    Bravo pour ton exercice !

    _______________
    Mar 14 Aoû 2018 - 11:55
    Nanto
    Nanto
    Fidèle au poste !
    • Date d'inscription : 07/06/2016
    • Messages : 334
    Ne sachant comment tu avais fait, j'ai essayé d'imiter le rendu de mon mieux ^^'

    Ah, mais oui, je pense jamais à la hiérarchisation des titres... ça aurait pu, en effet
    D'acc, je me demandais pourquoi c'était si large par rapport au texte... Mais dans ce cas, le titre ne peux pas être gardé sur une seule ligne s'il dépasse, si ?
    Hum... ça, c'était un oublie, j'avais tenté plusieurs valeurs avant de déterminer que c'était 1, je n'ai pas enlevé ensuite... L'ombre ? Ah, je n'avais pas vu, pour le coup ^^'
    _______________
    Mer 15 Aoû 2018 - 12:08
    Batty
    Batty
    Ancien.ne du staff
    • Date d'inscription : 05/06/2014
    • Messages : 3514
    En effet, si le titre est long il auras un saut de ligne mais le texte ne sera pas souligné. En fait la ligne c'est d'avantage une séparation entre le titre et la citation =)
    _______________
    Mer 15 Aoû 2018 - 12:23
    Wonder
    Wonder
    Newbie
    • Date d'inscription : 02/02/2018
    • Messages : 77
    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 [Facile] Exercice 5 - Fiche - Batty 2979024130 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 [Facile] Exercice 5 - Fiche - Batty 3775839356
    _______________
    Ven 17 Aoû 2018 - 13:57
    Emi
    Emi
    Membre timide
    • Date d'inscription : 17/05/2015
    • Messages : 109
    Voilà je me suis lancée et j'ai fais ça ! Je suis extra débutante en codage donc je sais pas du tout si ce que j'ai fais est bien ou non. XD
    Par contre, je me demandais comment on faisait pour "unir" le tout, en gros n'avoir qu'un codage que je puisse poster sur d'autres forums.

    _______________
    Jeu 28 Fév 2019 - 19:15
    Artemis
    Artemis
    Admin & serial codeuse - 0% de méchanceté
    • Date d'inscription : 14/01/2017
    • Messages : 3571
    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 ^^
    _______________


     
    Dim 3 Mar 2019 - 6:57
    Void
    Void
    Membre timide
    • Date d'inscription : 20/09/2013
    • Messages : 146
    Bonjour bonjour !
    Voilà ma participation, j'ai bien aimé le concept de la maquette, je savais pas qu'on pouvait faire des ombres internes !
    Merci d'avance pour les retours o/

    Voici mon rendu :

    Titre du RP

    “ Une jolie petite citation ”

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis dictum nibh, in lacinia nulla. Nunc vel aliquam purus. Donec eget risus sit amet dolor consequat ultricies finibus at lacus. Ut mi augue, imperdiet eu tellus sit amet, fermentum suscipit turpis. Aliquam consectetur bibendum porttitor. Pellentesque leo neque, dapibus a cursus blandit, tincidunt eget eros. Mauris iaculis risus ac eleifend dictum. Proin eleifend risus ut turpis bibendum blandit. Cras vitae metus et nunc malesuada elementum vehicula eget diam. Pellentesque ut dignissim massa. Donec sollicitudin arcu in augue pellentesque accumsan.

    “ Une jolie petite phrase de dialogue... ”

    Donec ut tempus augue. Pellentesque laoreet tincidunt facilisis. Etiam in turpis sapien. Morbi augue risus, ultricies non pellentesque id, convallis sit amet turpis. Proin finibus sem lectus, ut aliquam sem tincidunt nec. Sed finibus elit tortor, quis mattis elit venenatis vel. Donec rutrum nulla ac malesuada tristique. Nulla non blandit tortor. Quisque cursus, dolor eget condimentum semper, sapien leo aliquet sapien, sed maximus ipsum magna nec nibh. Fusce tempus massa at posuere sagittis. Donec nec tincidunt ipsum, in iaculis metus. Aliquam erat volutpat. Donec non consequat sem. Maecenas vitae nibh consequat, vulputate lacus feugiat, euismod lorem.

    Proin sit amet est lobortis velit fermentum aliquam in vitae ante. Phasellus sit amet erat id tellus efficitur dictum ut ac nulla. Nunc mi mi, varius at fringilla commodo, scelerisque sed nisl. In non blandit leo, vitae imperdiet turpis. Donec vel egestas enim. Suspendisse id porttitor orci, sit amet porta lorem. Sed ultricies venenatis tortor at imperdiet. Proin sodales quis massa et ornare. Cras ullamcorper maximus ornare. Nam ac enim viverra, commodo risus id, porttitor velit. Proin et risus eleifend, lobortis ex nec, pretium magna.

    Donec at luctus nisl, at rutrum diam. Praesent eget blandit augue. Suspendisse et leo felis. Nullam quis dictum urna. Aliquam a purus quis eros posuere aliquet. Sed felis enim, feugiat in sem placerat, pharetra convallis mauris. Suspendisse condimentum tristique ante, eu fringilla massa. Praesent aliquam aliquet massa, in tincidunt ipsum mattis vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse at rhoncus diam, sit amet porttitor libero. Donec hendrerit molestie elit a dapibus. Duis lobortis convallis odio in scelerisque. Integer posuere rhoncus libero vitae pretium. Sed luctus lacinia nunc accumsan fermentum.

    Mauris vitae faucibus felis. Integer pellentesque venenatis imperdiet. Etiam placerat sit amet nisl non ornare. Pellentesque a euismod nibh. Donec pellentesque est in sapien pulvinar, nec feugiat sapien vehicula. Integer imperdiet dolor a blandit posuere. In ultricies, arcu nec ultricies varius, arcu tellus tincidunt enim, eget dignissim lectus ex vel ipsum. Phasellus ultricies lacus at sagittis ultricies. Cras maximus commodo tempor. Vestibulum porta, justo nec laoreet semper, nibh mauris imperdiet elit, sed maximus dolor neque et est. Aenean sit amet dignissim velit, eu ornare ipsum. Nam varius arcu urna, at ultrices nibh tempus vitae. Etiam aliquam dui lorem, sed tempus est semper non. Quisque fermentum elit eros, ac euismod tortor finibus in. Proin sapien urna, interdum eu velit ut, consectetur mollis mauris. Nulla venenatis elit ut nisi suscipit iaculis.

    Integer id enim vehicula, commodo enim nec, suscipit tellus. Pellentesque feugiat lacinia elit, a pulvinar lectus vulputate non. Maecenas imperdiet aliquam ex, at tristique magna tincidunt in. Donec eget ipsum consequat, rutrum metus non, ultricies ligula. Pellentesque commodo tellus ut justo posuere cursus. Nam non viverra nulla, rutrum accumsan orci. Mauris cursus orci non imperdiet vehicula. Suspendisse molestie libero eget enim pretium molestie.

    Pellentesque commodo diam sapien, at venenatis ipsum tincidunt eu. Nam quis fermentum mauris. Nulla facilisi. Nullam vulputate mauris sed hendrerit laoreet. Nam dignissim, sapien ac vehicula pellentesque, velit enim porta odio, eget consequat elit erat ac erat. Praesent molestie leo est, ac scelerisque ligula vestibulum ac. Cras dui nulla, faucibus eget sodales sed, finibus vel metus. Mauris finibus dictum tellus, nec consequat nisl posuere quis. Sed neque ligula, varius ut risus at, hendrerit vehicula justo. Nullam fermentum ornare tellus, ac laoreet lorem sodales in. Maecenas id risus est. Nunc in dui eu nibh tempor tempor. Ut consequat est in massa tincidunt, in semper lectus faucibus. Sed non gravida nisi, rutrum blandit mi. Vestibulum viverra non libero eu accumsan.



    Le code HTML :
    Code:
    <div class="fiche_RP_1"><div class="text_RP_1"><!--
    --><h1>Titre du RP</h1><!--
    --><h2>“ Une jolie petite citation ”</h2><!--
    --><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis dictum nibh, in lacinia nulla. Nunc vel aliquam purus. Donec eget risus sit amet dolor consequat ultricies finibus at lacus. Ut mi augue, imperdiet eu tellus sit amet, fermentum suscipit turpis. Aliquam consectetur bibendum porttitor. Pellentesque leo neque, dapibus a cursus blandit, tincidunt eget eros. Mauris iaculis risus ac eleifend dictum. Proin eleifend risus ut turpis bibendum blandit. Cras vitae metus et nunc malesuada elementum vehicula eget diam. Pellentesque ut dignissim massa. Donec sollicitudin arcu in augue pellentesque accumsan.

    <span>“ Une jolie petite phrase de dialogue... ”</span>

    Donec ut tempus augue. Pellentesque laoreet tincidunt facilisis. Etiam in turpis sapien. Morbi augue risus, ultricies non pellentesque id, convallis sit amet turpis. Proin finibus sem lectus, ut aliquam sem tincidunt nec. Sed finibus elit tortor, quis mattis elit venenatis vel. Donec rutrum nulla ac malesuada tristique. Nulla non blandit tortor. Quisque cursus, dolor eget condimentum semper, sapien leo aliquet sapien, sed maximus ipsum magna nec nibh. Fusce tempus massa at posuere sagittis. Donec nec tincidunt ipsum, in iaculis metus. Aliquam erat volutpat. Donec non consequat sem. Maecenas vitae nibh consequat, vulputate lacus feugiat, euismod lorem.

    Proin sit amet est lobortis velit fermentum aliquam in vitae ante. Phasellus sit amet erat id tellus efficitur dictum ut ac nulla. Nunc mi mi, varius at fringilla commodo, scelerisque sed nisl. In non blandit leo, vitae imperdiet turpis. Donec vel egestas enim. Suspendisse id porttitor orci, sit amet porta lorem. Sed ultricies venenatis tortor at imperdiet. Proin sodales quis massa et ornare. Cras ullamcorper maximus ornare. Nam ac enim viverra, commodo risus id, porttitor velit. Proin et risus eleifend, lobortis ex nec, pretium magna.

    Donec at luctus nisl, at rutrum diam. Praesent eget blandit augue. Suspendisse et leo felis. Nullam quis dictum urna. Aliquam a purus quis eros posuere aliquet. Sed felis enim, feugiat in sem placerat, pharetra convallis mauris. Suspendisse condimentum tristique ante, eu fringilla massa. Praesent aliquam aliquet massa, in tincidunt ipsum mattis vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse at rhoncus diam, sit amet porttitor libero. Donec hendrerit molestie elit a dapibus. Duis lobortis convallis odio in scelerisque. Integer posuere rhoncus libero vitae pretium. Sed luctus lacinia nunc accumsan fermentum.

    Mauris vitae faucibus felis. Integer pellentesque venenatis imperdiet. Etiam placerat sit amet nisl non ornare. Pellentesque a euismod nibh. Donec pellentesque est in sapien pulvinar, nec feugiat sapien vehicula. Integer imperdiet dolor a blandit posuere. In ultricies, arcu nec ultricies varius, arcu tellus tincidunt enim, eget dignissim lectus ex vel ipsum. Phasellus ultricies lacus at sagittis ultricies. Cras maximus commodo tempor. Vestibulum porta, justo nec laoreet semper, nibh mauris imperdiet elit, sed maximus dolor neque et est. Aenean sit amet dignissim velit, eu ornare ipsum. Nam varius arcu urna, at ultrices nibh tempus vitae. Etiam aliquam dui lorem, sed tempus est semper non. Quisque fermentum elit eros, ac euismod tortor finibus in. Proin sapien urna, interdum eu velit ut, consectetur mollis mauris. Nulla venenatis elit ut nisi suscipit iaculis.

    Integer id enim vehicula, commodo enim nec, suscipit tellus. Pellentesque feugiat lacinia elit, a pulvinar lectus vulputate non. Maecenas imperdiet aliquam ex, at tristique magna tincidunt in. Donec eget ipsum consequat, rutrum metus non, ultricies ligula. Pellentesque commodo tellus ut justo posuere cursus. Nam non viverra nulla, rutrum accumsan orci. Mauris cursus orci non imperdiet vehicula. Suspendisse molestie libero eget enim pretium molestie.

    Pellentesque commodo diam sapien, at venenatis ipsum tincidunt eu. Nam quis fermentum mauris. Nulla facilisi. Nullam vulputate mauris sed hendrerit laoreet. Nam dignissim, sapien ac vehicula pellentesque, velit enim porta odio, eget consequat elit erat ac erat. Praesent molestie leo est, ac scelerisque ligula vestibulum ac. Cras dui nulla, faucibus eget sodales sed, finibus vel metus. Mauris finibus dictum tellus, nec consequat nisl posuere quis. Sed neque ligula, varius ut risus at, hendrerit vehicula justo. Nullam fermentum ornare tellus, ac laoreet lorem sodales in. Maecenas id risus est. Nunc in dui eu nibh tempor tempor. Ut consequat est in massa tincidunt, in semper lectus faucibus. Sed non gravida nisi, rutrum blandit mi. Vestibulum viverra non libero eu accumsan.</p></div></div>

    Et le CSS :
    Code:
    /*********************EXERCICE 5*********************/
    .fiche_RP_1 {
        width: 500px;
        height: 700px;
        background-image: url(https://zupimages.net/up/23/09/7vbu.png);
        margin: 0 auto;
        box-shadow:inset 0px 0px 30px 2px #32485ce3;
        border-radius: 10px;
        padding: 20px 20px 0px 0px;
    }

    .text_RP_1 {
        float: right;
        width: 375px;
        height: 595px;
        padding: 10px 5px 0px 10px;
        background-color: #ffffff99;
        box-shadow:inset 0px 0px 10px 2px #32485c8f;
        border: 1px solid #336375;
        border-radius: 10px;
    }

    .text_RP_1 h1, .text_RP_1 h2, .text_RP_1 p {
        margin: 0;
        padding: 0;
        text-align: center;
    }

    .text_RP_1 h1 {
        border-bottom: 1px solid #4c9dbd;
        font: 34px Mate SC, sans-serif;
        color: #b98920;
        text-shadow: 1px 1px 0px #32485c;
    }

    .text_RP_1 h2, .text_RP_1 span {
        font: 16px Satisfy, sans-serif;
    }

    .text_RP_1 h2 {
        border: none;
        color: #000;
        padding-top: 5px;
    }

    .text_RP_1 p {
        height: 500px;
        text-align: justify;
        font: 12px roboto, sans-serif;
        overflow: auto;
        padding: 0px 6px 0px 5px;
        scrollbar-width: 5px;
        scrollbar-color: #20608b;
    }

    .text_RP_1 span {
        background-color: #b98820be;
        padding: 5px 10px;
        box-shadow:inset 0px 0px 10px 2px #32485c60;
    }

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

    .text_RP_1 p::-webkit-scrollbar-thumb {
        background: linear-gradient(#20608b, #a2cfe9);
    }

    .text_RP_1 p::-webkit-scrollbar-track {
        background: #d9e3e9;
    }
    /*********************FIN EX 5*********************/
    _______________
    Jeu 2 Mar 2023 - 21:58
    'Christa
    'Christa
    Codeur.se
    • Date d'inscription : 27/10/2018
    • Messages : 1171
    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 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é 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 ?:
    J'aurais donc utilisé un paragraphe. Mais bon, en soi, c'est pas une erreur, je suis juste vieille et grincheuse et on code pour des forums, pas pour des sites professionnels.

    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 [Facile] Exercice 5 - Fiche - Batty Rwns
    Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
    Illustration avatar ©YuumeiArt | Voir l'original
    [Facile] Exercice 5 - Fiche - Batty 7WZJTfh
    Sam 18 Mar 2023 - 11:04
    Contenu sponsorisé
      _______________
      Revenir en haut