Discussion :

[wd_newbie]

Bonjour,

Je sus en train d'essayer de mettre en place un planning avec du css, j'ai besoin d'avoir plusieurs colonnes pour les jours, avec les lignes pour les infos pour les jours en tête de colonne.

J'ai réussi à créer mon contenu (voir ci-dessous)



Le truc, c'est que, en responsive j'ai mes colonnes qui se mettent les une en dessous des autres, mais ça ne respecte pas les jours de la semaine ...

L'idée lorsque ça se replace, serait de garder les contenus du lundi dans une colonne (1) ensuite le mardi (2) etc ... pour que la cohérence entre jours et infos soit respectée

Une idée ?

Je mets ici dessous mes tests, je ne suis pas bon en css, donc si vous avez des commentaires, je les prends volontiers


HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<div class="planning_container">
	<div class="planning_box_titre">Lundi</div>
	<div class="planning_box_titre">Mardi</div>
	<div class="planning_box_titre">Mercredi</div>
	<div class="planning_box_titre">Jeudi</div>
</div>
<div class="planning_container">
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
</div>
<div class="planning_container">
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
</div>
<div class="planning_container">
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box_vide">&nbsp;</div>
</div>
<div class="planning_container">
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box_vide">&nbsp;</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box_vide">&nbsp;</div>
</div>
<div class="planning_container">
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
</div>

Css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/* planning */
    .planning_container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      padding: 10px;
    }
 
    .planning_box_titre {
      background-color: #000000;
      color: white;
      font-weight:bold;
      padding: 20px;
      text-align: center;
      border-radius: 20px;
    }
 
    .planning_box {
      background-color: #000000;
      color: white;
      font-weight:bold;
      padding: 20px;
      text-align: center;
      border-radius: 20px;
    }
 
    .planning_box_vide {
 
      color: white;
      font-weight:bold;
      padding: 20px;
      text-align: center;
      border-radius: 20px;
    }

[NoSmoking]

Bonjour,
ta construction n'est pas des plus cohérente !

Réorganise déjà comme suit :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class="planning-wrapper">
  <div class="planning-day">
    <h2>Lundi</h2>
    <div class="planning_hour">
      <p>08h30 - 09h15</p>
      <p>Test</p>
    </div>
    <div class="planning_hour">
      <p>09h30 - 10h15</p>
      <p>Test</p>
    </div>
    <div class="planning_hour">
      <p>10h30 - 11h15</p>
      <p>Test</p>
    </div>
  </div>
  <div class="planning-day">
    <h2>Mardi</h2>
    <div class="planning_hour">
      <p>08h30 - 09h15</p>
      <p>Test</p>
    </div>
    <div class="planning_hour">
      <p>09h30 - 10h15</p>
      <p>Test</p>
    </div>
    <div class="planning_hour">
      <p>10h30 - 11h15</p>
      <p>Test</p>
    </div>
  </div>
<!-- la suite -->
</div>

... et juste avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.planning-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

... cela devrait répondre à ce que t cherches à faire

[wd_newbie]

Effectivement, je n'étais pas parti sur la bonne structure.

J'ai refais selon ton modèle, par contre j'ai remplacé les <div> par des <p>, ça me semblait indiqué (juste ?) et j'ai pu mettre en forme selon le résultat désiré.

Merci pour ton aide