Comportement éléments au changement de taille de la fenêtre

**sebastien4444** · 18/08/2015, 10h29

Bonjour,

Voilà, j'ai un site qui contient un bandeau (banniere dans mon css), une barre, un menu et un corps.
En cherchant à droite à gauche, je suis presque arrivé à mes fins concernant la mise en page que voici :
Nom : Capture1.JPG
Affichages : 90
Taille : 108,2 Ko

Nom : Capture1.JPG
Affichages : 90
Taille : 108,2 Ko

Seulement, quand j'agrandis ou rétrécis la page, j'ai un soucis :
la banniere et la barre ne se comportent pas de la même manière que le corps : bannière/barre se décalent en fonction de la marge droite (retrecissement/agrandissement) tandis que le corps reste fixe.
Exemples :
Nom : Capture2.JPG
Affichages : 73
Taille : 126,4 Ko

Nom : Capture2.JPG
Affichages : 73
Taille : 126,4 Ko

Nom : Capture3.JPG
Affichages : 74
Taille : 93,7 Ko

Donc j'aimerai que la banniere et la barre se comportent comme le corps, comme ça aucun de mes éléments n'est influencé par le redimensionnement. Comment dois-je procéder ?
Ci-dessous, mon css et mon html.
Merci d'avance

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
<html>
<head>
     <title>Portail AUTOCAPTURE</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	 <meta http-equiv="refresh" content="60">
	 <link rel="stylesheet" href="style/style.css" type="text/css" />
</head>
<body>	
			<div id="menu">	
				<a href="index.php" alt="Accueil" title="Accueil">
					<div class="menu" id="logo"></div>
				</a>
				<div class="menu" id="menu1" onclick="afficheMenu(this)">
					<a href="tbo.php">TBO</a>
				</div>
				<div id="sousmenu1">
					<div class="sousmenu">
						<a href="tbc.php">TBC</a>
					</div>
					<div class="sousmenu">
						<a href="tbm.php">TBM</a>
					</div>
					<div class="sousmenu">
						<a href="tbs.php">TBS</a>
					</div>
					<div class="sousmenu">
						<a href="trn.php">TRN</a>
					</div>
					<div class="sousmenu">
						<a href="trs.php">TRS</a>
					</div>
					<div class="sousmenu">
						<a href="tbf.php">TBF</a>
					</div>
					<div class="sousmenu">
						<a href="tee.php">TEE</a>
					</div>
				</div>
 
				<div class="menu" id="menu2" onclick="afficheMenu(this)">
					<a href="tbe.php">TBE</a>
				</div>
				<div id="sousmenu2">
					<div class="sousmenu">
						<a href="tme.php">TME</a>
					</div>
					<div class="sousmenu">
						<a href="tmf.php">TMF</a>
					</div>
					<div class="sousmenu">
						<a href="mbis.php">MBIS</a>
					</div>
					<div class="sousmenu">
						<a href="2e.php">2E</a>
					</div>
				</div>
			</div>
			<a href="index.php" alt="Accueil" title="Accueil" id="lien_banniere"><div id="banniere">Portail Autocapture</div></a>
 
			<div id="barre">TBO - TBE</div>	
 
			<div id="corps" class="corps">
				<div class="picture">
					<table class="tab_picture">
						<tr>
							<td class="tab_lien"><a href="lien" title="Accès au dossier des captures"><?php echo $display_filename_TBC; ?></a></td>
						</tr>
						<tr>
							<td class="tab_image"><img src="lien" id="tbc" title="Double-cliquez pour agrandir"></td>
						</tr>
					</table>
				</div>
				<div class="picture">
					<table class="tab_picture">
						<tr>
							<td class="tab_lien"><a href="lien" title="Accès au dossier des captures"><?php echo $display_filename_TBM; ?></a></td>
						</tr>
						<tr>
							<td class="tab_image"><img src="lien" id="tbm" title="Double-cliquez pour agrandir"></td>
						</tr>
					</table>
				</div>
				<div class="picture">
					<table class="tab_picture">
						<tr>
							<td class="tab_lien"><a href="lien" title="Accès au dossier des captures"><?php echo $display_filename_TBS; ?></a></td>
						</tr>
						<tr>
							<td class="tab_image"><img src="lien" title="Double-cliquez pour agrandir"></td>
						</tr>
					</table>
				</div>
				<div class="picture">
					<table class="tab_picture">
						<tr>
							<td class="tab_lien"><a href="lien" title="Accès au dossier des captures"><?php echo $display_filename_TRN; ?></a></td>
						</tr>
						<tr>
							<td class="tab_image"><img src="lien" id="trn" title="Double-cliquez pour agrandir"></td>
						</tr>
					</table>
				</div>
			</div>
 
			<script src="js/jquery.js"></script>
			<script src="js/display_doubleclick.js"></script>
</body>
</html>

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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
html {
	height:100%;
}
 
body {
	width:100%;
	height:100%;
	margin:0px auto;
	background-image:url(../img/fond.png);
	padding-top:5px;
}
 
div#banniere {
	/*padding-top:50px;*/
	text-align:center;
	background-color:#7F8585;
	height:118px;
	margin-left:20px;
	margin-right:20px;
	font-weight:bold;
	color: white;
	font-size:40px;
	line-height:110px;
	font-family:Rockwell;
}
 
#lien_banniere{
	text-decoration:none;
}
 
div#logo {
	height:102px;
	width:143px;
	background-image:url(../img/logo.jpg);
	background-repeat:no-repeat;
	margin-top:24px;
	margin-left:3px;
}
 
div#menu {
	/*width:14%;*/
	float:left;
	margin-left:20px;
}
 
div#barre {
	padding-top:10px;
	text-align:center;
	background-color:#FFD552;
	height:27px;
	margin-left:20px;
	margin-right:20px;
	font-weight:bold;
	color: #142E3F;
	font-size:30px;
	line-height:18px;
	font-family:Rockwell;
}
 
div#corps {
	padding-left:40px;
	text-align:center;
	background-image:url(../img/contenu.gif);
	margin-left:120px;
	margin-right:20px;
	/*height:1000px;*/
	position:absolute;
	overflow:hidden;
	float:right;
	width:1083px;
}
 
div#menu1 {
	margin-top:7px;
}
 
/* MENU LATERAL */
 
.menu a {
	display:block;
	line-height:30px;
}
 
.menu, .sousmenu{
	text-align:center;
}
 
.menu{
	height:35px;
	width:100px;
	padding:1px 0;
	background-image:url(../img/menu.jpg);
	color:#fff;
}
.sousmenu{
	height:35px;
	width:100px;
	padding:1px 0;
	background-image:url(../img/menu.jpg);
	color:#fff;
}
 
.menu a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-family:arial,sans-serif;
	font-size:20px;
	font-weight:bold;
	text-decoration:none;
	background-image:url(../img/menu.jpg);
	line-height:40px;
}
.sousmenu a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-family:arial,sans-serif;
	font-size:16px;
	font-weight:bold;
	text-decoration:none;
	background-image:url(../img/sousmenu.jpg);
	display:block;
	line-height:35px;
 
}
.menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
	background:#FF7714;
}
 
 
.picture a {
	display:inline-block;
	text-decoration:none;
	color:black;
}
 
.picture {
	float:left;
	text-align:center;
	margin: 25px 25px 25px 0px;
}
 
.picture table {
	border-collapse: collapse;
	background-color: white;
}
 
td.tab_lien {
	border: 2px solid white;
	background-color: #FFFA72;
	text-align: center;
}
 
td.tab_lien a{
	color: #383C3D;
	font-weight:bold;
 
}
 
td.tab_image img{
	width: 507px; 
	height: 285px;
}
 
td#tab_image img{
	width: 1014px; 
	height: 570px;
}

Invité · 18/08/2015, 10h58

Bonjour,

c'est ce qui arrive quand on définit les largeurs des blocs en pixels (fixe) :

Code :

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

width:1083px;

Pour rendre un site "responsive" (qui s'adapte aux medias), il faut :

des largeurs de blocs en %
des query string

Lire :

Les fondamentaux du Responsive Web Design

Quant à la structure HTML :

Initiation à HTML5
un menu se construit dans une balise <nav>, de préférence avec des listes à puces <ul><li> => Voir la Galerie CSS

Bonne lectures !

**sebastien4444** · 18/08/2015, 11h07

Merci ! Je me mets à la lecture

**sebastien4444** · 18/08/2015, 14h08

un menu se construit dans une balise <nav>, de préférence avec des listes à puces <ul><li> => Voir la Galerie CSS

En fait, j'avais justement trouvé mon menu ici : c'est le premier et il n'est fait qu'avec des div, pas de balises <nav> et de liste...

Invité · 18/08/2015, 15h12

Certains scripts sont en effet "passés de mode"...
A mettre à jour donc.

Alors lis en détail l'article déjà fourni en lien : Initiation à HTML5
Notamment : Structure de l'information.

Comportement éléments au changement de taille de la fenêtre

CSS

Discussions similaires

Partager

Partager