28112 sujets

CSS et mise en forme, CSS3

Comment utiliser la propriété CSS "order" ?

Bonjour à vous tous,

J'avance petit à petit sur mon projet de site web et j'ai résolu un problème de placement des cartouches les uns en-dessous des autres de sorte que les espaces vides soient comblés. Voici une capture écran de l'affichage sur un desktop :
upload/1666005154-62242-capture.png

Mais maintenant je suis sur un problème que je n'arrive pas à résoudre. Je souhaite, quand on est dans un affichage smartphone, que les cartouches s'affichent dans un ordre précis. Ainsi, le cartouche "Métadonnées" apparaît en haut de l'écran, dans un affichage sur un écran desktop, mais ce même cartouche apparaît plus bas (en sixième position) dans un affichage smartphone. Je voudrais qu'il s'affiche en seconde position, juste en-dessous du cartouche "Indispensables". J'ai structuré la page de sorte que tous les cartouches se trouvent dans une même <div> (en l'occurrence la balise <main>) pour pouvoir leur appliquer la propriété CSS "order". Mais je n'arrive pas à la faire fonctionner. Le bloc en question ne se place pas à l'endroit que je veux lui assigner. Pourtant, son utilisation est très simple. Il suffit de lui assigner un numéro de position dans une classe à la balise <article> concernée. Quelqu'un pourrai m'expliquer où je commets l'erreur ?

Voici le code HTML et CSS :
https://jsfiddle.net/okpjLawd/

Merci pour votre aide
Modifié par ObiJuanKenobi (17 Oct 2022 - 13:19)
Salut, ta boîte arrive en 6e position pour deux raisons possibles : soit tu as exploiter la propriété column, comme ceci par exemple, soit tu as mis des boîtes dans des cartouches en quatre colonnes. Du coup ensuite, il te faut faire tout un micmac pour arriver à tes fins. Ce qui semblait une solution séduisante de prime abord devient un cauchemar à développer par la suite.

Mais tu pourrais aussi faire ceci : boîtes en 4 colonnes, avec grid layout + un mini js.
Modifié par Olivier C (17 Oct 2022 - 16:45)
La propriété hors d'air te permet de placer l'élément là où tu veux dans l'élément parent dans lequel il se trouve. Elle ne permet pas à l'élément de sauter d'un élément parent à un autre élément parent.
Oui, c'est aussi ce que je dis, tous les cartouches sont dans le même parent. Mais mon problème c'est que je ne parviens pas à utiliser correctement la propriété order.
Et bien si justement, et c'est bien ce que je te propose de faire. Mais pour ça il te faut revoir ta stratégie de placement.

Pourquoi ne pas utiliser des exemples qui fonctionnent déjà ? Ça fait quand-même 2 ans que tu postes - ponctuellement - des topics sur ce sujet...
Salut,

en regardant rapidement ton jsfiddle, tes articles ne sont pas dans un container de type flex et la propriété order ne fonctionne donc pas.
J'ai testé en mettant display: flex; dans la classe .cartouche.gouttiere > * et cela ne fonctionne pas non plus. Je n comprends toujours pas pourquoi cela ne marche .
Quand tu mets : 
.cartouche.gouttiere > *{
    display: flex;
    width: 100%;
    margin: 0 0 1rem;
}

C'est tout tes articles qui deviennent des conteneurs flex. Ils contiennent tous un p et h2 , du coup tu peux faire un truc du genre pour basculer le p avant le h2 : 

p {
  order: -1;
}
Ta proposition consiste à placer le <p> avant le <h2>, c'est bien ça ? Mais, ce n'est pas les <p> que je veux positionner, c'est le cartouche entier (contenant les <h2> et les <p>) que je veux placer sous d'autres cartouches pour avoir un ordre logique de lecture en affichage smartphone.
Modifié par ObiJuanKenobi (18 Oct 2022 - 15:46)
Euh moi je propose rien, j'essaie juste de répondre à ta question.

Tu demandes comment utiliser la propriété CSS "order".
Je t'ai répondu qu'il faut un conteneur de type flex pour pouvoir utiliser la propriété order sur les elements enfant de ce conteneur, et que c'est pour ça que cela ne fonctionne pas dans ton jsfiddle.

Tu proposes de faire ce css la :
.cartouche.gouttiere > *{
    display: flex;
    width: 100%;
    margin: 0 0 1rem;
}


Je te traduits ce css qui revient a dire que tous les articles sont flex.
Et la seule façon de faire du order dans ce cas la, c'est de déplacer soit le p soit le h2.

Si tu veux déplacer des articles il faut que ce soit le parent qui soit flex.
Ensuite tu pourras sans doute déplacer le 6e fils de ton conteneur (donc le 6e article) avec un order -1 ,et déplacer le 1er de ton conteneur avec un order -2 pour qu'il reste en premier


Edit : hop mini modification de ton jsfiddle : https://jsfiddle.net/Lcz9otda/

En gros j'ai changé ton min-width:30rem : 

@media (max-width: 64rem){
    .cartouche {
      display: flex;
      flex-direction: column;
    }
    
    .cartouche :nth-child(1){
      order:-2;
    }
    
    .cartouche :nth-child(6){
      order:-1;
    }
}

Modifié par Mathieuu (18 Oct 2022 - 16:18)
Modérateur
Bonjour,

Comme tu l'as découvert, ce que tu veut faire en CSS ne peut se faire qu'à l'aide de display:grid; et grid-template-rows: masonry; ce qui donnerait pour ton fiddle : https://jsfiddle.net/dk6bvez1/

Seulement, il faut que le navigateur qui affiche la page en soit capable et pour le moment il n'y a guère que Firefox qui puisse et en le configurant pour. Voir https://caniuse.com/?search=masonry

Depuis des années, ce genre de mise en page, distribution de boite se fait via le très célèbre script masonry (nom repris pour la valeur de grid-template-rows ) . Page officiel du script : https://masonry.desandro.com/ et il y a une foultitude d'options en plus de l'affichage de base que CSS ne fait pas non plus.

Tu peut bien sur utiliser order pour modifier l'ordre d'affichage de tes boites en bricolant pour le fun avec un flex en colonnes et en wrap, mais comment vas tu imposer la bonne hauteur de ta boite en flex pour que les contenus(articles) se dispatchent sur plusieurs colonnes, comment va tu savoir la hauteur qu'utilise les boites (en fonction de la police, ponctuation, images, retour à la ligne,etc...) pour les repositionner via order dans telle ou telle colonne en sachant que tu ne peut pas cibler une colonne, seulement une position.

Pour reprendre l'exemple de @Mathieu et coller un peu plus à ce que tu recherches , voici une bricole https://jsfiddle.net/Lcz9otda/ qui va vite te démontrer que ce n'est pas envisageable sans l'aide d'un script qui va te recalculer tout ça à la volée. En gros , pour le moment, CSS seul n'est pas une possibilité digne de confiance pour ce type d'affichage. Smiley cligne
Modifié par gcyrillus (18 Oct 2022 - 18:02)
Alors ça, la solution via CSS column, c'était la solution que je lui avais proposé il y a quelque temps : CodePen.

On avait déjà soulevé alors le problème de la distribution verticale des items (on en revient toujours au même point), d'où la solution en grid + js ligth proposée plus haut. Solution que j'ai envisagé pour moi même, à partir de vos différentes discutions avec ObiJuanKenobi depuis deux ans sur le sujet. Les différentes interventions des alsanautes (mention spéciale à gcyrillus) s'étaient révélées très intéressantes et m'avaient conduit à produire ceci : Masonry with CSS Grid Layout & JavaScript.
Modifié par Olivier C (20 Oct 2022 - 13:49)
Prévenir un modérateur
Répondre au sujet
Aller à