Permettre l'affichage de mon site sur smartphone

**Samix.94** · 24/02/2018, 22h22

Bonsoir,
Mon site s'affiche normalement avec un zoom de 100% sur mon ordianteur (chrome) par exemple mais quand je de-zoom a 50% par exemple mon menu et ma banniere ne vont pas jusqu'au bout à droite de la page et le rendu est très bizarre

regardez:
à 100%:
Nom : ex 100%.png
Affichages : 166
Taille : 1,62 Mo

Puis à 50% Nom : ex50%.jpg
Affichages : 162
Taille : 433,6 Ko

Voici donc mon premier problème,en résumé je voudrais que mon site s'addapte a tout type d'ecran.Meme les portables...
J'ai fait ceci au niveau 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
<!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 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>
		 </div>
	<hr>
 
	<div><center><IMG 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?.</div>
	</p></font></label>
	</section>
	<footer>
	<hr>
 
 
	<img src="images/college pied de page.jpg"height="100"style="width: 100px"VSPACE="0" HSPACE="8" align=right  />
	<img src="photosEleves/sami12.jpg" height="100" style="width: 100px;"  VSPACE="0" HSPACE="8" align=left />
	<font 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 ceci au niveau du css:

Code CSS :

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
body{
	font-family: verdana, calibri, sans-serif;
	font-size: 130%;
	margin: 	0px;
	padding: 0px;
}
nav > ul{
	margin:0px;
	padding: 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:100%;
 
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;
 
}
 
 
}

J’espère que mon problème est clair parce que là je suis bloqué

Merci d'avance

**psychadelic** · 24/02/2018, 23h18

bon, déjà tu à mis une balise méta pour avoir une mise en page dynamique en fonction de la largeur (ou la hauteur) d'écran disponible.
et c'est un bon départ.

Code :

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

1
2
 
<meta name="viewport" content="width=device-width, initial-scale=1">

avec un directive dans ton css :

Code :

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

@media screen and (max-width : 1135px){ ....

indiquant les styles css a appliquer pour les écran dont la taille est inférieure ou égale a 1135px

tu peux en fabriquer une autre pour s'adapter au taille d'écran de smartphones :

Code :

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

@media screen and (max-width : 480px){ ....

Mais ce n'est pas en jouant sur "le zoom" du navigateur qu'il faut jouer, mais en agissant directement sur le redimensionnent de la fenêtre de ton navigateur pour voir cet effet agir.

**Samix.94** · 24/02/2018, 23h23

tu peux en fabriquer une autre pour s'adapter au taille d'écran de smartphones :

Code :

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

@media screen and (max-width : 480px){ ....

Mais ce n'est pas en jouant sur "le zoom" du navigateur qu'il faut jouer, mais en agissant directement sur le redimensionnent de la fenêtre de ton navigateur pour voir cet effet agir.

Merci beaucoup,mais comment faire pour redimensionner la fenêtre de mon navigateur?

**Samix.94** · 24/02/2018, 23h29

J'ai reussi a faire ce que je voulais mais seulement pour ma banniere en faisant:

Code :

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

1
2
3
4
5
6
7
8
 
@media screen and (max-width : 1135px){
	.banniere{
 
	max-width:100%;
	height:auto;
}
}

Mais pour mon menu je n'y arrive pas pouvez vous m'aidez??(le code de mon menu est plus haut dans la discussion)

**psychadelic** · 25/02/2018, 00h08

Envoyé par Samix.94

Merci beaucoup,mais comment faire pour redimensionner la fenêtre de mon navigateur?

sérieux ??

Envoyé par Samix.94

J'ai reussi a faire ce que je voulais mais seulement pour ma banniere en faisant:

Code :

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

1
2
3
4
5
6
7
 
@media screen and (max-width : 1135px){
    .banniere {
         max-width:100%;
         height:auto;
     }
}

Mais pour mon menu je n'y arrive pas pouvez vous m'aidez??(le code de mon menu est plus haut dans la discussion)

ill n'y a aucun élément HTML ayant pour class="banniere" sur ta page

**Samix.94** · 25/02/2018, 00h20

NONN je me suis tromper bien sur que je sais redimensionner un fenetre

Et merci de ton aide!!J'ai enfin reussi j'ai fait 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
 
@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;
 
}
}

et bien sur j'ai mis class="banniere" dans mon HTML et ça marche!!!Merci

**psychadelic** · 25/02/2018, 00h30

inutile de répéter le media query :

Code css :

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

**Samix.94** · 25/02/2018, 15h44

ahh merci beaucoup!!

Permettre l'affichage de mon site sur smartphone

CSS

Discussions similaires

Partager

Partager