[css][php]affichage incoherent avec php

Invité · 02/04/2009, 15h34

Peux-tu montrer la page index.php ?

**lilia_dream** · 02/04/2009, 16h43

Bonjour

voici la page index.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
 
<?php
$pages_possibles = array("home.htm", "best.htm", "contact.php", "autre_page.htm");
if (in_array($_GET['page'],$pages_possibles)) $page = $_GET['page'];
else $page = "home.htm";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Corrosion</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" type="text/css" rel="stylesheet" media="screen"/>
</head>
<body>
<div id="global">
<div id="entete">
	<?php include("entete.htm"); ?>
</div>
<div id="menu">
	<?php include('espacepro.htm'); ?>
	<?php include("menu.htm"); ?>
</div>
<div id="contenu">
	<?php include($page); ?>
</div>
<div id="footer">
	<?php include("footer.htm"); ?>
</div>
</div>
</body>
</html>

Invité · 02/04/2009, 16h51

Modification de index.php :

Code :

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

1
2
3
4
5
<?php
$pages_possibles = array("home.htm", "best.htm", "contact.php", "autre_page.htm");
if (in_array(@$_GET['page'],$pages_possibles)) { $page = $_GET['page']; }
else { $page = "home.htm"; }
?>

@$_GET['page']

et une page home.htm

Code :

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

COUCOU, home page !

**lilia_dream** · 02/04/2009, 16h59

Bonjour

pour la page index.php

je dois mettre que ses lignes

Code :

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

1
2
3
4
5
6
 
<?php
$pages_possibles = array("home.htm", "best.htm", "contact.php", "autre_page.htm");
if (in_array(@$_GET['page'],$pages_possibles)) { $page = $_GET['page']; }
else { $page = "home.htm"; }
?>

Invité · 02/04/2009, 17h17

La page index.php COMPLETE :

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
<?php
$pages_possibles = array("home.htm", "best.htm", "contact.php", "autre_page.htm");
if (in_array(@$_GET['page'],$pages_possibles)) { $page = $_GET['page']; }
else { $page = "home.htm"; }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Corrosion</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" type="text/css" rel="stylesheet" media="screen"/>
</head>
<body>
<div id="global">
<div id="entete"><?php include("entete.htm"); ?></div>
<div id="menu">
<?php include('espacepro.htm'); ?>
<?php include("menu.htm"); ?>
</div>
<div id="contenu"><?php include($page); ?></div>
<div id="footer"><?php include("footer.htm"); ?></div>
</div>
</body>
</html>

Explication :
il faut mettre @$_GET['page']
car a la premiere ouverture, tu ouvres index.php
(il ne trouve donc pas $_GET['page'])
Ensuite, ca ne pose pas probleme, puisqu'en cliquant sur une rubrique du menu, ca donne :
index.php?page=nomdelapage.htm

Le @ permet d'eviter le probleme d'"index undefined page ..." a la 1ere ouverture

**lilia_dream** · 02/04/2009, 19h00

oui jreaux62

la solution ca marche toute les erreurs sont disparu

mais au niveau d'affichage

pas d'evolution

Invité · 03/04/2009, 17h30

Bonjour, dans style.css
/* <-- espace pro --> */ : il faut que tu décales un peu le div vers la gauche : change width:... (réduit un peu la largeur) ou left:...
.idDiv {
position: relative;
border: 1px solid #026237;
top: 5px;
left: 5px;
width: 190px;
height: 40px;
text-align: center;
font-size: .8em;
color: #026237;
}

Car il "dépasse" un peu (voir ton image) et du coup, ca fait descendre le div "contenu" en dessous du "menu" !

**lilia_dream** · 03/04/2009, 17h49

Bonjour

j'ai appliquée les modification ,voila j'obtiens un autre affichage

Merci de votre patience

Invité · 03/04/2009, 21h20

Ton formulaire "rechercher ..." : il sert a quoi ? Est-il placé a l'endroit que tu veux ?

Parce que la, tu l'as mis a l'endroit du "contenu",
alors que tu l'as defini dans entete.htm (il devrait donc etre dans la partie "entete "!

Si tu l'as mis ou tu veux qu'il soit (dans "contenu"), dans ce cas la il faut le mettre dans le div "contenu"

**lilia_dream** · 03/04/2009, 21h54

Bonsoir jreaux62

je veux remonter le div contenu [en bleu] a cote de div menu

et dans le div contenu reste le formulaire rechercher visible

**lilia_dream** · 04/04/2009, 14h41

Bonjour jreaux62

j'ai mal palcee les chose

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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
 
/* <-------------------- GENERAL --------------------> */
body {
  margin: 0;
  padding: 0;
  font-family: Verdana, Bitstream Vera Sans, Lucida Grande, sans-serif;
  font-size: .8em;
  line-height: 1.25;
  color: black;
  background: #7FCF2E;
}
html {width: 100%;}
#global {
  overflow : auto;
  width: 1000px;
  padding: 0;
  margin:0;
  background: white url(../img/global.png) repeat-y;
}
/* <---------------- div PRINCIPALES ---------------> */
/* <-- entete --> */
#entete {
  position:relative;
  height: 100px;
  color: #FFF;
  background: #7FCF2E url(../img/header.png) no-repeat;
}
/* <-- menu --> */
#menu {
  position:relative;
  float: left;
  width: 200px;
  height: 500px;
  background: #aaf url(../img/menuGP.png) no-repeat;
}
/* <-- contenu --> */
#contenu {
  position:relative;
  float:right;
  width: 800px;
  height: 500px;
  background:navy url(../img/accueil/bckground.png);
}
/* <-- footer --> */
#footer {
  position:relative;
  text-align:center;
  height: 50px;
  width: 100%;
  background: #7FCF2E url(../img/footer.png) repeat-x;
  color: #FFF;
  clear:both;
}
/* <---------------- div SECONDAIRES---------------> */
/* <-- DANS div CONTENU --> */
#contenu > :first-child {margin-top: 10px;}
#contenu .produit {
  position: absolute;
  top: 25px;
  left: 20px;
  width: 200px;
  height: 166px;
  background: #faf url(../img/accueil/produit.png);
}
#contenu .recette {
  position: absolute;
  top: 220px;
  left: 20px;
  width: 200px;
  height: 164px;
  background: #faf url(../img/accueil/recette.png);
}
#contenu .visiter {
  position: absolute;
  top: 400px;
  left: 300px;
  width: 218px;
  height: 164px;
  background: #faf url(../img/accueil/visiter.png);
}
#contenu .acheter {
  position: absolute;
  top: 375px;
  left: 600px;
  width: 218px;
  height: 164px;
  background: #faf url(../img/accueil/acheter.png);
}
 
/* <-- DANS div ENTETE --> */
#entete h1 {
  margin: 0;
  position: absolute;
  top: 5px;
  left: 350px;
  font: italic bold 1.2em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
}
#entete h2 {
  position: absolute;
  top: 25px;
  left: 650px;
  font: italic bold 1.2em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
}
 
/* <-- DANS div MENU --> */
#menu ul {
  position: relative;
  left: 10px;
  top: 25px;
  padding: 0;
  margin: 0;
  border: 0;
}
#menu li a {
  color: #FFFFFF;
  text-decoration: none;
  font-weight: bold;
}
#menu ul li {
  position: absolute;
  list-style: none;
}
#menu ul a {display: block;}
#menu ul.niveauA2 a {color: #026237;}
#menu ul.niveauA2 a:hover {color: #2EC739;}
#menu ul.niveauA2 ul a {color: #FFFFFF;}
#menu ul.niveauA2 ul a:hover {color: #026237;}
#menu ul ul {
  position: absolute;
  top: 0;
  background-color: #B4E14D;
  border: 2px outset #DDF4EC;
  display: none; 
}
#menu ul ul a:hover,#menu ul ul a:active,#menu ul ul a:focus{
  background-color: #2EC739;
  color: #026237;
  border: 1px inset;
  padding: 0 3px;
}
#menu ul ul li {
  position: relative;
  border: 1px solid #B4E14D; /* Pour empÃªcher le dÃ©calage */
}
#menu ul ul li.sousNiveau {background-color: #9BCF23;}
#menu ul ul li a {
  color: #FFFFFF;
  font-weight: normal;
}
#menu ul ul ul {
  position: absolute;
  display: none;
}
#menu ul li.sousNiveau:hover ul.niveauB, #menu ul.niveauB li.sousNiveau:hover ul.niveauC {display: block;}
#menu ul ul.niveauB li.sousNiveau a {font-weight: normal;}
#menu ul ul.niveauB ul.niveauC li a {font-weight: normal;}
#menu_accueil a:hover, #menu_campagne a:hover, #menu_agriculture a:hover, #menu_chambre a:hover {color: #2EC739;}
#menu_affiche a:hover, #menu_presse a:hover, #menu_emploi a:hover, #menu_photo a:hover, #menu_contact a:hover {color: #026237;}
/* <-- menu --> */
#menu_accueil {
  position : relative;
  width: 185px;
  left: 5px;
  top: 40px;
}
#menu_accueil ul {
  width: 0px;
  left: 185px;
}
#menu_affiche {
  position : relative;
  width: 185px;
  left: 5px;
  top: 80px;
}
#menu_affiche ul {
  width: 150px;
  left: 185px;
  z-index: 2;
}
#menu_campagne {
  position : relative;
  width: 185px;
  left: 5px;
  top: 120px;
}
#menu_campagne ul {
  width: 150px;
  left: 185px;
  z-index: 2;
}
#menu_campagne ul ul {
  width: 150px;
  left: 145px;
}
#menu_presse {
  position : relative;
  width: 185px;
  top: 160px;
  left: 5px;
}
#menu_presse ul {
  width: 150px;
  left: 185px;
  z-index: 2;
}
#menu_photo {
  position: absolute;
  width: 185px;
  top: 200px;
  left: 5px;
}
#menu_photo ul {
  width: 0;
  top: 440px;
  left: 185px;
}
#menu_contact {
  position : absolute;
  width: 185px;
  top: 240px;
  left: 5px;
}
#menu_contact ul {
  width: 150px;
  left: 185px;
  z-index: 2;
}
#menu_emploi {
  position : absolute;
  width: 185px;
  top: 260px;
  left: 5px;
}
#menu_emploi ul {
  width: 150px;
  left: 185px;
  z-index: 2;
}
 
/* <-- espace pro --> */
.idDiv {
position: relative;
border: 1px solid #026237;
top: 5px;
left: 5px;
width: 190px;
height: 40px;
text-align: center;
font-size: .8em;
color: #026237;
}
.searchDiv {
  position: absolute;
  top: 105px;
  right: 5px;
  font-size: .9em;
  z-index: 1;
}
#searchBox {
  border: 1px solid #026237;
  background-color: #2EC739;
  font: 1em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
  color: white;
}
#idBox {
  border: 1px solid #026237;
  background-color: #2EC739;
  font: 1em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
  color: white;
}
 
#idButton {
  border: 1px solid #026237;
  background-color: #026237;
  font: 1em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
  color: white;
  font-weight: bold;
}
 
#searchButton {
  border: 1px solid #026237;
  background-color: #026237;
  font: 1em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
  color: white;
  font-weight: bold;
}
/* <-- --------- --> */

Invité · 04/04/2009, 20h31

style.css

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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
/* <-------------------- GENERAL --------------------> */
body {
  margin: 0;
  padding: 0;
  font-family: Verdana, Bitstream Vera Sans, Lucida Grande, sans-serif;
  font-size: .8em;
  line-height: 1.25;
  color: black;
  background: #7FCF2E;
}
html {
  height: 100%;
}
#global {
  overflow : auto;
  width: 1000px;
  padding: 0;
  margin:0;
  margin-left: auto;
  margin-right: auto;
  background: #FFFFFF;
  background: white url(../img/global.png) repeat-y;
}
/* <---------------- div PRINCIPALES ---------------> */
/* <-- entete --> */
#entete {
  position: relative;
  height: 100px;
  color: #FFF;
  background: #7FCF2E url(../img/header.png) no-repeat;
}
/* <-- menu --> */
#menu {
  position: relative;
  float: left;
  width: 200px;
  height: 500px;
  background: #aaf url(../img/menuGP.png) no-repeat;
}
/* <-- contenu --> */
#contenu {
  position: relative;
  float:right;
  width: 800px;
  height: 500px;
  background:navy url(../img/accueil/bckground.png);
}
/* <-- footer --> */
#footer {
  position: relative;
  clear:both;
  height: 50px;
  width: 1000px;
  text-align: center;
  vertical-align: middle;
  background: #7FCF2E url(../img/footer.png) repeat-x;
  color: #FFFFFF;
}
/* <-- espace pro --> */
.idDiv {
position: relative;
border: 1px solid #026237;
top: 5px;
left: 5px;
width: 190px;
height: 40px;
text-align: center;
font-size: .8em;
color: #026237;
}
/* <-- recherche --> */
.searchDiv {
  position: relative;
  text-align: right;
  width: 800px;
  top: 1px;
  right: 5px;
  font-size: .9em;
  z-index: 1;
}
/* <---------------- div SECONDAIRES---------------> */
/* <-- DANS div CONTENU --> */
#contenu > :first-child {margin-top: 10px;}
#contenu .produit {
  position: absolute;
  top: 25px;
  left: 20px;
  width: 200px;
  height: 166px;
  background: #faf url(../img/accueil/produit.png);
}
#contenu .recette {
  position: absolute;
  top: 220px;
  left: 20px;
  width: 200px;
  height: 164px;
  background: #faf url(../img/accueil/recette.png);
}
#contenu .visiter {
  position: absolute;
  top: 400px;
  left: 300px;
  width: 218px;
  height: 164px;
  background: #faf url(../img/accueil/visiter.png);
}
#contenu .acheter {
  position: absolute;
  top: 375px;
  left: 600px;
  width: 218px;
  height: 164px;
  background: #faf url(../img/accueil/acheter.png);
}
 
/* <-- DANS div ENTETE --> */
#entete h1 {
  margin: 0;
  position: absolute;
  top: 5px;
  left: 350px;
  font: italic bold 1.2em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
}
#entete h2 {
  position: absolute;
  top: 25px;
  left: 650px;
  font: italic bold 1.2em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
}
 
/* <-- DANS div MENU --> */
#menu ul {
  position: relative;
  left: 10px;
  top: 25px;
  padding: 0;
  margin: 0;
  border: 0;
}
#menu li a {
  color: #FFFFFF;
  text-decoration: none;
  font-weight: bold;
}
#menu ul li {
  position: absolute;
  list-style: none;
}
#menu ul a {display: block;}
#menu ul.niveauA2 a {color: #026237;}
#menu ul.niveauA2 a:hover {color: #2EC739;}
#menu ul.niveauA2 ul a {color: #FFFFFF;}
#menu ul.niveauA2 ul a:hover {color: #026237;}
#menu ul ul {
  position: absolute;
  top: 0;
  background-color: #B4E14D;
  border: 2px outset #DDF4EC;
  display: none; 
}
#menu ul ul a:hover,#menu ul ul a:active,#menu ul ul a:focus{
  background-color: #2EC739;
  color: #026237;
  border: 1px inset;
  padding: 0 3px;
}
#menu ul ul li {
  position: relative;
  border: 1px solid #B4E14D; /* Pour empÃªcher le dÃ©calage */
}
#menu ul ul li.sousNiveau {background-color: #9BCF23;}
#menu ul ul li a {
  color: #FFFFFF;
  font-weight: normal;
}
#menu ul ul ul {
  position: absolute;
  display: none;
}
#menu ul li.sousNiveau:hover ul.niveauB, #menu ul.niveauB li.sousNiveau:hover ul.niveauC {display: block;}
#menu ul ul.niveauB li.sousNiveau a {font-weight: normal;}
#menu ul ul.niveauB ul.niveauC li a {font-weight: normal;}
#menu_accueil a:hover, #menu_campagne a:hover, #menu_agriculture a:hover, #menu_chambre a:hover {color: #2EC739;}
#menu_affiche a:hover, #menu_presse a:hover, #menu_emploi a:hover, #menu_photo a:hover, #menu_contact a:hover {color: #026237;}
/* <-- menu --> */
#menu_accueil {
  position : relative;
  width: 185px;
  left: 5px;
  top: 40px;
}
#menu_accueil ul {
  width: 0px;
  left: 185px;
}
#menu_affiche {
  position : relative;
  width: 185px;
  left: 5px;
  top: 80px;
}
#menu_affiche ul {
  width: 150px;
  left: 185px;
  z-index: 2;
}
#menu_campagne {
  position : relative;
  width: 185px;
  left: 5px;
  top: 120px;
}
#menu_campagne ul {
  width: 150px;
  left: 185px;
  z-index: 2;
}
#menu_campagne ul ul {
  width: 150px;
  left: 145px;
}
#menu_presse {
  position : relative;
  width: 185px;
  top: 160px;
  left: 5px;
}
#menu_presse ul {
  width: 150px;
  left: 185px;
  z-index: 2;
}
#menu_photo {
  position: absolute;
  width: 185px;
  top: 200px;
  left: 5px;
}
#menu_photo ul {
  width: 0;
  top: 440px;
  left: 185px;
}
#menu_contact {
  position : absolute;
  width: 185px;
  top: 240px;
  left: 5px;
}
#menu_contact ul {
  width: 150px;
  left: 185px;
  z-index: 2;
}
#menu_emploi {
  position : absolute;
  width: 185px;
  top: 260px;
  left: 5px;
}
#menu_emploi ul {
  width: 150px;
  left: 185px;
  z-index: 2;
}
 
/* <-- recherche --> */
#searchBox {
  border: 1px solid #026237;
  background-color: #2EC739;
  font: 1em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
  color: white;
}
#idBox {
  border: 1px solid #026237;
  background-color: #2EC739;
  font: 1em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
  color: white;
}
 
#idButton {
  border: 1px solid #026237;
  background-color: #026237;
  font: 1em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
  color: white;
  font-weight: bold;
}
 
#searchButton {
  border: 1px solid #026237;
  background-color: #026237;
  font: 1em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
  color: white;
  font-weight: bold;
}
/* <-- --------- --> */

index.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
<?php
$pages_possibles = array("home.htm", "best.htm", "autre_page.htm"); // (liste des noms de toutes tes pages)
if (in_array($_GET['page'], $pages_possibles)) $page = $_GET['page'];
else $page = "home.htm";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Corrosion</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" type="text/css" rel="stylesheet" media="screen"/>
</head>
<body>
<div id="global">
 
<div id="entete">
	<?php include("entete.htm"); ?>
</div>
<div id="menu">
	<?php include('espacepro.htm'); ?>
	<?php include("menu.htm"); ?>
</div>
<div id="contenu">
	<?php include('recherche.htm'); ?>
	<?php include($page); ?>
</div>
<div id="footer">
	<?php include("footer.htm"); ?>
</div>
 
</div>
</body>
</html>

footer.htm

Code :

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

1
2
<!-- #bloc footer -->
<br /><b>&copy;</b> Copyright. <a href="#" title="">Mentions légales</a>. CNIL n°.......

espacepro.htm

Code :

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

1
2
3
4
5
6
7
8
<!-- #div d'identification -->
<div class="idDiv">
<form name=aform method=post action="index.php?page=identification">
	<b>ESPACE PRO :</b> <a href="#">Code oublié | Aide</a><br />
	<input type="text" name="id_box" size="20" value="Tapez votre code" onfocus="if (this.value == 'Tapez votre code') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Tapez votre code'; }" style="text-align:center" id="idBox" />
	<input type="submit" name="id_value" value="&nbsp;ok&nbsp;" style="margin-top:5px" id="idButton" />
</form>
</div>

recherche.htm

Code :

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

1
2
3
4
5
6
7
8
9
10
<!-- #div de moteur de recherche -->
<div class="searchDiv"> 
<form action="index.php?page=search" id="search-box">
	<input type="hidden" name="cx" value="016961606548190913830:uijtkv9wrkm" />
	<input type="hidden" name="cof" value="FORID:10" />
	<input type="hidden" name="ie" value="UTF-8" />
	<input type="text" name="q" size="25" value="&nbsp;Rechercher" onfocus="if (this.value == '&nbsp;Rechercher') { this.value = ''; }" onblur="if (this.value == '') { this.value = '&nbsp;Rechercher'; }" id="searchBox" />
	<input type="submit" name="sa" value="&nbsp;ok&nbsp;" id="searchButton" />
</form>
</div>

**lilia_dream** · 05/04/2009, 14h46

Bonjour jreaux62

vous etes trop serviable grand Merci

ben j'ai appliquee les modifications mais

Invité · 05/04/2009, 15h50

RE-Bonjour !

Regarde ton image : tu as 2 formulaires "rechercher" !

Tu n'as pas modifié TOUS les fichiers :

entete.htm (j'ai oublié de te donner celui-ci !)

Code :

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

1
2
<h1>DEBUTtitre...</h1>
<h2>...titreFIN</h2>

NB: chez moi, ca s'affiche correctement, avec Firefox, IE, Safari ...

**lilia_dream** · 05/04/2009, 21h36

Salut jreaux62

citation

Code :

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

1
2
 
Tu n'as pas modifié TOUS les fichiers :

tu as raison ce probleme est rresolu

Code :

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

chez moi, ca s'affiche correctement, avec Firefox, IE, Safari ...

mais chez j'ai toujours le meme probleme de div contenu

voici toutes codes
style.css

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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
/* <-------------------- GENERAL --------------------> */
body {
  margin: 0;
  padding: 0;
  font-family: Verdana, Bitstream Vera Sans, Lucida Grande, sans-serif;
  font-size: .8em;
  line-height: 1.25;
  color: black;
  background: #7FCF2E;
}
html {
  height: 100%;
}
#global {
  overflow : auto;
  width: 1000px;
  padding: 0;
  margin:0;
  margin-left: auto;
  margin-right: auto;
  background: #FFFFFF;
  background: white url(../img/global.png) repeat-y;
}
/* <---------------- div PRINCIPALES ---------------> */
/* <-- entete --> */
#entete {
  position: relative;
  height: 100px;
  color: #FFF;
  background: #7FCF2E url(../img/header.png) no-repeat;
}
/* <-- menu --> */
#menu {
  position: relative;
  float: left;
  width: 200px;
  height: 500px;
  background: #aaf url(../img/menuGP.png) no-repeat;
}
/* <-- contenu --> */
#contenu {
  position: relative;
  float:right;
  width: 800px;
  height: 500px;
  background:navy url(../img/accueil/bckground.png);
}
/* <-- footer --> */
#footer {
  position: relative;
  clear:both;
  height: 50px;
  width: 1000px;
  text-align: center;
  vertical-align: middle;
  background: #7FCF2E url(../img/footer.png) repeat-x;
  color: #FFFFFF;
}
/* <-- espace pro --> */
.idDiv {
position: relative;
border: 1px solid #026237;
top: 5px;
left: 5px;
width: 190px;
height: 40px;
text-align: center;
font-size: .8em;
color: #026237;
}
/* <-- recherche --> */
.searchDiv {
  position: relative;
  text-align: right;
  width: 800px;
  top: 1px;
  right: 5px;
  font-size: .9em;
  z-index: 1;
}
/* <---------------- div SECONDAIRES---------------> */
/* <-- DANS div CONTENU --> */
#contenu > :first-child {margin-top: 10px;}
#contenu .produit {
  position: absolute;
  top: 25px;
  left: 20px;
  width: 200px;
  height: 166px;
  background: #faf url(../img/accueil/produit.png);
}
#contenu .recette {
  position: absolute;
  top: 220px;
  left: 20px;
  width: 200px;
  height: 164px;
  background: #faf url(../img/accueil/recette.png);
}
#contenu .visiter {
  position: absolute;
  top: 400px;
  left: 300px;
  width: 218px;
  height: 164px;
  background: #faf url(../img/accueil/visiter.png);
}
#contenu .acheter {
  position: absolute;
  top: 375px;
  left: 600px;
  width: 218px;
  height: 164px;
  background: #faf url(../img/accueil/acheter.png);
}
 
/* <-- DANS div ENTETE --> */
#entete h1 {
  margin: 0;
  position: absolute;
  top: 5px;
  left: 350px;
  font: italic bold 1.2em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
}
#entete h2 {
  position: absolute;
  top: 25px;
  left: 650px;
  font: italic bold 1.2em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
}
 
/* <-- DANS div MENU --> */
#menu ul {
  position: relative;
  left: 10px;
  top: 25px;
  padding: 0;
  margin: 0;
  border: 0;
}
#menu li a {
  color: #FFFFFF;
  text-decoration: none;
  font-weight: bold;
}
#menu ul li {
  position: absolute;
  list-style: none;
}
#menu ul a {display: block;}
#menu ul.niveauA2 a {color: #026237;}
#menu ul.niveauA2 a:hover {color: #2EC739;}
#menu ul.niveauA2 ul a {color: #FFFFFF;}
#menu ul.niveauA2 ul a:hover {color: #026237;}
#menu ul ul {
  position: absolute;
  top: 0;
  background-color: #B4E14D;
  border: 2px outset #DDF4EC;
  display: none; 
}
#menu ul ul a:hover,#menu ul ul a:active,#menu ul ul a:focus{
  background-color: #2EC739;
  color: #026237;
  border: 1px inset;
  padding: 0 3px;
}
#menu ul ul li {
  position: relative;
  border: 1px solid #B4E14D; /* Pour empÃªcher le dÃ©calage */
}
#menu ul ul li.sousNiveau {background-color: #9BCF23;}
#menu ul ul li a {
  color: #FFFFFF;
  font-weight: normal;
}
#menu ul ul ul {
  position: absolute;
  display: none;
}
#menu ul li.sousNiveau:hover ul.niveauB, #menu ul.niveauB li.sousNiveau:hover ul.niveauC {display: block;}
#menu ul ul.niveauB li.sousNiveau a {font-weight: normal;}
#menu ul ul.niveauB ul.niveauC li a {font-weight: normal;}
#menu_accueil a:hover, #menu_campagne a:hover, #menu_agriculture a:hover, #menu_chambre a:hover {color: #2EC739;}
#menu_affiche a:hover, #menu_presse a:hover, #menu_emploi a:hover, #menu_photo a:hover, #menu_contact a:hover {color: #026237;}
/* <-- menu --> */
#menu_accueil {
  position : relative;
  width: 185px;
  left: 5px;
  top: 40px;
}
#menu_accueil ul {
  width: 0px;
  left: 185px;
}
#menu_affiche {
  position : relative;
  width: 185px;
  left: 5px;
  top: 80px;
}
#menu_affiche ul {
  width: 150px;
  left: 185px;
  z-index: 2;
}
#menu_campagne {
  position : relative;
  width: 185px;
  left: 5px;
  top: 120px;
}
#menu_campagne ul {
  width: 150px;
  left: 185px;
  z-index: 2;
}
#menu_campagne ul ul {
  width: 150px;
  left: 145px;
}
#menu_presse {
  position : relative;
  width: 185px;
  top: 160px;
  left: 5px;
}
#menu_presse ul {
  width: 150px;
  left: 185px;
  z-index: 2;
}
#menu_photo {
  position: absolute;
  width: 185px;
  top: 200px;
  left: 5px;
}
#menu_photo ul {
  width: 0;
  top: 440px;
  left: 185px;
}
#menu_contact {
  position : absolute;
  width: 185px;
  top: 240px;
  left: 5px;
}
#menu_contact ul {
  width: 150px;
  left: 185px;
  z-index: 2;
}
#menu_emploi {
  position : absolute;
  width: 185px;
  top: 260px;
  left: 5px;
}
#menu_emploi ul {
  width: 150px;
  left: 185px;
  z-index: 2;
}
 
/* <-- recherche --> */
#searchBox {
  border: 1px solid #026237;
  background-color: #2EC739;
  font: 1em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
  color: white;
}
#idBox {
  border: 1px solid #026237;
  background-color: #2EC739;
  font: 1em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
  color: white;
}
 
#idButton {
  border: 1px solid #026237;
  background-color: #026237;
  font: 1em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
  color: white;
  font-weight: bold;
}
 
#searchButton {
  border: 1px solid #026237;
  background-color: #026237;
  font: 1em Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
  color: white;
  font-weight: bold;
}
/* <-- --------- --> */

index.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
 
<?php
$pages_possibles = array("home.htm", "best.htm", "contact.php", "autre_page.htm");
if (in_array(@$_GET['page'],$pages_possibles)) { $page = $_GET['page']; }
else { $page = "home.htm"; }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Corrosion</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link href="style.css" type="text/css" rel="stylesheet" media="screen"/>
</head>
<body>
<div id="global">
<div id="entete">
<?php include("entete.htm"); ?>
</div>
<div id="menu">
<?php include('espacepro.htm'); ?>
<?php include("menu.htm"); ?>
</div>
<div id="contenu">
<?php include('rechercher.htm'); ?>
<?php include($page); ?>
</div>
<div id="footer">
<?php include("footer.htm"); ?></div>
</div>
</div>

entete.htm

Code :

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

1
2
<h1>DEBUTtitre...</h1>
<h2>...titreFIN</h2>

espacepro.htm

Code :

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

1
2
3
4
5
6
7
8
<!-- #div d'identification -->
<div class="idDiv">
<form name=aform method=post action="index.php?page=identification">
	<b>ESPACE PRO :</b> <a href="#">Code oublié | Aide</a><br />
	<input type="text" name="id_box" size="20" value="Tapez votre code" onfocus="if (this.value == 'Tapez votre code') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Tapez votre code'; }" style="text-align:center" id="idBox" />
	<input type="submit" name="id_value" value="&nbsp;ok&nbsp;" style="margin-top:5px" id="idButton" />
</form>
</div>

recherche.htm

Code :

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

1
2
3
4
5
6
7
8
9
10
<!-- #div de moteur de recherche -->
<div class="searchDiv"> 
<form action="index.php?page=search" id="search-box">
	<input type="hidden" name="cx" value="016961606548190913830:uijtkv9wrkm" />
	<input type="hidden" name="cof" value="FORID:10" />
	<input type="hidden" name="ie" value="UTF-8" />
	<input type="text" name="q" size="25" value="&nbsp;Rechercher" onfocus="if (this.value == '&nbsp;Rechercher') { this.value = ''; }" onblur="if (this.value == '') { this.value = '&nbsp;Rechercher'; }" id="searchBox" />
	<input type="submit" name="sa" value="&nbsp;ok&nbsp;" id="searchButton" />
</form>
</div>

footer.htm

Code :

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

1
2
3
 
 <!-- #bloc footer -->
<br /><b>&copy;</b> Copyright. <a href="#" title="">Mentions légales</a>. CNIL n°.......

j'ai le meme image

Invité · 05/04/2009, 22h20

Je ne comprends pas.

Avec les fichiers que tu m'as donné, j'obtiens un affichage correct !!!
(voir les images : Firefox, IE, Safari )

Il ne reste plus que le menu.

AS-TU CHANGE TON MENU ?!?!?

Moi, j'ai : menu.htm

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
<!-- #menu -->
<ul class="niveauA1">
	<li class="sousNiveau" id="menu_accueil"><a href="#">Home</a> 
		<ul class="niveauB">
			<li><a href="#">
			<!-- pour forcer la gestion block -->
			</a></li>
		</ul>
	</li>
	<li class="sousNiveau" id="menu_affiche"><a href="#">Administration</a> 
		<ul class="niveauB">
		   <a href="index.php?page=best.htm">Etudiant</a>
			<li><a href="#">Enseignant</a></li>
			<li><a href="#">Administrateur</a></li>
		</ul>
	</li>
	<li class="sousNiveau" id="menu_campagne"><a href="#">BIENVENUE &Agrave; L'ESPACE</a> 
		<ul class="niveauB">
			<li class="sousNiveau"><a href="#">Consultation</a> 
				<ul class="niveauC">
					<li><a href="#">Par matiere</a></li>
					<li><a href="#">Par module</a></li>
				</ul>
			</li>
			<li class="sousNiveau"><a href="#">ESPACE ETUDIANT</a> 
				<ul class="niveauC">
					<li><a href="#">Catalogue par classe</a></li>
					<li><a href="#">Catalogue par niveau</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li class="sousNiveau" id="menu_presse"><a href="#">Etablissement</a> 
		<ul class="niveauB">
			<li><a href="#">Communiqués </a></li>
			<li><a href="#">Dossiers d'etudiants</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</li>
	<li class="sousNiveau" id="menu_photo"><a href="#">PHOTOTH&Egrave;QUE</a> 
		<ul class="niveauB">
			<li><a href="#"> 
			<!-- pour forcer la gestion block -->
			</a></li>
		</ul>
	</li>
</ul>
<ul class="niveauA2">
	<li class="sousNiveau" id="menu_contact"><a href="#">CONTACT</a> 
		<ul class="niveauB">
			<li><a href="#">Contact</a></li>
			<li><a href="#">A propos...</a></li>
		</ul>
	</li>
</ul>

**lilia_dream** · 05/04/2009, 22h45

un grand grand grand merci jreaux62

vraiment je trouve pas mots .......

Merci beaucoup

je vais personnaliser ma page parce que l'arriere plan vert occupe toute la page l'entete et le pied de page sans mal defini

[css][php]affichage incoherent avec php

HTML

Discussions similaires

Partager

Partager