Discussion :

[abc.xyz]

Bonjour,

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
 
<div class="page">
<div class="englob1">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
</div>
<div class="a5"><</div>
<div class="englob2">
<div class="a6"></div>
<div class="a7"></div>
</div>
<div class="a8"></div>
<div class="a9"></div>
<div class="a10"></div>
<div class="a11"><</div>
<div class="a12"></div>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
.a1{
  float:left;
  width:50%;
  height:50%;
  background-size:cover;
  background-image: url(../img/image.jpg);
  background-position: center center;
  background-repeat: no-repeat;
}
..

J'ai un bandeau avec hauteur en % en haut de ma page puis en dessous le code html ci dessus.
Il s'agit pour quasiment tous les div d'images en background cover avec une width et une height exprimées en % (je vous ai mis le code css d'une div, le code css des autres divs est quasi similaires (les valeurs de width et height varient néanmoins)
Ce quadrillage d'images sur la page (sans scroll) fonctionne bien car la hauteur du bandeau du haut est exprimée en % et les hauteurs des div du code html ci dessus sont elles aussi exprimées en %.
Mon problème est que je dois maintenant exprimer la hauteur du bandeau du haut non pas en % mais en pixels.
Comment faire maintenant pour faire mon quadrillage d'images avec cette contrainte?

merci

[Invité]

Bonjour,

Code :

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

...<</div>...

Merci de nous fournir un code exploitable (qu'on peut TESTER).

Pour la réponse, je dirais : "flexbox".

Code html :

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

1
2
3
4
5
6
<header>
  header
</header>
<main>
  main
</main>

Code css :

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
* { margin:0; padding:0; border:0; }
html, body { width:100%; height:100%; }
 
body { 
  display:flex; 
  display:-webkit-flex;
  flex-direction: column; 
  -webkit-flex-direction: column; 
}
header {
  flex:0 0 150px;
  -webkit-flex:0 0 150px;
  background:grey;
}
main {
  flex:auto;
  -webkit-flex:auto;
  background:yellow;
}

[abc.xyz]

Bonjour,
oui j'ai fait une erreur, voici le code html modifié:

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
 
..
<div class="page">
<div class="englob1">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
</div>
<div class="a5"></div>
<div class="englob2">
<div class="a6"></div>
<div class="a7"></div>
</div>
<div class="a8"></div>
<div class="a9"></div>
<div class="a10"></div>
<div class="a11"><</div>
<div class="a12"></div>
</div>
..

flexbox c'est une bonne solution mais elle n'est pas compatible avec certaines versions de IE encore utilisées.

[Invité]

Alors : display:table / display:table-row ?

Code html :

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

1
2
3
4
5
6
<header>
  header
</header>
<main>
  main
</main>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
* { margin:0; padding:0; border:0; }
html, body { width:100%; height:100%; }
 
body { 
  display:table; 
}
header {
  display:table-row; 
  height:150px;
  background:grey;
}
main {
  display:table-row; 
  background:yellow;
}

Là, on est compatible I.E. >= 8

[abc.xyz]

Voici le code complet:

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
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
113
114
115
116
117
118
119
120
121
122
123
124
 
.page{
  width:100%;
  height:81%;
}
.englob1{
  overflow:hidden;
  float:left;
  width:40%;
  height:66%;
}
.a1{
  float:left;
  width:50%;
  height:50%;
  background-size:cover;
  background-image: url(../img/image.jpg);
  background-position: center center;
  background-repeat: no-repeat;
}
.a2{
  float:left;
  width:50%;
  height:50%;
  background-size:cover;
  background-image: url(../img/image2.jpg);
  background-position: center center;
  background-repeat: no-repeat;
}
.a3{
  float:left;
  width:50%;
  height:50%;
  background-size:cover;
  background-image: url(../img/image3.jpg);
  background-position: center center;
  background-repeat: no-repeat;
}
.a4{
  float:left;
  width:50%;
  height:50%;
  background-size:cover;
  background-image: url(../img/image4.jpg);
  background-position: center center;
  background-repeat: no-repeat;
}
.a5{
  float:left;
  width:40%;
  height:66%;
  background-size:cover;
  background-image: url(../img/image5.png);
  background-repeat: no-repeat;
}
.englob2{
 overflow:hidden;
  float:left;
  width:20%;
  height:66%;
}
.a6{
  float:left;
  width:100%;
  height:50%;
  background-size:cover;
  background-image: url(../img/image6.jpg);
  background-position: center center;
  background-repeat: no-repeat;
}
.a7{
  float:left;
  width:100%;
  height:50%;
  background-size:cover;
  background-image: url(../img/image7.jpg);
  background-position: center center;
  background-repeat: no-repeat;
}
.a8{
  float:left;
  width:20%;
  height:34%;
  background-size:cover;
  background-image: url(../img/image8.jpg);
  background-position: center center;
  background-repeat: no-repeat;
}
.a9{
  float:left;
  width:20%;
  height:34%;
  background-size:cover;
  background-image: url(../img/image9.jpg);
  background-position: center center;
  background-repeat: no-repeat;
}
.a10{
  float:left;
  width:20%;
  height:34%;
  background-size:cover;
  background-image: url(../img/image10.jpg);
  background-position: center center;
  background-repeat: no-repeat;
}
.a11{
  float:left;
  width:20%;
  height:34%;
  background-size:cover;
  background-image: url(../img/image11.jpg);
  background-position: center center;
  background-repeat: no-repeat;
}
.a12{
  float:left;
  width:20%;
  height:34%;
  background-size:cover;
  background-image: url(../img/image12.jpg);
  background-position: center center;
  background-repeat: no-repeat;
}

[Invité]

Je t'ai donné la solution.