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 :
Fnac : 15% de réduction sur toutes les TV de 55″ est plus
Voir le deal
Le Deal du moment :
Fnac : 15% de réduction sur toutes les TV de ...
Voir le deal

Aller en bas
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 760
Atelier #2 - Potasser flexbox et le positionnement

État des lieux


Objectif : Se familiariser avec l'utilisation de flexbox et du positionnement en CSS
Base de travail : Exercice Intermédiaire - Codage de Fiche de présentation

Demande d'Avalonne:
Demande d'inscription à un atelier de 'Christa

pour VotrePseudo

Informations


Quelle est ton expérience en codage ? J'apprends à coder depuis 6 - 7 mois ( 3 mois vraiment sérieusement). Je vais aussi entrer en formation qualifiante pour devenir développeur web ! J'ai déjà codé pour FA mais très peu du fait que je débute, j'ai uniquement fait des fiches de rp !

Quel est ton projet ? Je souhaite affiner mes codes afin de les rendre propre, mais aussi moins lourd ! (PROMIS je retiens mes margins !) En autre j'espère pouvoir optimiser au mieux mes codes et développer une logique qui me permetra d'utiliser les meilleurs balises et options CSS pour ce que je veux faire. On refait ! Je souhaite me perfectionner dans le codage et faire des codages plus juste et affiné ! Mais comme on en discutait, je veux donc me concentrer sur deux notions qui me semblent importante, FlexBox et la Position ! Comme tu m'as dis sur l'exercice j'utilise mal le premier et je ne connais pas du tous les deuxième alors qu'il peut être utile.  De ce fait j'aimerai que l'on ce concentre sur ces deux-là !

Même si du coup je commence débutant j'aimerai vraiment progressé dans ses deux domaines, surtout le FlexBox qui devient un incontournable en développement ! Bien évidemment, ça ne sera pas que pour du ForumActif, mais comme je passe beaucoup de temps sur les forums rps, ça ne me gêne pas d'apprendre l'utilisation pour les deux forums s'il y a une grosse différence !

Quelles sont les bases que tu estimes avoir déjà acquises pour atteindre ton objectif ? Pour le coup c'est difficile à dire, je pense avoir compris comment bien utiliser les balises de base  :
Code:
<div>/<p>/<img> etc


Je pense connaître le CSS de mise en page assez correctement ! (Je sais même ajouter de la police depuis Google c'est pas beau ?)

Quelles sont tes disponibilités ? Je serais disponible tous les jours jusqu'au 5 Aout, puis seulement le soir après le 5 Aout !

Est-ce que tu peux lire l'anglais ? Je suis ne suis pas très bon mais je me débrouille pour ! ( Ca reste important pour le codage)

Qu'est-ce qui te motive pour t'inscrire à mon atelier ? Je veux m'améliorer car je compte en faire mon métier et donc avoir quelqu'un qui peut juger est très bien et j'apprécie beaucoup ton franc parlé ! J'ai aussi vu que tu semblais connaître assez bien le CSS/HTML donc je préfère allez avec toi du fait qu'on a eu quelques discussions et que c'est plutôt agréable de discuter avec toi ! Tu sembles aussi répondre au question sans t'énerver ( Ce qui est tout aussi agréable).

As tu des créations personnelles que tu as envie de me montrer ? Tu en as déjà vu quelques un de mes codages ! Je pourrais aussi te montrer des codes de fiche que j'ai fait !

Est-ce qu'il y a des choses dont tu voudrais m'informer à l'avance ? Il est possible que suivant comment va se dérouler ma formation, que je sois un peu plus long à répondre mais je te préviendrais quand ça sera long ! Merci en tout cas !


Pour commencer


Nous y voici donc, @Avalonne ^^

Comme indiqué précédemment, je souhaite que mes ateliers aient un objectif bien déterminé, du coup nous allons travailler sur le codage de cette fiche, en procédant étape par étape.

Avant toute chose, quelques tutoriels sur les notions qui t'échappent encore :
▶ Pour flexbox, nous avons le tutoriel de Batty, un peu vieux mais toujours utile. Nous avons bien sûr l'article du MDN sur flexbox et enfin, ma bible personnelle, le guide de flexbox de CSS Tricks (en anglais)
▶ Pour le positionnement, nous avons ce tutoriel Epicode de ManuManu, puis, encore une fois, l'article du MDN sur le positionnement . Je suis aussi tombée sur ce site qui n'a pas l'air tout récent mais a l'air bien expliqué.

Si tu as déjà des questions sur les notions qui sont abordées dans ces tutoriels, il va falloir les éclaircir (notamment le concept de flux je pense ?)

Avant de coder quoi que ce soit, il faut te rappeler qu'il n'y a pas une seule et unique solution pour obtenir un résultat. Nous allons nous concentrer sur la mise en pratique de flexbox et du positionnement ici, et du coup je vais probablement t'aiguiller dans une direction plutôt qu'une autre, mais quand tu auras plus d'expérience, tu découvriras certainement d'autres façons d'obtenir des résultats similaires. Certaines plus lourdes, d'autres plus légères. L'important, c'est que tu saches que ces outils existent, et avec la pratique tu finiras par savoir quel outil utiliser dans quelle situation.

Du coup, commençons par le début : est-ce que tu as des questions particulières concernant flex et/ou le positionnement relatif et absolu ?

Et si tu n'as pas de questions, lâche ton logiciel de code et regarde la maquette de l'exercice. Selon toi, quels éléments de la fiche utiliseront flex, et quels éléments utiliseront du positionnement absolu/relatif ?


_______________


[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 14n2 [Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 7WZJTfh
Dim 18 Juil 2021 - 16:46
Avalonne
Avalonne
Newbie
  • Date d'inscription : 13/07/2021
  • Messages : 27
Coucou !

J'ai lu les tutoriels, le Flex j'ai cru comprendre 2 - 3 choses en plus, le positionnement il va me falloir un peu plus de temps je pense, mais du coup j'ai un peu essayé d'appliquer à la fiche et voilà ce que ça donne :



Il y aura beaucoup de flex / bloc. Pour moi on peut diviser le code en plusieurs conteneurs comme ça.

Pour le conteneur orange, il est possible à mes yeux de faire ça avec : flex-between et flex-wrap

Je ne vois pas trop ou le position intervient, le seul endroit est peut-être pour le demi-cercle jaune au-dessus du cadre "derrière" mais je ne suis pas très sur, car il me semble quand CSS on peut faire des demi-cercle et le remplir en background jaune et il suffit donc de coller les deux blocs ensemble en flex aussi.  [Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 2979024130

_______

Pour le concept de flux, j'ai cru comprendre que c'était le comportement de base de la balise suivant son type Inline ou Bloc par rapport au reste et que Position permet de modifier ce flux/comportement pour modifier ce comportement ( On appelle ça sortir du Flux).

Et pour le moment j'ai encore du mal à visualiser l'intérêt propre de position relatif et absolue. Car Flex-Box permet aussi de faire cela non ?

_______________
Lun 19 Juil 2021 - 9:25
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 760
Salut Avalonne ^^

Alors tu as la gâchette un peu facile pour flexbox XD

Flexbox est à utiliser lorsque tu veux mettre des blocs côte à côte de façon flexible. C'est plus propre et... flexible, justement, que les anciennes méthodes (qui utilisaient soit les balises de tableau <table> & co, soit les flottants avec float, soit le positionnement absolu et relatif, soit encore la déclaration display:inline-block;)

C'est flexible dans le sens "pas dépendant d'une largeur fixée", "facile à réorganiser" mais également dans le sens "responsive" (adaptable à la largeur de l'écran).
Avec les tableaux, ce n'était pas du tout responsive, pas du tout sémantique, et bien sûr pas facile à réorganiser sans revoir tout le code.
Avec les flottants, comme ils sortent du flux, il fallait créer des marges artificielles pour leur laisser la place, et prévoir également la place verticale (ou savoir utiliser les clearfix). Pas du tout responsive ni facile à modifier.
Avec le positionnement absolu et relatif, la position est statique et calculée au pixel près, tu ne peux pas "dépasser", et ce n'est pas flexible non plus, et réagencer le tout nécessite de revoir le CSS et de faire des calculs savants au pixel près.
La solution encore valide à ce jour serait inline-block, mais techniquement flexbox dispose de plus d'outils pour un agencement plus harmonieux.

Revenons en à flexbox. Quand tu donnes à un élément la valeur d'affichage flex avec display:flex, alors les enfants directs de cet élément seront affichés de façon flexible, par défaut côte à côte. Utiliser flexbox pour afficher des éléments en colonne n'est pas spécialement utile quand tu peux juste mettre un bloc en dessous d'un autre. Si on regarde ce schéma, on peut voir qu'il y a trois groupes d'éléments qui sont affichés côte à côte :
- La colonne avec l'avatar d'un côté, et la première partie de la fiche de l'autre côté
- La zone qui contient tous les champs de texte "âge", etc.
- Les deux colonnes mental et physique.
Ce qui nous fait trois usages seulement de display:flex;.

Enfin, en ce qui concerne le positionnement absolu et relatif, on s'en sert souvent pour les infobulles, et je sais que ce n'était pas évident sur la maquette, mais en fait elle est conçue pour qu'il y ait un avatar sur la colonne de gauche, qui révèle ce qui se cache en dessous au survol. Ce qui implique de la superposition de blocs, ce que l'on fait traditionnellement avec du positionnement absolu et relatif.

(Il y a d'autres éléments pour lesquels on peut utiliser flexbox et le positionnement, mais je parle surtout des plus importants)

D'où le schéma suivant (en hide du coup) :

Est-ce que tu as des questions jusqu'ici ?

Pour t'entrainer un peu, sans regarder le code source, qu'est-ce qui dans le profil d'un message sur epicode est affiché avec flexbox et qu'est ce qui est en positionnement absolu/relatif ? (en comptant l'affichage du statut online XD)
_______________


[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 14n2 [Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 7WZJTfh
Lun 19 Juil 2021 - 14:06
Avalonne
Avalonne
Newbie
  • Date d'inscription : 13/07/2021
  • Messages : 27
Donc FlexBox est vraiment utile que pour organiser les blocs entre eux et seulement quand il ne s'agit pas de colonne qui par défaut s'empile entre eux ?

Du coup si j'ai bien compris (Et si j'ai analysé la bonne chose):



Du coup le positionnement est utilisé quand un bloc n'a pas vocation à changer ou s'adapter, donc on le fixe dans un endroit précis ?

Y a t'il un moyen au visuel de savoir si c'est flex ou Position qui est utilisé ?
_______________
Lun 19 Juil 2021 - 16:19
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 760
Donc FlexBox est vraiment utile que pour organiser les blocs entre eux et seulement quand il ne s'agit pas de colonne qui par défaut s'empile entre eux ?

Il sera utile aussi pour l'agencement en colonnes, mais disons que dans ce cas bien précis, ce n'est pas utile, donc tu peux t'en passer. C'est pour ça que je t'ai dit ailleurs que c'est important de savoir à quoi sert tel outil, et dans quel cas l'utiliser. Vois le codage comme un puzzle qui se résout en utilisant les outils à ta disposition. Ta solution n'est pas mauvaise, mais elle est un peu excessive quand on peut faire plus léger :) Avec le temps et l'expérience, tu sauras doser, pour le moment tu en est encore en mode "est ce que je mets une pincée de sel ou tout le sachet ?" XD

Du coup le positionnement est utilisé quand un bloc n'a pas vocation à changer ou s'adapter, donc on le fixe dans un endroit précis ?

Exactement ! Vois ça comme si tu collais un post-it quelque part, par dessus autre chose. C'est positionné par rapport à quelque chose. On utilise le positionnement relatif pour avoir un bloc de référence, et le positionnement absolu pour fixer le bloc suivant "par rapport à un parent positionné".

Dans les faits, pour ce qui est du profil d'épicode (encore en hide donc, comme ça si je repose la question à quelqu'un d'autre il verra pas la réponse XD) :


Y a t'il un moyen au visuel de savoir si c'est flex ou Position qui est utilisé ?
Non, c'est juste quelque chose que tu peux estimer avec un peu d'observation, mais sans certitude.
Par exemple les champs de profil, tout le monde n'a pas tous ses champs de remplis, ça veut dire que leur nombre varie selon le profil, ça veut dire que le rendu va changer. Ça colle pas du tout avec un affichage positionné qui est beaucoup plus rigide.
Par contre, pour le titre et l'avatar qui sont affichés avec flex (côte à côte) c'était pas du tout évident à voir, parce qu'il y a plusieurs façons d'obtenir ce résultat, et comme c'est moi qui ai codé ce profil, j'ai choisi flex XD

Après, c'est souvent une question de préférence personnelle et de facilité d'utilisation. Flex n'est pas toujours simple à utiliser, donc certains préfèreront d'autres solutions. Comme cet atelier est focus sur flex, on va considérer que c'est la solution à privilégier même si d'autres sont possibles, sans pour autant en abuser.

Pour afficher le code comme ça, j'utilise la balise <code> </code>, mais ça implique de savoir utiliser &lt; pour < et &gt; pour > (sinon forumactif va interpréter le code au moment de l'affichage du message, forcément. D'ailleurs je suis obligée d'utiliser &amp; pour afficher les & sans qu'ils soient automatiquement interprétés XD)

Pour la suite, on va commencer à coder, petit bout par petit bout. Commence par écrire le code correspondant à l'affichage des champs "âge" et compagnie (en bleu sur mon schéma). Il y a plusieurs façons d'obtenir ce résultat, mais comme c'est destiné à une fiche utilisable sur forum, il faut que le code soit aussi simple que possible pour qu'un débutant puisse s'en servir. (Bon, ce dernier aspect rajoute une difficulté qui n'a rien à voir avec le sujet de l'atelier, mais je suppose que ça te conviendra XD)
_______________


[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 14n2 [Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 7WZJTfh
Lun 19 Juil 2021 - 16:53
Avalonne
Avalonne
Newbie
  • Date d'inscription : 13/07/2021
  • Messages : 27
J'ai eu une question entre-temps ! Quand tu veux superposer deux éléments, si j'ai bien compris tu es obligé de passer par position relative/Absolue ?

De plus j'ai essayé, je te présente le meilleur résultat que j'ai eu qui n'est pas vraiment parfait :

_______________
Mar 20 Juil 2021 - 12:29
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 760
Hello Avalonne !

Alors c'est un effort honorable, mais je n'avais demandé que la zone entourée en bleu dans ma version du schéma, sans le titre, et sans essayer de reproduire la fiche tout de suite ^^ Justement parce que tu as tendance à vouloir mettre des flex partout, je veux te voir les utiliser seulement aux endroits pertinents. Mais pour la question de ne pas réussir à centrer les éléments, c'est probablement à cause de la marge automatique à droite XD

Du coup, recommence ! #'ChristaEstTyrannique
- Je ne veux voir que les champs de texte, rien de plus
- A la rigueur tu peux temporairement mettre le tout dans un bloc "test" pour avoir une largeur fixée
- Ce n'est pas le sujet de l'atelier, mais tu abuses des classes, plutôt qu'utiliser .listeinfosexochrista pour chaque champ, ce qui est un peu lourd (tes noms de classes sont longuets d'ailleurs lol, en plus du fait que tu ne devrais pas y mettre d'accents - quoique, il parait que ça passe maintenant ?), un simple sélecteur de descendant .informationpersonnellexochrista > div { ... } marcherait tout aussi bien. Et j'aurais utilisé des <span>, personnellement, il y a une raison pour laquelle tu as privilégié des blocs à des éléments inline ?
- Ce n'est pas la première fois que je te le dis (de la répétition nait la connaissance), mais tu n'as pas besoin d'écrire à chaque fois flex-direction:row parce que c'est la direction par défaut quoi qu'il arrive.

Voilà voilà :)
_______________


[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 14n2 [Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 7WZJTfh
Mar 20 Juil 2021 - 13:08
Avalonne
Avalonne
Newbie
  • Date d'inscription : 13/07/2021
  • Messages : 27
Ah je sais pas pourquoi dans ma tête le titre était dans le bleu et je pensai que je devais mettre le conteneur général, je fais donc juste le cadre bleu sans rien derrière ? X_x ( Je suis un mauvais élève je te l'avais pas dis ? :X Je papotai en même temps que les explications pour ça :B)

Une autre question me vient en tête, je sais qu'on parle souvent de PX, mais c'est vrai qu'on m'a aussi dit d'utiliser l'unité em qui pouvait être plus cool car plus adapté suivant l'écran, tu en penses quoi personnellement ?

- Donc je dois juste faire le bloc avec age etc ? Ainsi que le fond bleu etc ?
- Alors pour les sélecteurs c'est vrai que j'en ai entendu parlé mais comme je les ai très peu appliqué j'ai un peu oublié qu'il existait je vais essayé de refaire ça proprement. Pour le span, en fait j'ai essayé avec span mais ça marchait pas sur mon live server ça avait tendance à rester coller au niveau fond. Donc ça faisait un gros bloc bleu.
- Et idem pour la Flex-direction: Row, si je ne le mets pas, tout se met en colonne ( Peut-être car j'ai mis Flex-direction:colonne sur le parent ?) du coup j'ai été obligé de le mettre en row. Mais après ça a fonctionné car j'ai modifié certaines choses qui étaient lié au Margin / et à un mauvais Justify-content, j'ai juste oublié de retirer le Row apres.

Je vais essayé de te refaire ça dès que possible désolé, faut vraiment que j'apprenne à mieux lire !
_______________
Mar 20 Juil 2021 - 13:30
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 760
Alors oui, je veux juste voir ce que tu codes pour le seul bloc des champs âge & co.

- Normalement même si le parent est en colonne, ça n'impacte pas les éléments de l'enfant, donc c'était probablement un souci de marges.
- Pour les <span>, je ne vois pas pourquoi ça ne marche pas (je viens de tester c'est exactement le même rendu). Après, ce n'est pas bien grave, c'est juste que sémantiquement ça fait un chouia plus de sens.

Une autre question me vient en tête, je sais qu'on parle souvent de PX, mais c'est vrai qu'on m'a aussi dit d'utiliser l'unité em qui pouvait être plus cool car plus adapté suivant l'écran, tu en penses quoi personnellement ?
Alors, généralement les unités em c'est très bien pour le texte. De mon côté, j'utilise souvent les unités rem pour les marges internes et externes. Effectivement, les unités flexibles sont plus intéressantes quand c'est possible, mais commençons déjà par t'exorciser de cette habitude de mettre des largeurs fixes partout XD
_______________


[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 14n2 [Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 7WZJTfh
Mar 20 Juil 2021 - 14:29
Avalonne
Avalonne
Newbie
  • Date d'inscription : 13/07/2021
  • Messages : 27
D'accord chef ! **Se met au garde à vous**

Je vais essayé de refaire ça correctement et avec déjà les quelques conseils donnés
_______________
Mar 20 Juil 2021 - 14:34
Avalonne
Avalonne
Newbie
  • Date d'inscription : 13/07/2021
  • Messages : 27
Coucou !

J'ai refait le cadre du coup, en ne faisant que lui, je te présente deux versions sous le Hide en rendu, une sans largeur maximum et une avec pour te montrer le rendre :

_______________
Mer 21 Juil 2021 - 13:33
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 760
Hello @Avalonne !

C'est parfait, c'est ce que je voulais voir ^^ Tu peux sauter des lignes entre les différents span en principe, même dans un message les <br> seront "ignorés" grâce à flexbox. Il n'y a que la largeur et la hauteur "auto" que tu peux retirer (vu que de toute façon "auto" est la valeur par défaut XD) et pouf, tu vois, ton code est devenu super simple :)

Garde donc ce bout de code sous le coude. On le réutilisera à la fin.

L'étape suivante, maintenant, c'est de coder la partie qui concerne le mental et le physique (le cadre violet sur mon schéma). A première vue, c'est simple, nous avons deux colonnes. Mais vu qu'il y a l'avatar sur le côté, il y a fort à parier que le contenu ces deux blocs doit être déroulant verticalement. Je vois plusieurs solutions possibles, à toi de voir ce que tu as envie de faire. Au boulot, petit padawan /o/
_______________


[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 14n2 [Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 7WZJTfh
Jeu 22 Juil 2021 - 15:36
Avalonne
Avalonne
Newbie
  • Date d'inscription : 13/07/2021
  • Messages : 27
Hop petit message pour te dire que je pense terminer l'exercice Lundi, j'ai un week-end un peu chargé soudainement donc je n'ai pas oublié !
_______________
Sam 24 Juil 2021 - 11:43
Avalonne
Avalonne
Newbie
  • Date d'inscription : 13/07/2021
  • Messages : 27
Voilà ! Comme promis voici la suite :



Mais du coup comme j'ai utilisé le H2 il entre en conflit avec celui du forum :OO Du coup dans le rendu j'ai remplacé H2 par H4
_______________
Lun 26 Juil 2021 - 10:11
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 760
Hello !

Pour éviter le conflit avec un code existant, il faut utiliser le principe de cascade (et spécificité) en CSS, et du coup écrire ton CSS comme ceci :
Code:
.descriptionphysiquechrista h2 {
/* le CSS qui "surcharge" les propriétés par défaut de la balise h2 */
}
Évidemment, ça implique de vérifier à l'avance les propriétés par défaut de la balise h2 pour savoir ce que tu dois surcharger (écrire par dessus) dans ta version, genre une bordure... ou des majuscules XD Tu peux également utiliser la propriété all (voir la doc MDN ) pour remettre toutes les propriétés à zéro d'un coup et ne pas avoir de problèmes (en sachant que cette propriété n'est pas supportée par tous les navigateurs, mais le site Can I Use a l'air d'indiquer qu'elle est supportée à 95% ce qui est pas mal)

Petite suggestion, tu devrais remplacer la police que tu as prise pour le texte par une version qui n'est pas en majuscules par défaut (pour des raisons de lisibilité du texte). Je propose Lexend qui ressemble un peu à Century Gothic.

Pour le reste, ton code donne l'idée. Ma version avait juste séparé le titre du contenu déroulant.

Je te laisse revoir les éléments que j'ai mentionnés à ta guise, pour la suite il va falloir s'attaquer à cette première colonne avec l'avatar. C'est un gros morceau, parce que le demi-cercle en haut est un peu relou à gérer. Ne te stresse pas trop dessus parce que ce n'est pas le but principal de l'atelier, concentre toi sur l'effet au survol de l'avatar (ça donne ça sur ma version ).

- Il faut que l'avatar soit visible par défaut. Le bloc qui le contient sera positionné en relatif.
- Il faut que le texte, lui, soit caché par défaut. Le bloc qui le contient est positionné en absolu, de manière à ce qu'il soit pile poil par dessus l'avatar.
- Lorsque le curseur survole l'avatar, il faut que le texte "caché par défaut" fasse son apparition
- L'avatar doit être légèrement visible derrière par transparence, mais sans nuire à la lisibilité du tout.

Est-ce que tu as besoin d'indications/explications supplémentaires pour t'attaquer à cette partie ou bien tu penses pouvoir y arriver ?
_______________


[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 14n2 [Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 7WZJTfh
Lun 26 Juil 2021 - 15:17
Avalonne
Avalonne
Newbie
  • Date d'inscription : 13/07/2021
  • Messages : 27
Coucou je vais regarder ça, je te remercie pour l'explication sur le h2.

Je regardai pour la police pas de soucis ! Celle que j'ai trouvé était seulement en majuscule et je me suis pas trop pris la tête à chercher une autre police pour un exercice :X

Alors je vais essayé de commencer ça demain. Je suppose que pour le survole de l'avatar il faut un absolu / relative mais aussi l'intervention d'un hover non ?
_______________
Lun 26 Juil 2021 - 16:48
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 760
Yep, en effet, qui dit effet de survol dit usage du pseudo-élément :hover ^^
_______________


[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 14n2 [Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 7WZJTfh
Lun 26 Juil 2021 - 17:04
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 760
Toujours en vie @Avalonne ? Entre ta disparition du discord et le fait que tu ne t'es plus connecté sur le forum depuis le 26 juillet dernier, et que j'ai déjà dit que je ne courrais pas après mes élèves, on a dépassé les deux semaines sans nouvelles, donc ton atelier est suspendu jusqu'à nouvel ordre.
_______________


[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 14n2 [Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 7WZJTfh
Mer 11 Aoû 2021 - 18:55
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 760
Bon bah... Atelier fermé XD
_______________


[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 14n2 [Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #2] Potasser flexbox et le positionnement - Avalonne 7WZJTfh
Lun 23 Aoû 2021 - 21:41
Contenu sponsorisé
    _______________
    Revenir en haut