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 :
TCL C74 Series 55C743 – TV 55” 4K QLED 144 Hz Google TV (Via ODR ...
499 €
Voir le deal
-20%
Le deal à ne pas rater :
-20% sur le Lot de 2 écrans PC GIGABYTE 27″ LED M27Q
429 € 539 €
Voir le deal

Aller en bas
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 1171
Atelier #3 - Moins de dimensions fixes, plus de flex !

pour @Arya

État des lieux


Objectif : Moins dépendre des dimensions au pixel près, approfondir l'utilisation de flexbox, expérimenter avec les grilles CSS
Base de travail : La partie PA de la commande d'index pour Amortentia.
Demande d'Arya :
Spoiler:

Pour commencer



Les outils


C'est un prérequis à mon cours que d'avoir un logiciel de codage. Fais ton choix, notepad++, Visual Studio Code, Atom, peu importe, mais tu dois avoir sur ton PC un dossier dans lequel tu mettras tous tes codes bien proprement.

Les notions utiles


▶ 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 les grilles CSS, toujours pas de tutoriel sur Epicode (un jour, peut-être...). Le MDN possède un guide sur le Grid layout qui couvre l'essentiel des infos. Ma bible personnelle est une fois de plus chez CSS Tricks mais c'est en anglais. En anglais également, il y a cette série de vidéos youtube qui datent de 2018, donc un peu âgées par rapport à l'évolution des standards, mais qui m'ont bien aidée à cerner des trucs. C'est sous titré en anglais, encore qu'il me semble que certaines vidéos ont leurs sous titres en français. Les parties "techniques" étant illustrées, ça peut peut être t'aider.

S'il y a des notions qui t'échappent, si tu as l'impression qu'il y a des bases qui te font défaut pour comprendre, c'est le moment de poser tes questions, qu'on puisse réajuster le tir avant que tu sois complètement larguée.

Premier exercice


Avant même de coder quoi que ce soit, on va regarder attentivement cette PA et la décomposer en "modules".

Des modules de quoi kézaco ?  O_O

Cette PA, c'est un assemblage de modules, de petits bouts qui sont indépendants les uns des autres. Certains ont même des modules à l'intérieur d'eux même. Je vais te demander d'y réfléchir et de me faire la liste des différents composants indépendants de cette PA. Si tu es motivée, tu peux également pour chacun de ces modules me dire de quelle façon tu le coderais, indépendamment du reste.

Bonne chance, petit padawan ! Ordi


_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 7WZJTfh
Mer 11 Aoû 2021 - 19:19
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2753
Coucou  @'Christa
Tout d'abord, un grand merci pour la rapidité d'ouverture de cet atelier [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 3775839356
Je vais tout donner [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 1066248963
Concernant les logiciels, je pense essayer notepad+++ car j'ai tenté visual studio, mais je n'arrive pas à comprendre comment est-ce que je dois m'en servir (du coup la plupart du temps, je code plutôt sur codepen).
Je le télécharge demain :) (édit : c'est bon) mais n'est-ce pas plus simple sinon de coder via codepen ?
Concernant les tutos, merci, je les ai pas encore tous lu, mais j'ai trouvé le second sur le display:flex, très rafraichissant, et surtout j'ai pu découvrir (enfin peut-être pas découvrir) mais revoir comment justement utiliser l'enchaînement des classes (parents-enfants), ce que j'oublie souvent de faire, j'en suis consciente, j'espère parvenir éventuellement dans cet atelier à m'en servir également davantage, je vais tout faire pour en tout cas.
J'ai commencé à lire le display:grid et je comprends progressivement les choses, mais je pense que je pigerai bien mieux en pratiquant :p
Juste quelques questions/confirmations sur ça :
-
Code:
grid-template-columns
permet uniquement de contrôler si j'ai compris le nombre de colonne et l'espacement à l'intérieure via le
Code:
fr
?
-
Code:
grid-template-rows
> même chose mais c'est pour les lignes si j'ai compris [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 2979024130 et l'espacement aussi à l'intérieure [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 3775839356
Que veut cependant dire le / lorsque par exemple on a :
Code:
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
dans ce lien : https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout
est-ce comme une prolongation, du genre, la classe va s'étendre de la ligne 2 jusqu'à la 5, et indirectement il faut lire pour le trois, sur une colonne ? (c'est juste pour voir si j'ai compris) même si le reste des ptits bouts et le css qui s'accompagne, je le comprendrai encore mieux en pratiquant comme dit plus haut. Pour moi, c'est vraiment comme une autre façon beaucoup plus simple pour gérer l'alignement des images par exemple et improviser des tableaux [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 2702986051
Pour l'instant, je ne vois que ça comme question ; je pense avoir compris le reste [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 2596956373

Pour l'exercice, qu'entends-tu cependant par module ? Je n'ai pas compris ce termes, est-ce que tu veux plutôt parler de bloc ? ou alors j'ai mal compris, mais je préfère attendre pour débuter cette partie d'exercice :)

Encore merci [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 3775839356
_______________
Ven 13 Aoû 2021 - 16:46
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 1171
Hello Arya !

A titre purement personnel, je préfère coder sur Visual Studio Code, parce que j'ai mes fichiers dans mon dossier et le navigateur du logiciel me permet de switcher de l'un à l'autre facilement (plus tout un tas d'outils bien pratiques). Codepen est très bien pour montrer un bout de code, mais je le trouve pas très pratique pour quand tu décides de coder quelque chose de plus complexe, parce que l'écran est divisé en plein de fenêtres.

En plus, ça te fait te focaliser sur le rendu de ton code plutôt que sur sa sémantique XD
Et encore en plus, Codepen se passe de toute la partie déclaration du document, ce qui explique le fait que tu "oublies" de le faire et que tu le fais à la fin.

Du coup, pour un environnement de travail rangé, un logiciel de codage est quand même bien plus propre :
Dans VSC:
Dans Notepad:

Moralité : Code tes pages complètes sur un fichier (voire deux, en séparant CSS et HTML, voire trois, en séparant CSS, HTML et Javascript) qui sera sur ton ordinateur, plutôt que sur Codepen. Codepen servira seulement à faire les démonstrations à un instant t si nécessaire. Tu feras ce que tu veux après cet atelier, mais pour le moment, fais ça proprement dans les règles èoé

Pour tes questions sur grid, les propriétés grid-template-columns et grid-template-row permettent de définir les dimensions respectivement des colonnes et des rangées d'une grille. Les unités fr ne sont qu'une unité parmi d'autres, ça veut dire "fraction" et ça laisse le navigateur calculer lui même la largeur d'une colonne (par exemple si tu définis 1fr 2fr, la deuxième colonne (ou ligne) sera deux fois plus large (ou haute) que la première). Tu peux également utiliser des pourcentages ou des pixels si le besoin s'en fait sentir.
Si tu ne définis rien pour les rangées, alors le navigateur gèrera tout ça automatiquement (et inversement, encore qu'une grille à une seule colonne ça a un intérêt discutable).

En ce qui concerne grid-column et grid-row, well, la documentation te dit de quoi il s'agit : ce sont des versions raccourcies de grid-column-start et grid-column-end pour le premier, et grid-row-start et grid-row-end pour l'autre. Tu peux lire cette page pour mieux comprendre le concept de placement des éléments dans une grille, mais honnêtement ça reste flou jusqu'à ce qu'on le fasse en pratique.

Ici, on a donc l'élément de classe .one qui occupe un espace qui commence de la ligne verticale 1 et finit à la ligne verticale 3 (donc deux colonnes !), et sur une seule rangée. C'est un coup à prendre et c'est pour ça que je dessine mes grilles, pour numéroter les lignes verticales et horizontales XD

Retournons à l'exercice. Quand je parle de module, je veux dire un morceau, une unité, un composant. Si ta PA était un puzzle de pièces séparées les unes des autres qu'il te faudra assembler à la fin, quels sont les éléments que tu peux isoler les uns des autres ? (certains peuvent être des groupes de modules). Je parle de module parce que je pensais au terme "modulaire". Par exemple, nous avons clairement un module "menu" qui contient six liens de navigation. A vue de nez, je dirais que cette PA comporte une dizaine de modules. Je t'en ai donné un, quels sont les autres à ton avis ?
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 7WZJTfh
Sam 14 Aoû 2021 - 3:13
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2753
Hello !
Je vais opter pour notepad+++ alors ; je viens de le télécharger.
Merci pour ces quelques éclaircissements, j'y arriverai en effet probablement plus en pratiquant :)
Pour l'exercice, merci aussi pour les éclaircissements, j'avais bien compris que tu parlais du coup plus ou moins de chaque éléments, j'en vois aussi 10 à première vue :
- l'élément relatif au contexte ;
- Celui du staff ;
- des partenaires ;
- des évents en cours ;
- les liens ;
- les votes ;
- période de jeu et température ;
- les infos ;
- les prédéfinis ;
- les crédits ;

Ensuite, sur la façon dont je coderai tout ça, l'ensemble serait en flex, avec retour à la ligne (je nommerai par exemple le conteneur principal :
Code:
.PA-Arya {avec le flex à l'intérieure}
(j'aurais pu en grid, je suppose, mais pour l'instant je suis moins à l'aise, et je préfère comme il est mentionné dans le module me perfectionner avec le flex et ce qu'on a prévu, vaut mieux y aller doucement)
le bloc évent, et contexte serait bien deux blocs distincts ;
je ferais une colonne (dans un bloc) pour la partie staff et partenariats) (avec peut-être un usage du grid, pour le centrage des éléments du staff))
un bloc pour la période de jeu + température, un autre pour les votes (maybe en grid aussi à voir) et un autre bloc avec les liens (potentiellement en grid, ça m'a l'air plus simple de placer les liens avec ça je trouve).
pour finir, un bloc info, un pour les predef et un pour les crédits (mais peut-être que comme ça c'est pas tellement claire quand je l'explique) ; est-ce que tu veux que je te montre via un schéma ? [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 3775839356

merci à toi :)
_______________
Sam 14 Aoû 2021 - 16:41
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 1171
Hello @Arya !

Alors, tu as bien cerné la liste des éléments, et tu gagnes un schéma péniblement tracé à la sueur de mon front en récompense :
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya BdKN2
Rien de mieux qu'un schéma pour mieux suivre.

Oublions l'intérieur des blocs pour le moment, ou même toute forme de CSS. Nous avons dix éléments à placer. Si l'on suit ton choix, ils seront positionnés avec flex, donc les uns à la suite des autres, avec retour à la ligne. Vu que je vais probablement faire une parenthèse sur grid, on aura aussi une autre façon de faire. Dans tous les cas, mettons de côté cette histoire de flex ou grid.

Montre moi le code d'une page HTML tout ce qu'il y a de plus basique avec ces dix blocs dedans (ne code pas l'intérieur des blocs. Pas de CSS non plus, même si évidemment tu peux d'ores et déjà décider de tes noms de classe). Ce sera notre squelette.

Après quoi, on va coder chaque bloc un par un, mais je te laisse choisir lequel tu veux coder en premier. Certains sont méga simples, d'autres plus complexes, mais c'est bien, on a plein de façons différentes de coder avec ces différents blocs. D'ailleurs, si tu devais les organiser par "le plus simple au plus compliqué", quel serait ton classement (et pourquoi ?) ?
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 7WZJTfh
Sam 14 Aoû 2021 - 21:54
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2753
Coucou  @'Christa
Il est super beau ton schéma :3 c'est très gentille de ta part <3
J'ai tenté de faire ce que tu m'as demandé du coup, sans rien placer à l'intérieure des blocs (sauf à l'endroit qui est en colonne pour le staff, où j'ai placé les deux blocs, ainsi que les liens des partenaires et les top partenaires, mais si je devais pas y toucher, j'y enlève bien entendu) ; le reste j'ai mis uniquement les blocs sans rien dedans. Voici donc ma page HTML :

J'en ai un peu "chier" pour la colonne, donc je suis preneuse d'astuce pour renommer cette partie si nécessaire :)
J'ai vraiment pas de préférence pour l'ordre des blocs, alors autant faire dans l'ordre, en partant de haut en bas et de gauche à droite :)
Dans tous les cas, ça prendra exactement le même temps.
Si je devrais les classer par ordre de complexité pour moi ce serait (du plus simple au plus compliqué) :
- contexte / crédit et actualité, qui sont pour moi au même degré ;
- période et topsite & partenaires
- le menu ;
- le bloc des prédéfinis car je fais pas tous les jours des hover / évent vis-à-vis du survol et le staff

Après même si les derniers ne sont pas faciles, ce n'est pas impossible et je m'en sens parfaitement capable  [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 3775839356
J'espère avoir rien oublié et bien répondu à tes demandes
encore mercii  [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 3775839356
belle journée
_______________
Lun 16 Aoû 2021 - 10:43
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 1171
Plop @Arya, en voyant ce code, je me demande, est ce que tu arrives à le lire ? Pourquoi il n'y a pas d'indentation autre que dans la partie copiée collée ?

De mon côté, comme je pense utiliser grid, la mise en pratique a été beaucoup plus simple :
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 4DL7j

Mais oui, si on compte tout afficher avec flex, il faudra probablement "rassembler" les blocs Staff et Partenaires ensemble.

Mais pour le moment on va oublier tout ce qui est positionnement et juste s'intéresser à comment coder proprement l'intérieur de chaque bloc. Jusqu'à la fin de cet atelier, cette PA sera juste une suite de blocs placés les uns en dessous des autres. Le focus va être de coder proprement, sans trop de dimensions.

Idéalement, essaie de ne pas t'intéresser au "rendu" de ton code. Je sais que ce n'est pas facile, même moi j'ai tendance à vérifier "ce que ça donne". En premier lieu, essaie de te concentrer surtout sur l'aspect purement code.

Maintenant, on passe à la pratique. On va s'attaquer aux plus simples pour commencer : Montre moi la partie HTML (et la partie CSS) pour les blocs concernant le contexte, les actualités et les crédits (blocs 1, 8 et 10 sur mon schéma).
- Ne mets pas de dimensions (tu peux en mettre une sur la classe qui englobe le tout cela dit)
- Limite le nombre de classes
- Les paragraphes <p> c'est la vie (et c'est propre)
- Ajouter des titres "invisibles" serait un plus niveau accessibilité (souviens toi de quand on a discuté de ton autre PA, quand je disais qu'il fallait que, sans CSS, la page soit lisible et facile à comprendre)

Petite parenthèse concernant les dimensions des boites (blocs) : Quelles sont-celles que tu estimerais nécessaires à fixer, parmi toutes ces boites ? (J'en vois une à coup sûr. Deux autres potentiellement.).
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 7WZJTfh
Lun 16 Aoû 2021 - 17:44
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2753
Hello
Alors oui j'arrive à lire tu parle des espaces et tout comme sur ta capture ? Sur mon notepad il y a plus d'espace que le code transmis. J'ai du faire une boulette en le collant ici en texte brut seulement, sorry mais chez moi il est bien espacé et lisible.
Je te fais demain matin une capture au besoin car je coderai demain à tête reposer (mal de tête)
J'en profite donc juste pour lire ton retour ; voir qu'on a pas le même rendu xD et éventuellement poser des questions avant de me lancer dans le vide.
Ceci étant je vais essayer de me retenir de consulter le rendu.
Quand tu dis pas de dimension : c'est sans hauteur ni largeur on est d'accord ou la hauteur est quand même de mise ? La classe qui englobe le tout on parle bien du bloc principale qui contient la PA ?
- je me souviens de la fiche de pub pour les titres ceci dit je les avais pas rendu invisible du coup j'ai du mal à comprendre. Cest genre indiquer pour chaque bloc ce que c'est ? Sans que ça s'affiche ou bien tu parles de vrai titre?
Pour ta dernière question c'est difficile j'avoue xD j'aurais tendance à fixer au moins les blocs qui contiennent des images donc c'est pas qu'un bloc mais au moins 5 (staff évent periode topsite et predef) mais c'est peut être pas forcément utile ?
Au mieux le bloc évent ?

Encore merci et bonne soirée
_______________
Lun 16 Aoû 2021 - 18:38
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 1171
Oooh, une prompte réponse ^^ Voyons ça de plus près.

1. Les dimensions, ça s'utilise avec parcimonie


Je pensais surtout en largeurs, mais effectivement il y a les hauteurs à prendre en compte. Du coup, à mes yeux, là où on aura peut être besoin de fixer des dimensions :
- Les prédefs, parce qu'il y a 4 images côte à côte, donc il faut prévoir au moins une largeur minimale. C'était mon assertion du "à coup sûr" mais en y réfléchissant je me mets à douter.
- Le staff, parce qu'il y a deux blocs avec images les uns au dessus des autres, donc il faut sans doute prévoir une hauteur, et potentiellement une largeur (mais honnêtement je laisserais le navigateur décider tout seul, faut voir ce que ça donne selon les navigateurs).
- Potentiellement les events, mais on peut utiliser background-size:cover ou assimilé donc ça peut totalement être flexible

Si tu tiens à arranger l'intégralité de cette PA avec flex, les dimensions impératives seront celles destinées à avoir un "alignement vertical" entre les différents blocs (genre le menu qui fait exactement la même largeur que la somme des blocs juste au dessus), ce qui implique de faire des calculs. Si on utilise CSS grid, le problème ne se posera pas vraiment, raison pour laquelle c'est la solution que je vise XD Les dimensions calculées au pixel près, c'est le mal è_é

C'est pour ça que pour le moment je recommande de ne pas fixer de largeurs (tu peux fixer les hauteurs, oui).

La classe qui englobe le tout on parle bien du bloc principale qui contient la PA ?
Exactement.

2. Des titres invisibles quézaco ?


Souviens toi de mes exemples dans le sujet sur ton autre code (pourquoi je disais que c'était une PA, c'est une fiche =_=), je les ressors pour la démonstration XD J'avais retiré le CSS pour qu'on ait juste un document tout ce qu'il y a de plus basique sans décoration :
Spoiler:
Dans le code, les titres "Contexte" et "Pour en savoir plus" étaient des titres de niveau 1 (<h1>) et les titres "Notre équipe", "nos statistiques", "informations pratiques" et "personnages prédéfinis" étaient des titres de niveau 2 (<h2>). On peut bien voir les différentes sections et on peut supposer qu'un logiciel lecteur d'écran arrivera à lire les informations sans trop de soucis. (supposer : je ne suis pas une experte en accessibilité, je peux me planter lourdement, mais basiquement j'essaie d'écrire les choses de façon claire et lisible pour quelqu'un qui aurait des problèmes d'accessibilité)

Puis je t'avais montré le résultat, une fois que je rajoutais le CSS :
Spoiler:
Tu constates que parmi tous les titres qu'on voyait "sans" le CSS, maintenant on n'en voit plus que trois. Les autres ont été cachés via CSS.

Voilà voilà ! Have fun petit padawan !
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 7WZJTfh
Lun 16 Aoû 2021 - 19:04
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2753
Coucouuu

Merci pour les explications, ça va me servir pour la suite :P
C'est très difficile de ne pas regarder le rendu [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 514879035 (mais je l'ai pas fait, pas encore, même si ça me démange énormément) xD
Question : pour le code HTML est-ce que je reprends tes blocs à 100% au niveau du staff, ou je laisse pour l'instant ce que j'ai fait ? (j'ai gardé ma version pour l'instant)
Pour les dimensions, je me suis limitée pour l'instant  à une largeur et une hauteur spécifique pour le bloc qui contient l'ensemble des blocs (je n'ai pas mis volontairement de style (même si je vais devoir le faire, mais sûrement à la fin).
Je me suis ensuite limitée aux hauteurs pour les blocs, et j'ai tenté de mettre des titres invisibles via CSS mais visible en HTML "pure".
Pour l'instant, je n'ai pas réussi à réunir davantage de classe, car j'ai énormément de style différent sur la maquette (que ce soit les bordures, les couleurs d'écriture) ; voici donc mon rendu actuel :

Le CSS :


HTML (uniquement les blocs demandés, mais je peux envoyer le code intégral s'il faut) :


> J'ai inséré un padding, mais tout dépendra du rendu, dans l'idéal, le texte ne doit pas coller le bord.
> les balises paragraphes sont présentes, si je ne dis pas de bêtise, (je dis bien si), même si pour le coup j'aimerai vérifié, c'est censé me dispenser d'un padding haut et bas et ça m'évite de les remplacer éventuellement par des ou autres balises par forcément utile (corrige-moi si je me trompe)
> j'hésite à fusionner pour certains attributs les classes crédits et actualités, quittes à ne laisser que ce qui diffère dans l'une, ou l'autre, mais encore une fois je ne suis sûre de rien et vu que tu m'as dis d'essayer de ne pas trop mettre de classe, ce n'est pas évident, ou alors je n'ai pas bien compris à ce niveau :3
> pas de style pour l'instant au niveau des scrollbar, c'est volontaire.

En mode absolument pas du tout sûre de moi, j'attends ton verdict :3 *fuit*

encore merci :3
_______________
Mar 17 Aoû 2021 - 10:48
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 1171
Plop @Arya !

Je dois t'arrêter tout de suite pour cette remarque sur les paragraphes :
les balises paragraphes sont présentes, si je ne dis pas de bêtise, (je dis bien si), même si pour le coup j'aimerai vérifié, c'est censé me dispenser d'un padding haut et bas et ça m'évite de les remplacer éventuellement par des ou autres balises par forcément utile (corrige-moi si je me trompe)
Tu penses encore trop en termes de "rendu". L'apparence de ces balises, tu pourras la changer avec le CSS. Là, ce à quoi tu dois penser, c'est "est-ce que je vais écrire un paragraphe de texte ?". Dans mon cas, j'avais codé comme ceci :
Code:
<div class="arya-pa__blocContexte">
    <h1>Contexte</h1>
    <div>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste exercitationem assumenda distinctio ducimus natus unde repellendus ab necessitatibus dolore et illo deserunt, nisi totam nihil pariatur autem rerum minima facilis!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae soluta quisquam ex obcaecati error perferendis facilis fugiat quidem. Vero, dolores.</p>
        <p><a href="#">En savoir plus</a></p>
    </div>
</div>
Et c'est similaire pour les autres. Le <div> sans classe ici me servira à faire l'effet de bloc déroulant.

j'hésite à fusionner pour certains attributs les classes crédits et actualités, quittes à ne laisser que ce qui diffère dans l'une, ou l'autre, mais encore une fois je ne suis sûre de rien et vu que tu m'as dis d'essayer de ne pas trop mettre de classe, ce n'est pas évident, ou alors je n'ai pas bien compris à ce niveau :3
Bien observé ^^ Deux solutions, en effet, soit tu mets en commun les attributs comme tu le faits d'habitude, avec un classique sélecteur multiple :
Code:
.PA-Arya-Amortentia-Contexte, .PA-Arya-Amortentia-actualites, .PA-Arya-Amortentia-Credits {
    trucs en commun
}

Soit tu observes ce qui sera en commun à plusieurs éléments (et pas seulement ces trois là) et tu prévois des classes supplémentaires, genre :
Code:
<div class="PA-Arya-Amortentia-Contexte PA-bloc PA-ligne1 PA-scroll"> ... </div>
Code:
.PA-Arya-Amortentia-Contexte {
    background-color:var(--couleurprincipale);
}

.PA-bloc { /* propriétés communes à la majorité des blocs */
    text-align:justify;
    padding:10px; /** voir en fonction du rendu **/
    font: 11px Verdana, sans-serif;
    border: 1px solid var(--couleursecondaire);
    color:var(--couleursecondaire);
}

.PA-scroll { /* blocs avec effet de scroll */
    overflow:auto;
    /*+ propriétés de scroll pour firefox */
}

.PA-ligne1 {
    height:150px;
}
Il n'y a pas de "meilleure" solution dans ce cas là, c'est toi qui vois selon tes besoins. Avec l'expérience, tu sauras à quel moment choisir l'une ou l'autre solution XD A titre personnel, j'aime bien la modularité des classes supplémentaires donc j'ai tendance à souvent privilégier cette option.

J'aurais également mis des propriétés personnalisées (des variables) pour la hauteur des lignes.

Tu peux revoir ton code si tu veux (Je ne vois pas d'erreur flagrante autre que mon classique "moi j'aurais fait autrement" XD), sinon tu me dis et on peut continuer XD
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 7WZJTfh
Mar 17 Aoû 2021 - 12:43
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2753
Coucou [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 1066248963
Je te réponds sur téléphone :)
Je vais essayer je vais essayer : je promets rien.
J'ai fait des progrès : j'ai pas encore vu le rendu.
Je comprends l'intérêt ; pour moi en effet, il y a un intérêt pour le contexte. Prochainement les évents aussi mais aussi pour les crédits et actualités  et sûrement d'autres blocs :)
Merci pour ton retour sur le reste, je viens de m'apercevoir que je n'ai pas intégrer les liens donc je vais le faire [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 2979024130 et je vais revoir certaines choses je pense (dans le css) dans la soirée et revoir du coup la disposition du html et du css ainsi que des scrollbars.

On pourra ensuite enchaîner sur le reste :) (si tu ne réponds pas avant : j'éditerai mon message avec la seconde version)
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 3775839356

édit : @'Christa
Je me suis pas mal posée de question comme tu t'en doutes, et j'ai regardé également quelques anciens codes pour me décider sans aller dans des codes trop anciens.
J'ai donc fini ces blocs (sans dimension et position, avec ce qui me semble être la technique la plus simple pour moi) :

> plus simple à mon sens pour obtenir le rendu de la maquette (même si j'ai pas essayé xD) ça promet [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 2979024130 mais j'arrête de parler de rendu où tu vas me couper la langue :
les autres blocs :


+ CSS complet sans dimension en largeur et quelques éléments en + avant que j'oublie complètement de le faire :


J'espère que c'est assez juste et que j'ai pas "trop fait" mais à mon sens la plupart des styles peuvent aller dans le bloc général, j'ai fait les scrollbars et les liens, comme ça, c'est fait.

Dis-moi si c'est good et si on peut passer à la suite (jvais éviter d'évoquer aussi mon hésitation sur les points d'actu que j'aurais aussi pu faire sous forme de liste, mais j'en aurais l'occasion à mon avis de retrouver des listes) xDD jvais devenir accros au liste si ça continue).

Encore merci pour l'atelier :3
_______________
Mar 17 Aoû 2021 - 13:18
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 1171
Plop @Arya ! Je m'en vais regarder tout ça

Côté HTML


Alors, ça serait plus propre de mettre les liens (ceux qui sont tous seuls, le "en savoir plus" et "voir tous les crédits") à l'intérieur de balises de paragraphes :)

Pour le code que tu me présentes pour le contexte, en principe, on utilise une balise paragraphe <p> par... paragraphe XD Cela dit je ne peux pas vraiment te reprocher de faire ça, ce n'est pas comme si Forumactif avait tendance à pousser les gens à penser à ça. Si à l'avenir tu te retrouves à coder en dehors de Forumactif, n'oublie pas ce détail cependant. Sémantiquement, c'est important.

Côté CSS


Je vois que tu as écrit le code des scrollbars. Vu que tu as écrit ceci :
Code:
    ::-webkit-scrollbar {
    width: 3px; /*largeur de la scrollbar verticale*/
    height: 3px; /*hauteur de la scrollbar horizontale*/
    background-color: transparent;}
 
    ::-webkit-scrollbar-track {
    background-color:transparent; /*couleur du fond de la scrollbar*/}
 
    ::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
    background-color: darkred; /*couleur de l'ascenseur*/;}
Ça veut plus ou moins dire que pour toute la page, les barres de défilement seront définies de cette façon. Du coup dans la foulée, tu peux utiliser la même logique pour celles de firefox, avec quelque chose du genre :
Code:
* {
    scrollbar-width:3px;
    scrollbar-color:darkred;
}
L'étoile permet de cibler TOUS les éléments de ton document. C'est un peu lourd et idéalement c'est mieux de cibler plus précisément, mais bon, je pense qu'on peut se le permettre pour une PA en iframe par exemple. En vrai, on peut même mettre à profit une règle CSS que tu as déjà écrite :
Code:
.PA-Arya-Amortentia, .PA-Arya-Amortentia *{
    box-sizing: border-box;
    /* Et rajouter les scrollbar firefox à la suite : */
    scrollbar-width:3px;
    scrollbar-color:darkred;
}
En tout cas, ça t'évitera de répéter le tout.

Accessoirement, permet moi de vérifier que tu sais ce que tu fais, et de te demander pourquoi tu as rajouté cette règle en particulier ?

Suite de l'exercice /o/


Du coup maintenant, il est temps de coder le bloc du staff. Flex va être utile ici à coup sûr, voire du flex (horizontal) dans du flex (vertical) :p Je te laisse coder ça par toi même et me donner les fragments de code correspondants. Si tu as des questionnements, n'hésite pas à me les communiquer !
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 7WZJTfh
Mer 18 Aoû 2021 - 18:24
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2753
Hola  @'Christa

Merciii pour les éclaircissements, j'essayerai d'y songer :)
Concernant la scrollbar, je n'y avais pas du tout penser, donc je vais modifier et déplacer les éléments pour firefox, dans ce que tu m'as dis, ça me semble plus logique et intégrer les liens dans la balise
Code:
<p></p>
.
Concernant la question que tu me demandes, tu me parles bien de la déclaration css :
Code:
box-sizing:border-box
Cette déclaration me permet là où je l'ai mise de contrôlé tous les enfants à l'intérieure du bloc parent pour ne pas que les blocs justement se casse trop facilement et sortent complètement du bloc conteneur. Cela va en quelque sorte compresser le bloc pour le faire occuper tout l'espace disponible dans le bloc parent (sans dimension) et il va se réduire automatiquement si j'en mets d'autre et les blocs vont se toucher, autrement dit, je pourrai plus facilement contrôler les bordures, les dimensions et les padding (je sais plus si ça touche les marges par contre). Je l'ai compris en tout cas ainsi lorsque j'ai commencé à coder, j'espère que mes explications sont claires (et qu'elles ne sont pas totalement fausses) mais je l'ai toujours utilisé pour des fiches rps, PA et fiche de PUB.
*sort très loin à présent avant de se faire taper ou de se faire capturer dans une pokeball*

Je vais coder demain, vu que le tag enfin le signalement ne fonctionne pas lorsque j'édite, je te signalerai juste sur le serveur discord que j'ai édité le message :) (que des répétitions, j'adore)

_______________
Mer 18 Aoû 2021 - 19:44
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 1171
Pour la question piège, je parlais des deux XD
Pourquoi le sélecteur .PA-Arya-Amortentia, .PA-Arya-Amortentia * ?
Et donc, pourquoi box-sizing, en effet :p

Un petit tour sur le MDN te rafraichira la mémoire. Cette propriété permet de changer la méthode de calcul des dimensions des conteneurs. C'est à dire que ça change la façon dont l'épaisseur de la bordure et la valeur des marges internes - le padding - influent sur la largeur d'une boite.

Si tu définis ta boite à 100% de largeur, et avec box-sizing:content-box alors ta boite fera 100% de large + l'épaisseur de la bordure de chaque côté + la valeur du padding de chaque côté.

Si tu définis ta boite à 100% de largeur, et avec box-sizing:border-box, alors ta boite fera 100% de large (et la bordure et le padding seront "à l'intérieur" ce qui veut dire que l'espace "remplissable" sera inférieur à 100%).
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 7WZJTfh
Mer 18 Aoû 2021 - 21:14
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2753
Fallait bien que je tombe sur un de tes pièges et que je m'y enfonce  @'Christa
Déjà ça me rassure, on m'avait montré le même site et je l'ai aussi toujours en cas de doute xD
Donc je te confirme que j'ai opté pour le box-sizing:border-box pour que tout ce qui soit à l'intérieure de la boîte principal qui fait 100 % y reste à l'intérieure, sans que cela ne dépasse du bloc (en gros), c'est pas mon but recherché que ça aille de partout en mode "yolo" je l'ai appliqué à  .PA-Arya-Amortentia, .PA-Arya-Amortentia *  pour que le code comprenne que je vise tout ce qui est à l'intérieure de mon bloc .PA-Arya-Amortentia et tous les éléments de mon document qui sera attaché à cette classe plus particulièrement.

Lovely

Je crois que je suis arrivée à un petit quelque chose pour la suite :

j'ai volontairement pas mis de balise


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 3775839356 Je pense que j'ai plutôt bien cerné, la chose, jme tâte cependant à appliquer une largeur + hauteur fixe pour les infos staff mais à première vue ça n'a pas l'air utile, sachant que j'ai utilisé un pseudo assez long  [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 3775839356

encore merci pour tout  [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 3775839356
_______________
Jeu 19 Aoû 2021 - 10:15
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 1171
Hello @Arya !

Me revoici donc pour te malmener gentiment XD

Alors, comme ce qui se conçoit bien s'énonce clairement, un peu de reformulation #ProfesseureChiante
Arya a écrit:je l'ai appliqué à  .PA-Arya-Amortentia, .PA-Arya-Amortentia *  pour que le code comprenne que je vise tout ce qui est à l'intérieure de mon bloc .PA-Arya-Amortentia et tous les éléments de mon document qui sera attaché à cette classe plus particulièrement.
Le sélecteur * (le sélecteur universel), et plus exactement dans notre cas .PA-Arya-Amortentia *, ciblera tous les descendants de l'élément HTML ayant la classe .PA-Arya-Amortentia. Comme dans beaucoup d'autres contextes, l'astérisque (le symbole *) est un "joker" qui représente n'importe quel élément.

Ma mère me dit toujours que de la répétition nait la connaissance, donc je te reprends également sur ce passage :
Arya a écrit:j'ai volontairement pas mis de balise  <p></p> au lien, car j'ai pas encore trouvé comment enlever l'aspect retour à la ligne et saut de ligne en haut et en bas mais j'y ai pensé et je risque d'y revenir sûrement dès que j'aurais trouvé quelque chose pour contrer ce point.
Deux petites remarques :
- Tu restes encore focalisée sur le rendu plutôt que sur la sémantique  [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 2596956373
- Quand je parlais de mettre les liens dans un paragraphe, c'est parce que nous avions une succession de paragraphes et que le lien pouvait être inclus un paragraphe à lui tout seul, dans le sens où il est "distinct" du précédent passage. Ce n'est pas obligatoire, c'est juste - dans la situation où on se trouvait, avec une succession de blocs de texte - plus sémantiquement propre.

Tu pourrais également choisir de mettre l'ensemble des infos d'un staff dans un paragraphe, comme ceci :
Code:
<p>
    <strong>Alhéna Gaunt-Lestrange</strong>
    <br>
    <a href="#" title="Lien vers le profil" target="_blank">Profil</a> - <a target="_blank" href="#" title="lien vers la boîte à MP">MP</a>
</p>
Ou même dans une liste de définitions (même s'il n'y en a qu'une, ça me semble un choix qui reste plausible dans cette situation) :
Code:
<dl>
    <dt>Alhéna Gaunt-Lestrange</dt>
    <dd><a href="#" title="Lien vers le profil" target="_blank">Profil</a> - <a target="_blank" href="#" title="lien vers la boîte à MP">MP</a></dd>
</dl>
Qui pourrait également s'écrire de cette façon :
Code:
<dl>
    <dt>Alhéna Gaunt-Lestrange</dt>
    <dd><a href="#" target="_blank" title="Lien vers le profil">Profil</a></dd>
    <dd><a href="#" target="_blank" title="lien vers la boîte à MP">MP</a></dd>
</dl>
Ou encore, de façon plus traditionnelle on pourrait s'en tenir à un combo titre et paragraphe(s) :
Code:
<div class="infoStaff">
    <h2>Alhéna Gaunt-Lestrange</h2>
    <p><a target="_blank" href="#" title="lien vers le profil">Profil</a> - <a target="_blank" href="#" title="lien vers la boîte à MP">MP</a></p>
</div>
Voire encore (c'est la version que j'ai choisie pour mon propre code) :
Code:
<div class="infoStaff">
    <h2>Alhéna Gaunt-Lestrange</h2>
    <ul>
        <li><a target="_blank" href="#" title="lien vers le profil">Profil</a></li>
        <li><a target="_blank" href="#" title="lien vers la boîte à MP">MP</a></li>
    </ul>
</div>
C'est un exemple qui souligne le fait qu'il existe plusieurs solutions valides pour coder ce que tu veux, même en se faisant faire des gros yeux par une 'Christa qui répète "la sémantique" telle un disque rayé.

(PS : J'avais pas remarqué auparavant, mais attention aux ; en double dans ton CSS, y'en a un au niveau de tes scrollbars)

Je vais mettre de côté la question de la hauteur fixe de la section du staff pour le moment, on gèrera ça à la fin. A titre personnel, j'aurais fait sans =D Pour le reste, tu as bien compris ce que je voulais dire quand je parlais de flex dans du flex /o/

As-tu des questions à propos de ce que j'ai expliqué jusqu'ici ?
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 7WZJTfh
Lun 23 Aoû 2021 - 20:46
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2753
Coucou @'Christa Panique
Pour la reformulation, j'ai bien compris (c'était au final ce que je voulais dire xD mais bon comme d'habitude, j'ai dû mal à m'exprimer, je plaide coupable)
Pour les remarques, je vais essayer de ne plus parler de rendu [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 3775839356 et je note ta remarque, c'est vrai qu'habituellement pour moi le lien est souvent lié à un même paragraphe mais c'est noté, je vais essayer de ne plus faire cette erreur ;
J'ai corrigé le ; en double :)
Pour le staff, je note les différentes formes possibles, c'est très instructif, je comprends mieux à quoi correspond ces balises que j'ai déjà vu sur certains templates de modernbb [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 3775839356
Je vais donc voir pour affiner cette partie [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 3775839356

Je vais mettre de côté la question de la hauteur fixe de la section du staff pour le moment, on gèrera ça à la fin. A titre personnel, j'aurais fait sans =D Pour le reste, tu as bien compris ce que je voulais dire quand je parlais de flex dans du flex /o/
ça y est je veux savoir xD
Là à l'instant T, je n'en ai pas, mais je vais y réfléchir (tout m'a l'air claire dans ce que tu as dis, et dans les propositions suggérée)

[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 3775839356 Je vais prendre des notes sur certaines choses pour m'en souvenir :3

encore merci <3
_______________
Mar 24 Aoû 2021 - 8:31
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 1171
Plop @Arya !

Si tu n'as pas de questions particulières, on continue donc ! Je te laisse nettoyer/revoir ton code général à ce stade (j'espère que tu codes bien sur notepad++, cette absence de tabulations et de belle mise en page me tracasse è_é). D'ailleurs, c'est une impression ou tu as une certaine tendance à copier coller les fragments d'anciens codes ? Parce que dans ce cas, c'est une habitude à perdre. Même si tu t'en inspires, je te conseille vivement de les réécrire à chaque fois. On apprend beaucoup mieux quand on réécrit des trucs que quand on fait du copié collé.

Le bloc des partenaires n'a pas l'air d'opposer un défi particulier, je suis toujours très défavorable à l'utilisation d'un <select> pour les partenaires mais tu fais ce que tu veux XD Tu peux coder ça vite fait et me montrer le résultat du bloc en question (CSS & HTML qui correspondent) ?

Et du coup, on en arrive au bloc des évents. Il est très simple également, mais en me basant sur mes vagues souvenirs de tes anciens codes, je suis intriguée par comment tu comptes l'aborder. J'ai le fouet à portée de main si besoin :p Du coup, pareil, je voudrais voir les codes CSS et HTML qui correspondent à cette partie.

Bon courage !



_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 7WZJTfh
Mar 24 Aoû 2021 - 14:44
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2753
Merci :) et bonjour @'Christa
J'espère que tu vas bien ? :)
Je vais nettoyer le code dans la journée, et bien évidemment, je travaille dessus et pour cette PA je ne reprends absolument aucun ancien code :)
C'est un bon moyen pour moi de revoir "les bases" donc je vais m'y mettre à 100 %
à ce sujet, quelques questions m'ont traversés l'esprit, notamment lorsque tu as évoqué que de ton côté, tu n'avais pas mis de dimension, est-ce que de mon côté je les laisse ?
Pour l'instant, voici les éléments qui en ont (sans nettoyage) :
- le bloc .PA--Arya-Amortentia qui englobe tous les blocs (largeur et hauteur)
- le bloc .PA-Arya-Amortentia-Contexte + .PA-Arya-Amortentia-Contexte > div (hauteur)
- le bloc .PA-Arya-Amortentia-actualites, .PA-Arya-Amortentia-Credits (hauteur + hauteur pour le bloc actualites > div)
- les blocs suivants :
Code:
.PA-Arya-Amortentia-Staff {
   height:125px;
   display:flex;
   flex-direction:column;
   justify-content:space-between;}
   
   .PA-Arya-Amortentia-Staffcontenu {
   display:flex;
   align-items: center;
   justify-content:space-between;
    padding:5px;
   width:210px;
   border: 1px solid var(--couleursecondaire);}
   
   .PA-Arya-Amortentia-Staffcontenu img {
   width:50px;
   height:50px;
   object-fit:cover;}
   
   .PA-Arya-Amortentia-Staffcontenu div {
   width:145px;
   max-height:50px;}

Est-ce que tu me conseilles de retirer davantage de dimension ?
Pour la partie du bloc partenaire, j'ai bien repris pour cette partie un bout d'ancien code, puis-je éventuellement le reprendre ? j'aimerai bien revoir un tuto dessus mais je n'en ai pas encore trouvé à proprement parler mais ça peut-être l'occasion de retravailler sa création si j'en trouve un....
pour le bloc évent, j'ai ma petite idée dessus, surtout que j'ai l'idée d'un effet particulier, simple image, et au survol le bloc apparaît avec une transition.
Je pense relire à cet effet, ce tuto
ça ne peut pas me faire du mal ; j'ai également trouvé ce tuto également (si jamais tu en as d'autres à me conseiller) ; je chercherai également quelques-uns pour revoir les transitions et effets possibles :)
Je n'ai encore rien fait :)
Je pense me mettre à des recherches et à l'exercice soit dans la journée ou demain en fonction de ta réponse :)

D'avance merci pour ton retour :)
_______________
Mer 25 Aoû 2021 - 8:30
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 1171
Hello @Arya

Alors pour les dimensions, il faut savoir que je pense le codage de cette PA en sachant que je vais la coder avec display:grid, ce qui fait que j'ai une logique de réflexion déjà "orientée" en ce qui concerne les dimensions. On reparlera de grid plus tard, c'est pour ça que pour le moment je te conseille d'oublier tout ce qui est positionnement/agencement des blocs et de juste écrire leur contenu un par un. Si on regardait le résultat visuel de tout ce bazar, tel que moi je l'ai codé, il n'y a pour le moment aucune vraie dimension fixée si ce n'est sur les blocs avec effets déroulant (et encore, c'est une hauteur maximale avec la propriété max-height).

Ce qui est fixé pour le moment dans mon code, c'est la largeur du conteneur général (ton .PA--Arya-Amortentia) et les dimensions de l'image du staff. Et c'est tout @o@

Ce que je fixerai quand je m'occuperai dans l'agencement... hmmm, la hauteur des lignes, potentiellement ; la largeur de la colonne qui contient le staff ; et je ne suis pas encore certaine pour le reste.

Je suis assez fatiguée aujourd'hui et je n'ai donc pas le courage de te réorienter vers de meilleurs tutoriels concernant les effets d'infobulle et de survol, mais j'avais déjà cette vieille démonstration (de nos jours je pense que j'utiliserais la propriété transform plutôt que de jouer avec le positionnement, genre transform:translateX(-100%) à la place de left:-100%, mais bon c'est juste un détail).

Pour les partenaires, fais comme tu sens, tant que tu réécris plutôt que copier coller XD C'est l'occasion de te demander comment fonctionnent ces différentes balises et de te renseigner sur la question. Le MDN est ton ami, entre autres XD
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 7WZJTfh
Mer 25 Aoû 2021 - 18:05
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2753
Coucou [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 3775839356  @'Christa

Encore merci pour tes explications et éclaircissements :)
J'ai bien procédé au nettoyage du code (où l'indexation est bien présente, je pourrais te faire deux captures au besoin sans soucis) et j'y ai ajouté des modifications, notamment à l'endroit où seront les partenaires, j'ai également regardé plusieurs tutos, pour bien comprendre la reprise de mon code select, du coup, pour moi, j'ai bien compris cette partie et à quoi sert le (qu'on trouve au début, de mon code select) :
Code:
<select onchange="location = this.options [this.selectedIndex].value">
C'est comme si on disait, "je souhaite changer de destination en cliquant sur l'une des sélections de la liste, et entre autre, se rendre sur une page internet".
Je n'ai donc pas appliqué de hauteur ou de largeur pour l'instant :3
Juste un fonds et une bordure pour l'instant :) et je me suis ensuite concentrée sur le bloc évent, qui pour moi s'affichera vis-à-vis du texte en survol comme je le souhaite ; j'espère du coup que ça marche xD (je ne l'ai pas copié, collé, mais réecrit, tout d'abord, j'ai réecris le HTML le plus simple possible, et ensuite, je me suis chargée du CSS, j'ai mis pour le bloc principal, une largeur et hauteur, et ensuite juste une hauteur et overflow, avec transition, je parle, je parle, mais voici le code, pour que tu puisses complètement le voir, je te c/c la PA intégrale :
Code:
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Page d'accueil d'Amortentia</title>
    <style type="text/css">
 /*** variables ***/
 :root {
 --couleurprincipale:#C5C5B8;
 --couleursecondaire:black; /** écriture **/}
 
 ::-webkit-scrollbar {
 width: 3px; /*largeur de la scrollbar verticale*/
 height: 3px; /*hauteur de la scrollbar horizontale*/
 background-color: transparent;}

 ::-webkit-scrollbar-track {
 background-color:transparent; /*couleur du fond de la scrollbar*/}

 ::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
 background-color: darkred; /*couleur de l'ascenseur*/}

 a:link, a:visited, a:hover, a:focus, a:active {
 text-decoration:none;
 font-weight:bold; /** à voir **/
 font-style:italic;
 color: darkred;}
 
 .PA-Arya-Amortentia {
 width:800px;
 padding:10px;
 font: 11px Verdana, sans-serif; /** à changer avec une variable **/
 color:var(--couleursecondaire);
 text-align:justify;
 /** voir pour les positions en dernier **/}
 
 .PA-Arya-Amortentia, .PA-Arya-Amortentia *{
    box-sizing: border-box;
 scrollbar-width:3px;
 scrollbar-color:darkred;}
 
 .PA-Arya-Amortentia h1 {
 display:none;}
 
 .PA-Arya-Amortentia-Contexte {
 padding:10px; /** voir en fonction du rendu **/
 background-color:var(--couleurprincipale);
 border: 1px solid var(--couleursecondaire);}
 
 .PA-Arya-Amortentia-Contexte > div {
 height:130px;
 padding:5px;
 overflow:auto;}
 
 .PA-Arya-Amortentia-actualites, .PA-Arya-Amortentia-Credits {
 padding:10px; /** voir en fonction du rendu **/}
 
 .PA-Arya-Amortentia-actualites {
 border: 1px solid var(--couleursecondaire);}
 
 .PA-Arya-Amortentia-actualites > div {
 height:80px;
 padding:5px;
 overflow:auto;}
 
 .PA-Arya-Amortentia-Credits {
 color:darkred;}
 
 .PA-Arya-Amortentia-Staff {
 display:flex;
 flex-direction:column;
 justify-content:space-between;}
 
 .PA-Arya-Amortentia-Staffcontenu {
 display:flex;
 align-items: center;
 justify-content:space-between;
    padding:5px;
 border: 1px solid var(--couleursecondaire);}
 
 .PA-Arya-Amortentia-Staffcontenu img {
 width:50px;
 height:50px;
 object-fit:cover;}
 
 .PA-Arya-Amortentia h2 {
 margin:0px;
 padding:0px;
 font:10px Verdana, sans-serif; /** variable **/
 font-weight:bold;}
 
 .PA-Arya-Amortentia-Staff ul, .PA-Arya-Amortentia-Partenaires ul {
 list-style-type: none;
    padding: 0;
 margin:0;
    display:flex;}
 
 .PA-Arya-Amortentia select {
 padding: 0px 10px;
    background-color: var(--couleurprincipale);
    border: 1px solid var(--couleursecondaire);}

 .PA-Arya-Amortentia-event {
 width: 400px;
 height: 130px;
 background-image: url('https://zupimages.net/up/21/34/jr4e.png');
    background-position: center;
    background-size: cover;
 display: flex;
    justify-content: center;
    align-items: center;}
 
 .PA-Arya-Amortentia-eventSurvol {
 background-color: var(--couleurprincipale);
    border: 1px solid var(--couleursecondaire);
 opacity: 0;
 height:100px;
    margin: 20px;
 padding:5px;
    overflow: auto;
    transition: all 1s;}
 
 .PA-Arya-Amortentia-eventSurvol:hover {
    opacity: 1;}

 
  </style>
  </head>
<body>
 <div class="PA-Arya-Amortentia">
 <!-- Première ligne PA -->
 <div class="PA-Arya-Amortentia-Contexte">
 <h1>Contexte</h1>
 <div>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
 <p><a target="_blank" href="#" title="Lien menant vers le contexte">En savoir plus</a></p>
 </div>
 </div>

 <div class="PA-Arya-Amortentia-Staff">
 <h1>Votre staff</h1>
 <div class="PA-Arya-Amortentia-Staffcontenu">
 <img src="https://64.media.tumblr.com/683378488bea054bca1116f110934941/edb1389f47e3780f-fc/s500x750/9c0c8c15701b917c35d3ef48a766df4a02cbb96f.png" alt="imagestaff1" title="staff1"/>
 <div><h2>Alhéna Gaunt-Lestrange</h2>
 <ul>
 <li><a target="_blank" href="#" title="lien vers le profil">Profil</a></li> -
 <li><a target="_blank" href="#" title="lien vers la boîte à MP">MP</a></li>
 </ul>
 </div>
 </div>
 
 <div class="PA-Arya-Amortentia-Staffcontenu">
 <img src="https://64.media.tumblr.com/683378488bea054bca1116f110934941/edb1389f47e3780f-fc/s500x750/9c0c8c15701b917c35d3ef48a766df4a02cbb96f.png" alt="imagestaff1" title="staff1"/>
 <div><h2>Alhéna Gaunt-Lestrange</h2>
 <ul>
 <li><a target="_blank" href="#" title="lien vers le profil">Profil</a></li> -
 <li><a target="_blank" href="#" title="lien vers la boîte à MP">MP</a></li>
 </ul>
 </div>
 </div>
 </div>
 
 <div class="PA-Arya-Amortentia-Partenaires">
 <h1>Les partenaires et Demandes</h1>
 <ul>
 <li><a target="_blank" href="#" title="Lien menant à la liste des partenaires">Nos partenaires</a></li> -
 <li><a target="_blank" href="#" title="Lien menant au sujet pour faire votre demande de partenariat">Et vous ?</a></li>
 </ul>

 <select onchange="location = this.options [this.selectedIndex].value">
 <option selected="selected">Top partenaire</option>
 <option target="_blank" value="#">Nom du forum</option>
 <option target="_blank" value="#">Nom du forum</option>
 <option target="_blank" value="#">Nom du forum</option>
 <option target="_blank" value="#">Nom du forum</option>
 <option target="_blank" value="#">Nom du forum</option>
 </select>      
 </div>

 <div class="PA-Arya-Amortentia-event">
 <div class="PA-Arya-Amortentia-eventSurvol">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
 <p><a target="_blank" href="#" title="Lien menant vers l'évent">En savoir plus</a></p>
 </div>
 </div>

 <!-- Fin de la première ligne de la PA -->

 <!-- Deuxième ligne PA -->
 <div class="PA-Arya-Amortentia-timeline">
 /** contenu bloc **/
 </div>

 <div class="PA-Arya-Amortentia-Topsites">
 /** contenu bloc **/
 </div>

 <div class="PA-Arya-Amortentia-liens">
 /** contenu bloc **/
 </div>
 <!-- Fin de la deuxième ligne de la PA -->

 <!-- Troisième ligne PA -->
 <div class="PA-Arya-Amortentia-actualites">
 <h1>Actualité</h1>
 <div>
 <p><strong>Date</strong> - Lorem ipsum dolor sit amet, consectetuer adipiscing <a target="_blank" href="#" title="à compléter">elit.</a></p>
 <p><strong>Date</strong> - Lorem ipsum dolor sit amet, consectetuer adipiscing <a target="_blank" href="#" title="à compléter">elit.</a></p>
 <p><strong>Date</strong> - Lorem ipsum dolor sit amet, consectetuer adipiscing <a target="_blank" href="#" title="à compléter">elit.</a></p>
 <p><strong>Date</strong> - Lorem ipsum dolor sit amet, consectetuer adipiscing <a target="_blank" href="#" title="à compléter">elit.</a></p>
 <p><strong>Date</strong> - Lorem ipsum dolor sit amet, consectetuer adipiscing <a target="_blank" href="#" title="à compléter">elit.</a></p>
 <p><strong>Date</strong> - Lorem ipsum dolor sit amet, consectetuer adipiscing <a target="_blank" href="#" title="à compléter">elit.</a></p>
 </div>
 </div>

 <div class="PA-Arya-Amortentia-recherches">
 /** contenu bloc **/
 </div>

 <div class="PA-Arya-Amortentia-Credits">
 <h1>Crédits</h1>
 <p>Le design a été réalisé par XX. L'index a été codé par Arya avec l'aide d'une maquette réalisée par Hozber d'épicode.</p>
 <p>Toutes reproductions partielles ou complètes est interdites</p>
 <p><a target="_blank" href="#" title="Lien menant vers les crédits du forum">Voir tous les crédits ici</a></p>
 
 </div>
 <!-- Fin de la troisième ligne de la PA -->

 </div>
</body>
</html>

J'espère que FA va pas me squizer (j'ai pas c/C en texte brut)

*espère avoir réussi l'exercice*

[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 3775839356

belle journée
_______________
Jeu 26 Aoû 2021 - 11:10
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 1171
Plop @Arya ! Toutes mes excuses pour l'attente @_@

Toujours pas d'indentation dans le copier collé. Peut-être que transformer les tabulations en espaces fonctionnerait mieux ? Mes codes copiés-collés conservent leurs tabulations, c'est pour ça que je suis perplexe (tu n'es pas la seule à avoir ce souci, je vois souvent ça sur FA). Si tu te sens l'envie de tester, j'ai vérifié dans Notepad++, si tu vas dans EditionTraitement des espacementstransformer les tabulations en espaces, ça devrait le faire. Je pense que c'est ça, parce que tu remarqueras que le code que je t'avais donné comme "base" pour un document HTML conserve son indentation d'origine.

Revenons en à ton code, qui s'est pris un coup de nettoyage automatique par la magie de mon logiciel XD Je t'avais suggéré de séparer le CSS du HTML, en faisant un fichier pour chacun. Je suppose que tu as du mal à "jongler" d'un fichier à l'autre, p'têt parce que tu as trop l'habitude de Codepen, mais fondamentalement quand tu codes pour un forum (les templates et la PA par défaut en particulier) le HTML et le CSS sont forcément séparés. Même si tu comptes à la fin rassembler les deux, ça serait mieux de les séparer pendant la conception, ça rendra le document plus facile à lire.

Si toutes tes listes dans cette PA sont vouées à ne pas avoir de marges ni de puces, tu peux combiner ces propriétés directement dans un sélecteur plus général :
Code:
.PA-Arya-Amortentia ul {
    list-style-type: none;
    padding: 0;
    margin:0;
}
Et peut-être le flex aussi XD Et comme Manu m'a dit qu'il n'y avait pas de puces quand on changeait le display, p'têt que le list-style-type n'est même pas utile @o@

Bon, commençons par le début.

Les partenaires


Code:
<div class="PA-Arya-Amortentia-Partenaires">
    <h1>Les partenaires et Demandes</h1>
    <ul>
        <li><a target="_blank" href="#" title="Lien menant à la liste des partenaires">Nos partenaires</a></li> -
        <li><a target="_blank" href="#" title="Lien menant au sujet pour faire votre demande de partenariat">Et vous ?</a></li>
    </ul>

    <select onchange="location = this.options [this.selectedIndex].value">
        <option selected="selected">Top partenaire</option>
        <option target="_blank" value="#">Nom du forum</option>
        <option target="_blank" value="#">Nom du forum</option>
        <option target="_blank" value="#">Nom du forum</option>
        <option target="_blank" value="#">Nom du forum</option>
        <option target="_blank" value="#">Nom du forum</option>
    </select>
</div>
Mon opinion sur l'usage de <select> mise à part, il y a un truc qui coince dans ce code, c'est ce - juste après le premier élément de liste XD Le petit trait, faudra l'ajouter avec un petit pseudo-élément ::after ou ::before bien placé. Parce que là c'est pas très propre.

Les events


Code:
.PA-Arya-Amortentia-event {
    width: 400px;
    height: 130px;
    background-image: url('https://zupimages.net/up/21/34/jr4e.png');
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.PA-Arya-Amortentia-eventSurvol {
    background-color: var(--couleurprincipale);
    border: 1px solid var(--couleursecondaire);
    opacity: 0;
    height: 100px;
    margin: 20px;
    padding: 5px;
    overflow: auto;
    transition: all 1s;
}

.PA-Arya-Amortentia-eventSurvol:hover {
    opacity: 1;
}
Et puis
Code:
<div class="PA-Arya-Amortentia-event">
    <div class="PA-Arya-Amortentia-eventSurvol">
        <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe praesentium voluptatum illum voluptatibus expedita libero ipsa fuga. Quidem iusto, et dicta quia, magnam voluptas nisi neque dolorem ratione culpa mollitia, reiciendis cupiditate iure doloribus commodi esse quaerat rerum! Fuga optio officia nemo dolorum est quo quibusdam molestiae quidem cumque. Illum?
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores aliquid quis reiciendis hic, ducimus beatae odit odio numquam!
        </p>
        <p><a target="_blank" href="#" title="Lien menant vers l'évent">En savoir plus</a></p>
    </div>
</div>
Oui j'ai un peu raccourci. Accessoirement, souviens toi, un paragraphe de texte, c'est une balise <p>

Niveau code, je suppose qu'on aurait pu se passer d'une classe pour l'effet de survol, un simple sélecteur .PA-Arya-Amortentia-event > div ferait l'affaire, vu qu'on cible un élément <div> qui est l'enfant direct de .PA-Arya-Amortentia-event

Je constate que malgré tout, tu n'as pas pu faire sans dimensions, ce à quoi je m'attendais XD Tu as pourtant eu le très bon réflexe d'utiliser flex pour centrer le bloc qui apparait au survol dans son conteneur parent.

Suggestion : oublions les largeurs pour le moment. La hauteur, par contre, est nécessaire pour avoir l'effet de bloc déroulant. Tu peux te contenter de la fixer dans un seul des deux blocs (le parent). L'enfant, lui, aura une hauteur de 100% de la hauteur disponible. Par contre, il va falloir retirer ses marges (margin) et mettre des padding au parent.

A tester de ton côté !

En tout cas, jusqu'ici, tout va bien =) Quelques réflexes à perdre, mais je vois que tu sais t'adapter \o/ Des questions ?
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 7WZJTfh
Lun 30 Aoû 2021 - 18:22
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2753
Hello :)
Je viens d'essayer (même si je vois pas forcément la différence) [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 514879035
et t'en fait pas pour l'attente ;) :3
Je devrais voir une différence ?
Pour les onglets séparés, oui c'est pas évident, mais vu que c'est une page html pour le coup, c'est plus simple pour moi [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 3775839356
Concernant les listes, je comprends la simplification, en revanche, cependant, je ne sais pas si le fait d'enlever le
Code:
list-style-type
marchera Coeur 2
Les partenaires, je comprends, (même si c'était plus simple encore xDD)
est-ce que potentiellement le code serait juste comme ça (en retirant le -) et en mettant ceci dans le CSS :
Code:
.PA-Arya-Amortentia-Partenaires ul li::after {
    content: "-";
}
.PA-Arya-Amortentia-Partenaires ul li:nth-child(2)::after {
    display: none;
}

ou en l'état peut-être comme ça :
.PA-Arya-Amortentia ul li::after {
    content: "-";
}
.PA-Arya-Amortentia ul li:nth-child(2)::after {
    display: none;
}
peut-être que ça permettrait d'appliquer le - au milieu dans toutes mes listes qui sont pour l'instant retrouvable dans la partie staff et partenaires [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 2979024130
*réflechit*

pour la partie évent, j'ai juste besoin de récap pour voir si j'ai bien compris :
le mieux serait d'appliquer une hauteur au bloc parent, avec les padding, et pour le bloc enfant, on retire largeur/hauteur pour que ça prenne automatiquement toute la place, mais est-ce que ça ne va pas buguer, l'overflow, n'a-t-il pas besoin d'une hauteur pour fonctionner ? c'est peut-être débile xD mais jme pose la question :p puis vu que j'ai pas le droit de prévisualiser le rendu (je suis punie) pour l'instant je suis donc dans l'incertitude vis-à-vis de son fonctionnement :p

Juste pour tester cette fois-ci ce cher code xD pour voir si l'indentation fonctionne cette fois, juste le html (on croise les doigts):

Code:
<body>
    <div class="PA-Arya-Amortentia">
        <!-- Première ligne PA -->
            <div class="PA-Arya-Amortentia-Contexte">
                <h1>Contexte</h1>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
                        <p><a target="_blank" href="#" title="Lien menant vers le contexte">En savoir plus</a></p>
                    </div>
            </div>

            <div class="PA-Arya-Amortentia-Staff">
                <h1>Votre staff</h1>
                    <div class="PA-Arya-Amortentia-Staffcontenu">
                        <img src="https://64.media.tumblr.com/683378488bea054bca1116f110934941/edb1389f47e3780f-fc/s500x750/9c0c8c15701b917c35d3ef48a766df4a02cbb96f.png" alt="imagestaff1" title="staff1"/>
                            <div><h2>Alhéna Gaunt-Lestrange</h2>
                                <ul>
                                    <li><a target="_blank" href="#" title="lien vers le profil">Profil</a></li> -
                                    <li><a target="_blank" href="#" title="lien vers la boîte à MP">MP</a></li>
                                </ul>
                            </div>
                    </div>
                   
                    <div class="PA-Arya-Amortentia-Staffcontenu">
                        <img src="https://64.media.tumblr.com/683378488bea054bca1116f110934941/edb1389f47e3780f-fc/s500x750/9c0c8c15701b917c35d3ef48a766df4a02cbb96f.png" alt="imagestaff1" title="staff1"/>
                            <div><h2>Alhéna Gaunt-Lestrange</h2>
                                <ul>
                                    <li><a target="_blank" href="#" title="lien vers le profil">Profil</a></li> -
                                    <li><a target="_blank" href="#" title="lien vers la boîte à MP">MP</a></li>
                                </ul>
                            </div>
                    </div>
            </div>
           
            <div class="PA-Arya-Amortentia-Partenaires">
                <h1>Les partenaires et Demandes</h1>
                    <ul>
                        <li><a target="_blank" href="#" title="Lien menant à la liste des partenaires">Nos partenaires</a></li> -
                        <li><a target="_blank" href="#" title="Lien menant au sujet pour faire votre demande de partenariat">Et vous ?</a></li>
                    </ul>

                    <select onchange="location = this.options [this.selectedIndex].value">
                        <option selected="selected">Top partenaire</option>
                        <option target="_blank" value="#">Nom du forum</option>
                        <option target="_blank" value="#">Nom du forum</option>
                        <option target="_blank" value="#">Nom du forum</option>
                        <option target="_blank" value="#">Nom du forum</option>
                        <option target="_blank" value="#">Nom du forum</option>
                    </select>     
            </div>

            <div class="PA-Arya-Amortentia-event">
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
                    <p><a target="_blank" href="#" title="Lien menant vers l'évent">En savoir plus</a></p>
                </div>
            </div>

        <!-- Fin de la première ligne de la PA -->

        <!-- Deuxième ligne PA -->
            <div class="PA-Arya-Amortentia-timeline">
            /** contenu bloc **/
            </div>

            <div class="PA-Arya-Amortentia-Topsites">
            /** contenu bloc **/
            </div>

            <div class="PA-Arya-Amortentia-liens">
            /** contenu bloc **/
            </div>
        <!-- Fin de la deuxième ligne de la PA -->

        <!-- Troisième ligne PA -->
            <div class="PA-Arya-Amortentia-actualites">
                <h1>Actualité</h1>
                    <div>
                        <p><strong>Date</strong> - Lorem ipsum dolor sit amet, consectetuer adipiscing <a target="_blank" href="#" title="à compléter">elit.</a></p>
                        <p><strong>Date</strong> - Lorem ipsum dolor sit amet, consectetuer adipiscing <a target="_blank" href="#" title="à compléter">elit.</a></p>
                        <p><strong>Date</strong> - Lorem ipsum dolor sit amet, consectetuer adipiscing <a target="_blank" href="#" title="à compléter">elit.</a></p>
                        <p><strong>Date</strong> - Lorem ipsum dolor sit amet, consectetuer adipiscing <a target="_blank" href="#" title="à compléter">elit.</a></p>
                        <p><strong>Date</strong> - Lorem ipsum dolor sit amet, consectetuer adipiscing <a target="_blank" href="#" title="à compléter">elit.</a></p>
                        <p><strong>Date</strong> - Lorem ipsum dolor sit amet, consectetuer adipiscing <a target="_blank" href="#" title="à compléter">elit.</a></p>
                    </div>
            </div>

            <div class="PA-Arya-Amortentia-recherches">
            /** contenu bloc **/
            </div>

            <div class="PA-Arya-Amortentia-Credits">
                <h1>Crédits</h1>
                    <p>Le design a été réalisé par XX. L'index a été codé par Arya avec l'aide d'une maquette réalisée par Hozber d'épicode.</p>
                    <p>Toutes reproductions partielles ou complètes est interdites</p>
                    <p><a target="_blank" href="#" title="Lien menant vers les crédits du forum">Voir tous les crédits ici</a></p>
       
            </div>
        <!-- Fin de la troisième ligne de la PA -->

    </div>
</body>

J'ai pas d'autres questions pour l'instant, mais j'ai hâte de continuer :p

Bonne soirée et encore merciiii
_______________
Mar 31 Aoû 2021 - 20:03
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 1171
Plop @Arya !

Tabulations et espaces dans Notepad++


Alors, la différence entre tabulations et espaces ne se voit pas visuellement sous Notepad++, sauf si tu vas dans AffichageSymboles spéciauxAfficher les blancs et tabulations. Tu verras alors des points à la place des espaces, et des flèches à la place des tabulations.

Tu peux également simplement "sélectionner" un blanc, si le blanc est un gros bloc, c'est une tabulation, si c'est une succession d'espaces, c'est.... well, des espaces XD

Séparateurs entre éléments d'une liste


Le trait entre les éléments d'une liste est un bon exemple de la multiplicité des solutions existantes. Ta solution est bonne, mais conditionnée au nombre "exact" d'éléments dans la liste (par exemple tu as indiqué "2" dans ton cas).

Une solution possible similaire à ton choix est celle-ci (j'ai simplifié les sélecteurs à leur plus simple expression pour l'exemple) :

Code:
li::after {
    content:"\00A0-\00A0";
}

li:last-of-type::after {
    content:"";
}
(Les \00A0 sont des espaces. Non, je ne connais pas les codes par cœur, je me sers de ce site quand j'en ai besoin)

Ou bien à l'inverse :
Code:
li::before {
    content:"\00A0-\00A0";
}

li:first-of-type::before {
    content:"";
}

Mais il existe encore plus simple !
Code:
li + li::before {
    content:"\00A0-\00A0";
}
Ici, on utilise notre ami le sélecteur de voisin direct pour indique qu'on va cibler tout élément de liste qui suit directement un autre élément de liste. C'est à dire que le premier de la liste n'est pas concerné, mais les autres oui.

Et il existe également cette solution :
Code:
li:nth-of-type(n+2)::before {
    content:"\00A0-\00A0";
}
Ici, on utilise la pseudo-classe nth-of-type() pour sélectionner tous les éléments de liste à partir du deuxième et ajouter un tiret juste avant.

Et ce ne sont pas les seules solutions possibles XD Personnellement, j'aurais utilisée celle du sélecteur de voisin direct.

Les events, ou comment les coder XD


Alors, si ça te stresse trop, tu peux regarder le rendu, tant que tu n'essaies pas tout de suite d'avoir tout de suite l'apparence finale. Pour le moment on veut juste remplir les différents blocs avec leur contenu, donc il faut les couleurs et une mise en forme basique du texte, mais la largeur ou la position viendront plus tard. Ça ressemblera donc à ceci :

(Fais pas gaffe aux parties rayées j'ai juste pas fini de coder ma version - parce que oui je code de mon côté, je suis une prof qui s'implique XD - donc j'ai mis ça en attendant pour le rendu)

"Est-ce que ça va buguer", peut-être. Je trouve intéressante l'idée de coder "à l'aveugle" parce que du coup tu sépares complètement la réflexion ("comment devrais-je coder pour avoir tel rendu") de l'apparence finale. Tu ne feras pas comme ça à l'avenir, c'est fastidieux, c'est surtout un exercice pour toi pour te pousser à y réfléchir et à te demander quelles solutions sont possibles. Dans le cas présent, j'essaie de te faire limiter l'usage des dimensions fixes, donc l'idée ici c'est de réfléchir à comment éviter d'avoir 130px et 100px de hauteur.

Peut-on se limiter à une seule hauteur ? Oui.

Comment faire ? Il y a probablement plusieurs solutions. La mienne est d'avoir une hauteur fixe + des marges internes (padding) sur le bloc conteneur, puis d'avoir une hauteur qui prend l'espace disponible sur le bloc intérieur (déroulant).

En vrai, tu peux te passer de flexbox dans cette partie (j'ai testé XD) parce que l'usage de marges internes s'occupe de bien centrer le bloc intérieur.

Pour conclure


As-tu d'autres interrogations sur les points susmentionnés ?

Si ce n'est pas le cas, tu peux t'occuper de la suite, je te laisse choisir le bloc suivant à coder, mais une fois de plus : limite les dimensions fixes si c'est possible, n'oublie pas d'utiliser des balises sémantiques. Et histoire de te compliquer la vie : essaie de décrire ton raisonnement de codage cette fois ci XD Et montre moi le CSS et le HTML des parties que tu auras rajoutées (pas TOUT le code, sauf si tu l'as complètement refait) =D

Prends ton temps, ce n'est pas une course, c'est un exercice de mise en pratique de ce que tu sais faire. Si tu as des idées mais que tu ne sais pas comment les mettre en place, n'hésite pas à poser des questions.
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya 7WZJTfh
Jeu 2 Sep 2021 - 18:51
Contenu sponsorisé
    _______________
    Revenir en haut