@media pour qu'un menu s'affiche sur tout le long de la page pour des pc de + de 15 pouces

**Samix.94** · 26/02/2018, 22h17

Bonsoir,mon site est adapté a un affichage smartphone et pc(jusqu'a 15 pouces).Je voudrais qu'il le soit aussi pour un affichage sur pc de + de 15 pouces et en particulier au niveau de ma banniere et de mon menu.
Voici ce que j'ai essayé de faire:
Code CSS qui marche pour smartphone par exemple:

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
 
 
@media screen and (max-width : 1135px){
	.banniere{
 
	max-width:100%;
	height:auto;
}
}
 
@media screen and (max-width : 1135px){
nav{
	max-width:100%;
	height:auto;
}
 
 
 
}

Et voici ce que j'ai essayé de faire pour les pc de + de 15 pouces:

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
 
@media screen and (min-width : 1135px){
	.banniere{
 
	max-width:100%;
	height:auto;
}
}
 
@media screen and (min-width : 1135px){
nav{
	max-width:100%;
	height:auto;
}
}

Je ne comprend pas pourquoi j'ai réussi a afficher un menu et une bannière correcte (qui prend tout le long de la page) pour tout type d'affichage sauf pour les pc de plus de 15 pouces.
J aimerais un peu d'aide

Invité · 27/02/2018, 07h32

Bonjour,

Remplace max-width:100%; par width:100%; ?

**Samix.94** · 27/02/2018, 10h07

ça n'a pas l'air de changer grand chose quand je vais sur un pc + grand

Invité · 27/02/2018, 10h14

**Samix.94** · 27/02/2018, 10h14

ça me donne ce resultat:

Nom : image result.png
Affichages : 138
Taille : 662,2 Ko

Et je veux que le menu et la banniere aillent jusqu'au bout vers la gauche.

Invité · 27/02/2018, 10h51

On te répond avec ce que tu nous montres.

Si tu ne montres pas le code nécessaire et suffisant (HTML + CSS) pour pouvoir TESTER (ou une page en ligne), on ne peut que supposer.

Là, on ne sait RIEN de la structure HTML de ta page, ni du CSS (à part le petit bout que tu as donné, et qui se sent bien seul...)

**Samix.94** · 27/02/2018, 12h54

j'ai par exemple ce fichier html:

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<!DOCTYPE html>
<html>
    <head> 
 
	    <title>Menu html/Css recensement college</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="fichier css.css">
	</head>
	<body>
 
		<header>
		<img  class="banniere"src="images/banniere creteil.jpg"height="200"style="width: 1350px"VSPACE="0" HSPACE="0" align=center  /> 
		</header>
			<nav>
			<label for="menu-mobile" class="menu-mobile">Menu</label>
			<input type="checkbox" id="menu-mobile" role="button"> 
			<ul>
				<li class="menu-acceuil"><a href="index.php">Accueil </a></li>
				<li class="menu-inscription"><a href="inscription.php">Inscription</a>
				</li>
				<li class="menu-connexion"><a href="connexion.php"> Connexion </a>
				</li>	
				<li class="menu-college"><a href="description college.html"> Le college Amedee Laplace </a>
				</li>
				<li class="menu-liste"><a href="liste des membres.php"> Les anciens eleves du college </a>	
				</li>
				<?php 
 
                                        session_start(); 
 
                                        if(isset($_SESSION['login'])) { 
                                        echo ' vous etes connecte!';
                                        }
 
                                ?> 
 <body><a href="deconnexion.php"><font style="color:#E81100";>Deconnexion</font></a></body>
			</ul>
			</nav>
	<hr>
 
	<div><center><IMG class="amedee1" src="images/amedee1.jpg" alt="Le France" height="450"style="width: 600px" VSPACE="20" HSPACE="20" Align="center"></center></div>
	<section>
	<font color="white"><fieldset>Bienvenue à vous,chers  <STRONG>visiteurs</STRONG>.</fieldset><br><div style="margin-left: 30px; margin-top: 0px;">Ce site est dédié aux anciens élèves du collège Amédée Laplace de Créteil(94) pour leur permettre de se recenser et de contacter</div><div style="margin-left: 10px; margin-top: 0px;">  leurs anciens camarades de classe. <br>Rien de plus facile, 
	il vous suffit de créer un compte  dans le menu "inscription" et de vous inscrire comme ancien élève.<br>Et voilà,c'est simple non?.
	</p></font>
	</section>
 
	<footer>
	<hr>
 
 
	<img src="photosEleves/sami12.jpg" height="100" style="width: 100px;"  VSPACE="0" HSPACE="8" align=left />
	<font class="texte2" color="white"><p>Hella Sami: Créateur du site</p></font>
	<center> <li><a href="http://collegelaplace.free.fr/index.php"> <font style="color:#7BF200";>le site du college Amedee Laplace</font>  </a></li> </center>
	<center> <li><a href="https://www.facebook.com/profile.php?id=100004882458025"><font style="color:#7BF200";> ma page facebook</font>  </a></li> </center>
	</footer>
 
	</body>
</html>

et mon fichier CSS est comme ceci:

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
298
299
300
301
302
 
body{
	font-family: verdana, calibri, sans-serif;
	font-size: 130%;
	margin: 	0px;
	padding: 0px;
}
nav > ul{
	margin:0px;
	padding-right: 0px;
}
nav li{
	list-style-type: none;
}
 
nav > ul > li{
	float: left;
 
}
nav input[type=checkbox]{
	display: none;
}
.menu-mobile{
	display: none;
}
 
nav{
	width:1350px;
	background-color: #87E821;
 
}
nav > ul > li{
	float: left;
	position: relative;
}
nav > ul:after{
	content: "";
	display: table;
	clear: both;
}
nav a{
	display: inline-block;
	text-decoration: none;
}
 
nav > ul > li > a{
	padding: 20px 30px;
	color: #000000;
}
 
.menu-acceuil:hover{
	border-top: 5px solid #0070bb;
	background-color: RGBa(000, 112, 192, 0.15);
}
.menu-inscription:hover{
	border-top: 5px solid #F4FB3B;
	background-color: RGBa(000, 112, 192, 0.15);
}
.menu-college:hover{
	border-top: 5px solid #f1dc4f;
	background-color: RGBa(241, 211, 79, 0.15);
}
.menu-connexion:hover{
	border-top: 5px solid #0070bb;
	background-color: RGBa(241, 211, 79, 0.15);
}
.menu-liste:hover{
	border-top: 5px solid #0070bb;
	background-color: RGBa(241, 211, 79, 0.15);
}
nav > ul > li:hover a{
	padding: 15px 30px 20px 30px;
}
 
 
body{
	font-family:Helvetica,ARIAL sans-serif;
	background-image:url(images/fond.jpg);
	}
 
 
 
footer{
 
 
 
position:absolute;
 
bottom:;
 
width:1350px;
 
padding-top:3px;
 
height:50px;
 
}
 
.ancien img {
 
width:300px;
 
height:300px;
 
}
 
p.ancien {
    float: left;
    margin: 0 10px 0 0;
 
}
p.nouveau {
	 float: right;
    margin: 0 10px 0 0;
}
.nouveau img {
 
width:300px;
 
height:300px;
 
}
nav input[type=checkbox]:checked ~ ul{
	display: block;
}
@media screen and (max-width : 1135px){
	.menu-mobile{
		display:block;
		color:#fff;
		background-color: rgba(29, 197, 151, 0.97);
		text-align: center;
		padding: 12px 0;
	}
nav ul{
	display:none;
}
nav ul li, nav ul li a {
	width: 100%;
	text-align: center;
}
nav ul li a, nav ul li:hover a{
		padding: 10px Opx 10px 0px;
}
 
footer{
 
 
 
position:absolute;
 
bottom:;
 
width:100%;
 
padding-top:3px;
 
height:50px;
 
}
 
 
}
 
@media screen and (max-width : 1135px){
	.banniere{
 
	max-width:100%;
	height:auto;
}
}
 
@media screen and (max-width : 1135px){
nav{
	max-width:100%;
	height:auto;
}
 
 
 
}
 
@media screen and (max-width : 1135px){
 
 
.amedee1{
	float:left;
	max-width:100%;
	height:auto;
 
}
}
@media screen and (max-width : 1135px){
 
 
.amedee2{
	float:left;
	max-width:100%;
	height:auto;
 
}
}
@media screen and (max-width : 1135px){
 
 
 
.amedee3{
	float:left;
	max-width:100%;
	height:auto;
 
}
}
 
@media screen and (max-width : 1135px){
 
 
 
body{
	font-size: 100%;
 
 
}
}
@media screen and (max-width : 1135px){
 
 
 
.texte2{
	text-align: center;
 
 
}
}
@media screen and (max-width : 1135px){
.footer1{
 
	padding-top:300px;
}
 
 
 
}
.footer1{
 
	padding-top:300px;
}
@media screen and (max-width : 1135px){
.footer2{
	position:absolute;
 
bottom:;
 
width:100%;
 
padding-top:3px;
 
height:50px;
 
}
@media screen and (max-width : 1135px){
.footer3{
	position:absolute;
 
bottom:;
 
width:100%;
 
padding-top:300px;
 
height:50px;
 
}
@media screen and (max-width : 1135px){
.footer4{
	position:absolute;
 
bottom:;
 
width:100%;
 
padding-top:350px;
 
height:50px;
 
}
@media screen and (min-width : 1135px){
	.banniere{
 
	width:100%;
	height:auto;
}
}
 
@media screen and (min-width : 1135px){
nav{
	width:100%;
	height:auto;
}
 
 
 
}

Merci d'avance

@media pour qu'un menu s'affiche sur tout le long de la page pour des pc de + de 15 pouces

CSS

Vue hybride

Discussions similaires

Partager

Partager