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 à ne pas rater :
Cartes Pokémon : sortie d’un nouveau coffret Ultra Premium ...
Voir le deal
Le deal à ne pas rater :
SITRAM Set 3 poêles tous feux dont induction + poigner amovible
20.99 €
Voir le deal

Aller en bas
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 928
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)
_______________


[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche - Page 2 14n2 [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche - Page 2 Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche - Page 2 7WZJTfh
Dim 10 Juil 2022 - 19:24
Graphiste
  • Date d'inscription : 03/08/2016
  • Messages : 212
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
_______________
Dim 10 Juil 2022 - 20:57
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 928
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)
_______________


[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche - Page 2 14n2 [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche - Page 2 Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche - Page 2 7WZJTfh
Dim 10 Juil 2022 - 22:00
Graphiste
  • Date d'inscription : 03/08/2016
  • Messages : 212
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 [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche - Page 2 2691722282 [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche - Page 2 1066248963 Ordi
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">
_______________
Mar 12 Juil 2022 - 19:20
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 928
Hé bien, je ne m'attendais pas à ce que tu en fasses autant, c'est bien joué, tu peux être fière de toi [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche - Page 2 2691722282

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 ?
_______________


[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche - Page 2 14n2 [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche - Page 2 Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche - Page 2 7WZJTfh
Mar 12 Juil 2022 - 21:18
Graphiste
  • Date d'inscription : 03/08/2016
  • Messages : 212
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">
_______________
Mer 13 Juil 2022 - 18:12
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 928
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 ?  Haaaa !

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 @_@
_______________


[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche - Page 2 14n2 [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche - Page 2 Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche - Page 2 7WZJTfh
Mer 13 Juil 2022 - 23:07
Newbie
  • Date d'inscription : 07/08/2021
  • Messages : 28
Je vais lire tout ça, pour une raison que j’ignore, j’ai jamais eu la notification [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche - Page 2 300393645 [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche - Page 2 3655035957 pardonnez moi du coup
_______________
Jeu 28 Juil 2022 - 1:29
Graphiste
  • Date d'inscription : 03/08/2016
  • Messages : 212
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 [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche - Page 2 3482194067
_______________
Hier à 16:23
Contenu sponsorisé
    _______________
    Revenir en haut