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 : -42%
NVIDIA Passerelle multimédia SHIELD TV 2019
Voir le deal
124.99 €

Aller en bas
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2703
Coucou  @'Christa


Alors je note l'info pour notepad :) je vais pour l'instant rester sur ça sans y toucher, dois-je faire la même chose sur chaque fichier ou bien lorsque c'est paramétrer comme ça, ça le fait pour tous les fichiers ?
Pour les séparateurs, j'ai compris, je reverrai je pense malgré tout, tout ça à la fin pour jugement voir où c'est que j'en ai réellement besoin ou non :p
Les évent, c'est vrai je peux ? tu m'enlève un petit stress xD >> me voilà rassurer pour la partie que j'ai faite :p (PS le list-type, si je l'enlève même avec le flex, les boutons apparaissent donc j'ai laissé) ; breff la suiteee (et j'ai capté et tout marche, tes astuces ont fonctionnés pour le reste) :3
J'ai pas d'autres remarques ou questions :)
Pour le reste, je vais choisir le bloc des liens (à l'instant t je n'ai rien fait), mais si je devrais écrire mon raisonnement, je dirai déjà que l'ensemble de cette partie va se trouver dans un bloc et qu'à l'intérieure, je vais coder sous forme de liste. Pas de longueur, ni de largeur, je vais essayer de gérer cette partie via des padding, et le tout à l'intérieure en flex,
et là je sens le stress monter en me disant est-ce que j'ai le bon raisonnement xD après pour ce qui est de l'intérieure, gestion de la couleur sur les listes ou les liens, et appliquer une couleur distinctes pour tout ce qui se situe après le troisième sauf si j'en mets d'autres.
J'essaye de mettre en pratique ce que je viens de dire, et au pire je ferais un petit message sur discord pour te signaler lorsque j'aurais fini :3
bisouss x1

édit avec les codes :
Code:
<div class="PA-Arya-Amortentia-liens">
              <h1>Les liens utiles</h1>
 <ul>
 <li><a target="_blank" href="#" title="Lien menant vers x">Lien 1</a></li>
 <li><a target="_blank" href="#" title="Lien menant vers x">Lien 2</a></li>
 <li><a target="_blank" href="#" title="Lien menant vers x">Lien 3</a></li>
 <li><a target="_blank" href="#" title="Lien menant vers x">Lien 4</a></li>
 <li><a target="_blank" href="#" title="Lien menant vers x">Lien 5</a></li>
 <li><a target="_blank" href="#" title="Lien menant vers x">Lien 6</a></li>
 </ul>
            </div>

Code:
.PA-Arya-Amortentia-liens ul li{
 background-color: var(--couleur3);
 border: 1px solid var(--couleursecondaire);
 padding: 5px;
 width:200px;}
 
 .PA-Arya-Amortentia-liens ul li:nth-child(n + 4) {
 background-color: var(--couleurprincipale);}

pas taper xD non plus sérieusement, je vois pas comment me passer de largeur ici sauf si je joue avec le padding interne mais j'ai pas envie que ça me bouffe la place non plus [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 2979024130
l'alternative serait un
Code:
padding : 5px 5px xx(plus important)px 5px;
mais jme plante peut-être [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 514879035
j'ai rien touché d'autres donc se peut que j'ai des - après les liens vu que c'est dans les listes :p mais je me suis dis que ce sera à voir à la fin :)
sur ce, je pars en courant xD car on a peut-être pas forcément le même rendu (+ le flex est appliqué sur les listes en général, et pas sur chaque liste avec des classes spécifiques)
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 2691722282

(ok je sors très loin)
_______________
Sam 4 Sep 2021 - 14:24
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 720
Hello @Arya !

Alors, niveau code, c'est ce à quoi je m'attendais, oui, une liste dans un bloc, et le :nth-child(n + 4) (bien joué ^^). Si je comprends bien, tu as décidé d'utiliser flex sur toutes les listes de ton message d'accueil. A titre personnel, comme on souhaite avoir des items de liste de taille égale, et alignés par trois, j'avais choisi grid pour cet affichage précis.

Une solution pour gérer l'histoire des largeurs (mais j'avais dit qu'on gérait ça plus tard), c'est d'avoir une largeur fixe sur le conteneur (donc ici .PA-Arya-Amortentia-liens et de mettre une largeur de base de 33% sur les éléments de liste, genre comme ça :

Code:
.PA-Arya-Amortentia-liens ul li{
 background-color: var(--couleur3);
 border: 1px solid var(--couleursecondaire);
 padding: 5px;
 flex:1 1 33%; /* on utilise la propriété raccourcie flex */
}
Je ne sais pas ce qui marcherait le mieux entre utiliser la propriété flex et la propriété width pour les éléments de liste, donc à testouiller. La valeur 33%, c'est parce que ça fait un tiers de l'espace disponible XD
Tu as également oublié de rajouter un flex-wrap:wrap si tu veux que tes six liens fassent deux lignes. Les grilles CSS c'est quand même grave mieux dans ce cas là (un petit display:grid; grid-template-columns:repeat(3,1fr); grid-gap:5px; et c'est fini)

Si tu n'as pas de question ou d'ajouts à faire, il est temps de coder les blocs chiants qui restent, je te laisse choisir XD

@Arya a écrit:Alors je note l'info pour notepad :) je vais pour l'instant rester sur ça sans y toucher, dois-je faire la même chose sur chaque fichier ou bien lorsque c'est paramétrer comme ça, ça le fait pour tous les fichiers ?
Heu, j'en sais rien, je pense que ça touche tous les nouveaux fichiers créés ? Quand tu as un doute, de toute façon, c'est facile à vérifier si on a des espaces ou des tabulations.
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 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 2 7WZJTfh
Ven 10 Sep 2021 - 16:07
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2703
Coucou @'Christa
J'espère que tu vas un peu mieux :3
Comme quoi il m'arrive de retenir des choses xDD
Pour les liens, le plus simple à l'air en effet le grid (pour le coup je suis débile car j'y ai pensé, mais bibi a voulu faire en flex)
Du coup, j'opte pour le grid ce qui est beaucoup plus simple :3

Je n'ai pas d'ajout à faire et je commence dans l'ordre alors de gauche à droite, on va finir la deuxième ligne de cette PA.
Le bloc timeline alors, de mon côté, je vois un simple bloc (qu'on a déjà créer) et plus ou moins trois colonnes, une pour contenir la première info, l'autre l'image et l'autre le reste des infos. Le tout dans un alignement "parfait". L'ensemble sur un fonds de couleur avec une bordure. Pas de dimension pour l'instant, voici donc mon rendu :
Code:
 <div class="PA-Arya-Amortentia-timeline">
            <div>
         16 juillet au 31 juillet 2021
         </div>
         <img src="https://www.icone-png.com/png/11/10692.png" alt="image temps" title="image temps"/>
         <div>
         ensoleillé 12 à 18°C
         </div>
            </div>

et son css (sans dimension) :
Code:
.PA-Arya-Amortentia-timeline {
   background-color: var(--couleur3);
   border: 1px solid var(--couleursecondaire);
   padding: 5px;
   display:flex;
   align-items: center;
    justify-content: space-around;
   color: darkred;}

En fonction, on pourrait imaginer une taille pour l'image mais j'ai pris pour l'instant une icône lambda donc dimension sur cette image uniquement mais pas forcément utile pour l'instant. Le grid m'a pas l'air opportun pour le coup vu qu'il n'y a qu'une ligne.
Je vais commencer à réfléchir pour la suite :)

Belle soirée [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 2691722282
_______________
Ven 10 Sep 2021 - 19:37
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 720
Plop @Arya

Alors, tu as tout à fait saisi l'idée, je te donne juste mon avis pour le reste :
- Des paragraphes à la place des "div" (dépourvues de sens sémantiques) auraient été plus ... sémantiques XD
- Quand tu remplis l'attribut alt d'une image, la bonne pratique est de la décrire, par exemple "image de soleil". L'attribut title est ce qui apparait au survol de l'image, par exemple "Beau temps".
- De mon côté, parce que j'essaie d'être aussi sémantique que possible, le code est celui ci :

Ceci dit, je parle de sémantique, mais avec mon choix, il y a potentiellement un problème, est-ce que tu vois lequel en regardant le code ? (T'inquiète, je te fouetterai pas si tu ne vois pas, j'ai réalisé mon "erreur" seulement en collant le code, j'me suis dit que ça ferait un petit exercice de réflexion en plus XD)
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 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 2 7WZJTfh
Ven 10 Sep 2021 - 23:14
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2703
Coucou  @'Christa
Je comprends, alors j'ai surtout opté pour les div pour l'aspect bloc [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 2979024130 mais oui faudrait que j'éclaircisse le title et le alt de l'image  [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 3775839356
Vis à vis de ton choix, j'aurais tendance à penser peut-être que les balises sémantiques P ne comporte pas d'élément block mais je suis sûre que j'ait totalement faux, alors je voudrais bien savoir ce qu'il se passe avec ce bout de code que tu as fait (t'en visuellement que le pourquoi du comment il y a un problème, car je ne le vois absolument pas)  [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 514879035 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 514879035
Après peut-être que ton choix peut-être corrigé ou non ? ceci est une grande question  [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 2702986051
bon samedi et bon weekend  [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 1840524174 (et merciii)
_______________
Sam 11 Sep 2021 - 9:33
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 720
Plop @Arya !

Alors
@Arya a écrit:Je comprends, alors j'ai surtout opté pour les div pour l'aspect bloc
Qu'est ce que j'ai déjà dit ? La sémantique d'abord, l'apparence après ! [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 2596956373 Avant d'utiliser un <div> ou un <span>, qui sont des éléments dépourvus de sens sémantique, demande toi si tu peux utiliser quelque chose qui semble pertinent dans ce contexte (liste, paragraphe, définition, citation, emphase...). Évidemment, tu ne connais pas tous les éléments HTML qui existent et à quel cas ils s'appliquent, mais les paragraphes c'est quand même la base è_é

@Arya a écrit:Vis à vis de ton choix, j'aurais tendance à penser peut-être que les balises sémantiques P ne comporte pas d'élément block
J'ai rien compris XD L'élément de paragraphe <p> est un bloc de paragraphe.

Dans mon code, "sémantiquement" j'ai décidé de séparer le contenu en deux paragraphes distincts. Le premier sert à afficher la période temporelle ("16 juillet au 31 juillet 2021"), le second sert à afficher la météo.
Tu noteras que, du coup, il n'y a plus d'image, mais où est-elle donc passée ? En fait, je l'ai mise dans une classe séparée. C'est exactement le même principe que sur Épicode avec les blocs <div class="info"> qui ont des modificateurs (Si tu ne vois pas de quoi je parle, je t'invite à aller lire un des sujets qui explique les "bonus" associés aux formulaires d'épicode, genre ici (en bas)), mon idée étant donc d'avoir par exemple une classe .-soleil, une classe .-nuages, une classe .-pluie, etc (les tirets sont purement cosmétiques, ça me permet de savoir que ce sont des classes qui servent de modificateurs, tu peux leur donner des noms plus clairs pour toi)

Du coup, dans mon idée, on pourrait alors écrire différemment le code selon le temps :
Code:
<p class="arya-pa__meteo -soleil">ensoleillé 12 à 18°C</p>
ou bien
<p class="arya-pa__meteo -pluie">pluvieux XX°C à YY°C</p>
ou bien
<p class="arya-pa__meteo -nuages">nuageux XX à YY°C</p>

L'image est insérée via l'usage du pseudo-élément ::before dans cette partie :

Et comme on veut que cette image soit placée sur la même ligne que le texte, on en profite pour mettre le paragraphe dédié à la météo en flex également (ça affecte les pseudo-éléments, c'est d'ailleurs pour ça que ça s'appelle un pseudo élément, parce que c'est un élément qui est "inséré" dans le code comme le ferait une balise HTML)
Code:
.arya-pa__meteo {
    display:flex;
    align-items: center;
}
Du coup le texte du paragraphe et le pseudo élément ::before, qui sont tous les deux à l'intérieur du paragraphe ayant la classe .arya-pa__meteo, seront alignés grâce à l'affichage flexbox.
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 R1WLV

On pourrait même s'arranger pour qu'il y ait une icone par défaut dès le départ :
Code:
.arya-pa__meteo::before  {
    content:"";
    background: url('URL_IMAGE_PAR_DEFAUT') no-repeat left center;
    background-size:50px 50px;
    width:50px;
    height:50px;
    display:block;
    margin-right:5px;
}

.-soleil::before { background-image: url('URL_ICONE_SOLEIL'); }
.-pluie::before { background-image: url('URL_ICONE_PLUIE'); }
.-nuages::before { background-image: url('URL_ICONE_NUAGES'); }

Ce qui ne répond pas à ma question : où est le problème ?

Hé bien, le "souci" - qui n'en est pas vraiment un en réalité - c'est que du coup l'image n'est qu'un bonus apporté par le CSS, elle n'est pas dans le HTML. Si c'était une image importante d'un point de vue utilitaire/compréhension, alors ce ne serait pas une solution à utiliser. Ici, c'est vraiment à toi de voir si tu tiens à avoir une image codée en HTML ou en CSS, à partir du moment où il y a écrit "ensoleillé" dans le texte, l'icone est surtout juste là pour faire joli.

Des questions ? =D
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 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 2 7WZJTfh
Sam 11 Sep 2021 - 23:27
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2703
Hola [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 3775839356
J'ai procédé à quelques corrections du coup :)
Mais pour ton exemple je pense avoir plus ou moins compris même si pour l'instant c'est encore un peu difficile pour moi à procéder ainsi puis ça m'a lair plus opportun à le laisser dans le html et à modifier par les autres :)
J'essayerai quand même de relire à tête reposer :)
Je suis quand même prête pour la suite :) au cas où :)
Je continuerai dans la semaine avec le bloc des topsites car là j'ai pas le bon ordinateur avec logiciel :)
Bon dimanche :)
_______________
Dim 12 Sep 2021 - 9:19
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 720
* Plisse les yeux vers @Arya *

Tu es sûre que tu ne veux pas prendre le temps de comprendre avant de passer à la suite ? C'est un atelier, après tout, et en plus cette partie est un très bon cas d'étude de l'utilisation de flexbox. Même si à la fin tu coderas peut-être ta PA différemment, n'oublions pas qu'elle nous sert ici de support pour te guider sur les méthodes de codage. C'est le moment d'approfondir le sujet plutôt que de s'arrêter sur un "plus ou moins compris".

N'hésite pas à te créer une page HTML à part pour faire des tests sans rapport avec la PA s'il le faut, notamment ! (ou directement sur Codepen si vraiment t'as la flemme, sigh).
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 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 2 7WZJTfh
Dim 12 Sep 2021 - 12:59
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2703
Blopp
Comme dit sur discord j'ai tout essayé ta version et la mienne. Je pige vraiment pas l'image apparaît pas :/ sur codepen et forumactif :/
Je dois porter la poisse. Bon grâce à ça j'ai compris mais vu que rien apparaît je désespère (ça fait 1h).
T-T jveux me pendre xD

édit, je te mets quand même les codes que j'ai fait, j'ai voulu tester l'inverse avec le
Code:
::after
et j'ai inversé les blocs, pour voir si j'avais compris :D (ce qui est pour partie, le cas, mais l'image apparaît pas [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 2979024130

Code:
<div class="PA-Arya-Amortentia-timeline">
 <p class="PA-Arya-Amortentia-temps">ensoleillé 12 à 18°C</p>
              <p class="PA-Arya-Amortentia-date">20 juillet 2000</p>
            </div>

Code:

 .PA-Arya-Amortentia-timeline {
 background-color: var(--couleur3);
 border: 1px solid var(--couleursecondaire);
 padding: 5px;
 display:flex;
 align-items: center;
    justify-content: space-around;
 color: darkred;}

 .PA-Arya-Amortentia-temps {
      display:flex;
      align-items: center;}
 
      .PA-Arya-Amortentia-temps::after {
      background: url('https://www.icone-png.com/png/11/10692.png') no-repeat right center;
    display:block;}

rendu :
_______________
Dim 12 Sep 2021 - 15:42
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 720
Hello @Arya !

J'ai bien fait d'insister :p

Je pense que pour commencer, un petit tour sur les pages MDN concernant les pseudo-éléments ::before et ::after te sera utile (ce sont des liens, à lire donc). Si tu ne trouves vraiment pas où est ton erreur, je te l'indiquerai.

Ensuite, petit rappel pour flexbox. Quand tu ajoutes la propriété display:flex à un conteneur, tous les enfants directs à l'intérieur seront affichés avec flexbox. Ainsi dans le cas suivant par exemple :
Code:
<div class="unBlocConteneur">
    <h1>Un titre</h1>
    Du texte tout seul
    <p>Un paragraphe de texte</p>
    <img src="#" alt="Une image">
    <a href="#">Un lien</a>
</div>
Si .unBlocConteneur se voit définir un display:flex, sans rien de plus, alors tous les éléments seront côte à côte. C'est à dire, le titre, puis le texte (oui, il compte comme un élément), puis le paragraphe, puis l'image, puis le lien. Essaie, tu verras.

Maintenant, comme j'ai dit, un pseudo élément permet d'ajouter du contenu à un élément "comme si on avait ajouté un élément HTML". L'inspecteur de firefox le montre assez bien, je ne sais pas ce que ça donne sous chrome, mais imaginons que côté CSS, nous avions défini (correctement) les règles .unBlocConteneur::before et .unBlocConteneur::after. L'inspecteur de code de firefox affichera alors ceci :
Code:
<div class="unBlocConteneur">
    ::before
    <h1>Un titre</h1>
    Du texte tout seul
    <p>Un paragraphe de texte</p>
    <img src="#" alt="Une image">
    <a href="#">Un lien</a>
    ::after
</div>
Ce qui implique qu'ils sont tous les deux affectés par la propriété display:flex;.

Partant de là, oublie ta PA pour le moment et teste un peu la chose sur quelques cas théoriques (presque) sans rapport :
- Comment coder un titre avec une barre horizontale de chaque côté, avec flex, ::before et ::after ?
- Comment précéder un texte d'une image d'illustration, avec flex et ::before ?
- Comment commencer automatiquement une citation (c'est à dire <blockquote>) avec un guillemet ouvrant, et la finir avec un guillemet fermant, avec ::before et ::after ?
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 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 2 7WZJTfh
Mar 14 Sep 2021 - 18:52
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2703
Coucou  @'Christa

J'ai fini par trouver ma boulette. Voici le bout de CSS où ça ne marchait pas :

Code:

.PA-Arya-Amortentia-temps::after {
    content: " ";
    background: url(https://www.icone-png.com/png/11/10692.png) no-repeat right center;
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
    display: block;
}

Au final, dans cette version, j'ai voulu essayer en inversant un peu la donne où j'ai inversé les dates et du coup le temps :) j'espère que c'est mieux pour cette partie ? Bon il faut que j'arrange bien entendu, je vais essayer de reprendre et d'avoir la même version que toi sans forcément regarder ce que tu as fait :3 (après oui, pour ma partie de base, elle marche, mais j'ai pas voulu me compliquer la vie xD) donc je verrai :3

Ensuite, pour l'exercice.
j'ai créer une autre page html, ici :
J'ai repris le code html que tu as fait, et j'y ai pour l'instant appliquer le flex, pour voir le rendu, et en effet, j'ai rien eu besoin d'ajouter d'autres :3 (magieeee)
1/ Pour la première partie de l'exercice, voici ce que j'ai mis dans le CSS :


[/size]
Code:

.unBlocConteneur h1::before, .unBlocConteneur h1::after {
      content:"|";
      display:inline-block;
      padding:5px;}



2/ Pour la deuxième partie de l'exercice, je n'ai pas beaucoup compris, si je prends par exemple la partie paragraphe, si je comprends bien, je dois faire en sorte que devant le paragraphe, je dois ajouter une image c'est ça ? ou je n'ai pas compris ce passage ? et je dois créer un bloc avec à l'intérieure du texte et à gauche, juste avant une image ?)

3/ Pour la troisième partie, je ferais exactement comme la première partie, mais j'essayerai après avoir fini le point 2.

D'avance mercii pour les éclaircissements :3

merci et bonne soirée :3
_______________
Mer 15 Sep 2021 - 19:54
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 720
Plop @Arya !

Alors, comme tu as pu le constater, ton erreur consistait à l'oubli de la propriété content, qui peut être vide, mais doit être présente.

Maintenant, comme j'ai dit, imagine qu'un pseudo élément ::before ou ::after sont en réalité des bouts de texte insérés dans le contenu d'un bloc. Par exemple, pour mon bloc conteneur d'exemple, on a un élément au début du contenu (before) et un élément après le contenu (after) :
Code:
<div class="unBlocConteneur">
       ::before
      Du texte tout seul
       ::after
   </div>
Par défaut, c'est juste du texte, mais en réalité vu que c'est inséré par CSS, tu peux en faire ce que tu veux de ces pseudo éléments (dans la limite de ce qui est possible en CSS).

L'exercice 2 est simplement l'exacte mise en pratique de notre bloc météo plus haut, c'était pour vérifier si tu réalisais bien ce qui se passait ^^' En l’occurrence, avec ::before, j'ai inséré un élément transformé en bloc (display:block;) contenant une image de fond d'une dimension équivalente à celle de notre bloc, ce qui donne l'impression d'avoir une image d'illustration qui précède un texte.

Je te laisse potasser dessus, y compris sur le premier exercice parce que je parlais bien de barres horizontales et pas verticales XD
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 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 2 7WZJTfh
Mer 15 Sep 2021 - 21:16
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2703
BLOUPPP @'Christa

Je plaide coupable, je sais jamais différencier l'horizontale de la verticale (jsais ça craint), my bad mais du coup j'ai corrigé [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 2691722282
le rendu pour les 3 exercices (je suis un peu moins certaines du dernier, en mode où est le piège mais voici le css du coup de tous les blocs et le html aussi :)) :


Code:
    <div class="unBlocConteneur">
    <h1>Un titre</h1>
    Du texte tout seul
    <p>Un paragraphe de texte</p>
      <img src="#" alt="Une image"/>
    <a href="#">Un lien</a>
</div>
 
  <div class="unBlocConteneur1">
      Du texte tout seul
  </div>
 
  <div class="unBlocConteneur2">
    <blockquote>Du texte tout seul</blockquote>
  </div>

Code:
      .unBlocConteneur, .unBlocConteneur2 {
      display:flex;}
     
      .unBlocConteneur h1::before, .unBlocConteneur h1::after {
      content:" ";
      display:inline-block;
      vertical-align: middle;
      width: 200px;
      height: 1px;
      background: #000;
      padding:5px;}
     
      .unBlocConteneur h1::before { margin-right: 10px; }
.unBlocConteneur h1::after { margin-left: 10px; }
     
      .unBlocConteneur1 {display:flex;
align-items: center;
justify-content: space-between;
width:300px;}
     
      .unBlocConteneur1::before, .unBlocConteneur1::after {
      content: " ";
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
    display: block;
      background:url(https://www.icone-png.com/png/11/10692.png) no-repeat;}
     
      .unBlocConteneur2 blockquote::before{
      content: "« ";} 

.unBlocConteneur2 blockquote::after {
  content: ' »';}

[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 3775839356 j'attends sagement le verdict et potentiellement la suite (jpense avoir bien cerné le code) j'aurais plus qu'à le retravailler bien sûre mais peut-être que je peux coupler ce retravail avec une suite de la PA et/ou d'autres exercices si tu veux continuer à me faire souffrir JPP

[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 3775839356 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 3775839356
_______________
Jeu 16 Sep 2021 - 11:00
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 720
Salut @Arya !

Il n'y a pas de piège pour le dernier XD C'était juste un exemple parlant de comment utiliser ::before et ::after sans forcément aller dans la complexité :p

Pour le premier, le padding n'était pas forcément nécessaire (ou alors seulement à droite et à gauche), parce que sinon même si tu as mis "1px" de haut, la barre fait 11px de haut (le bloc de hauteur 1px + le padding qui fait 5px en haut et en bas)

Après tout ça, je te fais confiance pour avoir compris comment utiliser ::before et ::after pour insérer des ajouts "cosmétiques" qui n'ont pas forcément besoin d'être écrits dans le HTML.

On peut donc continuer à bosser sur ta PA. Puisqu'on travaille sur la deuxième ligne, il est temps de s'occuper du bloc des top sites. Cette fois ci je vais un peu plus te diriger parce que je veux te voir utiliser certaines caractéristiques de flex que tu ne maitrises pas forcément :
- Pour les étoiles, rien de compliqué, on va utiliser ★ (ou &starf;, c'est pareil)
- Dans le code, le "votez pour nous" doit être un titre, affiché en premier. Va falloir t'arranger pour que, visuellement, il apparaisse en bas, hmmmm.
- Les étoiles seront dans une liste une fois de plus =D
- Tu n'auras pas besoin de largeur fixe, par contre un pourcentage quelque part ne sera pas de trop.

Le code, côté HTML, est ultra basique, donc je te donne ma version (tu changeras la classe selon tes préférences) :
Code:
<div class="arya-pa__blocTops">
    <h1>Votez pour nous</h1>
    <ul>
        <li><a href="#" target="_blank">&starf;</a></li>
        <li><a href="#" target="_blank">&starf;</a></li>
        <li><a href="#" target="_blank">&starf;</a></li>
        <li><a href="#" target="_blank">&starf;</a></li>
        <li><a href="#" target="_blank">&starf;</a></li>
    </ul>
</div>
C'est côté CSS qu'il va falloir bosser cette fois ci !
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 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 2 7WZJTfh
Jeu 16 Sep 2021 - 12:18
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2703
Coucou/Re [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 2691722282
Je m'attendais à tout, sans savoir pourquoi JPP XD
J'ai compris, j'aurais pu faire ça oui XD
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 514879035

Tu veux ma mort avoue xD non plus sérieusemenent, jtrouve ça bien et beaucoup plus guidé, (j'aime être guidée au fonds) Alors j'ai réussi à faire quelque chose, mais jpense que c pas du tout parfait, j'ai pas pu faire mieux que de laisser deux % en largeur, mais le reste m'a l'air correct, enfin j'espère, encore une fois, j'ai tenté de ne pas trop me préoccuper du rendu :
Code:
  <div class="PA-Arya-Amortentia-Topsites">
              <h3>Votez pour nous</h3>
            <ul>
            <li><a target="_blank" href="URL" title="topsite">★</a></li>
            <li><a target="_blank" href="URL" title="topsite">★</a></li>
            <li><a target="_blank" href="URL" title="topsite">★</a></li>
            <li><a target="_blank" href="URL" title="topsite">★</a></li>
            <li><a target="_blank" href="URL" title="topsite">★</a></li>
         </ul>
            </div>

pourquoi h3 ? parce que j'ai déjà les h1 en invisible et quelques h2 quoique j'aurais pu mettre du h2
Code:
.PA-Arya-Amortentia-Topsites ul {
         width:10%;
      }
     
   .PA-Arya-Amortentia-Topsites {
   text-align:center;
      width:40%;
      margin: auto;
    display: flex;
    flex-direction: column-reverse;
      align-items: center;}

Je pense être bien partie, mais j'ai peut-être loupé des choses, j'aurais pu aussi faire l'UL en grid ceci dit, et mettre le titre directement en bas, ce qui est aussi une alternative, mais ce serait pas forcément juste sémantiquement.
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 3775839356
_______________
Jeu 16 Sep 2021 - 13:27
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 720
* tape sur les doigts d'@Arya * On n'utilise pas les balises de titre sur la logique "j'ai déjà utilisé les autres" !  Tu peux donner un rendu différent aux titres d'un même niveau avec le CSS @_@. N'oublie pas que ces titres servent à hiérarchiser l'information. Comme pour un cours, ou un sommaire. Grand I, Partie A, petit 1.

Effectivement, tu es bien partie du moins pour la première chose que je souhaitais voir, à savoir l'usage de la propriété flex-direction (une autre solution, si on avait eu plus d'éléments, aurait été d'utiliser la propriété order). Ceeeependant *voix de Dumbledore* à ce stade, je n'aurais pas mis de largeur. C'est plutôt les éléments de liste qui vont en avoir besoin. Essaie d'utiliser la propriété flex ou du moins une des trois propriétés qu'elle résume .
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 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 2 7WZJTfh
Jeu 16 Sep 2021 - 14:10
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2703
j'ai corrigé pour le titre et merci pour les éclaircissements sur le flex (cf didi)
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 514879035 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 514879035 je déclare juste forfait pour une histoire d'alignement pour les liens des topsites :
c'est en effet en décaler, j'ai réussi par contre à retirer, toutes les largeurs, mais je sais pas où mettre ce fameux pourcentage que tu me parles pour que tout "ressorte" bien :
du coup, voici mon css en espérant avoir des éclaircissements :
Code:
.PA-Arya-Amortentia-Topsites ul li {
         flex:15px;
      }
     
   .PA-Arya-Amortentia-Topsites {
   text-align:center;

au final, c'est court mais toutes les listes ont un flex plus haut avec la balise .PA-Arya-Amortentia ul
Code:
    .PA-Arya-Amortentia ul {
    list-style-type: none;
    padding: 0;
    margin:0;
    display:flex;
    flex-wrap: wrap;}

Je continue à chercher bien entendu, mais je ne vois pas :/
_______________
Jeu 16 Sep 2021 - 16:17
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 720
Tu étais pas si loin en fait XD Essaie avec flex-basis:33% !

Ça veut dire que tu attribues à tes éléments flexibles (donc les items de liste) une dimension de base de 33%, soit un tiers de la largeur disponible. Ajoute à ça un justify-content:center pour aligner les étoiles au centre. L'avantage du pourcentage, c'est que même si tu changes la taille de la police, l'organisation reste la même. On évite le pixel près !

Concernant ton problème, de manière intéressante, quand tu écris flex:33%, ton navigateur comprend : flex:1 1 33%, c'est à dire :
Code:
flex-grow:1;
flex-shrink:1;
flex-basis:33%
Le fait que flex-grow et flex-shrink aient la valeur 1 permet d'augmenter ou diminuer la largeur des éléments de liste de manière à remplir tout l'espace disponible, ce qui n'est pas notre objectif ici.

Si tu écris seulement flex-basis:33%, par contre, les autres valeurs restent celles par défaut quand tu ne définis rien, à savoir "0". En soi, tu n'aurais pas pu le deviner, à moins d'être très observatrice. Sous firefox, l'inspecteur de code permet de savoir quelles valeurs sont assignées aux différentes propriétés quand on utilise une propriété raccourcie : en cliquant sur une petite flèche .
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 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 2 7WZJTfh
Jeu 16 Sep 2021 - 19:00
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2703
ça me rassure, je ne suis pas à l'opposer pour une fois (oui je pense encore au coup de la barre horizontale alors que j'en avais fait une verticale xD)
Je suis malheureusement pas sous firefox, mais c'est peut-être pour ça que certaines choses ne fonctionnent pas ? Oui j'ai encore un petit soucis même après avoir ajouté ça, c'est que ça ne ressort toujours pas comme toi, je dois être maudite je pense :

J'ai dû louper quelque chose  [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 2979024130
J'ai l'impression d'arriver à rien, mais je sais ce que tu vas me dire, Arya arrête de te dénigrer et applaudit toi un peu au contraire xD 
Encore merci, c'est vraiment très instructif tout ça  [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 3775839356
_______________
Jeu 16 Sep 2021 - 20:03
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 720
C'est parce que tu as mis le justify-content au mauvais endroit XD Je plaide coupable, ma phrase n'était pas claire. C'est sur le conteneur qu'il faut mettre cette propriété, pas sur les items.

Et maudite sois tu de m'avoir fait lancer Chrome, mais effectivement, pas de petite flèche. Une preuve de plus que l'inspecteur de code de Chrome est inférieur à celui de Firefox :p
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 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 2 7WZJTfh
Jeu 16 Sep 2021 - 20:38
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2703
Coucouuu

Du coup, c'est tout bon xD j'ai déplacé le justify-content à l'UL directement et tout fonctionne :3
La suite je suppose que c'est le bloc des prédéfinis ? XD des instructions particulières pour celui-ci ?
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 3775839356 (oui je suis motivée à fonds, car c'est presque la fin XD) mais j'ai hâte de voir le reste surtout [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 3775839356 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 3775839356
belle journée :3 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 3775839356
_______________
Ven 17 Sep 2021 - 11:04
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 720
Hello @Arya !

Désolée pour l'attente, je n'avais pas d'énergie à consacrer au cours T_T

Alors désolée, je n'ai pas d'instructions particulières pour le bloc des prédéfinis. Dans ma version finale personnelle, il n'a pas de dimension fixe (c'est les items de liste - et donc les avatars - qui ont une dimension fixe)

Si tu as envie d'un peu de challenge, voici la liste des règles CSS que j'ai écrites XD (sans les propriétés)
Code:
.arya-pa__blocPredefs {}
.arya-pa__blocPredefs ul {}
.arya-pa__blocPredefs li {}
.arya-pa__blocPredefs li img {}
.arya-pa__blocPredefs li > div {}
.arya-pa__blocPredefs li:hover > div {}
.arya-pa__blocPredefs p {}
.arya-pa__blocPredefs > p {}
Quizz : Quelle est la différence entre les deux derniers sélecteurs ? As-tu une idée de pourquoi j'ai deux sélecteurs différents ? (si tu n'en as aucune c'est normal, tu n'es pas dans ma tête XD Au pire, essaie de trouver une raison pour laquelle tu ferais ça)

Une fois que cette partie sera faite, normalement tu auras codé toutes les boites de contenu et on va pouvoir s'attaquer à la deuxième partie de cet atelier : l'agencement.
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 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 2 7WZJTfh
Mer 22 Sep 2021 - 17:18
Arya
Arya
Codeur.se
  • Date d'inscription : 12/05/2016
  • Messages : 2703
BLOUPP t'en fait pas  @'Christa (j'ai pu me mettre à jour en RP enfin pas totalement)
Sniff pour les instructions xD c'était cool d'en avoir pour le bloc précédent :P mais jme suis rappelée comment coder tout ça du coup et j'ai quelques règles similaires aux tiennes sauf bien sûre les deux dernières xD mis à part dire que ça va sélectionner toutes les balises p dans ledit bloc, ou plus spécialement viser les enfants de cette classe, je vois pas pourquoi tu as choisi de t'en servir ? 
De mon côté, le paragraphe n'a pas encore de style je me suis contentée de coder les images avec le hover, dont voici le code html et le css, à voir ce que tu en penses bien sûre :D
Code:
 <div class="PA-Arya-Amortentia-recherches">
         <ul>
         <li><img src="https://i.servimg.com/u/f30/19/45/51/53/simonp10.jpg" alt="Pseudo" title="Pseudo"/><span>Pseudo</span></li>
         <li><img src="https://i.servimg.com/u/f30/19/45/51/53/simonp10.jpg" alt="Pseudo" title="Pseudo"/><span>Pseudo</span></li>
         <li><img src="https://i.servimg.com/u/f30/19/45/51/53/simonp10.jpg" alt="Pseudo" title="Pseudo"/><span>Pseudo</span></li>
            <li><img src="https://i.servimg.com/u/f30/19/45/51/53/simonp10.jpg" alt="Pseudo" title="Pseudo"/><span>Pseudo</span></li><br/>
         </ul>
            <p><a target="_blank" href="#" title="Lien menant vers les autres prédéfinis">Voir les autres prédéfinis</a></p>
            </div>

CSS : 
Code:
      .PA-Arya-Amortentia-recherches ul {
   display:flex;
   justify-content: space-between;
    flex-wrap: wrap;}
   
   .PA-Arya-Amortentia-recherches li, .PA-Arya-Amortentia-recherches li span, .PA-Arya-Amortentia-recherches li img {
   width: 100px; 
   height: 100px;}
   
   .PA-Arya-Amortentia-recherches li img {
   object-fit:cover; 
   position:relative;}
   
   .PA-Arya-Amortentia-recherches li {
   position:relative; 
   margin: 0px 3px 3px 0px;} 

   .PA-Arya-Amortentia-recherches li span{ 
   display:block; 
   position:absolute; 
   top:0px; 
   left:0px; 
   background:white; 
   padding:6px; 
   text-align:center; 
   -moz-transform: scale(0);
   -webkit-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0); 
   font-size:10px; 
   transition:600ms; } 

.PA-Arya-Amortentia-recherches li:hover span{ 
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);    
line-height: 13px;  
transition:600ms;}

J'attends le verdict, je vais bien sûre relire le codouuu et j'attends patiemment la partie agencement :D
[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 3775839356
Encore merci et prend ton temps bien évidemment :3
_______________
Mer 22 Sep 2021 - 20:09
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 720
Hello @Arya!

Encore désolée pour le silence, ma motivation est tombée dans un trou :<

Ton code du bloc des prédefs


Pour répondre à ton dernier message, j'ai constaté quelques "erreurs" dans ton code :
- Il y a un <br /> qui n'a rien à faire dans la liste
- Tu peux te passer des préfixes vendeurs comme ici :
Code:
-moz-transform: scale(0);
   -webkit-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
La propriété transform (et la fonction scale()) sont normalement bien acceptées à ce jour et n'ont plus vraiment besoin de préfixes vendeurs, sauf si tu tiens absolument à avoir une rétro compatibilité avec les vieux navigateurs, auquel cas tu devras réécrire tout ton CSS en conséquence XD
- c'est pour quoi faire le line-height: 13px; au survol ?

Sinon, j'aurais utilisé un bloc (<div>) plutôt qu'un <span> mais sémantiquement parlant en vrai ta solution est tout à fait décente vu que tu n'as pas procédé de la même façon que moi.

'Christa et ses questions reloues


Pour la question que j'avais posée relativement à mes styles CSS, c'est parce que mon code à moi était le suivant :
Code:
<div class="arya-pa__blocPredefs">
    <h1>Nos prédéfinis</h1>
    <ul>
        <li>
            <img src="https://via.placeholder.com/70.png" alt="Avatar NomDuPerso" title="Nom du Perso">
            <div>
                <p>Nom du perso</p>
                <p><a href="#" title="Envoyer un message privé" target="_blank">MP</a></p>
            </div>
        </li>
        <li>
            <img src="https://via.placeholder.com/70.png" alt="Avatar NomDuPerso" title="Nom du Perso">
            <div>
                <p>Nom du perso</p>
                <p><a href="#" title="Envoyer un message privé" target="_blank">MP</a></p>
            </div>
        </li>
        <li>
            <img src="https://via.placeholder.com/70.png" alt="Avatar NomDuPerso" title="Nom du Perso">
            <div>
                <p>Nom du perso</p>
                <p><a href="#" title="Envoyer un message privé" target="_blank">MP</a></p>
            </div>
        </li>
        <li>
            <img src="https://via.placeholder.com/70.png" alt="Avatar NomDuPerso" title="Nom du Perso">
            <div>
                <p>Nom du perso</p>
                <p><a href="#" title="Envoyer un message privé" target="_blank">MP</a></p>
            </div>
        </li>
    </ul>
    <p><a href="#" target="_blank">Voir les autres prédéfinis</a></p>
</div>
Tu constateras que nous avons des paragraphes pour le nom du perso (j'avais rajouté un deuxième paragraphe pour contenir un lien pour envoyer un message privé), mais également un paragraphe pour contenir le lien pour "voir les autres prédéfinis".

Du coup, partant de là, à quelles parties du code ci-dessus vont s'appliquer les deux règles CSS dont je parlais avant ?
Code:
.arya-pa__blocPredefs p {}
.arya-pa__blocPredefs > p {}

Mise au point avant la suite


Normalement, après ça, tu as codé toutes les parties de ta PA et on a fini la première partie.

Histoire de partir sur une base saine, est-ce que tu peux nettoyer ton code final et me le transmettre via fichiers (par Discord) ? Je vais relire tout ça et faire la liste des petits détails qui clochent potentiellement (notamment partir à la chasse aux dimensions en trop XD).

Des devoirs !


En attendant que je fasse ce dernier tour, de ton côté tu vas avoir ton propre travail à faire XD Tu te souviens du schéma que j'ai fait au début ? Avec les blocs numérotés et tout ? On va revenir à cette étape. Tu vas créer une nouvelle page HTML avec tes blocs de base, VIDES =D Bon, ça, c'est la partie simple, même qu'en me basant vaguement sur ce que tu as fait jusqu'ici, je suppose que ça devrait ressembler à ceci :

Code:
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Page d'accueil d'Amortentia</title>
        <!-- Feuille de styles -->
    </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 - Events
        </div>
        <!-- Fin de la première ligne de la PA -->

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

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

        <div class="PA-Arya-Amortentia-liens">
            7 - Menu
        </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 - Prédéfinis (Recherches)
        </div>

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

C'est maintenant qu'on va travailler à l'agencement de tous les blocs. Pour le moment, oublie ce que tu as fait pour les remplir, et réfléchis à comment tu comptes t'y prendre pour agencer le tout dans l'ordre tel qu'on le voit sur la maquette. Comme on s'attaque au visuel cette fois ci, tu peux mettre des dimensions, mais essaie de te limiter au strict minimum si c'est possible (par exemple, est-ce qu'un bloc peut s'agrandir/se réduire presque à volonté parce que sa largeur est peu importante ? Dans ce cas, choisis une largeur "maximale" et "minimale" plutôt qu'une dimension fixe. Ou une dimension en pourcents. Ou utilise flex-basis et ses petits copains. Tu peux également retoucher le code que j'ai donné ci avant, l'essentiel est d'avoir le résultat visuel du schéma.

Ne bâcle pas ! Tu sembles souvent pressée de me rendre ton résultat et tu en négliges les petites erreurs bêtes. Réfléchis bien, aide toi de ce que tu as appris jusqu'ici, et ne stresse pas XD

Note que je ne t'ai pas dit si tu devais utiliser grid ou flexbox. Au début du cours, tu semblais vouloir utiliser flex pour agencer cette PA, donc je te laisse partir sur ton idée d'origine. On fera une parenthèse finale pour élaborer sur grid parce que c'est intéressant (mais compliqué).
_______________


[Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 14n2 [Atelier de 'Christa #3] Moins de dimensions fixes, plus de flex ! - Arya - Page 2 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 2 7WZJTfh
Hier à 13:20
Contenu sponsorisé
    _______________
    Revenir en haut