Positionnement de div (noob)

Version imprimable

Bonjour

Je suis en train d'essayer de refaire l'un de mes petits sites web que j'avais créé (en frames) lorsque j'étais encore developpeur Web il y a une quinzaine d'années. et J'avoue que j'ai un peu de mal avec les divs même si ce tuto https://pbnaigeon.developpez.com/tut...e-en-page-CSS/ m'a été trés utile :D
Pouvez vous m'aider ?

Voici ce que j'ai dans ma 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
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
div#bandeauHaut {
	width:1340px;
	height:210px;
	background-color:#00CCFF;
	}
div#selecteurCateg {
	float:left;
	width:100px;
	height:210px;
	background-color:lightblue;
	}	
div#selecteurUnite {
	overflow: hidden;
	width:840px;
	height:210px;
	background-color:#00CCFF;
	}	
div#descriptifUnite {
	float:right;
	width:300px;
	height:210px;
	background-color:#00CCFF;
	}	
 
 
div#bandeauBas {
	width:1340px;
	height:400px;
	background-color:#FFCC00;
	}
 
div#liste {
	float:left;
	width:1000px;
	height:400px;
	background-color:lightblue;
	}	
 
div#operateur {
	overflow: hidden;
	width:50px;
	height:400px;
	background-color:#FFCC00;
	}			
 
div#selecteur {
 
	float:right;
	width:290px;
	height:400px;
	background-color:#00CCFF;
	}	
 
 
div#bandeauprix {
	vertical-align=middle;
	width:280px;
	height:50px;
	background-color:#00CCFF;
	}
 
div#selecteurOption {
	vertical-align=middle;
	width:280px;
	height:300px;
	background-color:#00CCFF;
	}
 
div#warning {
	vertical-align=bottom;
	width:290px;
	height:50px;
	background-color:#00CCFF;
	}

et voici ce que j'ai dans la page html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<link rel="stylesheet" type="text/css" href="listMaker.css">
 
 
<div id="bandeauHaut">
	<div id="selecteurCateg">Categs</div>
	<div id="descriptifUnite">Descriptif unite</div>
	<div id="selecteurUnite">selecteur unite</div>
</div>
<div id="bandeauBas">
	<div id="liste">Liste </div>
	<div id="selecteur">select<!--
		<div id="bandeauprix">prix<div>
		<div id="selecteurOption">selecteurOption</div>
		<div id="warning">warnings</div>-->
	</div>
	<div id="operateur">op</div>
 
</div>

Tout se passe bien jusque là. Mais je souhaiterais diviser la div en bas à droite (selecteur) en 3 autre div (section en commentaire). Lorsque je dé commente, mon div "operateur" se retrouve en dessous de trous mes autres div.

Merci d'avance de votre aide

Bonjour,

Avant de répondre à ta question, je t'invite à aller sur ta page, puis à réduire la taille du navigateur grâce au bouton réduire puis ,avec la souris à changer la taille du navigateur.

Tu verras que ta page ne s'adapte pas a la taille de l'ecran.
Pk?
Tout simplement parce que tu fige tes tailles en utilisant les pixels (px).

En effet ,tu règles ta page en fonction de ce que tu vois mais si le canal de diffusion change (ex smartphone ...) , ton affichage sera modifié.

Il faut donc pour commencer , travailler en pourcentages et refaire le meme test et tu verra un net changement .

Ensuite, tu dois comprendre que tu as des div dans les divs bandeauhaut et bas.Tu dois alors veiller à ce que tu partages correctement les div en termes de tailles.

Au passage il faut que tu fermes la balise

Code:

<div id="bandeauprix">prix<div>

Tu pourras t'amuser par la suite.

Je te donne un premier bout de code mais j'ai pas eu assez de temps pour totalement le retoucher:

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
<!DOCTYPE html>
<html>
<head>
<style>
div#bandeauHaut {
        width:100%;
        height:210px;
        background-color:#00CCFF;
        }
div#selecteurCateg {
        float:left;
        width:20%;
        height:100%;
        background-color:lightblue;
        }       
div#selecteurUnite {
        overflow: hidden;
        width:60%;
        height:100%;
        background-color:#00CCFF;
        }       
div#descriptifUnite {
        float:right;
        width:20%;
        height:100%;
        background-color:#00CCFF;
        }       
 
 
div#bandeauBas {
        width:100%;
        height:500px;
        background-color:#FFCC00;
        }
 
div#liste {
        float:left;
        width:60%;
        height:100%;
        background-color:lightblue;
        }       
 
div#operateur {
        overflow: hidden;
        width:10%;
        height:100%;
        background-color:#FFCC00;
        }                       
 
div#selecteur {
        float:right;
        width:30%;
        height:100%;
        background-color:#00CCFF;
        }       
 
 
div#bandeauprix {
        vertical-align=middle;
        width:100%;
        height:30%;
        background-color:#00CCFF;
        }
 
div#selecteurOption {
        vertical-align=middle;
        width:100%;
        height:60%;
        background-color:#00CCFF;
        }
 
div#warning {
        vertical-align=bottom;
        width:100%;
        height:5%;
        background-color:#00CCFF;
        }
 
</style>
 
 
<div id="bandeauHaut">
	<div id="selecteurCateg">Categs</div>
	<div id="descriptifUnite">Descriptif unite</div>
	<div id="selecteurUnite">selecteur unite</div>
</div>
<div id="bandeauBas">
	<div id="liste">Liste </div>
<div id="selecteur">select
                <div id="bandeauprix">prix</div>
		<div id="selecteurOption">selecteurOption</div>
		<div id="warning">warnings</div>
		</div>
        <div id="operateur">op</div> 
 
 
</div>
 
</body>
</html>

Bon courage

22/10/2018, 17h14
Mirdhynn

Merci beaucoup, ça fonctionne :D
J'avais mis en pixel pour avoir quelque chose de fixe mais les pourcentages ça marche aussi !
22/10/2018, 17h58
johnlobs

Pas de problème...
Tu es le bienvenu...:mouarf: