Voilà @'Christa j'ai lu les tutos que tu m'as conseillés (et j'ai rushé les grenouilles mdr). Il me reste quelques petites questions quand même.

Dans le tuto 1 (intro au codage) :
- J'ai toujours du mal à comprendre la balise "span". J'ai capté que c'était un élément en ligne plutôt qu'en bloc (c'est bien ça la différence avec div ?) mais je ne vois pas ce qu'elle fait concrètement. Comment est-ce qu'elle s'utilise ? Et quand ? Est-ce que tu as des exemples réels ?
- Tu vas me taper mais pour les class et id, est-ce que là aussi tu aurais un exemple concret ? Ce que je comprends, c'est que l'identifiant ne s'utilise qu'une fois et la classe plusieurs fois, mais je ne visualise pas les différents cas, c'est tout flou dans ma tête. Batty a aussi dit que "les id doivent être utilisés avec parcimonie, dans le doute utilisez une class" . Du coup, en quoi est-ce que c'est pas optimal d'utiliser des class partout ? (bon ça c'est une question théorique, je le ferai plus si tu me dis de plus le faire krkr)

Dans le tuto 2 (positionnement) :
- Je suis pas sûre de bien comprendre le fonctionnement de float. Dans l'exemple de ManuManu, c'est bien le bloc bleu-gris, l'élément auquel on applique le flottement ?

Pour finir, concernant la maquette euh... '-'  C'est que j'en ai pas de réserve là, j'ai des maquettes d'index qui sont des commandes et les quelques maquettes de fiches que j'ai ont déjà été codées donc... Je vais regarder pour en faire une du coup mais j'ai mis tout mon jus dans la commande de Gekigami, je sais pas combien de temps je vais prendre à faire un truc codable par mes soins :') J'avais pas lu les petits caractères qui disaient que j'allais faire une classe de graph

Pouic @Milou

Voyons un peu tous ces questionnements !

La balise <span>

A l'instar de la balise <div>, la balise <span> n'a aucune utilité sémantique (lue par un robot, elle ne veut rien dire). Elle est, en principe, à utiliser quand tu ne peux pas utiliser des balises de mise en forme déjà existantes comme le texte important (généralement du gras), le texte à mettre en emphase (généralement l'italique), ou même un lien. Tu t'en serviras par exemple pour souligner du texte vu qu'il n'existe aucune balise sémantique pour ça XD

Code:

<span style="text-decoration:underline">Un texte souligné</span>

Elle diffère de la balise <div> parce que tout texte/contenu inclus dans une balise <span> restera dans le fil du texte.

Une balise inline, c'est tous les éléments qui restent dans la ligne quand tu les utilises, grosso merdo XD La balise <span> en est une et les effets qu'on lui applique sont donc limités au bout de texte/contenu qu'elle encadre.

code source de la ligne ci avant XD :

Une balise <div>, c'est aussi une balise qui ne sert "à rien" dans le sens où tu t'en serviras quand tu n'as pas d'autre possibilité (les paragraphes, les titres, les citations, etc), mais dans son cas, elle constituera un bloc de contenu et même si elle est toute petite si tu essaies de la placer dans le fil de ton texte bah ça va totalement sortir du "flux" du texte. Alors que pourtant j'ai tout écrit sur la même ligne, m'enfin.

À ton niveau, tu peux juste voir la balise <span> comme un coup de marqueur sur un bout de texte, et la balise <div> comme une boite dans laquelle tu vas fourrer des trucs. Et je pense que tu vois assez la différence entre un coup de marqueur et une boite pour comprendre pourquoi on ne met pas d'élément block dans un élément inline XD.

 Les éléments en ligne sur le MDN
 L'élément HTML <span> sur le MDN
(Les articles en anglais sont légèrement plus à jour)

La différence entre id et class

Prenons un spécimen, genre, une Milou sauvage. Son identifiant, c'est Milou. Elle a plusieurs propriétés, genre la propriété "spécialité" avec la valeur "graphisme" et la propriété "genre" avec la valeur "féminin", et puis "yeux : 2" et "bras : 2" et "mains : 2" et "tête : 1", etc.

Prenons un autre spécimen, genre une 'Christa tout autant sauvage. Son identifiant, c'est "'Christa", avec l'apostrophe parce qu'elle y tient. Elle a plusieurs propriétés, genre la propriété "genre" avec la valeur "féminin" et la propriété "taille" avec la valeur "grande" et aussi "spécialité" avec la valeur "codage". Et puis "yeux : 2" et "bras : 2" et "mains : 2" et "tête : 1", etc.

J'ai envie de faire un troisième spécimen random qu'on appellera "Mary", avec les propriétés "genre : féminin", "taille : grande" et "spécialité : design". Et puis "yeux : 2" et "bras : 2" et "mains : 2" et "tête : 1", etc.

On a donc trois spécimens qui ont des propriétés vachement similaires, quand même, mais t'es obligée de les redéfinir chaque fois que tu en décris une.

Code:

<div id="Milou">Spécimen 1</div>
<div id="'Christa">Spécimen 2</div>
<div id="Mary">Spécimen 3</div>

Code:

#Milou {
    genre : féminin ;
    spécialité : graphisme ;
    yeux : 2 ;
    bras : 2 ;
    mains : 2 ;
    tête : 1 ;
}

#'Christa {
    genre : féminin ;
    taille : grande ;
    spécialité : codage ;
    yeux : 2 ;
    bras : 2 ;
    mains : 2 ;
    tête : 1 ;
}

#Mary {
    genre : féminin ;
    taille : grande ;
    spécialité : design ;
    yeux : 2 ;
    bras : 2 ;
    mains : 2 ;
    tête : 1 ;
}

C'est quand même relou tout ça, sachant qu'on ne peut utiliser un identifiant qu'une seule fois (commence pas à me faire chier avec les gens qui ont le même prénom ou le fait que j'ai oublié le reste du corps ou je te fais manger ma métaphore pourrie).

Si on avait une classe "femme" on aurait probablement moins de texte à écrire quand même, et on pourrait même la réutiliser sur chaque spécimen "femme", indépendamment de son identité.

Code:

<div id="Milou" class="femme">Spécimen 1</div>
<div id="'Christa" class="femme">Spécimen 2</div>
<div id="Mary" class="femme">Spécimen 3</div>

Code:

.femme {
    genre : féminin ;
    yeux : 2 ;
    bras : 2 ;
    mains : 2 ;
    tête : 1 ;
}

#Milou {
    spécialité : graphisme ;
}

#'Christa {
    taille : grande ;
    spécialité : codage ;
}

#Mary {
    taille : grande ;
    spécialité : design ;
}

Il y a aussi une question de priorité en CSS qui fait que si je dis tout d'un coup que #Mary est de genre masculin, ben la propriété de genre de sa classe .femme sera complètement ignorée. (Je caricature très grossièrement, mais on va dire que l'identifiant l'emporte sur la classe, et ça peut être méga relou si tu t'y prends mal, donc il vaut mieux éviter). À la rigueur, ça sera utile si notre spécimen #Mary est trans parce qu'il fera alors un beau doigt d'honneur à la classe .femme qui nous casse les gonades des fois. Moralité, utilise un identifiant pour identifier (ce qui est utile en javascript pour savoir quel bloc sélectionner, ou dans la création d'ancres), et les classes pour la décoration de ton code.

Sinon je n'ai pas compris la question "en quoi ce n'est pas optimal d'utiliser des classes partout" quand il est bien dit que c'est des identifiants qu'il ne faut pas abuser XD

Les affres du positionnement flottant

Tu vois quand tu utilises word (ou du moins quand tu t'en servais en 2010, purée ça fait longtemps que j'ai pas touché à Word) et que t'essaies de placer une image mais qu'elle n'en fait qu'à sa tête et que le texte la contourne automatiquement ? C'est ça le flottant.

Oui, c'est bien le carré bleu-gris de l'exemple de manumanu, mais ça peut être une image aussi. D'ailleurs, j'en ai placé une au début du paragraphe précédent, juste après le titre. Normalement, elle devrait "flotter" à droite de ce texte, et le texte la contourne automatiquement. Pourtant, au niveau du code, je l'ai bien placée à gauche, elle a juste décidé de flotter à la surface de l'eau du flux de contenu textuel pour se caler à droite. Et si j'en mets une autre juste après cette phrase, mais à gauche... (elle commence ici) (elle s'arrête ici) elle devrait flotter à gauche en restant sur la même ligne de départ. Et comme c'est une image haute et qu'un flottant n'en a rien à cirer du reste, elle manque probablement totalement de respect envers le titre ci-dessous. À moins de faire trouze mille sauts de ligne, mais c'est sale donc on ne va pas le faire è_é

code des deux images en question:

 l'article sur float du MDN. Voir la version anglophone pour des exemples qui ne plantent pas

Qué maquette ?

On va donc utiliser ta fiche (?) Pink City comme support pour la suite \o/


Tu as d'autres questions ou tu te sens prête pour la suite ?

Ok, à part ma dernière question sur Discord tout est (plus ou moins) clair pour moi, ça me va. On peut passer à la suite si je le fais pas maintenant, je le ferai jamais

Stresse pas tu vas gérer UoU

On va commencer par ce qui m'a fait tiquer un peu quand j'ai vu ta fiche, à savoir le positionnement sur l'image d'illustration.



Tu as utilisé la balise HTML <figure> donc je suppose que tu as repris un snippet trouvé au détour du web (ce qui expliquerait la présence de la classe .col-xs-6), mais en fait c'est juste un système classique d'infobulle. C'est même plutôt intéressant d'utiliser des balises autres que des <div> et <span>, ça va t'aider à les démystifier !

Pour le moment on ne va pas trop se compliquer la vie. On va réutiliser les éléments <figure> (voir l'article du MDN sur <figure>), <figcaption>, et <img> pour essayer de reproduire le rendu que tu as quand l'image est survolée :


C'est juste un entrainement sommaire en positionnement, ne t'inquiète pas trop de comment c'est codé "en vrai" (par exemple dans ta version d'origine le cadre blanc qui apparait au survol est créé avec le pseudo élément ::after pour l'effet d'animation). Positionne juste l'élément de légende (<figcaption>) de manière à ce que ça soit par dessus l'image @o@

Coucou @'Christa ! J'ai essayé de faire l'exercice de positionnement. J'ai aussi chipoté un peu à <figure> mais je pense que j'ai pas bien compris comment ça fonctionnait parce que j'ai fait deux versions de l'exercice : la premières avec figure et figcaption et la deuxième avec des class (huhu) pour voir si le positionnement fonctionnait.

Bien essayé ! Tu as obtenu un résultat similaire à ce qu'on recherchait pour ta seconde tentative, du coup on va se concentrer sur la première.

Commençons par le début. Je t'ai parlé de sélecteurs il y a peu. ManuManu a fait un tutoriel sur les sélecteurs mais c'est toujours un peu confus pour les débutants, donc je vais détailler un peu notre cas spécifique.

Pour notre point de départ, le code de base est très bien :

Code:

<figure>
  <img src="https://i.goopics.net/3rbrsp.png">
  <figcaption>lorem ipsum machin chose </figcaption>
</figure>

Tu peux également associer des classes à tes éléments HTML <figure> et <figcaption> si le besoin s'en faisait sentir, par exemple :

Code:

<figure class="imgIllustration">
  <img src="https://i.goopics.net/3rbrsp.png">
  <figcaption>lorem ipsum machin chose </figcaption>
</figure>

Ce sera utile dans le cas d'un code présent sur une page qui pourrait contenir de multiples éléments <figure>, ce serait ballot de tous les affecter par le même style.

Le problème vient essentiellement de ta façon d'écrire les sélecteurs CSS.

Code:

.figure {
  dispaly:inline-block;
  position:relative;
  width:250px;
  height:430px;
  z-index:0;
}

.figure. figcaption {
  width:200px;
  height:380px;
  background-color:white;
  z-index:2;
  position:absolute;
  right:25px;
  bottom:25px;
}

Pour "sélectionner" un élément HTML en CSS, tu dois l'écrire figcaption (c'est un sélecteur d'élément)
Pour "sélectionner" un (ou plusieurs) élément(s) HTML doté(s) d'une classe CSS, tu dois écrire .imgIllustration (c'est un sélecteur de classe)

Ton erreur vient du fait que tu as essayé de cibler un élément ayant la classe .figure, ce qui n'existe pas dans ton code d'exemple.
De même, un peu plus bas, tu as écrit .figure. figcaption ce qui est également une erreur, parce que tu as mis l'espace entre le point et le nom de supposée classe au mauvais endroit.

Si tu écris .figure.figcaption (tout collé) alors tu cibles un élément HTML ayant les classes .figure et .figcaption :

Code:

<element class="figure figcaption"> l'élément qui sera ciblé par le CSS </element>

Si tu écris .figure .figcaption (avec un espace entre les deux), alors tu cibles un élément html ayant la classe .figcaption qui se trouve à l'intérieur d'un élément parent ayant la classe .figure :

Code:

<parent class="figure">
    <enfant class="figcaption">l'élément qui sera ciblé</enfant>
</parent>

La "ponctuation" quand il s'agit de CSS est très importante :
elementHTML {} pour cibler un élément HTML
.classe {} pour cibler une classe
#identifiant {} pour cibler un identifiant.

On peut combiner les différents sélecteurs : #identifiant .classe elementHTML par exemple.
Dans cet exemple, on cherche à sélectionner l'élément elementHTML. Mais cet élément doit être inclus dans un autre élément qui a la classe .classe. Et cet élément doit être inclus dans un élément qui a l'identifiant #identifiant.

Par exemple :

Code:

<div id="identifiant">
   <span class="classe"> On y est presque, mais non </span>
   <span class="classe">
       <elementHTML>Ah, on a trouvé le bout de code qu'on veut sélectionner en CSS !</elementHTML>
   </span>
   <span class="nope">
       <elementHTML>Lui par contre n'est pas concerné</elementHTML>
   </span>
</div>


Autre petite erreur, les lettres t'ont fait un croche pied et tu as mélangé celles nécessaires pour écrire le mot "display". A ce sujet, pourquoi un inline-block ?

Partant de là, est ce que tu veux faire une nouvelle tentative ?

Merci pour la correction, je relirai tout à tête reposée parce que là c'est fort dense pour mon petit cerveau. Le inline-block c'était pour espérer mettre la légende dans l'image. Je ne savais pas si figcaption était un élément bloc ou pas, alors je me suis dit qu'il l'était sans doute et que, du coup, il revenait à la ligne après mon image. Ce inline-block n'a visiblement servi à rien (puisqu'il était même pas bien écrit mdr) mais je l'ai laissé pour que tu puisses m'éclairer par rapport à ce que j'ai essayé. Je veux bien recommencer évidemment, mais je ferai sûrement ça dans la semaine