Revenir en haut Aller en bas
Epicode
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
-30%
Le deal à ne pas rater :
-30% Lego Classic – La valisette de construction – 10713 à ...
10.49 € 14.99 €
Voir le deal
Le deal à ne pas rater :
Manga : le contenu du Tome 10 Collector de L’Atelier des Sorciers ...
Voir le deal

Aller en bas
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Plop @Arya, pas de souci pour l'attente, ta vie privée avant tout ^^

Alors je ne sais toujours pas à quoi sert ton line-height avec cette réponse XD Si tu n'as aucune explication, il y a de fortes chances que ça ne serve à rien, ou que tu t'en serves comme une "cale" alors qu'il y a des solutions plus propres. (C'est également plus avisé d'utiliser l'unité em pour un line-height pour que ça soit proportionnel à la taille du texte).

Pour ce qui est de ma question sur les sélecteurs CSS, je ne suis pas certaine d'avoir bien saisi ta réponse, mais j'ai l'impression que tu t'es emmêlé les pinceaux :p

En raccourcissant mon code d'exemple donné précédemment, voici une capture d'écran dans laquelle tu pourras mieux voir où sont les paragraphes :
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 Zdkkcv

Les descendants directs de l'élément ayant la classe .arya-pa__blocPredefs sont davantage visibles quand tu replies les blocs (tu devrais normalement avoir cette fonction sur notepad++)
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 Uuw5hd
Nous avons donc trois enfants directs ici : Un titre <h1>, une liste non ordonnée <ul>, et un paragraphe <p>.

Tu sembles avoir bien cerné qu'il existe une différence entre les deux sélecteurs, mais tu n'as pas l'air tout à fait au point du coup je t'invite à aller cogiter sur la différence entre le sélecteur d'enfant direct et le sélecteur descendant. N'hésite pas à faire des expériences sur une page à part histoire de bien cerner.

Je suis relou sur le sujet parce que c'est super pratique à utiliser donc c'est important d'apprendre à faire la différence @_@

Du coup, je réitère ma question, dans mon code d'exemple donné dans le message précédent, quelles sont les lignes concernées par les sélecteurs ?
Code:
.arya-pa__blocPredefs p { /* je cible les lignes : ... */ }
.arya-pa__blocPredefs > p { /* je cible les lignes : ... */ }

(Histoire de simplifier, voici une capture d'écran sur mon logiciel, avec les lignes numérotées, tu n'as qu'à indiquer pour chaque sélecteur quelles lignes seront ciblées ^^)

(un bon conseil : ne te prends pas trop la tête sur un détail)
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 7WZJTfh
Ven 15 Oct 2021 - 19:41
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2741
>>> Je corrige ça  [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 3544256468
N'empêche toi c'est trop cool, moi j'ai pas de couleur mais oui on voit beaucoup mieux :)

Code:
.arya-pa__blocPredefs p { /* je cible les lignes : ... */ }[size=12][/size]
.arya-pa__blocPredefs > p { /* je cible les lignes : ... */ }

Le premier c'est le sélecteur descendant et le second le sélecteur enfant.
Code:
.arya-pa__blocPredefs p { /* je cible les lignes : 7, 8, 14, 15, 21, 22, 28, 29 et 33 */ }[size=12][/size]
.arya-pa__blocPredefs > p { /* je cible les lignes : 33 uniquement */ }

la ligne 33 correspond au premier p enfant du selecteur relatif au bloc prédef. 
(je confirme que je m'étais emmêlé les pinceaux, mais c'est tout bon   [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 3775839356 )
Je fais la correction demain à tête reposer et je te l'envoie sur discord :) je sens que le reste va être compliqué à réaliser, mais je vais essayer :) 

bonne soirée et merci :)
_______________
Ven 15 Oct 2021 - 20:09
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Bingo /o/ Je vais arrêter de te torturer avec les sélecteurs maintenant XD Prends ton temps pour la suite, inutile de te stresser !

(Je me servais du sélecteur d'enfant direct pour avoir la ligne "Voir les autres prédéfinis" alignée à droite, et du sélecteur descendant pour retirer toutes les marges automatiques des paragraphes utilisés dans cette partie ^^)
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 7WZJTfh
Sam 16 Oct 2021 - 4:09
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2741
Coucou  @'Christa
Je voulais m'excuser pour l'absence, j'ai dû mal à m'y remettre je l'avoue, je bloque toujours pour une raison inconnue sur la dernière partie du cours, si tu as le temps, je serais ravie qu'on puisse éventuellement voir cette dernière partie toutes les deux, ça m'aiderait grandement dans cette reprise je l'avoue  plz
D'avance merci pour ton aide et désolée d'avoir presque disparu  [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 1840524174
_______________
Sam 6 Nov 2021 - 10:33
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Hello @Arya !

Pas de souci pour l'attente, de mon côté je n'ai pas tellement fait grand chose non plus, à part tomber malade ^^

Alors on va essayer de faire les choses avec calme. Comme je t'ai dit, pour le moment, oublie ce qui a été codé et travaille sur une nouvelle page web.

Souviens toi, au tout début de nos pérégrinations, on avait ce schéma. Considère une fois de plus que les blocs sont vides.
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 BdKN2

Pour rappel du fonctionnement de flex, un élément avec la propriété display:flex voit tous ses éléments enfants (directs) affichés côte à côte.

Ce qui veut dire que, par défaut, une suite d'éléments formera une ligne horizontale (ou verticale) à moins d'utiliser flex-wrap:wrap.

Prenons cet exemple :
Code:
<div class="display:flex;"><!--
--><div style="flex: 1 1 15%;background:yellow;">1</div><!--
--><div style="flex: 1 1 30%;background:red;">2</div><!--
--><div style="flex: 1 1 20%;background:lightblue;">3</div><!--
--><div style="flex: 1 1 60%;background:darkgray;">4</div><!--
--><div style="flex: 1 1 20%;background:green;">5</div><!--
--><div style="flex: 1 1 70%;background:white;">6</div><!--  
--></div>


1
2
3
4
5
6


Et si on rajoute un flex-wrap :

1
2
3
4
5
6


Bon, c'est bien joli tout ça, mais pour avoir exaaactement le rendu de ta maquette ça impose des calculs au pixel près XD. Par exemple, le bloc 4 s'est vu attribuer une largeur "de base" de 60%, mais sur mon écran avec ce deuxième affichage, il occupe plutôt un peu moins de 70% de l'espace disponible (vu qu'il restait 20% à occuper entre les deux, et le bloc 5 a pris quelques pixels en plus également). Et c'est aussi parce que j'ai ajouté de la flexibilité en fixant les valeurs de flex-grow et flex-shrink à 1 avec mon usage de la propriété raccourcie flex, parce que sinon ça donne ça :


1
2
3
4
5
6


Et tu connais mon avis sur l'ajustement au pixel près o/ Je pense à titre personnel qu'utiliser flex-wrap pour coder une PA comme la tienne n'est pas du tout adapté.

Supposons qu'on tienne à avoir un minimum de flexibilité dans le code final. Sur quoi peut on dire "bon, ça s'ajustera à la louche", et sur quoi doit on être strict ?

Je vais supposer que dans le cas de ta PA, l'alignement vertical des blocs est important. Genre "Période" et "Tops" devraient pouvoir tenir sous le bloc "Contexte". Par contre, apparemment, les blocs "Actualités", "Prédéfinis" et "Crédits" on peut ajuster ça à la louche et laisse flexbox équilibrer les trois.

Et tant qu'à faire, absolument aucune loi mystérieuse ne t'oblige à mettre tous ces blocs de code les uns à la suite des autres dans le code. On peut mettre des blocs dans des blocs. Et des blocs dans des blocs dans des blocs.

Il y a plusieurs façons de s'en sortir. Comment tu coderais ta PA, à première vue, en te basant sur mes tergiversations dans ce message ? (tu peux faire un schéma ou un petit code rapide comme mes exemples ci dessus si expliquer verbalement te lourde).

S'il y a quelque chose que tu ne comprends pas, comme toujours, n'hésite pas à poser tes questions :)
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 7WZJTfh
Sam 6 Nov 2021 - 18:20
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2741
BLOP  @'Christa
C'est la période pour tomber malade :) je le suis moi-même encore mais pas encore à 100% guéri (la toux persiste)

Merci pour ton aide sur cette dernière partie de l'exercice  [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 3775839356
ça m'aide à avancer j'aimerai te soumettre mon premier rendu avant de poursuivre (je sais qu'il est pas forcément adapté mais à partir de là, tu pourras plus ou moins voir ce qu'il en est) :



Code:
<br /><!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 **/
    --couleur3: #E6E1CE;}

   
    .PA-Arya-Amortentia {
    width:500px;
    padding:10px;
    font: 11px Verdana, sans-serif; /** à changer avec une variable **/
    color:var(--couleursecondaire);
    text-align:justify;
    Background:white;
      border:2px solid var(--couleursecondaire);
    margin: auto;
    display: flex;
      justify-content: center; flex-wrap: wrap;}
   
    .PA-Arya-Amortentia, .PA-Arya-Amortentia *{
    box-sizing: border-box;
    scrollbar-width:3px;
    scrollbar-color:darkred;}
   
.PA-Arya-Amortentia-Contexte {
background:red;
height:100px;
width:40%;}
     
.PA-Arya-Amortentia-Staff {
background:blue;width:15%}
     
.PA-Arya-Amortentia-Partenaires {
background:yellow;width:15%;}
   
.PA-Arya-Amortentia-event {
background:orange;
height:100px;
width:30%;}

.PA-Arya-Amortentia-timeline {
background:green;
      width:30%;}
     
.PA-Arya-Amortentia-Topsites {
background:darkgrey;
      width:10%;}

.PA-Arya-Amortentia-liens {
background:pink;flex: 1 1 60%;}

.PA-Arya-Amortentia-actualites {
background:purple;}

.PA-Arya-Amortentia-recherches {
background:brown;}
   
.PA-Arya-Amortentia-Credits {
background:black;
color:white;}
   
  </style>
  </head>
<body>
    <div class="PA-Arya-Amortentia">
        <!-- Première ligne PA -->
            <div class="PA-Arya-Amortentia-Contexte">
                1 - Contexte
            </div>

            <div class="PA-Arya-Amortentia-Staff">
              2 - Staff
            </div>
           
            <div class="PA-Arya-Amortentia-Partenaires">
                  3 - partenaires
            </div>

            <div class="PA-Arya-Amortentia-event">
              4 - évent
            </div>

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

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

            <div class="PA-Arya-Amortentia-Topsites">
6 - topsite
            </div>

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

        <!-- Troisième ligne PA -->
            <div class="PA-Arya-Amortentia-actualites">
              8 - actualités
            </div>

            <div class="PA-Arya-Amortentia-recherches">
         9 - recherchés
            </div>

            <div class="PA-Arya-Amortentia-Credits">
                10 - crédits
       
            </div>
        <!-- Fin de la troisième ligne de la PA -->

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


majoritairement j'ai appliqué des couleurs pour voir les blocs même si ça pète les yeux xD
Je suis en effet pour que ça ressemble le plus possible à la maquette ce qui veut en effet dire que le bloc contexte doit bien être correctement aligné avec les topsites et la timeline, ce qui suppose donc que si par exemple le bloc contexte fait 40 % de large, je dois arriver à jongler et à inscrire 40 % pour les deux autres blocs du bas, tout en parvenant également à aligner le staff/partenaires et évent avec les liens ce qui n'est pas évident à faire je trouve, moi qui aurait pensé mettre par exemple que des dimensions sur les images de base, j'ai pas pu m'empêcher de mettre des dimensions pour les blocs, jpense donc que c'est pas forcément adapté, c'est pas évident non plus je dois bien l'avouer  [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 1066248963
Puis je suis pas encore très bien à l'aise avec flex shrink etc.... c'est pas encore ça  [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 1731648622

J'ai utilisé flex-wrap, mais je comprends pas piurquoi il ne serait pas adapté ? (sachant que c'est ce qui permet en fait de revenir à la ligne) 

- je vais tenter de mettre une flexibilité pour les blocs du bas  [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 3775839356

encore merciii
_______________
Dim 7 Nov 2021 - 10:36
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Plop @Arya !

Tant mieux si je t'ai débloquée XD J'essaie surtout de te donner des pistes de réflexion, je le dis souvent, mais il n'y a pas une seule solution unique pour coder quelque chose.

Mais effectivement, je n'ai pas développé pourquoi je n'aime pas trop flex-wrap dans ce contexte précis. C'est une propriété super utile, mais la façon dont elle fonctionne a tendance à "varier" selon la résolution d'écran des gens, le zoom choisi, le navigateur, le support (ah, les téléphones et les tablettes...), voire la gestion des marges par le navigateur *war flashbacks*.

Du coup, l'emplacement des blocs peut varier selon les circonstances. Ce qui ne pose pas problème si, par exemple, tu te sers de flex-wrap pour afficher plusieurs lignes de partenaires, ou toute forme de blocs dont l'emplacement n'a pas vraiment d'importance au final. Par contre, si tu veux que la structure de ta page d'accueil reste fidèle à ta maquette, c'est beaucoup moins fiable.

Et comme je disais, rien ne t'oblige à coder chacun de ces blocs les uns à la suite des autres. Si tu veux que les blocs de Staff et Partenaires soient l'un en dessous de l'autre, par exemple, tu vas bien devoir les "sortir" du flux en les plaçant dans un bloc conteneur. Du coup, si tu prends plus de recul, pourquoi ne pas opérer ligne par ligne, et regrouper les éléments de manière à ce qu'ils puissent se voir attribuer, potentiellement, une largeur similaire d'une ligne sur l'autre ?

Ligne 1 : Blocs 1, [(2 & 3), 4]
Ligne 2 : Blocs [5, 6], 7
Ligne 3 : Blocs 8, 9, 10

On s'assurerait alors que les blocs 1 et le "bloc" constitué des blocs 5 et 6 soient précisément de la même largeur, tandis que le reste serait laissé au jugement du navigateur (avec quelques pourcentages/proportions, à la rigueur, pour un équilibre similaire à celui de la maquette).

C'est un exemple. Il y a d'autres façons de coder tout ça, par exemple en traitant les blocs 1, 5 et 6 en un seul bloc qui serait placé à côté d'un bloc constitué des blocs 2, 3, 4 et 7. La question de l'alignement vertical serait réglée d'autant plus vite.

Et quand je dis que les dimensions c'est mal, je ne veux pas dire que toutes les dimensions c'est mal, mais plutôt que si par exemple ta PA fait 1100px de large, que tu as deux blocs côte à côte, plutôt que de faire un bloc de 300px et un bloc de 800px de large (et ne parlons pas de calculer une marge entre les deux), tu pourrais avoir un bloc de 300px et un bloc qui occupe le reste de l'espace disponible. De cette manière, si quelqu'un a un affichage différent du tien qui crée un bug quelque part, ou si un jour tu décides que finalement 1500px de large c'est mieux, tu n'as pas à refaire tes calculs et l'affichage s'adapte automatiquement.

Est-ce que ça t'aide dans ton processus de réflexion ?
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 7WZJTfh
Dim 7 Nov 2021 - 15:41
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2741
C'est plus facile,

Alors j'ai rien touché d'autres pour l'instant, mais j'ai tenté de bidouiller via photofiltre pour essayer d'illustrer tes propos (outre flex-wrap) je parle ici des dimensions :
(Pas de commentaire si la qualité médiocre du truc xD) 
https://zupimages.net/viewer.php?id=21/44/p24z.jpg
je sais pas du coup si mon schéma est claire, mais de ce que j'ai compris, j'aurais par exemple un premier bloc conteneur en flex et en colonne avec une dimension probablement spécifique  [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 2979024130 ce qui impliquerait de ne pas forcément donner de largeur au bloc contexte et aux deux autres à l'intérieure ; un second à coter composer du staff/partenaires (qui forme eux-même un bloc indépendant en flex et en colonne) dont la largeur serait influencé par les images staff + écrits) de la partie évent influencé par la taille de l'image ; et les liens ; et la dernière ligne où au final tout serait gérer par les écrans et le flex (je sais pas si je suis claire) donc même pas de pourcentage ou quoi à ce niveau ?

Dis-moi si je suis à coter de la plaque, mais si c'est faisable, je peux essayer du coup oui de bouger des blocs et tester cette hypothèse  [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 3313101865

En conclusion : ça donnerait 1/ dimension pour le premier bloc en largeur ; 2/ une seconde général pour le second (à ne pas dépasser), où à l'intérieure, il y aurait des dimensions seulement pour les images (staff+évent) (les liens je me souviens plus si on avait mis une largeur spécifique) ; et absence de largeur pour la dernière ligne qui serait gérer par flex, et la taille des images pour les prédéfinis  [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 3313101865
_______________
Dim 7 Nov 2021 - 15:56
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Je vois que le deuxième exemple t'a davantage intéressée que le premier XD Mais oui, tu as bien compris ce que je voulais dire \o/

Attention par contre, j'ai l'impression que tu te sens obligée de mettre une dimension, ou une dimension limite, pour un bloc supposé s'adapter tout seul. Pour rappel, si tu ne mets pas de dimension du tout à un élément de type bloc (ou que tu mets flex:1 pour le cas des blocs flexibles XD), il prendra automatiquement tout l'espace disponible. Donc si tu fonctionnes par lignes, et que tu as deux blocs côte à côte dont un seul possède une largeur, l'autre occupera la largeur que le navigateur lui autorise à occuper :p

Ce sera à toi ensuite de faire les ajustements nécessaires (avec les propriétés min-width, max-width ou flex-basis, voire flex-grow et flex-shrink, selon tes besoins) pour avoir l'équilibre que tu souhaites. Effectivement, comme tu le dis, par défaut tu laisses le contenu (les images) définir la largeur des blocs tant que ça te convient.

Si tu construis bien ta structure, à la fin, si tu changes juste une dimension le reste de l'affichage doit pouvoir s'adapter automatiquement sans que tout soit cassé. Sans aller jusqu'à coder en responsive, tu viendras alors de créer un code qui marche entre autres super bien en LS parce que les futurs utilisateurs pourront ajuster ça à la taille de leur forum, au lieu de devoir adapter leur forum à ton code.
_______________


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

Je te remercie. Je pense avoir bien capté le truc, j'ai modifié mon petit exercice, mais je pense que ce sera à moduler en fonction de la PA définitive, car je doute que ce soit vraiment représentatif, je pense notamment que avec les images, certaines dimensions vont pouvoir s'adapter et être retiré, mais pour l'instant voici mon code avec l'exercice actuel avec  les blocs en couleur :

Code:
<br /><!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 **/
    --couleur3: #E6E1CE;}

   
    .PA-Arya-Amortentia {
    width:500px;
    padding:10px;
    font: 11px Verdana, sans-serif; /** à changer avec une variable **/
    color:var(--couleursecondaire);
    text-align:justify;
    Background:white;
      border:2px solid var(--couleursecondaire);
    margin: auto;
    display: flex;
      justify-content: center; flex-wrap: wrap;}
   
    .PA-Arya-Amortentia, .PA-Arya-Amortentia *{
    box-sizing: border-box;
    scrollbar-width:3px;
    scrollbar-color:darkred;}
   
.PA-Arya-Amortentia-Contexte {
background:red;
height:100px;}
     
.PA-Arya-Amortentia-Staff {
background:blue;}
     
.PA-Arya-Amortentia-Partenaires {
background:yellow;}

      .PA-Arya-Amortentia-Partenaires, .PA-Arya-Amortentia-Staff{
      height: 50px;}
     
.PA-Arya-Amortentia-event {
background:orange;
height:100px;
      flex: 1 1 40%;}

.PA-Arya-Amortentia-timeline {
background:green;
      flex: 1 1 50%; }
     
.PA-Arya-Amortentia-Topsites {
background:darkgrey; flex: 1 1 50%;}

.PA-Arya-Amortentia-liens {
      background:pink;
      width:100%;
}

.PA-Arya-Amortentia-actualites {
background:purple;
flex: 1 1 33%;}

.PA-Arya-Amortentia-recherches {
background:brown;   
flex: 1 1 33%;}
   
.PA-Arya-Amortentia-Credits {
background:black;
color:white;   
flex: 1 1 33%;}
   
  </style>
  </head>
<body>
    <div class="PA-Arya-Amortentia">
   
      <div style="flex:1 1 40%;display:flex; flex-direction:column;">
            <div class="PA-Arya-Amortentia-Contexte">
                1 - Contexte
            </div>
        <div style="display:flex;">
      <div class="PA-Arya-Amortentia-timeline">
            5 - timeline
            </div>

            <div class="PA-Arya-Amortentia-Topsites">
6 - topsite
            </div>
        </div>
      </div>
     
      <div style="display:flex;flex: 1 1 60%;flex-wrap: wrap;">
      <div style="display:flex; flex-direction:column;flex: 1 1 60%;">
            <div class="PA-Arya-Amortentia-Staff">
              2 - Staff
            </div>
           
            <div class="PA-Arya-Amortentia-Partenaires">
                  3 - partenaires
            </div>
  </div>
            <div class="PA-Arya-Amortentia-event">
              4 - évent
            </div>

            <div class="PA-Arya-Amortentia-liens">
      7 - liens      
            </div>

      </div>
     

      <div style="flex:1 1 100%;display:flex;">
            <div class="PA-Arya-Amortentia-actualites">
              8 - actualités
            </div>

            <div class="PA-Arya-Amortentia-recherches">
         9 - recherchés
            </div>

            <div class="PA-Arya-Amortentia-Credits">
                10 - crédits
       
            </div>
      </div>
    </div>
</body>
</html>

C'est pas parfait, j'en suis consciente, car je pourrai aisément moduler avec le min-width et le max comme tu dis, et le flex par la suite, (le moment flemme par contre c'est que j'ai inséré des styles, je sais faut pas, mais, c'était plus simple pour ça) je plaide donc coupable, j'ai quand même je pense bien compris, mais j'attends que tu me dises ce que tu en penses :)

*fuit loin*
_______________
Dim 7 Nov 2021 - 17:20
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Salut @Arya, désolée pour ce temps de réponse absolument honteux de ma part T_T

De ce que j'ai vu de ton code-pas-parfait (bouuuuh les styles en duuuuur dans le HTML XD), je pense que tu as bien compris l'essentiel de ce que je voulais te faire comprendre. Flexbox n'est pas simple, le reste viendra avec l'expérience. N'hésite pas à lire et relire la documentation quand ça coince, moi-même je le fais régulièrement parce que rien ne marche jamais comme je veux :'(

Du coup maintenant on va en revenir au code complet que tu m'avais envoyé, j'ai quelques petites remarques à te transmettre.

Côté HTML


- Si possible, essaie d'héberger les images que tu utilises au lieu de te contenter de les piquer sur Tumblr :p Mais bon, c'est surtout moi qui pinaille.
- Pour le contexte, n'oublie pas qu'un saut de ligne équivaut à la création d'un nouveau paragraphe (c'est le principe des paragraphes en général, du moins). Du coup pour le code de ta partie contexte, plutôt que ceci :
Code:
 <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>
Ce serait plus propre d'avoir ceci :
Code:
<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.</p>
    <p>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>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>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>
- Même remarque pour le texte des évents.
- Tu as utilisé un titre de niveau 2 <h2> pour les top-sites, est-ce que c'est parce que c'est une sous-section de la section "Partenaires et demandes" précédemment dans le code, ou bien juste pour une raison esthétique ? Si c'est pour une raison esthétique, alors conserve un titre de niveau 1 <h1> et personnalise son apparence avec le CSS.
- En parlant de titres, tu as donné des titres destinés à être cachés à la plupart des blocs pour l'accessibilité, mais tous les blocs n'ont pas de titre. (Bon, ce n'est pas vital pour le résultat final, c'est juste que j'ai l'impression que tu as changé d'idée en cours de route XD)
- Au niveau du bloc des recherches, le dernier élément de liste est suivi d'un saut de ligne <br/> incongru :
Code:
<li><img src="https://i.servimg.com/u/f30/19/45/51/53/simonp10.jpg" alt="Pseudo" title="Pseudo"/><span>Pseudo</span></li><br/>

N'oublie pas que si tu veux ajouter un espacement, ça se passe dans le CSS.

Le reste du code HTML me semble propre, ça fait ce que c'est censé faire, ça roule \o/

Côté CSS


- La question des largeurs sera à résoudre en t'aidant de ce que tu as appris avec notre exercice précédent. Rappelle-toi, essaie d'être aussi "flexible" que possible, pour que modifier une largeur ne revienne pas à réécrire tout un pan du code.
- scrollbar-width: 3px; ne marchera pas, les valeurs autorisées sont seulement thin (fin), none et auto. Oui, je sais, firefox est contrariant, mais tant qu'ils n'implémentent pas le système de webkit, prends soin de nous autres utilisateurs de Firefox.
- N'hésite pas à écrire des noms de variables plus longs et explicites que "couleur3". Genre --PA-couleur-bordures c'est bien aussi.
- Je crois que j'avais déjà posé cette question, mais qu'est-ce que c'est que ce line-height: 13px; dans la dernière déclaration CSS ? Quel est l'objectif visé ?
- D'ailleurs, dans la même déclaration, tu n'as pas besoin de redéfinir transition: 600ms; pour l'effet de survol, vu que c'est la même durée que la transition définie pour ton sélecteur .PA-Arya-Amortentia-recherches>li>span. À moins de vouloir des effets ayant une vitesse différente quand on passe la souris ou quand on la retire, tu n'as besoin de définir la transition qu'une seule fois.

Et je crois que j'ai vu l'essentiel ? Si j'ai loupé un détail, on verra bien ça plus tard.

Avec tout ça tu as techniquement tout codé : le contenu des blocs, et l'agencement du tout. Est ce que tu penses que tu peux associer le tout ?
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 7WZJTfh
Mar 23 Nov 2021 - 16:32
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2741
Coucouuuuuuuuuuuu @'Christa
Je viens poster un brin de mon avancée :D
Le HTML :
- > correction des paragraphes contextes + évents
- > les titres H1 ont été ajoutés dans les endroits oubliés, donc j'ai tout mis en invisible oui pour l'accessibilité ;
- > le titre H2 du topsite (j'ai mis h2, en fait, vu que les h1 sont cachés et vu que j'ai fait un truc général, ça me semblait plus pratique, sachant que si je mets h1 et bien ça fait pouf xD c uniquement pour ça que j'ai mis le h2
- > saut de ligne déjà soulevé et corrigé (jme demande pourquoi elle était dans ta version transmise, bref)

CSS :
- > jpense revoir les variables une fois que je mettrai les bonnes couleurs + polices
- > line-height > il ne sert à rien autant pour moi mais jcrois que je l'avais utilisé pour centrer le pseudo à l'intérieure de la bubulle ;
- > le transition, je note l'info ;
- > je note pour la scrollbar :

à nous deux pour la partie "assemblange"

*fuit*

_______________
Mer 24 Nov 2021 - 16:21
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
le titre H2 du topsite (j'ai mis h2, en fait, vu que les h1 sont cachés et vu que j'ai fait un truc général, ça me semblait plus pratique, sachant que si je mets h1 et bien ça fait pouf xD c uniquement pour ça que j'ai mis le h2
Ben justement ! Tu remplaces ce <h2> par un <h1> et tu rajoutes un simple .PA-Arya-Amortentia-Topsites > h1 { display : block } pour éviter qu'il disparaisse ! @_@

Pour le reste, tu as tout mon soutien pour la partie assemblage, au boulot ! XD Si quelque chose te bloque, c'est le moment de le dire.

Dans la théorie, tu dois appliquer ce que tu as appris pendant nos tergiversations sur flex à ton premier code. Donc les blocs dans les blocs, les flex horizontaux ou verticaux, l'utilisation potentielle de la propriété flex, etc.
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 7WZJTfh
Mer 24 Nov 2021 - 16:57
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2741
Merciii  [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 3775839356
Est-ce que tu pourrais me donner un premier avis sur ce que j'ai pu faire depuis cet aprem :3



> je suis plus ou moins satisfaite, mais j'arrive pas encore à centrer les liens côtés staff + partenaires :D et l'image vers lle bloc météo
mais jvais finir par trouver, je sais que pour l'instant ça ne doit pas être très parfait mais j'attends quand même ton avis :) 

d'avance merciii encore :3
_______________
Mer 24 Nov 2021 - 20:07
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2741
Coucouu à toi  @'Christa
Désolée par avance du double post :)
Meilleurs voeux encore et encore x3
J'espère que ça va aussi x3
Je me permets de me remettre dans le jus pour cette PA, est-ce que tu pourras me dire si tu as eu le temps de regarder :)
Bonne journée et encore merci à toi [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 3775839356
_______________
Ven 7 Jan 2022 - 11:54
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Plop @Arya, désolée pour l'absence de nouvelles (au moins t'avais pas internet pendant une bonne partie donc je me sens pas trop coupable XD)

Juste pour savoir, le code donné dans le précédent message n'a pas changé depuis ?
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 7WZJTfh
Mar 11 Jan 2022 - 16:20
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2741
Blop.
C'est ça xD
J'essaye de m'y remettre xD
Et le code n'a pas changé x3
Courage et t'en fait pas (la reprise est dure)
Merci x3
_______________
Mar 11 Jan 2022 - 17:09
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Okay, attaquons-nous donc au morceau. Comme j'ai mis un temps effroyable à m'en occuper, j'ai oublié tout ce dont on a parlé depuis, je suis une prof super rigoureuse (non).

Première lecture : traquons les coquilles et petits détails



- Il y a un <br /> qui s'est perdu en début de code et qui n'a rien à faire là.

- La propriété scrollbar-color prend deux couleurs, la couleur du curseur et la couleur de fond. Tu en as donc oublié une.

- Pense à mettre en commun les propriétés identiques d'un élément à l'autre. Par exemple ton code :
Code:
    .PA-Arya-Amortentia h2 {
    margin:0px;
    padding:0px;
    font:10px Verdana, sans-serif; /** variable **/
    font-weight:bold;}
      
      .PA-Arya-Amortentia-Topsites > h1 {
    display : block;
    margin:0px;
    padding:0px;
    font:10px Verdana, sans-serif; /** variable **/
    font-weight:bold; }
Pourrait se convertir en :
Code:
.PA-Arya-Amortentia h2, .PA-Arya-Amortentia-Topsites > h1 {
    margin:0px;
    padding:0px;
    font:10px Verdana, sans-serif; /** variable **/
    font-weight:bold;
}
.PA-Arya-Amortentia-Topsites > h1 {
    display : block;
}
(et ça c'est juste un exemple je suis sûre que dans la suite il y a d'autres cas similaires)

- Attention à être un peu plus rigoureuse dans ta convention de nommage, .PA-Arya-Amortentia-bloc1 et .PA-Arya-Amorentia-Bloc2, il y a une majuscule à "bloc" pour le second, mais pas le premier. Et en plus pour le second tu as écrit Amorentia au lieu d'Amortentia ! Ou encore, nous avons .PA-Arya-Amortentia_timeline et PA-Arya-Amortentia-timeline dans le HTML, exactement la même chose à un tiret de différence. (celle avec l'underscore n'est pas définie dans le CSS, donc techniquement inutile)

L'objectif, c'est que tu puisses t'y retrouver et qu'une fois que tu as ta logique, tu n'aies pas besoin de constamment vérifier les classes pour savoir laquelle est la bonne.

- Il reste encore du CSS directement dans le code HTML ! (un style="display:flex;" qui fait de la résistance)

- Plus personnel, mais je n'utiliserais pas tumblr comme hébergeur pour les images XD

Seconde lecture : voyons le rendu



Bloc Contexte


Peut-être que retirer la marge supérieure du premier paragraphe aurait un meilleur rendu :
Code:
.PA-Arya-Amortentia-Contexte > div > p:first-child { margin-top : 0}

Bloc Timeline


Tu aurais plus de facilité à "centrer" l'image météo si tu centres les éléments flex en modifiant la valeur de justify-content :
Code:
PA-Arya-Amortentia-timeline { justify-content: center; }
Changer la valeur de justify-content va faire se "coller" les deux blocs, date et météo. Il ne reste plus qu'à rajouter une marge pour les séparer un iota. Je conseille cette méthode que je trouve très pratique :
Code:
PA-Arya-Amortentia-timeline p + p {margin-left: 5px }
Pour deux blocs paragraphe qui se suivent, le deuxième sera espacé du premier de 5px.
J'aime bien utiliser cette méthode parce que même si j'intervertis le contenu des paragraphes, l'espacement reste le même. Alors que si j'avais mis cet espacement spécifiquement sur le bloc dédié à afficher la météo et que je les avais intervertis, j'aurais dû modifier les deux classes.

Bloc Topsites


Même problème d'espacement que tu peux régler de la même façon, sauf que cette fois on a deux éléments <div> côte à côté. L'autre méthode étant naturellement de mettre une marge à gauche sur la classe .PA-Arya-Amortentia-Topsites.

Tu peux aussi supprimer flex: 1 1 30%; : tu as déjà donné une largeur préférentielle d'environ 70% pour le bloc précédent, les deux vont forcément s'équilibrer sans que tu aies besoin de redéfinir quoi que ce soit (en tout cas sur firefox ça marche comme ça).

Par contre si ta préoccupation c'est que les éléments de liste (les étoiles) soient bien sur deux lignes, c'est sur le sélecteur .PA-Arya-Amortentia-Topsites ul que tu dois placer ce flex: 1 1 30%; (voire 33%), vu que ça va donner aux éléments (les étoiles) une largeur de base d'un tiers de l'espace disponible.

Bloc Staff


On pourrait rajouter une petite marge latérale après l'image, donc un petit margin-right:4px pour le sélecteur .PA-Arya-Amortentia-Staffcontenu img par exemple.
Pour centrer les liens, un petit .PA-Arya-Amortentia-Staffcontenu ul { justify-content : center; } fera joyeusement l'affaire ! (et un text-align:center sur le pseudo si besoin).

Bloc partenaires


Même technique pour centrer les liens ;)

Bloc Évents


Même remarque que pour le contexte à propos de la marge supérieure du premier paragraphe. De surcroit, un petit espacement horizontal entre ce bloc et le groupe [staff & partenaires] ne serait pas de trop.

Bloc liens


Un petit effet kiss cool aurait été de transformer les liens (éléments <a>) en blocs qui prennent doute la largeur de l'élément de liste de manière à ce qu'ils soient cliquables quel que soit l'endroit où on place le curseur à l'intérieur d'un bloc. C'est ça aussi, l'accessibilité !
Genre :
Code:
.PA-Arya-Amortentia-liens li a {
  display: block;
}
(C'est un exemple, mais le padding des éléments de liste crée une "zone non cliquable" autour des liens donc ça aussi faut y cogiter).

Bloc Actualités


Comme le bloc crédits impose sa hauteur à toute la ligne, on se retrouve avec une bloc défilant plus petit que la hauteur disponible. Tu peux régler ça en fixant une hauteur ces trois blocs puis en rajoutant un petit height:100% pour la zone défilante par exemple :
Code:
.PA-Arya-Amortentia-actualites, .PA-Arya-Amortentia-recherches, .PA-Arya-Amortentia-Credits {
    height:/* une hauteur fixe */;
    overflow : auto ; /* un scroll en cas de dépassement */
}

.PA-Arya-Amortentia-actualites > div {
    height:100%;
}
Ce n'est pas une solution parfaite, mais je te laisse expérimenter pour trouver mieux ;)

Bloc Prédéfinis


Pour centrer verticalement le contenu, un petit flex c'est magique :
Code:
.PA-Arya-Amortentia-recherches {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Plus qu'à avoir notre lien "voir les autres prédéfinis" avec comme sur la maquette :
Code:
.PA-Arya-Amortentia-recherches > p {
    text-align:right;
    margin:0;
}

Bloc Crédits


"Toutes reproductions partielles ou complètes est interdites" à corriger par "Toute reproduction partielle ou complète est interdite", ou "toutes reproductions partielles ou complètes sont interdites". Rien à voir avec le code mais ça me titille depuis le début, je craque.

Troisième lecture : flex-wrap, je t'aime, mais dégage



Mon désamour de flex-wrap pour tout agencement où l'emplacement des blocs est important trouve toute sa justification ici. A cause de ça, tu es obligée de faire d'étranges tours de magie à base de width:59% et autres trucs saugrenus en espérant très fort que les deux éléments que tu veux voir côte à côte le restent. CF ce post et les suivants où je tergiversais déjà dessus.

La PA est un groupe d'éléments flex alignés avec flex-wrap : bloc1, bloc2, actualités, recherches et crédits.
Le bloc 1 contient le contexte, la timeline et les tops, alignés avec flex-wrap.
Le bloc 2 contient le bloc2b, les events et les liens, alignés avec flex-wrap.
Le bloc 2b contient le staff et les partenaires. Pas de flex-wrap ! Miracle !

Toute la complexité tient à avoir le bloc 1 et le bloc 2 tenir sur une seule ligne, pendant que les blocs actualités, recherches et crédits tiennent sur une deuxième ligne.
Et de la même façon, on veut que le bloc 2b et les évents restent sur la première ligne, et la liste de liens sur une deuxième ligne.

C'est ce qui te force à jongler avec des largeurs jusqu'à ce que ça soit "stable", mais si tu fais la moindre modification malvenue (si tu as fait les modifs de marges que j'ai mentionnées dans la précédente section, tu as probablement pu t'en rendre compte), les blocs vont se placer n'importe comment. C'est l'avantage de flex-wrap : c'est flexible et ça s'ajuste automatiquement si besoin. Mais c'est son désavantage dans ton cas précis parce que tu veux une organisation bien spécifique.

Ce serait moins casse gueule d'éviter flex-wrap pour agencer la structure de ta PA (encore une fois, la propriété flex-wrap a son utilité pour plein de choses, elle n'est juste vraiment pas adaptée à ce que tu souhaites faire ici). Si on décompose l'ensemble en groupes plus "simples", ça donne ça :
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 R5e1ul
Nous avons essentiellement les blocs [5 & 6] et [8, 9 & 10] qui auront besoin d'un affichage flex pour être placés côte à côtes de façon propre. Puis nous avons l'ensemble [2 & 3] qui devra être associé en un bloc avec le bloc [ 4 ].

Et enfin, si on veut un alignement propre, encore des blocs enveloppants :
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 4e4uid
A savoir un ensemble constitué des blocs [1, 5 & 6] qui sera placé à côté de l'ensemble constitué des blocs [ 2 & 3, 4 et 7].

Ce qui donne en squelette de code :
Code:

<div class="bloc_ligne-1">
    <div class="bloc_conteneur-1">
        <div class="bloc_contexte"> 1 </div>
        <div class="bloc_timeline-tops">
            <div class="bloc_timeline"> 5 </div>
            <div class="bloc_tops"> 6 </div>
        </div>
    </div>

    <div class="bloc_conteneur-2">
        <div class="bloc_staff-partenaires-events">
            <div class="bloc_staff-partenaires">
                <div class="bloc_staff"> 2 </div>
                <div class="bloc_partenaires"> 3 </div>
            </div>

            <div class="bloc_events"> 4 </div>
        </div>

        <div class="bloc_menu"> 7 </div>
    </div>
</div>

<div class="bloc_ligne-2">
    <div class="bloc_actualites"> 8 </div>
    <div class="bloc_predefs"> 9 </div>
    <div class="bloc_credits"> 10 </div>
</div>

On peut choisir d'utiliser flex ou non pour l'alignement vertical des blocs (du haut vers le bas) mais ça n'est pas spécialement vital. Niveau dimensions, on aura alors besoin de définir (pas forcément en pixels) la largeur du bloc [ Contexte, Période, Tops ], et celle du bloc [Staff & Partenaires] au minimum, flex se chargera alors d'équilibrer le tout en fonction du contenu. Les auteurs également seront potentiellement à ajuster pour avoir un alignement parfait.

On complexifie un peu la structure HTML, mais on simplifie considérablement les ajustements car l'affichage de la structure générale ne partira pas en vrille de manière imprévue à cause des flex-wrap.

J'insiste lourdement, mais flex-wrap est très utile. Ce n'est pas parce que je le déconseille dans ce cas spécifique que tu dois le fuir à l'avenir. Si tu n'avais pas choisi une grille pour afficher les liens, par exemple, la propriété flex-wrap aurait été parfaite dans ce cas de figure. Et cette propriété est parfaite également pour l'affichage des tops (les étoiles). En synthèse, tu apprendras progressivement à utiliser le bon outil pour la bonne situation à force d'expérimenter.
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 7WZJTfh
Jeu 20 Jan 2022 - 16:00
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2741
BLOPPP  @'Christa et Coucouu

Je me suis motivée un peu à reprendre tout ça et je suis plutôt satisfaite d'avoir au moins réussi à lire tout ce que tu as écris :3 et à faire les modifications mentionnées sans pour autant avoir réussi à toutes les faire :) 
Mais depuis le temps que tu attends, c'est déjà bien :)
J'ai notamment pas encore pu faire la chasse aux doublons et à ce que j'aurais pu fusionner :) mais c'est déjà bien comme ça je trouve :3
(pour la timeline, la différence est normale ceci dit mais je note quand même la remarque :) 
Pour la dernière partie, c'est la plus difficile vu que j'ai codé principalement avec l'outil qu'on veut dégager c'est le plus difficile  [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 3482194067 *meurt*
mais je pense être parvenue à un petit quelque chose juste ici : https://amortentiarpg.forumactif.com/h6-test-1  (je suis plutôt satisfaite, au final, j'ai créer une ligne en flex en retirant le flex-wrap) 
C'est peut-être pas parfait mais c'était l'une des premières idées que j'ai eu pour y remédier je ne sais pas ce que tu en penses ? 
Bonne journée à toi sinon et encore merci :3  [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 3 2476780191 *va s'enterrer*
_______________
Dim 3 Avr 2022 - 9:46
Contenu sponsorisé
    _______________
    Revenir en haut