Bonjour, voici mon soucis,
l'affichage est bon
mais lorsque je redimensionne le navigateur ça me donne ça.
Comment puis-je faire en CSS pour que tous mes div se redimensionnent comme il faut ?
Bonjour, voici mon soucis,
l'affichage est bon
mais lorsque je redimensionne le navigateur ça me donne ça.
Comment puis-je faire en CSS pour que tous mes div se redimensionnent comme il faut ?
index.php:
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 <html> <?php include('include/head.php'); ?> <body> <div id="corps"> <div id="menu"> <a href="index.php">ACCUEIL</a> <a href="inscription.php">OUVRIR UN COMPTE</a> <a href="help.php">AIDE</a> <a></a> </div> <?php include('include/menu_gauche.php'); ?> <div id="centre"> <div id="Item"> </div> </div> <div id="bottom" onmouseover="javascript: hide();" onmouseout="show();"> Shop-Soft © <img src="img/g36c_ico.gif" /> </div> </div> </body> </html>
style.css:
menu_gauche.php:
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 body { background-color: #E6E6E6; /*background-image: url('../img/g36c.gif');*/ background-repeat: no-repeat; font-family: Arial Gras; font-size: 12px; } #corps { margin-left: 10%; margin-right: 10%; margin-top: 5%; margin-bottom: 5%; background-color: white; border: 1px solid black; } #menu { text-align: center; padding-top: 2%; padding-bottom: 2%; border: 1px solid black; } #menu a { color: blue; text-decoration: none; padding-left: 2%; padding-right: 2%; border-left: 1px solid blue; } #menu_gauche { float: left; text-transform: uppercase; margin-right: 2%; padding: 2% 2% 2% 2%; border: 1px solid black; } #menu_gauche a { color: black; text-decoration: none; } #bottom { position: fixed; bottom:0; left:0; right: 0; float: bottom; text-align: center; visibility: visible; background-color: white; border: 1px solid black; } #centre { height: 60%; resize: both; margin-left: 18%; padding-top: 2%; border: 1px solid blue; } #Item { padding-top: 2%; padding-bottom: 2%; border: 1px solid green; } .rotate_left { position: absolute; top: 0; left: 0; -webkit-transform: rotate(-9deg); } .clickable { cursor: pointer; } .clickable_tab { padding-left: 20%; visibility: hidden; display: none; cursor: pointer; }
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 <div id="menu_gauche"> <span class="clickable" onclick="clickObj('REPLIQUE')" >répliques</span><br/> <span id="REPLIQUE" class="clickable_tab" > <a href="index.php">AEG</a><br/> spring<br/> </span> <span class="clickable">pièces et accessoires</span><br/> <span class="clickable">équipements tactiques</span><br/> </div> <script language="javascript"> var actuel="cache"; function clickObj(s) { var a= document.getElementById(s); if(actuel=="cache"){ a.style.visibility="visible"; a.style.display="block"; actuel="visible"; } else{ a.style.visibility="hidden"; a.style.display="none"; actuel="cache"; } } </script>
Bonsoir,
à lire 2 Div a la suite avec 1 en PX et l'autre en %.
Les joies du CSS | Réponses sur forum | Simple comme JS | Essais libres autour de l'API G$$gle Maps
✂ ---------------------------------------------
developpez.net c'est aussi :
✔ Les meilleurs cours et tutoriels pour apprendre le CSS
✔ Les meilleurs cours et tutoriels pour apprendre le (X)HTML
✔ Les meilleurs cours et tutoriels pour apprendre le JavaScript
j'ai bien lu le post mais je ne vois pas quel div utilise des px, moi je n'utilise que des %
La DIV de gauche utilise des px.
Quant à n'utiliser que des % cela a ces limites lors du redimensionnement, il est donc préférable d'adjoindre une min-width pour éviter justement les chevauchements.
Les joies du CSS | Réponses sur forum | Simple comme JS | Essais libres autour de l'API G$$gle Maps
✂ ---------------------------------------------
developpez.net c'est aussi :
✔ Les meilleurs cours et tutoriels pour apprendre le CSS
✔ Les meilleurs cours et tutoriels pour apprendre le (X)HTML
✔ Les meilleurs cours et tutoriels pour apprendre le JavaScript
Partager