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

Tu gères \o/

Alors oui, pour le lien, c'est le moment d'apprendre un nouveau détail : l'attribut style est un attribut universel. Tu peux donc l'utiliser sur tous les éléments HTML... donc, entre autres, dans la balise <a>. Si tu ne définis pas un style sur le lien, effectivement, il aura la couleur par défaut.

Deux petites choses que je souhaite mentionner avant de poursuivre :
- Tu souhaites que tes crédits aient une taille de police plus petite que le reste de la fiche. Plutôt que de mettre 10px, j'ai tendance à écrire font-size:0.9em;, comme ça, ça reste proportionnellement un texte plus petit que le reste, sans forcément devoir être minuscule XD
- Tous les codeurs ne seront pas d'accord avec moi sur ce point, mais j'ai tendance à accepter le BBCode dans tous les codes destinés à être utilisés sous forme de message. Tu pouvais donc parfaitement utiliser [url=https://www.epicode-entraide.com/u5815]Lumecyow[/url]. En soi, c'est très bien que tu aies utilisé la balise de lien, mais ne psychote pas trop si tu utilises du BBCode dans une fiche, ce n'est pas grave (ça sera utile plus tard pour les images ou l'utilisation du gras/italiques par exemple).

Bon, ceci étant dit, ce code est bien joli, mais il est un peu chiant à personnaliser, non ? Trouver "Titre du RP" dans tout ce fatras, c'est compliqué. Si on le simplifiait ?

C'est l'heure de remplacer nos attributs style par des attributs class et de commencer à s'intéresser au pouvoir des feuilles de style.

C'est le moment de relire le cours que j'avais mentionné au départ, et de cogiter à comment procéder. A première vue, est-ce que tu as une idée de comment transformer tes "styles" en "classes" ? (Tu peux répondre non, tant que tu y réfléchis plus de cinq minutes d'abord XD)

OOh d'accord je vois ! J'ai réussi à changer la couleur du coup hihi

Alors déjà ça y est j'ai mis 0.9em, j'y avais encore une fois pas pensé ;;
Pour le bbcode en vrai généralement je ne me gêne pas xD Mais là je voulais essayer de faire ça bien ! D'ailleurs moi j'avais mis link href au début et j'ai mis vingt bonne minutes à me rappeler que c'est a href.. Les habitudes finiront par rentrer xD ( en même temps c'est un lien que je voulais mettre alors le link me semblait logique et ça aurait dû être ça d'ailleurs non mais du coup ça m'a brain un moment )

Par contre avant de faire les class et tout, je rencontre un problème, quand je fais ça:

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><a style="text-align:center; font-size:0.8em; color:white; opacity:50%"href="https://www.epicode-entraide.com/u5815">Lumecyow</a></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">

Le lien n'est pas centré alors qu'il y a bien le text-align:center ?

J'arrive à garder le link au milieu qu'en gardant la balise div avec l'attribut style comme ça:

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="text-align:center"><a style="font-size:0.8em; color:white; opacity:50%"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">

C'est moi qui voit pas une bêtise ouuuuu, je suis perdue là dessus ? o.o

Ahah, c'est normal XD

Les ancres (les fameux liens, a comme "anchor" il me semble) sont des éléments inline, c'est à dire qu'ils sont "dans le flux", ou plus prosaïquement c'est comme une mise en forme, quand tu mets un texte en gras, en souligné, ou avec un lien, tu ne crées pas de nouveau bloc indépendant du précédent.

Or, les éléments inline ne peuvent pas être centrés (entre autres choses, d'autres propriétés ne s'y appliquent pas). Et donc par exemple si tu mets un seul mot dans une ligne en gras, même si tu lui dis de se centrer, il va rester sagement dans le flux. Tu as donc besoin de le placer dans un bloc dont le texte est centré.

Est ce que c'est assez clair ? (toujours difficile d'expliquer cette histoire de flux)

Hmmm je crois que j'ai compris. J'ai essayé de mettre les lettres au milieu mais ça ne marche pas il faut que je dise au " bloc " qui contient les lettres de les mettre au milieu, c'est ça ? Comme un entremetteur ?

Pour répondre à ce que je devais faire de base, il y a une fiche rp en ls sur un autre forum que j'utilise beaucoup, et il me semble que c'est quelque chose qui ressemble vaguement à ça le système de classe dessus:

Code:

<div class=NOM DE LA CLASSE POUR LE TITRE>Titre</div><div class=NOM DE LA CLASSE POUR LE SOUS TITRE>sous titre</div><div class=NOM DE LA CLASSE POUR LE TEXTE>texte</div><div class=POUR LE CREDIT>crédits</div>


.Nomdellaclasse1{ code code code }

Par contre si je dis pas de bêtises le " code code code " est pas exactement comme le code " doit " être de base ? Fin il me semble que c'est pleins d'espaces et de valeurs je sais pas trop si j'arrive à bien m'exprimer ;;
Mais du coup même avec ces infos je sais pas trop par où commencer.

Quelque temps plus tard

Alors je suis allée tester direct sans vérifier si j'avais raison et après deux trois coquilles ( j'avais mis les liens des polices dans la balise style du coup ça marchait pas, j'ai oublié de fermer la balise style au début du coup y avait rien qui marchait ) j'ai quasiment réussi !!!!!!!! Alors à l'écrit tu ne vois pas ma joie mais je suis trop contente de m'être rappelée comment faire ça de tête ça a refait ma journée
Par contre, j'ai quasiment réussi, donc j'ai quand même un petit problème que je n'arrive pas à régler, bon après je pourrais toujours mettre le [url=url]url[/url] mais je me demandais si y avait pas moyen de caser le lien de mon profil dans le code quand même ? J'arrive pas à le faire marcher, j'ai laissé le "href="https://www.epicode-entraide.com/u5815" tel quel de base mais ça ne marchait pas, donc j'ai essayé sans le http ( ne me demande pas pourquoi je sais pas mon cerveau s'est dit que ça marcherait peut-être jpp ) mais toujours pas, alors j'ai enlevé de href et j'ai mis link:www.epicode-entraide.com/u5815 mais toujours pas.. A l'aide professeure 'Crista ;;

Code:

<div class=Block><div class=Titre>Titre du rp</div><div class=SousTitre>petite citation jolie</div><div class=Texte>ici le rp j'ai la flemme d'aller récupérer un texte je l'avoue.</div><div class=Credits>Lumecyow</div></div>

<style>.Block {display:block; width:450px; margin:auto; background-color:#2A2A2A; color:white} .Titre {font-family: 'Lobster', cursive; color:#a6a6d2; text-align:center; font-size:55px; line-height:1.1em} .SousTitre {font-family: 'Playfair Display', serif; padding:5px; background-color:#a6a6d2; color:white; text-align:center; font-size:14px} .Texte {padding:10px; margin: 20px 50px 20px; background-color:#a6a6d2} .Credits {text-align:center; font-size:0.8em; color:white; opacity:50%; link:www.epicode-entraide.com/u5815}</style><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">

Hé bien, je ne m'attendais pas à ce que tu en fasses autant, c'est bien joué, tu peux être fière de toi

Hmmm je crois que j'ai compris. J'ai essayé de mettre les lettres au milieu mais ça ne marche pas il faut que je dise au " bloc " qui contient les lettres de les mettre au milieu, c'est ça ? Comme un entremetteur ?

Alors, c'est plutôt un conteneur, une boite XD Vois tes mots, images, liens, et autres éléments inline comme plein de petites billes posées les unes après les autres dans une boite. Quand tu veux centrer du texte (ou une image, ou un lien), tu vas dire à toutes les billes dans ta boite de rester bien au milieu.

Je veux dire, ça serait difficile de centrer quoi que ce soit sans élément de référence, non ? Quand quelque chose est centré, ou aligné à gauche, ou à droite, c'est forcément par rapport aux bords de l'objet qui le contient.

Bref, si tu veux qu'un bout de texte soit centré, il va falloir que la "boite" qui le contient dise "je veux que mon contenu soit centré". Sinon, ben le texte il va juste faire son petit bout de chemin avec les réglages de base.

Pas terrible ma métaphore. Un jour je trouverai ZE métaphore qui colle parfaitement.

Mais bref, si tu veux que tes crédits soient centrés, mais pas le reste du texte dans ta fiche, il faut placer les crédits dans leur boite à eux XD Et les éléments <div>, ce sont des éléments de type block, donc des boites (qui peuvent contenir d'autres boites ou des éléments "en ligne"). Tu apprendras avec le temps quel type d'élément HTML est un bloc et quel type d'élément HTML est un élément en ligne.

Venons-en à ta tentative de jouer avec les classes =D

Je t'invite à aller relire le tutoriel que j'ai donné au début, notamment le passage sur les attributs HTML. On notera juste avant cette partie du tutoriel qu'il y a également un petit passage qui souligne l'importance de la ponctuation, et donc des guillemets. Comme lorsque tu as utilisé l'attribut style, le nom des classes doit se trouver entre guillemets quand tu utilises l'attribut class.

Code:

<div class="monNomDeClasse"> ... </div>

Ensuite, le CSS c'est une mise en forme, une couche de peinture par-dessus ton contenu purement textuel. Un lien (ou plus précisément, une ancre) n'est pas un élément de décoration, c'est quelque chose de bien tangible. Si tu le retires du HTML, forcément, ça ne va plus marcher. Tu ne peux pas le mettre dans le CSS :o

Tu peux attribuer une classe à ton lien, comme ceci : <a href="url" class="classeDuLien"> texte du lien </a>

Cependant, compte tenu du fait que je t'ai dit qu'on pouvait se contenter d'utiliser [url=lien]Texte du lien[/url], ça pose problème parce qu'on ne peut pas vraiment rajouter une classe à une balise BBCode.

Pour ça, on entre dans un domaine plus complexe des feuilles de style CSS, les sélecteurs CSS. Mais pour le moment, on va laisser ça de côté, contente toi de l'utilisation de la balise HTML <a>.

Avec ces précisions, est-ce que tu penses pouvoir corriger un peu ton code ?

A force d'année je suis sûre que la métaphore parfaite finira par te venir xD

'Christa a écrit: Comme lorsque tu as utilisé l'attribut style, le nom des classes doit se trouver entre guillemets quand tu utilises l'attribut class.

Oulah j'avais complètement oublié ce détail, je rajoute ça de suite !

ALORS j'ai réussi, mais j'ai encore un problème xD
J'ai fait plusieurs essais, car en fait si j'enlevais les valeurs style dans le < a > ça s'affichait pas correctement, mais si je les laissais et que j'enlevais les valeurs dans la balise < style > tout en bas ça s'affichait pas correctement non plus ? Mais en laissant les deux ça marche.. C'est normal ? ou c'est moi qui merdouille sur quelque chose ?

Code:

<div class="Block"><div class="Titre">Titre du rp</div><div class="SousTitre">petite citation jolie</div><div class="Texte">ici le rp j'ai la flemme d'aller récupérer un texte je l'avoue.</div><div class="Credits"><a style="font-size:0.8em; color:white; opacity:50%"href="https://www.epicode-entraide.com/u5815">Lumecyow</a></div></div>

<style>.Block {display:block; width:450px; margin:auto; background-color:#2A2A2A; color:white} .Titre {font-family: 'Lobster', cursive; color:#a6a6d2; text-align:center; font-size:55px; line-height:1.1em} .SousTitre {font-family: 'Playfair Display', serif; padding:5px; background-color:#a6a6d2; color:white; text-align:center; font-size:14px} .Texte {padding:10px; margin: 20px 50px 20px; background-color:#a6a6d2} .Credits {text-align:center; font-size:0.8em; color:white; opacity:50%}</style><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">

Alors je ne suis pas sûre de comprendre ton raisonnement, mais [attention, métaphore en approche] lorsque tu utilises l'attribut style ou l'attribut class sur une balise, tu vas basiquement "peindre" cette balise et son contenu.

Du coup, nous avons ceci :

Code:

<div class="Credits"><a style="font-size:0.8em; color:white; opacity:50%"href="https://www.epicode-entraide.com/u5815">Lumecyow</a></div>

Un bloc (<div>) qui contient le texte de crédits, et ledit texte est constitué d'un simple lien (<a>).

La "peinture" sur l'élément <div> est la classe .Credits que tu as définie dans la feuille de style : Son contenu est un texte centré, de taille 0.8em, de couleur blanche, et d'opacité 0.5 (ou 50%).

La "peinture" sur l'élément <a>  est à la fois celle qui est appliquée par les réglages de forumactif sur tous les liens (juste une couleur) + ton style. Et du coup, redondance, tu demandes un texte de taille 0.8em (ce qui, d'ailleurs, va faire 0.8em de 0.8em, si tu as suivi mes explications sur les dimensions relatives XD Sachant que la police d'écriture des messages est de 13px, tu as demandé une police de 0.8em à l'intérieur du bloc, soit ~10px , puis une police de taille 0.8em dans le lien, soit ~8px), de couleur blanche, et d'opacité 0.5 (donc c'est encore la moitié de l'opacité précédente).

Si on veut faire les choses correctement, ou du moins "plus proprement", il faudrait simplement appliquer une classe au bloc de crédits, qui impose une taille de texte, une opacité et un texte centré, puis appliquer une autre classe spécifique sur le lien pour lui donner une couleur différente, vu que c'est le seul détail qui gêne...

Code:

<div class="Credits"><a href="tonlien" class="lienCredits">Lumecyow</a></div>

Code:

.Credits {
  text-align:center;
  font-size:0.8em;
  opacity:50%
}
.lienCredits {
  color:white;  /* on essaie de "forcer" le lien à avoir la couleur blanche */
}

Mais ça ne marche pas (du moins, avec l'attribut class, pas avec l'attribut style).

Voilà qui est fort saugrenu. Serait-ce un bug ? Est-ce la fin des haricots ?  

Nope, ce n'est pas un bug, c'est un comportement normal. Tout ce tracas est à cause d'un truc super compliqué mais qu'il faudra apprendre petit à petit : les sélecteurs, et la spécificité. Je pourrais t'inviter à lire l'article du MDN sur la cascade et l'héritage mais il est assez indigeste. Tu peux aussi tenter de lire les deux cours de ManuManu sur les principes des styles en cascade, l'ordre et héritage en CSS et le poids des déclarations (= la spécificité).

Si tu n'y comprends rien, c'est normal, c'est compliqué.

Pour résumer, il y a une histoire de "priorité" en CSS qui fait que plus une règle CSS est précise quand elle définit l'élément qu'elle cible, plus elle a de l'importance.

Du coup, si tu cibles une classe .lienCredits mais que Forumactif possède une règle CSS de la forme .content a {}, Forumactif donne une mise en forme à tous les éléments <a> présents dans un bloc avec la classe .content (les messages sous modernBB ont cette classe), c'est "plus précis", c'est le CSS de Forumactif qui gagne le bras de fer (c'est plus compliqué que ça mais c'est super chaud à expliquer, j'ai mis un temps fou à piger à l'époque où j'étais débutante XD).

Solution 1 : Te contenter d'utiliser l'attribut style dans la balise <a>, parce qu'il l'emporte toujours sur le CSS de la feuille de style (à une exception près)
Solution 2 : Ecrire une règle CSS plus précise, par exemple, totalement au hasard, .Credits a {}

Beaucoup de notions abordées dans ce message cette fois ci, et beaucoup de liens à lire, je te laisse cogiter et digérer tout ça et me poser tes questions @_@

Je vais lire tout ça, pour une raison que j’ignore, j’ai jamais eu la notification pardonnez moi du coup

Je poste et j'éditerai dans la soirée ou demain au plus tard, personnellement le temps de réponse va plus être du une fois par semaine voire une fois toutes les deux semaines pour l'instant, à cause d'un rythme de travail plutôt effréné en ce moment irl. J'aurais dû prévenir avant j'en suis désolée, je pensais pas que ce rythme durerait longtemps ;;;;
Voilà donc l'atelier m'intéresse toujours évidemment beaucoup je serais juste moins présente

Je double poste, finalement mon schedule en ce moment et ma fatigue mentale font que j'arrive pas trop à trouver le temps, quand je pourrais me remettre plainement dans le cours je préviendrais ça évitera de donner des dates dans le vent

Edit: mais si du coup je réponds d'un coup c'est que je dois avoir le temps et ma motiv d'un coup c'est normal

Bah écoute on met l'atelier en pause et tu reprends quand tu pourras \o/ Idéalement, à un moment où tu pourras être dispo sur la durée histoire de ne pas trop ruiner ton avancement par des pauses longues entre chaque exercice. N'hésite pas à relire un peu tout ça pour te rafraichir la mémoire si besoin ^^

Me revoilà, je peux enfin revenir en étant sûre de pouvoir répondre régulièrement, so si ton emploi du temps le permets aussi on peut reprendre ! Je vais quand même pas m'avancer de trop et te dire que je devrais répondre au moins une fois par semaine, une chose en entrainant une autre sûrement plus, des fois peut-être juste ça.
Bon j'ai relu l'intégralité du cours mais je pense que ça va me mettre un chouilla de temps à me remettre dans le bain haha, bear with me i'm sorry ;;
Je n'ai pas encore lu les cours de Manu, mais je crois que comprends un peu le truc haha, j'irais les lire sous peu tout de même !
Pour ce qui est du code, en le regardant j'ai beugué car je croyais qu'il restait des choses à faire pour el terminer, mais je crois qu'à part le fait que je voulais mettre le crédit en blanc ( au final je le trouve bien comme ça, il se voit mais il fait pas trop voyant, je pense laisser comme ça ) tout est fini ! A moins que je ne me trompe et qu'il y est des détails à faire encore c:

Code:

<div class="Block"><div class="Titre">Titre du rp</div><div class="SousTitre">petite citation jolie</div><div class="Texte">ici le rp j'ai la flemme d'aller récupérer un texte je l'avoue.</div><div class="Credits"><a style="font-size:0.8em; color:white; opacity:50%"href="https://www.epicode-entraide.com/u5815">Lumecyow</a></div></div>

<style>.Block {display:block; width:450px; margin:auto; background-color:#2A2A2A; color:white} .Titre {font-family: 'Lobster', cursive; color:#a6a6d2; text-align:center; font-size:55px; line-height:1.1em} .SousTitre {font-family: 'Playfair Display', serif; padding:5px; background-color:#a6a6d2; color:white; text-align:center; font-size:14px} .Texte {padding:10px; margin: 20px 50px 20px; background-color:#a6a6d2} .Credits {text-align:center; font-size:0.8em; color:white; opacity:50%}</style><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">

Salut @Lumecyow !

Moi aussi il faut que je me remette dans le bain, j'ai oublié ce que je t'ai expliqué et ce que je ne t'ai pas expliqué XD Voyons donc ce que tu as codé @o@

Voyons le visuel

Visuellement, d'abord, voyons ce que ça donne sur Epicode (donc sur ModernBB) :





Visiblement, c'est plutôt une franche réussite pour un premier essai, et tu as fait tout ça toute seule, alors tu peux totalement être fière de toi.

Voyons le code !

Maintenant, voyons si côté code il reste deux trois petits détails à approfondir. Je vais utiliser le pouvoir de mon logiciel pour décompresser le code pour le lire plus facilement :

Code:

<div class="Block">
    <div class="Titre">Titre du rp</div>
    <div class="SousTitre">petite citation jolie</div>
    <div class="Texte">ici le rp j'ai la flemme d'aller récupérer un texte je l'avoue.</div>
    <div class="Credits"><a style="font-size:0.8em; color:white; opacity:50%" href="https://www.epicode-entraide.com/u5815">Lumecyow</a></div>
</div>

<style>
    .Block {
        display: block;
        width: 450px;
        margin: auto;
        background-color: #2A2A2A;
        color: white
    }

    .Titre {
        font-family: 'Lobster', cursive;
        color: #a6a6d2;
        text-align: center;
        font-size: 55px;
        line-height: 1.1em
    }

    .SousTitre {
        font-family: 'Playfair Display', serif;
        padding: 5px;
        background-color: #a6a6d2;
        color: white;
        text-align: center;
        font-size: 14px
    }

    .Texte {
        padding: 10px;
        margin: 20px 50px 20px;
        background-color: #a6a6d2
    }

    .Credits {
        text-align: center;
        font-size: 0.8em;
        color: white;
        opacity: 50%
    }
</style>
<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">

Le code est propre et sans répétitions excessives, on a évité l'écueil classique des débutants consistant à mettre des largeurs partout quand des marges suffiraient parfaitement, c'est beau et c'est tout simple.

Reste donc un seul petit détail à voir, j'en avais parlé la dernière fois d'après ma relecture express de mes derniers messages.

Je parle de cette ligne dans la partie HTML de notre message :

Code:

<div class="Credits"><a style="font-size:0.8em; color:white; opacity:50%" href="https://www.epicode-entraide.com/u5815">Lumecyow</a></div>

Contrairement au reste de ton code, on utilise un attribut style quand tout le reste contient une belle séparation bien propre du CSS et du HTML. Ce n'est pas une erreur, dans le sens où tu codes pour un message donc tu n'as pas besoin de (trop) te casser la tête pour un usage personnel. Mais bon, ce serait quand même plus joli si tout le CSS était dans son coin et que ton HTML était le plus simple possible, non ?

Décomposons un peu cette ligne :

Code:

<div class="Credits">
    <a style="font-size:0.8em; color:white; opacity:50%" href="https://www.epicode-entraide.com/u5815">Lumecyow</a>
</div>

Pour reprendre mon analogie de la couche de peinture, cette partie du code en reçoit deux. D'abord, le bloc complet reçoit les effets de styles attribués à la classe .Credits :
- Un texte centré
- Une taille de texte qui fait 0.8 fois la taille d'écriture de base d'un message (ou 80%)
- Une couleur d'écriture blanche
- Une opacité du texte de 50%

Puis le lien reçoit également une couche de peinture avec le contenu de l'attribut style :
- Une taille de texte qui fait 0.8 fois la taille d'écriture définie pour le bloc .Credits (soit 80% de 80% de la taille de base d'un message, ce qui fait... *sort la calculette* 0.64, ou 64% de la taille d'écriture de base d'un message)
- Une couleur d'écriture blanche
- Une opacité du texte qui fait 50% de l'opacité précédemment définie, donc 50% de 50%, ça fait 25%.

La raison pour laquelle tu as été obligée de rajouter une couche de peinture spécifiquement sur le lien, c'est parce que Forumactif a, de son côté, son propre coup de pinceau sur les liens présents dans un message, notamment en imposant les couleurs de liens. Il y a donc un combat entre couches de peinture (et cette analogie devient ridicule, sauvez moi )

Si on veut se débarrasser de cet attribut style et avoir une ligne super simple comme ceci :

Code:

<div class="Credits"><a href="https://www.epicode-entraide.com/u5815">Lumecyow</a></div>

Il va falloir remédier à cette histoire de fight entre pinceaux, et dire à Forumactif d'aller se calmer dans un coin, c'est toi qui décide d'à quoi ressemblent les liens de ta fiche.

Fort heureusement, la solution est très simple. Sur ModernBB, la règle qui attribue un style aux liens dans les messages est

Code:

.content a {
    /* des trucs ici */
}

C'est à dire, les liens <a> qui se trouvent dans un bloc de classe .content.

Si tu veux marcher sur les pieds de FA, tu vas cibler spécifiquement les liens dans ta fiche, ce qui aura plus de "poids" que la règle de FA. Pour l'exemple, on va s'occuper uniquement du bloc des crédits, donc on va cibler les liens <a> qui se trouvent dans le bloc de classe .Credits :

Code:

.Credits a {
  color:white;
}

Et je ne mets que la couleur, parce que le reste des propriétés définies par la classe .Credits s'applique sans poser de problèmes, en principe. Du coup on a juste besoin de "surcharger" la couleur que donnait Forumactif pour les liens.

Avec ça, tu devrais avoir une fiche finale bien propre !

Un dernier conseil

Normalement, tu es arrivée à la fin de cet atelier en réussissant à écrire par toi-même le code d'une fiche simple et élégante, et c'est déjà bien badass.

Un petit tip cependant pour ton confort futur. D'autres personnes que toi vont probablement utiliser des codes tous faits pour leurs fiches. Ou peut-être que tu vas te sentir pousser des ailes et proproser tes propres fiches en LS. Mais ça serait probablement bien embêtant que TOUTES les fiches aient exactement le même nom de classes. Après tout, je t'ai expliqué qu'il y a une question de priorité et de marcher sur les pieds des autres en CSS XD La dernière règle CSS écrite est celle qui gagne pour le reste de la page.

Pour éviter ce genre de déconvenue, il va falloir cogiter au nom que tu donnes à tes classes. Plutôt que des noms très passe partout comme .Titre, ce serait mieux de rendre cette classe plus "unique", par exemple .Titre_lume_fiche1 ou, en utilisant ma technique de préfixage : .lumef1__titre. Il n'y a pas de solution magique, à toi de trouver ta technique personnelle, l'essentiel étant de diminuer le risque qu'une classe .Titre et une autre classe .Titre sans rapport se marchent dessus par accident.

Je crois que c'est tout pour ce message interminable, as tu des questions résiduelles à ce stade ? :o

Alors après avoir lu et corrigé, je pense que j'ai compris le tricks, c'est un peu comme si je disais à FA " Ecoute t'as établi une règle mais moi j'en ai deux ET elles sont plus précises, nah ! " xD

En tout cas, voilà ce que ça donne, maintenant c'est tout bon !

Code:

<div class="BlockFRP1Lum"><div class="TitreFRP1Lum">Titre du rp</div><div class="SousTitreFRP1Lum">petite citation jolie</div><div class="TexteFRP1Lum">ici le rp j'ai la flemme d'aller récupérer un texte je l'avoue.</div><div class="CreditsFRP1Lum"><a href="https://www.epicode-entraide.com/u5815">Lumecyow</a></div></div>

<style>.BlockFRP1Lum {display:block; width:450px; margin:auto; background-color:#2A2A2A; color:white} .TitreFRP1Lum {font-family: 'Lobster', cursive; color:#a6a6d2; text-align:center; font-size:55px; line-height:1.1em} .SousTitreFRP1Lum {font-family: 'Playfair Display', serif; padding:5px; background-color:#a6a6d2; color:white; text-align:center; font-size:14px} .TexteFRP1Lum {padding:10px; margin: 20px 50px 20px; background-color:#a6a6d2} .CreditsFRP1Lum {text-align:center; font-size:0.8em; color:white; opacity:50%} .CreditsFRP1Lum a {color:white}</style><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">

C'est noté pour le nom des classes, j'ai changé ça vite fait !

Je n'ai pas de questions, je suis grave contente d'avoir réussi à finir la fiche grâce à toi et à ma toute pitite mémoire haha, ce que je peux dire c'est que j'ai hâte de continuer et de m'améliorer !
A partir d'ici je ne sais pas trop comment on continues par contre, est-ce que tu as une idée de suite " logique " après ça ? Je fais une nouvelle maquette ? ( j'ai une idée de signature qui me tourne dans la tête depuis quelque temps mais j'ai déjà peur de pas y arriver je pensais faire la maquette et en faire la commande de code par la suite, mais si c'est pas un trop gros big leap à tes yeux on pourrait tenter ? ( même si je pense que ça va être un trop big leap anyway, vu que c'est sensé avoir un effet et tout ) BREF tout ça pour dire, sur quoi tu penses que continuer serait le mieux ? c:

Plop @Lumecyow !

Tu as réussi à faire cette fiche toute seule, en étant guidée. Maintenant, il va te falloir t'entrainer pour en faire d'autres, cette fois sans sentir mon souffle chaud sur ta nuque pour te mettre la pression XD Histoire de pouvoir acquérir les bons réflexes, il te faudra écrire ces fiches à partir de zéro, en réfléchissant bien à chaque étape et au pourquoi du comment. Avec l'expérience viendront les automatismes. Du coup, si tu veux t'entrainer, tu peux le faire à la suite de ce sujet, ou dans la section des "Avis sur vos codes". (Les questions, naturellement, selon les bienvenues)

Maintenant qu'on a exploré les bases, je pense qu'on peut élargir tes objectifs en effet. Cet atelier étant destiné à étudier les super bases de chez bases, si on va plus loin, il va nous falloir en ouvrir un autre. Tout dépend de la signature que tu veux réaliser, mais compte tenu des limitations de Forumactif, qui dit signature codée, dit iframe... codage de page HTML... et donc codage HTML "normal" (cf ma section La nuance entre "coder dans un message" et "coder une page HTML" dans mon premier message de ce sujet). C'est à la fois plus simple et plus compliqué selon comment tu peux appréhender la chose. Sans parler des potentiels effets que tu as en tête (des onglets ? Ca implique de pouvoir comprendre et mettre en application des tutoriels théoriques, parce que je ne m'attends pas à ce que tu apprennes à coder des onglets à partir de zéro, même moi j'ai besoin d'une référence XD).

Cogite un peu à ce que tu as envie de creuser pour ton prochain sujet et on t'ouvrira ton prochain atelier (et j'aurai ENFIN terminé un atelier de façon normale, victoire \o/)