Revenir en haut Aller en bas
Epicode
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le Deal du moment : -25%
Nike Waffle Trainer 2
Voir le deal
74.97 €
Le Deal du moment : -44%
REALME C21 64 Go Cross Black
Voir le deal
109.91 €

Aller en bas
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 760
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
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2715
>>> 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
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 760
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
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2715
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
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 760
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
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2715
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
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 760
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
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2715
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
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 760
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
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2715
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
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 760
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
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2715
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
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 760
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
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2715
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
Contenu sponsorisé
    _______________
    Revenir en haut