27823 sujets

CSS et mise en forme, CSS3

Bonjour à tous et à toutes,
Je travaille actuellement sur une page avec 7 bulles/éléments/boutons (voir ci-dessous) :
upload/1606469094-40463-bulles.jpg
Voici le CodePen si ça intéresse certains : https://codepen.io/spip93/pen/RwGwBRm
J'ai donc 3 lignes avec :
Sur la ligne 1, les bulles/éléments/boutons : Agenda et Bibliothèque
Sur la ligne 2, les bulles/éléments/boutons : Animations, A l'affiche et Lecture et loisirs
Sur la ligne 3, les bulles/éléments/boutons : Les salles et AGHBR

Actuellement, quand on passe sur mobile ou tablette, les bulles/éléments/boutons sont dans cet ordre :
- Agenda
- Bibliothèque
- Animations
- A l'affiche
- Lecture et loisirs
- Les salles
- AGHBR

La cliente souhaiterait que, sur mobile et tablette, les bulles/éléments/boutons soient dans cet ordre :
- Agenda
- Les salles
- Animations
- A l'affiche
- Bibliothèque
- Lecture et loisirs
- AGHBR

Comment faire ?
Après différentes recherches et d'après ce que j'ai compris, c'est possible en passant par des flexbox.
Effectivement, je suis arrivé à changer l'ordre de mes bulles/éléments/boutons, mais uniquement au sein d'une ligne.
Par exemple au sein de la ligne 2, c'est dans cet ordre :
Animations, A l'affiche et Lecture et loisirs
et je suis arrivé à mettre dans cet ordre :
Lecture et loisirs, Animations et A l'affiche

Mon problème c'est que je n'arrive pas à changer l'ordre de mes éléments quelle que soit la ligne à laquelle appartiennent mes bulles/éléments/boutons

Est-ce qu'on peut le faire en passant par des règles CSS ou est-ce qu'on doit nécessairement passer par JS ? Si oui, quel code JS mettre SVP (car là j'y connais absolument rien) ?

D'avance merci pour vos réponses.
Bonne journée Smiley cligne
Modérateur
Bonjour,

Je pense qu'il ne faut pas penser en terme de "ligne", mais juste avoir dans le html tes sept éléments à la suite les uns des autres. Et ensuite, tu utilises du css. Tu as 2 choix principaux :

1) soit tu positionnes tes éléments avec des position:absolute et des left, right, top, bottom qui vont bien,

2) soit tu utilises la propriété css grid

Voir https://forum.alsacreations.com/topic-4-87580-1-Menu-circulaire-autour-dune-image.html qui traite une question assez proche de la tienne, et qui contient des exemples.

Amicalement,
Modérateur
Bonjour,
il y aussi la possibilité de se servir de flex et order (comme tu le tentes) , mais , dans une mediaquerie (992px) pour passer outre tes class de Bootstrap3 , en faisant disparaitre les éléments constituant les lignes et leur colonnes avec display:contents .

Voici l'idée CSS:
@media (max-width : 992px) {
  .row,
  .row>[class^=col] {
    display:contents;/* on fait virtuelement disparaitre row et div.colX */
  }
  .container {/* on en fait un conteneur flex comme ce n'est pas du bs4 */
    display:flex;
    flex-flow:column;
  }
  .row a {margin:1em auto;}/* reset du margin*/
  /* placement dans l'ordre */
  .order-1 {order:1}
  .order-2 {order:2}
  .order-3 {order:3}
  .order-4 {order:4}
  .order-5 {order:5}
  .order-6 {order:6}
  .order-7 {order:7}
}


Coté HTML, il suffit d'ajouter aux liens la class order-X correspondante.

Note: A voir comme un pansement sur ton layout construit avec bootstrap 3.

https://codepen.io/gc-nomade/pen/OJRJogj

Cdt
Modifié par gcyrillus (27 Nov 2020 - 11:41)
Voici une solution utilisant la seconde proposition de parsimonie

<section class="conteneur">
  <div>Agenda</div>
  <div>Bibliothèque</div>
  <div>Animations</div>
  <div>À l’affiche</div>
  <div>Lecture et loisirs</div>
  <div>Les salles</div>
  <div>AGHBR</div>
</section>
  



.conteneur {
  background:violet;
  display:flex;
  flex-flow:wrap;
  width:100%;
}

.conteneur > div {
  flex:1 0 auto;
  text-align:center;
  height:200px;
  width:50%;
}

.conteneur > div:nth-of-type(3),
.conteneur > div:nth-of-type(4),
.conteneur > div:nth-of-type(5) {
  width:33%;
}

@media (max-width:1000px) {
  .conteneur > div:nth-of-type(2){
    order:5;
    width:33%;
  }
  .conteneur > div:nth-of-type(3){
    order:3;
  }
  .conteneur > div:nth-of-type(4){
    order:4;
  }
  .conteneur > div:nth-of-type(5){
    order:6;
    width:50%;
  }
  .conteneur > div:nth-of-type(6){
    order:2;
  }
  .conteneur > div:nth-of-type(7){
    order:7;
  }
  
}
Coucou,

Merci beaucoup pour vos réponses, mais j'ai trouvé UNE solution !!
Tout passe par le HTML.
J'ai mis 2 corps/containers l'un au-dessus de l'autre.

Le premier corps/container, visible uniquement sur ordinateur, a pour classes :
container desktop hidden-sm hidden-xs

et a les boutons dans cet ordre :
- Agenda
- Bibliothèque
- Animations
- A l'affiche
- Lecture et loisirs
- Les salles
- AGHBR

Le second corps/container, visible sur mobile et tablette, a pour classes :
container mobile visible-sm visible-xs

et a les boutons dans cet ordre :
- Agenda
- Les salles
- Animations
- A l'affiche
- Bibliothèque
- Lecture et loisirs
- AGHBR

C'est assez simple comme solution, mais je suis content d'y avoir pensé Smiley lol . Je ne pensais pas que ça fonctionnerait.
Ceci dit, merci beaucoup pour vos solutions Smiley merci , je vais (quand même) les tester.
J'espère que ça en aidera d'autres.
Bonne journée Smiley cligne
Modifié par spip93 (27 Nov 2020 - 12:11)
Modérateur
spip93 a écrit :
Coucou,

Merci beaucoup pour vos réponses, mais j'ai trouvé UNE solution !!
Tout passe par le HTML.
J'ai mis 2 corps/containers l'un au-dessus de l'autre.


ça me rappelle les vieux hack a coup de commentaire conditionnels dans IE Smiley smile .
@spip : comme dirait l'autre "tant pis ça marche", mais c'est dommage de dupliquer le contenu.