Le Deal du moment : -20%

OCEANIC Ventilateur de pied digital – 50 W ...

Voir le deal

39.99 €

'Christa
Codeur.se

Messages :
1258

PointsCodes :
3963

Jeu 16 Juin 2022 - 9:15

Atelier #5 - Étudier les bases en créant une simple fiche

pour @Lumecyow

État des lieux

Objectif : Travailler sur les bases du codage orienté Forumactif avec la réalisation étape par étape d'une fiche simple.
Base de travail : Une maquette proposée par Lumecyow

Spoiler:

Demande : voir la demande de Lumecyow & voir la demande de Lili Rose

Edit : Suite à son absence imprévue, Lili Rose ne participera pas à l'atelier.

Pour commencer

Les notions utiles

Puisque l'essentiel de vos connaissances en codage reposent sur la fréquentation des LS, on va commencer par faire un peu le point sur les bases nécessaires. Direction donc le tutoriel d'introduction au codage pour commencer. Notez bien également le vocabulaire utilisé, vous devez au minimum comprendre ce qu'est un attribut HTML (en particulier les attributs style et class), ce qu'est une propriété CSS, et ce qu'est une classe CSS. Comprendre la différence entre les balises <div> et <span> vous sera également utile.

Vous allez avoir besoin de plusieurs propriétés CSS pour cette fiche. Même si vous connaissez probablement l'essentiel des propriétés classiques, je vous en fais la liste :
- color ;
- font-family ;
- font-size ;
- background-color ;
- text-align ;
- margin ;
- padding ;
- width ;
- height et/ou min-height ;
- overflow potentiellement.
A vous de vous aider soit de ce tutoriel ou bien de la Référence CSS du MDN pour étudier l'utilité de chacune de ces propriétés, ainsi que les valeurs qu'elles peuvent prendre.

Côté HTML, pour le moment on va partir du principe que vous codez pour des fiches postées sur Forumactif, ce qui est légèrement différent du "bon" HTML. On approfondira plus tard dans le cours pour faire un code plus respectueux des standards, pour le moment vous pourrez vous contenter des balises <div> et <span>, ainsi que de l'attribut style.
Si vous vous sentez le courage, vous pouvez explorer du côté de l'attribut class et de la balise <style>, mais on pourra séparer le style CSS du HTML plus tard (inutile de vous embrouiller trop vite, faites les choses à votre rythme).
En parlant d'embrouiller, si l'envie vous démange d'écrire <center> dans votre futur code, arrêtez ça tout de suite, cette balise est obsolète depuis plus de vingt ans et ne doit plus être utilisée.

La nuance entre "coder dans un message" et "coder une page HTML"

J'ai dit plus haut que coder des fiches postées sur FA, c'est différent du "bon" HTML. Je vais détailler un peu, même si c'est peut-être un peu compliqué, accrochez vous ! Ordi

Quand vous postez un message sur Forumactif, le texte (et le BBcode) que vous envoyez à Forumactif est "décodé/recodé" par Forumactif pour son affichage dans un sujet. Par exemple, si vous écrivez quelque chose comme [b]Un texte[/b], Forumactif va le traduire par <strong>Un texte</strong> pour l'affichage final du message (oui parce que votre navigateur il n'y comprend rien au BBCode, c'est juste un language spécifique aux forums XD).

Du coup, lorsque vous codez une fiche, vous pouvez parfaitement utiliser du BBCode et du HTML sans que ça plante. C'est utile pour essayer de faire un code aussi simple que possible à utiliser pour les débutants. Par exemple, c'est beaucoup plus simple d'écrire [img]http://via.placeholder.com/250x150.png[/img] que :

Code:: <img src="http://via.placeholder.com/250x150.png" alt="Description de l'image">

Mais cet aspect pratique du code dans les messages va créer deux problèmes.

Le premier problème, c'est que vous devez apprendre à faire la différence entre le BBCode (qui marche dans les messages/descriptions du forum) et le HTML (qui marchera partout où le HTML est accepté). Certains codeurs n'aiment pas mélanger HTML et BBCode dans une fiche pour éviter aux gens d'avoir de mauvaises habitudes, j'ai tendance à être un peu plus ouverte à cette pratique tant qu'elle est destinée à rendre un code plus lisible pour les débutants.

Le deuxième problème, et c'est le plus compliqué à intégrer pour les débutants (et même pour les codeurs plus confirmés XD), c'est que quand vous sautez une ligne dans un message, Forumactif va automatiquement remplacer ce saut de ligne par la balise <br> à l'affichage.

Du coup, vous, vous voyez ça :

Code:: Un message sur Forumactif. Avec un saut de ligne entre la première et la deuxième ligne.

Mais le navigateur, lui, il reçoit ça :

Code:: Un message sur Forumactif.<br><br>Avec un saut de ligne entre la première et la deuxième ligne.

Il y a deux sauts de ligne <br> parce qu'on est passé à la ligne juste après "Un message sur Forumactif.", mais également une deuxième fois pour laisser une ligne vide.

Dans du HTML "pur", par exemple si vous codez une page HTML à part, vous aurez beau sauter toutes les lignes que vous voulez, l'affichage final restera :

Code:: Un message sur Forumactif. Avec un saut de ligne entre la première et la deuxième ligne.

C'est très important de bien réaliser cette caractéristique des messages, car si, plus tard, vous comptez vous attaquer au codage de pages d'accueil de forums ou de pages HTML à part, le comportement de votre code sera différent.

Vous avez bien suivi ?

C'est le bon moment pour poser vos questions si vous vous sentez un peu trop larguées, c'est important qu'on mette en place des bases solides dès le départ. Prennez le temps de bien lire les tutoriels et ressources données, et si vous n'arrivez pas à trouver de complément d'information sur un détail, n'hésitez pas à me demander des éclaircissements.

epicode

[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 14n2

[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche Rwns

Merci à @Artemis pour ces magnifiques "petits quelque chose" <3

Lumecyow
Ancien.ne du staff

Messages :
365

PointsCodes :
796

Ven 17 Juin 2022 - 21:15

Alors déjà, bonjour, et merci de nous laisser de ta science pour grandir en codage, c'est d'une grande générosité Coeur 2

Ensuite, je n'ai pas de questions qui me vienne, le tuto sur Epicode est très complet, clair et compréhensible je trouve, je n'arriverais pas à me rappeler de tout ce que j'ai lu en une fois haha mais je suppose que c'est normal, je pense néanmoins avoir compris le principal, comme la différence entre attribut style et attribut class, la différence entre div et span, et ce qu'est une propriété CSS et une classe CSS, comme tu l'as demandé !

A force de pratiquer et de relire, le reste finira par rentrer [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 1731648622

[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 1731648622

'Christa
Codeur.se

Messages :
1258

PointsCodes :
3963

Mar 21 Juin 2022 - 20:17

Alors, je vois que Lili ne s'est pas connectée depuis jeudi dernier (avant que je poste ce sujet) du coup pour éviter quand même de laisser le cours trop trainer, je vais passer directement à la suite. Quand tu pourras venir Lili n'hésite pas à poser tes questions si tu en as besoin.

Pour la suite du cours, je vais vous demander à toutes les deux de proposer des codes pour chaque élément de la fiche. Histoire de pouvoir réfléchir chacune de votre côté sans vous laisser influencer par votre camarade de cours, pensez à mettre vos réponses entre balises [spoiler] et [/spoiler] (et, bien sûr, vos fragments de code entre balises [code] et [/code]).

Commençons par les choses simples : En vous basant sur ce que vous avez déjà vu par le passé, essayez de coder la ligne de titre, en utilisant la balise HTML <div> avec l'attribut style.
- Observez bien ce texte : il est centré, il est écrit plutôt gros, il a une police d'écriture qui sort de l'ordinaire, il a une couleur spécifique (#a6a6d2 pour la couleur hexadécimale). Déduisez-en les propriétés CSS nécessaires pour son rendu.
- Si vous savez utiliser une police Google, vous pouvez aller en chercher une si ça vous amuse, sinon, contentez-vous d'une police d'écriture simple ;)

Merci à @Artemis pour ces magnifiques "petits quelque chose" <3

Lumecyow
Ancien.ne du staff

Messages :
365

PointsCodes :
796

Jeu 23 Juin 2022 - 10:50

Alors, ça m'aura quand même pris un bon vingt-minute et plusieurs oubli de point virgules, mais je crois que ça y est [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 2702986051

[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 2702986051

Spoiler:

Si jamais Lili, la police c'est celle-là sur gg font: https://fonts.google.com/specimen/Lobster [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 3775839356

[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 3775839356

'Christa
Codeur.se

Messages :
1258

PointsCodes :
3963

Jeu 23 Juin 2022 - 14:10

Alors, ça commence plutôt bien, mais est-ce que tu as vérifié le rendu sur un message de test, ou en prévisualisation ? Tu te rendras compte que ça ne marche pas tout à fait comme prévu, mais pourquoi ? Indice : relis attentivement mon message d'introduction XD

Autre détail important, ton usage de la balise <head> n'est pas adapté. Elle sert lorsqu'on crée un document HTML complet, et techniquement, quand tu te trouves sur un forum, elle existe déjà dans le code qui sert à afficher toute la page (fais toi peur, fais un clic droit, code source de la page, et regarde la tambouille illisible générée par Forumactif). Je vais éviter de trop partir dans les détails pour ne pas t'embrouiller, mais en résumé, si tu codes à l'intérieur d'un message, pas de balises <head>, <body> ou <html>.

Merci à @Artemis pour ces magnifiques "petits quelque chose" <3

Lumecyow
Ancien.ne du staff

Messages :
365

PointsCodes :
796

Jeu 23 Juin 2022 - 17:49

Aaaaah non, j'étais resté sur codepen et du coup c'était bon là bas j'ai pas pensé à tester ;;
Normalement là c'est bon:

Spoiler:

'Christa
Codeur.se

Messages :
1258

PointsCodes :
3963

Jeu 23 Juin 2022 - 18:12

Codepen gère le code HTML comme du HTML standard, oui. Donc les sauts de ligne dans un code "normal" ne sont pas pris en compte. C'est quand tu colles ce code dans un message que Forumactif prend le relais et interprète ce que tu écris comme un message (oui, même quand il contient du HTML). Et donc, tous les sauts de ligne sont pris en compte (sauf si on les commente !). D'où mon insistance sur la différence entre coder dans un message, et coder dans une page HTML :p

Très bon début en tout cas. Je vais laisser à Lili le temps d'émerger du trou dans lequel elle est tombée (tu as jusqu'à jeudi prochain @Lili Rose) avant de passer à la suite :p

Merci à @Artemis pour ces magnifiques "petits quelque chose" <3

'Christa
Codeur.se

Messages :
1258

PointsCodes :
3963

Ven 1 Juil 2022 - 10:29

Nous sommes donc vendredi premier juillet et la date limite est passée, passons donc à la suite, Lili ayant disparu corps et biens dans les affres de la vie IRL.

Nous disions donc, bon début, Lumecyow. J'ai tendance à préférer utiliser l'option d'importation des polices d'écriture avec <link> parce que l'option CSS utilise @import qui, si on codait proprement, devrait être avant toute autre forme de CSS. Tu vas me dire qu'il n'y a pas d'autre CSS dans ton code, mais c'est sans prendre en compte celui qui permet au forum d'avoir son apparence actuelle XD

Les deux méthodes fonctionnent cependant, donc à moins d'être confrontée à un gros bug ou un changement de fonctionnement des navigateurs, je suppose que tu peux faire ce que tu préfères à l'avenir.

La suite maintenant ! Penchons-nous sur le sous-titre. Pour le titre, je t'ai dit quels éléments étaient importants à prendre en compte pour en déduire les propriétés CSS, cette fois-ci je te laisse y réfléchir par toi-même.

On reste simple cette fois toujours (à la fin du cours si tu te sens d'attaque je t'expliquerai comment mieux coder XD), donc utilise la balise <div> avec l'attribut style.

Merci à @Artemis pour ces magnifiques "petits quelque chose" <3

Lumecyow
Ancien.ne du staff

Messages :
365

PointsCodes :
796

Sam 2 Juil 2022 - 10:12

J'avoue avoir fait cette méthode car je l'ai pas mal vue à force d'utiliser des codes rs, donc elle m'était familière, mais je ne suis pas contre faire tout bien tout sémantique !! Au contraire je préfère encore apprendre à faire bien dès le début, comme ça je n'aurais pas d'habitude à changer later down the road !
Du coup j'ai changé ça ( et j'ai testé cette fois en faisant prévisualiser ici, et normalement c'est bon ! )

J'ai rajouté le sous-titre ! Je savais plus du tout quel police j'avais prise du coup je suis allée en chercher une qui me plaisait bien sur gg font et je l'ai prise en italique parce que je trouvais ça joli. Voilà le code so far:

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=Lobster&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap" rel="stylesheet"> <div style="font-family: 'Lobster', cursive; color:#a6a6d2; text-align:center; font-size:55px">Titre du Rp</div> <div style="font-family: 'Playfair Display', serif; background-size 350px 30px; background-color:#a6a6d2; color:white; text-align:center; font-size:20px">petite citation plus ou moins longue qui fait joli.</div>

Par contre, à mon avis toi tu vas le voir de suite, mais j'ai un problème xD
Je n'arrive pas à faire en sorte que le background du sous titre soit plus " long ". Les lettres dépassent du cadre violet, et j'aimerais qu'elles restent à l'intérieur, d'où mon essaie du " background-size 350px 30px; " mais ça ne change rien ? A mon avis la solution est simple et tu dois rire doucement derrière ton écran mais j'y arrive pas xD

'Christa
Codeur.se

Messages :
1258

PointsCodes :
3963

Sam 2 Juil 2022 - 10:29

Bien joué ! Alors sur mon écran (firefox) le fond du sous-titre fait bien toute la largeur de l'espace disponible. Quand tu n'indiques pas de largeur à un élément <div>, le bloc prendra tout l'espace disponible. Donc la couleur de fond, forcément, occupera tout l'espace du bloc.

Je suppose, cependant, que tu parles du fait que les lettres dépassent sur la hauteur (c'est normal, même si pénible). Je t'invite à te renseigner sur comment fonctionne la propriété CSS raccourcie padding et ses collègues padding-top, padding-right, padding-bottom et padding-left (le MDN a réponse à presque tout). N'oublie pas de me poser des questions si quelque chose t'échappe :p

(Et tu peux retirer la propriété background-size, elle n'est pas utile ici)

Merci à @Artemis pour ces magnifiques "petits quelque chose" <3

Lumecyow
Ancien.ne du staff

Messages :
365

PointsCodes :
796

Sam 2 Juil 2022 - 11:36

Aaaah c'est donc avec ce fameux padding que j'arrange ça, je pensais que vu que pour la couleur c'était backgroud-color, pour gérer sa taille et tout ce serait forcément background-size, my bad.
Merci de ton petit lien qui du coup m'a aidé à arranger ce qui me titillais hihi, du coup ça donne ça:

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=Lobster&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap" rel="stylesheet"> <div style="font-family: 'Lobster', cursive; color:#a6a6d2; text-align:center; font-size:55px">Titre du Rp</div> <div style="font-family: 'Playfair Display', serif; padding:5px; background-color:#a6a6d2; color:white; text-align:center; font-size:20px">petite citation plus ou moins longue qui fait joli.</div>

'Christa
Codeur.se

Messages :
1258

PointsCodes :
3963

Sam 2 Juil 2022 - 13:01

Ca prend forme !

Une petite remarque cependant, Google Fonts donne généralement un lien "collectif" quand tu sélectionnes plus d'une seule police. Donc plutôt que tes deux balises d'importation (autres que les preconnect) :

Code:: <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap" rel="stylesheet">

Google te donnera plutôt celle-ci :

Code:: <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Playfair+Display:ital@0;1&display=swap" rel="stylesheet">

Je vois en tout cas que tu ne t'es pas laissée impressionner par Google et que tu as pensé à retirer les sauts de ligne XD

On va s'attaquer à plus compliqué maintenant. Le texte de base, ça va ça se gère. Maintenant on va s'attaquer aux blocs de contenu. Commençons par faire rentrer tout ça dans un bloc conteneur. Comment est-ce que tu coderais le bloc noir qui englobe le tout, en te basant sur ce que tu sais faire ? Qu'est ce qui te fait douter, si doute il y a ?

Merci à @Artemis pour ces magnifiques "petits quelque chose" <3

Lumecyow
Ancien.ne du staff

Messages :
365

PointsCodes :
796

Sam 2 Juil 2022 - 13:35

J'arriverais à dompter les obstacles pour enfin arriver à coder ( au moins un peu ) hehe musique

Alors là, je t'avoue que de tête je suis vraiment une bille ( en plus j'ai très mauvaise mémoire), tout ce que j'ai codé avec toi jusqu'ici je me suis aidée du MDN ( une pépite ce site merci de l'avoir partagé ). Ce que je saurais te dire comme ça c'est que ça va finir par être une balise div d'attribut "class" je pense, mais il faut déjà définir " class " grâce à l'attribut " style ".. ? Je crois ? [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 3482194067

[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 3482194067

( si c'est pas du tout ça désolée ;; )

Sinon du coup j'ai bien modifié ce que tu m'as dit, j'y avait pas du tout pensé:

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=Lobster&family=Playfair+Display:ital@0;1&display=swap" rel="stylesheet"> <div style="font-family: 'Lobster', cursive; color:#a6a6d2; text-align:center; font-size:55px">Titre du Rp</div> <div style="font-family: 'Playfair Display', serif; padding:5px; background-color:#a6a6d2; color:white; text-align:center; font-size:20px">petite citation plus ou moins longue qui fait joli.</div>

'Christa
Codeur.se

Messages :
1258

PointsCodes :
3963

Dim 3 Juil 2022 - 14:46

(pourquoi j'ai pas vu ta réponse hier, ce mystère...)

Pour le moment on va rester sur la balise <div> avec l'attribut style. (On potassera sur les classes et la feuille de style plus tard)

Pour le petit rappel, les attributs, ce sont des "options" des balises HTML. Ce qu'on fait avec l'attribut style, c'est qu'on code des effets de... style (surprise), directement sur un élément (une balise) HTML spécifique dans le code.

Cette fois-ci au lieu d'avoir des titres, tu veux une boite à l'intérieur de laquelle tu vas mettre tes deux titres (pour commencer). Elle doit avoir une couleur de fond, elle doit être potentiellement d'une certaine largeur, et ça serait certainement plus esthétique si elle était centrée. Ca serait également mieux si cette boite s'agrandissait avec le contenu textuel qu'elle contient, donc il vaut mieux éviter de lui fixer une hauteur.

Pour centrer horizontalement un bloc en CSS, on utilise des marges automatiques à droite et à gauche. Si tu n'as pas besoin de marges supérieures et inférieures, la méthode la plus traditionnelle consistera à écrire margin:auto;.
Un élément de type bloc ne peut être "centré horizontalement" que s'il a une largeur fixée, sinon il prendra automatiquement toute la largeur disponible.

Merci à @Artemis pour ces magnifiques "petits quelque chose" <3

Lumecyow
Ancien.ne du staff

Messages :
365

PointsCodes :
796

Mar 5 Juil 2022 - 22:13

( t'inquiètes pas hihi )
Alors euh, j'ai tenté de mettre le texte direct, mais comment dire.. je pense que le code parle de lui-même pour toi ;;;; xD
Je n'arrive pas à faire de saut de ligne dans le paragraphe, et j'ai essayé de faire un bloc violet du coup mais quand j'ai tenté ça a juste mis tout le reste en violet même en essayant border:Xpx ou padding:Xpx [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 2979024130

[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 2979024130

Professeure 'Christa mets moi sur la voie [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 3482194067

Code:: <div style="display:block; width:350px; margin:auto; background-color:#2A2A2A; color:white"><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=Lobster&family=Playfair+Display:ital@0;1&display=swap" rel="stylesheet"> <div style="font-family: 'Lobster', cursive; color:#a6a6d2; text-align:center; font-size:55px">Titre du Rp</div> <div style="font-family: 'Playfair Display', serif; padding:5px; background-color:#a6a6d2; color:white; text-align:center; font-size:14px">petite citation plus ou moins longue qui fait joli.</div><br>Another head hangs lowly Child is slowly taken And the violence, caused such silence Who are we mistaken? But you see, it's not me It's not my family In your head, in your head, they are fighting With their tanks, and their bombs And their bombs, and their guns In your head, in your head they are crying In your head, in your head Zombie, zombie, zombie-ie-ie What's in your head, in your head Zombie, zombie, zombie-ie-ie, oh</div>

'Christa
Codeur.se

Messages :
1258

PointsCodes :
3963

Mer 6 Juil 2022 - 14:39

Ben quoi, ça rend bien là pour commencer. Je n'avais pas dit de s'attaquer au bloc de contenu du texte, donc niveau "conteneur noir" tu as réussi à t'en sortir :)

Par "convention" (considérant que techniquement ce n'est pas très propre de mettre les balises <link> dans un message, mais partant du principe que tu n'as pas accès au CSS du forum c'est la seule solution) c'est mieux de rassembler tous les imports/CSS (balises <link> ou - plus tard - balises <style>) avant ou après le code plutôt que "dedans".

Qu'est ce que tu veux dire par "saut de ligne dans le paragraphe" ?

Merci à @Artemis pour ces magnifiques "petits quelque chose" <3

Lumecyow
Ancien.ne du staff

Messages :
365

PointsCodes :
796

Mer 6 Juil 2022 - 16:42

Aaaaah nevermind c'est moi, j'avais encore oublié de tester le code ici et du coup vu que les sauts de lignes sont pas pris en compte sur codepen.. bref c'est rien c'est moi xD

Alooors, comme ça, ça devrait être bon les balises link !

Code:: <div style="display:block; width:350px; margin:auto; background-color:#2A2A2A; color:white"> <div style="font-family: 'Lobster', cursive; color:#a6a6d2; text-align:center; font-size:55px">Titre du Rp</div> <div style="font-family: 'Playfair Display', serif; padding:5px; background-color:#a6a6d2; color:white; text-align:center; font-size:14px">petite citation plus ou moins longue qui fait joli.</div><br>Another head hangs lowly Child is slowly taken And the violence, caused such silence Who are we mistaken? But you see, it's not me It's not my family In your head, in your head, they are fighting With their tanks, and their bombs And their bombs, and their guns In your head, in your head they are crying In your head, in your head Zombie, zombie, zombie-ie-ie What's in your head, in your head Zombie, zombie, zombie-ie-ie, oh </div> <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=Lobster&family=Playfair+Display:ital@0;1&display=swap" rel="stylesheet">

'Christa
Codeur.se

Messages :
1258

PointsCodes :
3963

Mer 6 Juil 2022 - 18:17

Ca finira par rentrer le coup des sauts de ligne, c'est pour ça que j'ai dit que même les personnes expérimentées avaient du mal avec ça XD C'est pas intuitif si t'as appris à coder normalement, et c'est pas intuitif si t'as appris à coder sur FA.

Bon, tu as remis des sauts de ligne au niveau des importations (ça risque de laisser un blanc disgracieux sous le message du coup), mais c'est pas une erreur donc on passe à la suite.

Maintenant, on va avoir besoin d'une "boite dans la boite", à savoir le bloc bleu destiné au texte à l'intérieur. Histoire de t'apprendre les bonnes méthodes dès le départ, je te le dis d'avance : tu n'utiliseras PAS la propriété width. Tu auras besoin des marges internes (padding) et externes (margin) pour avoir un rendu qui soit agréable à l'oeil.

Comme pour le reste, dégaine la balise <div> équipée de l'attribut style et vois ce que tu parviens à faire par toi-même.

Merci à @Artemis pour ces magnifiques "petits quelque chose" <3

Lumecyow
Ancien.ne du staff

Messages :
365

PointsCodes :
796

Mer 6 Juil 2022 - 19:36

Oups, voilà j'ai enlevé les sauts de ligne !
Alors au fur et à mesure que j'ajoutais, je trouvais la fiche rp petite en terme de largeur, du coup j'ai rajouté un peu hihi.
Du coup j'ai réussi à faire ça:
Ca s'affiche bien sur codepen, mais ici j'arrive pas à trouver ce que j'ai fait de pas bien pour que le titre soit comme ça ;; ( désolée si c'est un truc simple ça fait vingt minutes je change des trucs et ça veut paaaaas )

Titre du Rp

petite citation plus ou moins longue qui fait joli.

Another head hangs lowly
Child is slowly taken
And the violence, caused such silence
Who are we mistaken?
But you see, it's not me
It's not my family
In your head, in your head, they are fighting
With their tanks, and their bombs
And their bombs, and their guns
In your head, in your head they are crying
In your head, in your head
Zombie, zombie, zombie-ie-ie
What's in your head, in your head
Zombie, zombie, zombie-ie-ie, oh

Code:: <div style="display:block; width:450px; margin:auto; background-color:#2A2A2A; color:white"><div style="font-family: 'Lobster', cursive; color:#a6a6d2; text-align:center; font-size:55px">Titre du Rp</div><div style="font-family: 'Playfair Display', serif; padding:5px; background-color:#a6a6d2; color:white; text-align:center; font-size:14px">petite citation plus ou moins longue qui fait joli.</div><div style="padding:10px; margin: 20px 50px 20px; background-color:#a6a6d2"><br>Another head hangs lowly Child is slowly taken And the violence, caused such silence Who are we mistaken? But you see, it's not me It's not my family In your head, in your head, they are fighting With their tanks, and their bombs And their bombs, and their guns In your head, in your head they are crying In your head, in your head Zombie, zombie, zombie-ie-ie What's in your head, in your head Zombie, zombie, zombie-ie-ie, oh</div></div><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=Lobster&family=Playfair+Display:ital@0;1&display=swap" rel="stylesheet">

'Christa
Codeur.se

Messages :
1258

PointsCodes :
3963

Jeu 7 Juil 2022 - 9:30

Plop @Lumecyow !

Alors pas de panique, tu n'as pas fait d'erreur et tu ne pouvais pas savoir ! Au contraire, ton code est très bien, ne t'en fais pas.

Mais du coup, que se passe-t-il ?

Jusqu'ici, tu sautais une ligne avant et après le titre du RP, du coup tout se passait bien, visuellement.

Dans ton dernier code, par contre, il n'y a pas de saut de ligne avant et après ledit titre, et il occupe donc l'espace qui lui est assigné. Cependant... cet espace est suspicieusement petit en hauteur. Mais que se passe-t-il ?

Il existe une propriété CSS qui s'appelle line-height, qui comme son nom l'indique sert à fixer la hauteur d'une ligne de texte. Sur Forumactif, du moins sur ModernBB, elle est réglée par défaut dans les messages pour correspondre à la taille du texte des messages, ou plus exactement un peu plus, à savoir 1.4em, ou 140% (c'est plus facile à lire quand il y a de l'espace entre les lignes XD). Sauf que bon, 140% de 13px, ça fait 18.2, soit largement moins que 55px.

Il existe plusieurs unités de taille de police, dont les fameux pixels px mais également l'unité em. Pour résumer de façon simple, l'unité em est une taille relative par rapport à une dimension précédemment fixée. Par exemple si tu indiques qu'un élément doit contenir du texte de taille 20px, puis que ses éléments enfants (c'est à dire les éléments à l'intérieur) font 0.8em, leur taille de police en pixels sera de 0.8*20px, soit 16px. (voir l'article du MDN sur la propriété font-size, oui c'est celui en anglais parce que la page en français contient encore des infos obsolètes)

Si on voulait faire les choses bien, il faudrait privilégier les valeurs en em quand il s'agit de définir une taille de police, histoire que l'intégralité des polices d'écriture d'un site soit relative à celle de base définie par l'utilisateur. Sauf que beaucoup de sites ne font pas ça, dont Forumactif.

Si tu souhaites tester, vas sur n'importe quelle page du MDN, change les réglages de taille de police de ton navigateur (pas le zoom, hein, la taille de police) et regarde le résultat XD Et puis regarde Epicode : zéro changement.

Les dimensions en em sont relatives à une taille fixée auparavant, et on s'en sert principalement pour les dimensions d'un texte.

Tu aurais découvert ce problème plus vite si ton texte avait fait deux lignes de hauteur XD

Titre du Rp avec un peu plus de contenu juste pour voir ce qui se passe exactement

Wow, dur à lire.

Bon, du coup, quelle est la solution ? La plus simple, quand tu cherches à écrire un texte d'une taille supérieure (ou inférieure) à celle de base de forumactif, c'est généralement de rajouter line-height:1em, voire une valeur un peu plus grande (ou petite, même si je déconseille, la lisibilité c'est sacré) pour avoir un espacement plus esthétique entre les lignes.

Titre du Rp avec un line-height de 1

Titre du Rp avec un line-height de 1.4

Partant de là, est-ce que tu peux revoir ton code en fonction de ce que tu viens d'apprendre ? :3 (et si tu n'as pas compris, n'oublie pas, les questions c'est le bien).

Merci à @Artemis pour ces magnifiques "petits quelque chose" <3

Lumecyow
Ancien.ne du staff

Messages :
365

PointsCodes :
796

Dim 10 Juil 2022 - 7:48

Oooooh d'accord ! Donc c'est pas moi qui était complètement stupide ça va xD
Alors du coup j'ai rajouté la petite propriétés parmi les valeurs à prendre en compte et ça y est ça marche hihi [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 2691722282

[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 2691722282

Du coup si je comprends bien, rien ne change ici car toutes les valeurs sont en px, alors que sur le site du MDN, tout est en em ? Tu m'as appris ce que ça voulait dire car je t'avoue que je voyais 1em dans les unités de mesure proposées sur le MDN pour les polices ou des valeurs de blocs mais je comprenais pas ce que c'était sensé vouloir dire xD Merci !!

Code:: <div style="display:block; width:450px; margin:auto; background-color:#2A2A2A; color:white"><div style="font-family: 'Lobster', cursive; color:#a6a6d2; text-align:center; font-size:55px; line-height:60px">Titre du Rp</div><div style="font-family: 'Playfair Display', serif; padding:5px; background-color:#a6a6d2; color:white; text-align:center; font-size:14px">petite citation plus ou moins longue qui fait joli.</div><div style="padding:10px; margin: 20px 50px 20px; background-color:#a6a6d2"><br>Another head hangs lowly Child is slowly taken And the violence, caused such silence Who are we mistaken? But you see, it's not me It's not my family In your head, in your head, they are fighting With their tanks, and their bombs And their bombs, and their guns In your head, in your head they are crying In your head, in your head Zombie, zombie, zombie-ie-ie What's in your head, in your head Zombie, zombie, zombie-ie-ie, oh</div></div><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=Lobster&family=Playfair+Display:ital@0;1&display=swap" rel="stylesheet">

'Christa
Codeur.se

Messages :
1258

PointsCodes :
3963

Dim 10 Juil 2022 - 14:05

Du coup si je comprends bien, rien ne change ici car toutes les valeurs sont en px, alors que sur le site du MDN, tout est en em ?

C'est ça, tout est fixé sur Epicode à quelques détails près, donc même si on change la police d'écriture du navigateur ben 13px ça reste 13px. Sur le MDN, qui a fortement intérêt à montrer l'exemple, les tailles d'écriture sont données avec des dimensions relatives donc l'utilisateur final peut décider de s'il veut du texte plus gros ou pas.

Les dimensions données en em sont "relatives" (ou proportionnelles) à une dimension donnée précédemment. Les dimensions données en pixel sont fixes. Si tu souhaites faire un code qui s'adapte à tous les écrans, et les réglages navigateurs, c'est généralement mieux d'essayer d'utiliser des unités de longueur relatives. Histoire de te compliquer la vie, leur utilisation varie en fonction de tes besoins. Je ne peux pas vraiment dire "pour telle chose tu utiliseras tel type de dimensions", parce que ça se décide différemment selon l'endroit où tu appliques tes propriétés CSS (genre tu définis une valeur pour tout le site, et puis ensuite le reste des valeurs se définit par rapport à celle donnée au départ. C'est compliqué, tu peux ignorer ce que je viens de te raconter, ce n'est pas important pour toi pour le moment).

Pourquoi as-tu préféré utiliser line-height : 60px plutôt qu'un line-height:1.1em ? Est-ce que c'est parce que tu te sens plus à l'aise avec des pixels fixes ? Est-ce que ces valeurs fixes sont importantes pour le rendu final ?

Beaucoup de débutants et de moins débutants ont tendance à vouloir à tout prix utiliser des pixels, mais en cette ère où les gens surfent sur internet via téléphone, tablette et autres, il n'y a rien de plus traitre que de coder au pixel près, vu que le rendu sera plus ou moins esthétique et lisible selon l'écran de l'utilisateur XD. Raison pour laquelle je te conseillerai toujours d'essayer de limiter au maximum ta dépendance aux pixels.

Merci à @Artemis pour ces magnifiques "petits quelque chose" <3

Lumecyow
Ancien.ne du staff

Messages :
365

PointsCodes :
796

Dim 10 Juil 2022 - 14:31

Merci pour toutes tes explications c'était très clair et ça m'aide pour mieux comprendre qu'est-ce qui sert à quoi et pourquoi !

Ah et pour le coup non c'était juste par habitude de quand je modifie des codes car je connaissais pas les em avant que tu ne me fasses découvrir, du coup mon cerveau est parti en pixels directe et pas en em même si on venait tout juste d'en parler.. je suis un peu lente parfois xD
Je vais essayer d'y penser en premier mais ça va être ma première habitude à perdre so bear with me ;;

Code:: <div style="display:block; width:450px; margin:auto; background-color:#2A2A2A; color:white"><div style="font-family: 'Lobster', cursive; color:#a6a6d2; text-align:center; font-size:55px; line-height:1.1em">Titre du Rp</div><div style="font-family: 'Playfair Display', serif; padding:5px; background-color:#a6a6d2; color:white; text-align:center; font-size:14px">petite citation plus ou moins longue qui fait joli.</div><div style="padding:10px; margin: 20px 50px 20px; background-color:#a6a6d2"><br>Another head hangs lowly Child is slowly taken And the violence, caused such silence Who are we mistaken? But you see, it's not me It's not my family In your head, in your head, they are fighting With their tanks, and their bombs And their bombs, and their guns In your head, in your head they are crying In your head, in your head Zombie, zombie, zombie-ie-ie What's in your head, in your head Zombie, zombie, zombie-ie-ie, oh</div></div><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=Lobster&family=Playfair+Display:ital@0;1&display=swap" rel="stylesheet">

'Christa
Codeur.se

Messages :
1258

PointsCodes :
3963

Dim 10 Juil 2022 - 15:22

Bon, on n'a plus qu'une étape à franchir pour finir le premier jet de ta fiche, rajouter la petite ligne de crédit en bas :p Tu pourrais peut-être écrire "fiche par Lumecyow", avec un lien sur ton pseudo qui mène à épicode.

Pour le coup je ne dis rien du tout, je te laisse tenter par toi-même, en principe il n'y a rien de très compliqué (à première vue). En cas de souci, n'hésite pas à formuler tes griefs, que je te dépanne \o/

Merci à @Artemis pour ces magnifiques "petits quelque chose" <3

Lumecyow
Ancien.ne du staff

Messages :
365

PointsCodes :
796

Dim 10 Juil 2022 - 18:05

ALORS, du coup voilà c'est fait, j'ai juste mis mon pseudo car ça fait plus petit je trouve ça plus esthétique, MAIS j'ai quand même quelque chose qui me chiffonne, je n'arrive pas à faire en sorte que le lien soit d'une couleur définie. J'ai essayé font-color, color, ça prend toujours la couleur que prenne les liens par définition par forum mais du coup si la fiche end up sur un forum où les liens sont gris ou noir ça la fiche un peu ;;

Code:: <div style="display:block; width:450px; margin:auto; background-color:#2A2A2A; color:white"><div style="font-family: 'Lobster', cursive; color:#a6a6d2; text-align:center; font-size:55px; line-height:1.1em">Titre du Rp</div><div style="font-family: 'Playfair Display', serif; padding:5px; background-color:#a6a6d2; color:white; text-align:center; font-size:14px">petite citation plus ou moins longue qui fait joli.</div><div style="padding:10px; margin: 20px 50px 20px; background-color:#a6a6d2"><br>Another head hangs lowly Child is slowly taken And the violence, caused such silence Who are we mistaken? But you see, it's not me It's not my family In your head, in your head, they are fighting With their tanks, and their bombs And their bombs, and their guns In your head, in your head they are crying In your head, in your head Zombie, zombie, zombie-ie-ie What's in your head, in your head Zombie, zombie, zombie-ie-ie, oh</div><div style="font-size:10px; text-align:center"><a href="https://www.epicode-entraide.com/u5815">Lumecyow</a></div></div><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=Lobster&family=Playfair+Display:ital@0;1&display=swap" rel="stylesheet">

Contenu sponsorisé