Alignement de blocs avec Flexbox

Version imprimable

4 pièce(s) jointe(s)

Bonjour

Je dois realiser une page qui doit ressembler a ca:

Pièce jointe 623488

mon code HTML:

Code:

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="">
 
<title>A Day of 42</title>
 
<link rel="stylesheet"  href="style.css">
</head>
<body>
 
 
 
<section>
 
<div class="banniere">
<img  src="images/day_of_the_42.png"  alt="Banniere du site"  width=""  height="">
</div>
 
 
</section>
 
 
 
 
 
<section class="image">
 
<div class="images_c">
<img usemap="#cluster" src="images/cluster.jpg" alt="Salle d informatique">
<map name="cluster">
<area  shape="circ" coords="900,394,81" target="_blank"  rel="nofollow,noreferrer" href="http://www.apple.com">
<area  shape="rect" coords="471,328,324,545" target="_blank"  rel="nofollow,noreferrer" href="http://www.ikea.com">
</map>
</div>
 
</section>
 
 
 
 
 
<section>
 
<div class="left_menu">
 
<div class="left">
<img  src="images/arrow.png"  alt="Avancer" >
</div>
 
<div class="left">
<img  src="images/main.png"  alt="Prendre" >
</div>
 
<div class="left">
<img  src="images/oeil.png"  alt="Regarder" >
</div>
 
 
<div class="left">
<img  src="images/outil.png"  alt="Utiliser" >
</div>
 
<div class="left">
<img  src="images/chat-icon.png"  alt="Parler" >
</div>
 
 
</div>
 
</section>
 
 
 
 
 
 
 
 
 
<section >
 
<div class="right_menu">
<div class="">
<img src="images/book.png"  alt="">
</div>
 
<div class="">
<img src="images/towel.png"  alt="">
</div>
 
<div class="">
<img  src="images/brick.jpg"  alt="">
</div>
 
 
 
 
</div>
 
</section>
 
 
 
 
 
 
 
 
</body>
</html>

ci desous mon code CSS:

Code:

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
body{
    background-color:royalblue;
}
 
.banniere{
 
    display:flex;
    flex-direction: row;
    justify-content:center;
   height: 258px;
   margin-top: 10px;
   position:relative;
 
}
 
.images{
display: flex;
flex-direction: row;
margin-top:15px;
margin-top: 10px;
}
 
.left_menu{
display:column;
align-items: flex-start;
order:1;
 
}
 
.images_c{
    display:flex;
flex-direction: row;
justify-content: center;
order:5;
 
}
 
.right_menu{
    display:column;
    align-items: flex-start;
    order:1;
 
}

j obtiens ceci

Pièce jointe 623489

Pièce jointe 623490

Pièce jointe 623491

mon probleme est que je n arrive pas a aligner les div de gauche et celles de droite .

09/08/2022, 07h54
mathieu

au lieu de faire 4 éléments "section", je ferai plutot un élément "header" suivi d'un élément "main".
et dans cet élément "main", les 3 colonnes qui seront placées avec flexbox.

2 pièce(s) jointe(s)

j ai applique la disposition du saint Graal

j obtiens l alignement désiré en revanche mon header pose problème
pourrais je avoir des indices pour positionner le header au dessus(excusez-moi mais je suis un bougre de débutant)

Code:

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
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="fr">
    <head>
 
<meta charset="utf-8">
<meta names="description" content="  grande salle remplie d ordinateurs">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="42_logo.ico">
<title>Day_Of_the_42</title>
 
    </head>
 
<body class="container">
    <header>
 
        <div>
           <img src="images/day_of_the_42.png" alt=""  width="" height="">
        </div>
 
             <div>
              <img src="images/loupe.png" alt=""  width="128" height="auto">
            </div>
 
                <div>
                <img src="images/reload.png" alt=""  width="20" height="20">
                </div>
 
                   <div>
 
                     <img src="images/close.gif" alt=""  width="20" height="20">
                   </div>
    </header>
 
     <main class="cluster">
 
<div>
<img src="images/cluster.jpg" alt="" width="" height=""  usemap="#visit_cluster">
<map name="visit_cluster">
<area shape="circ" coords="900,394,81"   target="_blank"  rel="nofollow,noreferrer"  href="http://www.apple.com" alt="Grande Salle">
 
<area shape="rect" coords="471,328,324,545"   target="_blank"  rel="nofollow,noreferrer"  href="http://www.ikea.com" alt="Grande Salle">
 
 
 
</map>
 
 
 
</div>
 
 
 
 
     </main>
 
     <aside  class="left_sidebar">
 
        <div>
            <img src="images/arrow.png" alt="Avancer" title="Avancer" width="128" height="128">
        </div>
 
        <div>
            <img src="images/main.png" alt="Prendre"  title="Prendre" width="128" height="128">
        </div>
        <div>
            <img src="images/oeil.png" alt="Regarder"  title="Regarder"   width="128" height="128">
        </div>
 
        <div>
            <img src="images/outil.png" alt="Utiliser" title="Utiliser"  width="128" height="128">
        </div>
 
        <div>
            <img src="images/chat-icon.png" alt="Parler" title="Parler"  width="128" height="128">
        </div>
 
     </aside>
 
 
    <aside class="right_sidebar">
 
        <div>
            <img src="images/book.png" alt="" width="128" height="128">
        </div>
 
        <div>
            <img src="images/towel.png" alt="" width="128" height="128">
        </div>
        <div>
            <img src="images/brick.jpg" alt="" width="130" height="130">
        </div>
 
    </aside>
 
 
</body>
 
    </html>

mon fichier CSS

Code:

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
*,::before,::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
 
header{
display: flex;
flex-direction: column;
 
}
 
.container{
 
    display: flex;
 
}
 
.cluster{
 
    flex:2;
    order:2;
    min-height: 80vh;
    flex-direction: column;
}
 
.left_sidebar{
 
    flex: 1;
    order:1;
}
 
.right_sidebar{
    flex: 1;
    order:3;
}
 
.pictures{
    display: block;
}

le resultat:
Pièce jointe 626193 Pièce jointe 626194