'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:
- Demande d'inscription à un atelier de 'Christapour VotrePseudo
Informations
Quelle est ton expérience en codage ? Euhm. Je vais pas dire que ça fait des années que je code. On va dire que j'ai découvert ça il y a 5 ans, j'avais commencé des cours sur openclassroom, mais bon, j'ai laissé tomber, mais j'ai repris on va dire il y a peu, il y a moins d'un an je dirai. Je ne sais pas cependant le niveau à lequel m'identifier, donc on va dire que je me débrouille, que ce soit en codant des fiches et des templates, même si parfois ce n'est pas spécialement évident. Il me manque encore beaucoup de pratique et de notion.
Quel est ton projet ? Entre autre, connaître tous les templates et pouvoir coder intégralement un forum xD on va dire que je dois encore beaucoup apprendre à supprimer les dimensions, les marges, maîtriser les positions, rendre mes codes plus propres, moins chargés (enfin plein de chose) (désolée, je sais jamais quoi dire par ici. (puis vu que tu vois mes codes et commandes, peut-être que tu vois un peu plus claire que moi sur ce que je dois étudier, hésite pas à me taper ou à me demander d'affiner. (++ pour approfondir le flexblox et découvrir le grid)
Quelles sont les bases que tu estimes avoir déjà acquises pour atteindre ton objectif ?
> la maîtrise plus ou moins complètes d'une page html et de sa structure (même si je me fais souvent reprendre car je code sans et je mets après, mais promis, je vais corriger ce point) et des éléments (div, span, strong, les balises titres, quotes et citations, même si je les utilise peu)
> flex (je dirai sur 2/5 vu que je suis incapable de dire mon niveau) ;
> la base (enfin jpense, même si j'ai une sainte horreur des tableaux) (encore une fois désolée si c'est pas claire)
> quelques templates ;
> fiche de rp ; pub et PA simples (même si jpense pouvoir me débrouiller avec des éléments intermédiaires et avancés)
Quelles sont tes disponibilités ? tous les soirs surtout mais quand je suis vraiment fatiguée, je passe en coup de vent, donc je dirai davantage le weekend :)
Est-ce que tu peux lire l'anglais ? alors moi comprendre English, mais c'est pas non plus simple de lire tout un site en anglais, je peux essayer on va dire qu'il y aura toujours des choses que je comprendrai pas mais si c'est une phrase, forte chance que j'arrive à la comprendre dans son ensemble.
Qu'est-ce qui te motive pour t'inscrire à mon atelier ?(j'aime me faire disputer, non plus sérieusement xD)tu expliques bien, et j'ai l'impression que je te gonfle pas avec mes questions débiles ; puis les rappels aussi c'est très bien, je te trouve très pédagogue,(attention le reste du staff, vous l'êtes aussi hein, *veut pas se faire plus taper*)
As tu des créations personnelles que tu as envie de me montrer ?
ma fiche de PUB
et les quelques LS que j'ai posté et que tu as étudié et essayé aussi :) et prochainement d'autres (je sens que je vais être abonnée à toi, je vais pas m'en plaindre) :p
Est-ce qu'il y a des choses dont tu voudrais m'informer à l'avance ? comme tout le monde j'ai des jours avec et des jours sans (motivation et pas de motiv) mais tu sais où me trouver au besoin et je répondrai bien entendu :)
J'espère que ça ira
merciiiiiiiiii
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 ?
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 !
_______________
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
Mer 11 Aoû 2021 - 19:19
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
Je vais tout donner
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 :
-
-
Que veut cependant dire le / lorsque par exemple on a :
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
Pour l'instant, je ne vois que ça comme question ; je pense avoir compris le reste
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
Tout d'abord, un grand merci pour la rapidité d'ouverture de cet atelier
Je vais tout donner
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
- Code:
fr
-
- Code:
grid-template-rows
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;
}
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
Pour l'instant, je ne vois que ça comme question ; je pense avoir compris le reste
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
_______________
Ven 13 Aoû 2021 - 16:46
'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 :
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
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
Ici, on a donc l'élément de classe
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 ?
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 XDRetournons à 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 ?
_______________
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
Sam 14 Aoû 2021 - 3:13
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 :
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 ?
merci à toi :)
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}
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 ?
merci à toi :)
_______________
Sam 14 Aoû 2021 - 16:41
'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 :
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 ?) ?
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 :
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 ?) ?
_______________
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
Sam 14 Aoû 2021 - 21:54
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
J'espère avoir rien oublié et bien répondu à tes demandes
encore mercii
belle journée
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
J'espère avoir rien oublié et bien répondu à tes demandes
encore mercii
belle journée
_______________
Lun 16 Aoû 2021 - 10:43
'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 :
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
- 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.).
De mon côté, comme je pense utiliser grid, la mise en pratique a été beaucoup plus simple :
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.).
_______________
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
Lun 16 Aoû 2021 - 17:44
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
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
Codeur.se
- Date d'inscription : 27/10/2018
- Messages : 1171
Oooh, une prompte réponse ^^ Voyons ça de plus près.
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
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).
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 :
Puis je t'avais montré le résultat, une fois que je rajoutais le CSS :
Voilà voilà ! Have fun petit padawan !
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 flexibleSi 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).
Exactement.La classe qui englobe le tout on parle bien du bloc principale qui contient la PA ?
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:
<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:
Voilà voilà ! Have fun petit padawan !
_______________
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
Lun 16 Aoû 2021 - 19:04
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 (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
Merci pour les explications, ça va me servir pour la suite :P
C'est très difficile de ne pas regarder le rendu (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
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 :
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 :
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
Je dois t'arrêter tout de suite pour cette remarque sur les paragraphes :
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 :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)
- 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>
<div>
sans classe ici me servira à faire l'effet de bloc déroulant.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 :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
- 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;
}
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
_______________
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
Mar 17 Aoû 2021 - 12:43
Arya
Codeur.se
- Date d'inscription : 12/05/2016
- Messages : 2753
Coucou
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 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)
é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 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
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 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)
é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 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
Codeur.se
- Date d'inscription : 27/10/2018
- Messages : 1171
Plop @Arya ! Je m'en vais regarder tout ça
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
Je vois que tu as écrit le code des scrollbars. Vu que tu as écrit ceci :
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 ?
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 !
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*/;}
- Code:
* {
scrollbar-width:3px;
scrollbar-color:darkred;
}
- Code:
.PA-Arya-Amortentia, .PA-Arya-Amortentia *{
box-sizing: border-box;
/* Et rajouter les scrollbar firefox à la suite : */
scrollbar-width:3px;
scrollbar-color:darkred;
}
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 !
_______________
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
Mer 18 Aoû 2021 - 18:24
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
Concernant la question que tu me demandes, tu me parles bien de la déclaration css :
*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)
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
*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
Codeur.se
- Date d'inscription : 27/10/2018
- Messages : 1171
Pour la question piège, je parlais des deux XD
Pourquoi le sélecteur
Et donc, pourquoi
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
Si tu définis ta boite à 100% de largeur, et avec
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%)._______________
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
Mer 18 Aoû 2021 - 21:14
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.
Je crois que je suis arrivée à un petit quelque chose pour la suite :
j'ai volontairement pas mis de balise
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
encore merci pour tout
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.
Je crois que je suis arrivée à un petit quelque chose pour la suite :
j'ai volontairement pas mis de balise
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
encore merci pour tout
_______________
Jeu 19 Aoû 2021 - 10:15
'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
Ma mère me dit toujours que de la répétition nait la connaissance, donc je te reprends également sur ce passage :
- Tu restes encore focalisée sur le rendu plutôt que sur la sémantique
- 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 :
(PS : J'avais pas remarqué auparavant, mais attention aux
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 ?
Me revoici donc pour te malmener gentiment XD
Alors, comme ce qui se conçoit bien s'énonce clairement, un peu de reformulation #ProfesseureChiante
Le sélecteurArya 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 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 :
Deux petites remarques :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.
- Tu restes encore focalisée sur le rendu plutôt que sur la sémantique
- 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>
- 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>
- 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>
- 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>
- 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>
(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 ?
_______________
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
Lun 23 Aoû 2021 - 20:46
Arya
Codeur.se
- Date d'inscription : 12/05/2016
- Messages : 2753
Coucou @'Christa
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 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
Je vais donc voir pour affiner cette partie
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)
Je vais prendre des notes sur certaines choses pour m'en souvenir :3
encore merci <3
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 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
Je vais donc voir pour affiner cette partie
ça y est je veux savoir xDJe 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/
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)
Je vais prendre des notes sur certaines choses pour m'en souvenir :3
encore merci <3
_______________
Mar 24 Aoû 2021 - 8:31
'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
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 !
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 !
_______________
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
Mar 24 Aoû 2021 - 14:44
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 :
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 :)
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
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
Ce qui est fixé pour le moment dans mon code, c'est la largeur du conteneur général (ton
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é
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
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
_______________
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
Mer 25 Aoû 2021 - 18:05
Arya
Codeur.se
- Date d'inscription : 12/05/2016
- Messages : 2753
Coucou @'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) :
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 :
J'espère que FA va pas me squizer (j'ai pas c/C en texte brut)
*espère avoir réussi l'exercice*
belle journée
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">
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*
belle journée
_______________
Jeu 26 Aoû 2021 - 11:10
'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 Edition → Traitement des espacements → transformer 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 :
Bon, commençons par le début.
Niveau code, je suppose qu'on aurait pu se passer d'une classe pour l'effet de survol, un simple sélecteur
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 (
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 ?
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 Edition → Traitement des espacements → transformer 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;
}
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>
<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;
}
- 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>
<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 ?
_______________
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
Lun 30 Aoû 2021 - 18:22
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)
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
Concernant les listes, je comprends la simplification, en revanche, cependant, je ne sais pas si le fait d'enlever le
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 :
*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):
J'ai pas d'autres questions pour l'instant, mais j'ai hâte de continuer :p
Bonne soirée et encore merciiii
Je viens d'essayer (même si je vois pas forcément la différence)
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
Concernant les listes, je comprends la simplification, en revanche, cependant, je ne sais pas si le fait d'enlever le
- Code:
list-style-type
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;
}
*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
Codeur.se
- Date d'inscription : 27/10/2018
- Messages : 1171
Plop @Arya !
Alors, la différence entre tabulations et espaces ne se voit pas visuellement sous Notepad++, sauf si tu vas dans Affichage → Symboles spéciaux → Afficher 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
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) :
Ou bien à l'inverse :
Mais il existe encore plus simple !
Et il existe également cette solution :
Et ce ne sont pas les seules solutions possibles XD Personnellement, j'aurais utilisée celle du sélecteur de voisin direct.
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.
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.
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 Affichage → Symboles spéciaux → Afficher 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:"";
}
\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";
}
Et il existe également cette solution :
- Code:
li:nth-of-type(n+2)::before {
content:"\00A0-\00A0";
}
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.
_______________
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
Jeu 2 Sep 2021 - 18:51
Contenu sponsorisé
Page 1 sur 3 • 1, 2, 3
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum