Grande marge a droite de mon site sur mobile et tablette

**sghislain** · 23/03/2016, 18h53

Bonjour,
les ami(e)s j'ai un souci avec mon site sur mobile NetteRoyale
j'ai une grande marge à droite que je ne comprend pas j'ai essayé de réduire les chose mais elle persiste alors je viens demander votre aide

voici mes codes

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
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
@charset "utf-8";
/* CSS Document */
body{margin:0px; padding:0px;}
*{margin:0px; padding:0px;}
*{padding:0px; margin:0px;font-size:14px; font:"Trebuchet MS", Arial, Helvetica, sans-serif;}
.h1
{color: #FFF; font-size:18px; font-weight:normal; font-family:Arial, Helvetica, sans-serif;}
 
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 400;
  src: local('Cabin Regular'), local('Cabin-Regular'), url(fonts/cabin-regular.woff) format('woff');
}
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 600;
  src: local('Cabin SemiBold'), local('Cabin-SemiBold'), url(fonts/cabin-semiBold.woff) format('woff');
}
@font-face {
  font-family: 'Cabin';
  font-style: italic;
  font-weight: 400;
  src: local('Cabin Italic'), local('Cabin-Italic'), url(fonts/cabin-italic.woff) format('woff');
}
@font-face {
  font-family: 'Viga';
  font-style: normal;
  font-weight: 400;
  src: local('Viga-Regular'), url(fonts/viga.woff) format('woff');
}
*{padding:0px; margin:0px;font-size:13px; font-family:Cabin;}
 
/***@media queries***/
 
/***fin @media queries***/
 
 
 
/******Menu de navigation*******/
 
	nav a
	{
		text-decoration:none;
		font-weight:bold;
		text-transform: uppercase;
		color:#928d8d;
		font-size:13px;
 
	}
	nav{
		text-align: center;
		padding: 10px;
		margin: 5px;
	}
	nav .accueil{border-right:1px solid #009933; border-bottom:5px solid #009933;}
	nav .realisations{border-right:1px solid #00A2A5; border-bottom:5px solid #00A2A5;}
	nav .rechercher{border-right:1px solid #405953; border-bottom:5px solid #405953;}
	nav .contact{border-right:1px solid #88A725; border-bottom:5px solid #88A725;}
 
	nav ul
	{
		text-align:left;
		margin:23px;
		list-style:none;
		margin-top:100px;	
	}
 
	nav li
	{
		font-size:18px;
		text-align: center;
		display: inline-block;
		position: fixed;
		position:relative;
		margin:0 20px;
	}
 
 
	nav ul li
	{
		padding:7px;
		font-size:14px;
		text-align: left;
		display:inherit;
	}
 
	nav ul
	{
		position:absolute;
		max-height:0;
		margin-top:7px;
		overflow:hidden;
		z-index:9999;
		-moz-transition-duration: 0.9s; 
		-ms-transition-duration: 0.9s; 
		-o-transition-duration: 0.9s; 
		-webkit-transition-duration: 0.9s; 
		transition-duration: 0.9s;
		-webkit-border-radius: 4px;
	  	-moz-border-radius: 4px;
	  	border-radius: 4px;
 
	}
 
	nav a:active {
    color: #1e7d0b;
}
 
	nav li ul:hover
	{
		color:#b60c0c;
		text-decoration:none;
	}
 
	nav li :hover
	{
 
		text-decoration:none;
		color:#b60c0c;
	}
 
	nav li:hover ul
	{
		max-height:10em;
		margin-top:10px;
		padding:2px;
		margin-left:-39px;
 
	}
 
 
 
	/* background des sous menus */
 
	nav li ul:nth-child(2) li
	{
		background:#e6e6e6 no-repeat ;
		-moz-box-shadow: 1px 1px 2px #000;
   		-webkit-box-shadow: 1px 1px 2px #000;
		-ms-box-shadow: 1px 1px 2px #000;
		-o-box-shadow: 1px 1px 2px #000;
		box-shadow: 1px 1px 2px #000;
		width:140px;
	}
 
	/*fin background des sous menu*/
 
 
/******Fin menu d navigation*******/
 
 
.viga{font-family:Viga;}
 
.clearfix { *zoom: 1 }
.clearfix:before, .clearfix:after {display: table;content: "";line-height: 0;}
.clearfix:after {clear: both;}
.table{display:table; width:inherit;}
.table-row{display:table-row;}
.table-cell{display:table-cell; vertical-align:top;}
 
#designfooter{border: none; border-style: none;}
#designfooter img{ width:940px; border: none; border-style: none;}
#sociaux{margin: 5px; float: right; border: none; border-style: none; cursor: pointer;}
#sociaux a:hover{opacity:0.4;}
#sociaux img{text-decoration: none; border: none; border-style: none;}
#sliderb_container{position: relative; width: 940px;height: 330px; overflow: hidden;}
.videocontainer{display:inline-block; margin-left: 5px; margin-right: 5px; margin-top:22px; width:300px; box-shadow: 1px 1px 12px #555;}
.redbande{background-color:#b60c0c; color:white; width:auto;}
.redbande b {margin: 5px 5px 5px 5px; padding:0 5 0 5px; font-size:18px; font-weight:bold; text-transform:uppercase;}
#toutlesite{width:940px;box-shadow:0px 0px 5px black;margin:0 auto; margin-top:2px;background-color:white;}
#sitebas{width:940px; background-color: #EDEDED; box-shadow:0px 0px 5px black;margin:0 auto;}
 
 
/*enveloppe flotante*/
#contact-box{position: absolute;left:10px;}
#btnContact {background: #b60c0c; margin-left: 0 auto; padding: 15px; cursor: pointer;border-bottom-left-radius:5px;border-top-left-radius:5px;} 
#frmContact {background:#FAF8F8;padding:15px;display:none;float:right;}
#frmContact div{margin-bottom: 15px}
#frmContact div label{margin-left: 5px}
.demoInputBox{padding:10px; border:#F0F0F0 1px solid; border-radius:4px;}
.error{background-color: #FF6600;border:#AA4502 1px solid;padding: 5px 10px;color: #FFFFFF;border-radius:4px;}
.success{background-color: #12CC1A;border:#0FA015 1px solid;padding: 5px 10px;color: #FFFFFF;border-radius:4px;}
.info{font-size:.8em;color: #FF6600;letter-spacing:2px;padding-left:5px;}
.btnAction{background-color:#182153;border:0;padding:5px 0px;color:#FFF; font-weight: bold; border:#F0F0F0 1px solid; border-radius:4px;}
.txt-content{border-left: #F0F0F0 1px solid;padding: 5px 20px; margin-top: 100px;}
/*fin*/
 
#formulaire{float:right; width:560px;margin-left:60px;}
 
#position_connect_bg{width:550px; height:150px; background-image:url(../images/back2.png);}
#position{margin-top:500px;}
#saisie .inputs input[type=text]{font-weight:bold; font-size: 14px; width:150px; border-radius: 3px; border:2px solid #182153; padding: 4px 4px;  margin-bottom: 10px; box-shadow: 0px 0px 5px  #182153; background-image:url(images/icones/required_icon.png); background-repeat:no-repeat; background-position:right;}
 
#saisie .inputs input[type=text]:focus{font-size: 14px; width:200px; border-radius: 3px; border:2px solid #167821; padding: 4px 4px;  margin-bottom: 10px; box-shadow: 0px 0px 5px #167821; background-image:url(../images/icones/b_drop.png); background-size:10px; background-repeat:no-repeat; background-position:right; transition-duration:0.4s;}
 
#saisie .inputs input[type=text]:valid{background-image:url(../images/icones/valid.png);  border:2px solid #167821; background-repeat:no-repeat; background-position:right; box-shadow: 0px 0px 5px #167821;}
 
input[type=submit]{width:80px; height:30px; color:hsl(0,0%,100%); text-align:center; border-radius:3px; background-color:#182153; border:none;}
 
input[type=submit]:hover{width:100px; font-size:14px; font-weight:bold; transition-duration:0.7s; border-radius:3px; background-color:#167821; border:none; background-image:url(../images/icones/valid.png); background-repeat:no-repeat; background-position:right;}
 
 
 
/*Mmise en forme du pied de page*/
footer{line-height:30px;}
footer #bandebleue{background-color:#f8f8f8;padding:0px;}
footer #bandegrise{background-color:#c6c7bf;height:50px;padding-top:0px;}
 
 
/**@media queries**/
 
@media screen and (min-width: 844px) and (max-width: 1044px) {
 
 
}
 
 
@media screen and (min-width: 1224px) {
 
 
}
 
 
@media screen and (min-width: 844px) and (max-width: 1024px) {
	#toutlesite{width: 100%; margin:0px; padding:0px;}
    #sliderb_container{display: none;}
    .videocontainer{border:1px solid #61a0f5; text-align: center; width: auto; background-color: white; margin: 5px 0 0 5px; padding:5 0 5 0px; box-shadow: 1px 1px 12px #555; }
    #slideshow{display: none;}
    #slideshow img{width: 100%;}
    .ln1{display: none;}
    #bandegrise{float: left;}
    #designfooter{float: left;}
    #contenu{width: 100%; text-align: center;}
    #designfooter img{width: 98%;}
    header img{width:20%;}
    .redbande{width: auto;}
    #footer{width: 100%;}
    .moovie img{margin: 3px 3px 3px 3px; padding:3px 3px 3px 3px;}
    iframe{ margin: 5px 20px 20px 15px; padding:20px 20px 20px 5px;}
 
    nav li
    {
        padding-bottom: 0;
        margin: auto;
 
    }
 
    nav a
    {color: #b60c0c;}
 
    nav
	{
       display:inline-block;/* La valeur par défaut */
        padding-bottom: 0;
        margin: auto;
    }
 
    nav ul 
	{
        margin-top: 0;
    }
 
}
 
@media screen and (max-width: 844px) {
    #toutlesite{width: 100%; margin:0px; padding:0px;}
    #sliderb_container{display: none;}
    .videocontainer{border:1px solid gray; width: auto; text-align: center; background-color: white; margin: 5px 0 0 5px; padding:5 0 5 0px; box-shadow: 1px 1px 12px #555; }
    #slideshow{display: none;}
    #slideshow img{display: none;}
    .ln1{display: none;}
    #bandegrise{float: left;}
    #contenu{width: 100%; text-align: center;}
    #designfooter{float: left;}
    #designfooter img{display: none;}
    header img{width:10%;}
    .redbande{width: auto;}
    #footer{width: 100%;}
    .moovie img{margin: 3px 3px 3px 3px; padding:3px 3px 3px 3px;}
    iframe{ margin: 5px 10 10 15px; padding:15 5 10 5px;}
 
    nav li
    {
        padding-bottom: 0;
        margin: auto;
 
    }
 
    nav a
    {color: #61a0f5;}
 
    nav
	{
       display:inline-block;/* La valeur par défaut */
        padding-bottom: 0;
        margin: auto;
    }
 
    nav ul 
	{
        margin-top: 0;
    }
}
 
@media (max-device-width:844px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}
 
/**@media queries**/

mon php

Code php :

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
<?php require_once('includes/incfiles/header.inc.php');?>
<body>
 
	<div id="toutlesite">
		<header>
			<div id="sociaux">
				<a href="https://www.facebook.com/nette.royale?fref=ts"><img src="<?php echo $URL;?>images/icones/icon-fcbk.png" alt="Facebook icône" width="30"/></a>
				<a href="http://www.twitter.com/netteroyale"><img src="<?php echo $URL;?>images/icones/icon-twitter.png" alt="Twitter icône" width="30"/></a>
				<a href="https://www.youtube.com/channel/UCxr9Xg6EO9xp2_GuIghJOJg"><img src="<?php echo $URL;?>images/icones/icon-youtube.png" alt="Youtube icône" width="30"/></a>
			</div>
			<?php require_once('includes/incfiles/navbar.inc.php') ;?>
		</header>
 
		<?php require_once('includes/incfiles/siteslide.inc.php') ;?><br/>
		<div id="contenu"><br/>
			<?php 	
				require_once('includes/incfiles/connexion.inc.php');
				$req=mysql_query("SELECT * FROM clip WHERE alaune='oui' and active='oui' ORDER BY id DESC LIMIT 6");
				$req2=mysql_query("SELECT * FROM clip WHERE active='oui' and alaune='non' ORDER BY vue LIMIT 30");
 
			;?>
 
			<div class="redbande"><b>Vidéos a la une</b></div><br/>
		  	<?php while($resultat=mysql_fetch_array($req)){   
    		?>
 
				   	<div class="videocontainer">
				        <p class="moovie" style="margin: 5px 0 0 0px; padding:0 5 0 5px;"><img src="images/icones/<?php echo "moovie.png"; ?>" alt="img"/></p>
				            <a href="">
							    <iframe width="300" height="166" src="<?php echo $resultat['lien'] ;?>" frameborder="0" allowfullscreen></iframe>
				            </a>
				                <br/><br/><b style="color:#61a0f5; text-align:left; font-size:14px; margin: 5px;">Titre : <?php echo $resultat['titre'] ;?></b><br/><br/>
				                <b style="color:#61a0f5; text-align:left; font-size:14px; margin: 5px;">Artiste : <?php echo $resultat['artiste'] ;?></b><br/><br/>  
					</div>
 
			<?php } ?>
 
			<br/><br/><div class="redbande"><b>Les autres vidéos</b></div><br/>
		  	<?php while($resultat1=mysql_fetch_array($req2)){   
    		?>
 
				   	<div class="videocontainer">
				        <p class="moovie" style="margin: 5px 0 0 0px; padding:0 5 0 5px;"><img src="images/icones/<?php echo "moovie.png"; ?>" alt="img"/></p>
				            <a href="">
							    <iframe width="300" height="166" src="<?php echo $resultat1['lien'] ;?>" frameborder="0" allowfullscreen></iframe>
				            </a>
				                <br/><br/><b style="color:#61a0f5; text-align:left; font-size:14px; margin: 5px;">Titre : <?php echo $resultat1['titre'] ;?></b><br/><br/>
				                <b style="color:#61a0f5; text-align:left; font-size:14px; margin: 5px;">Artiste : <?php echo $resultat1['artiste'] ;?></b><br/><br/>  
					</div>
 
			<?php } ?>
 
		</div><br/><br/>
		<a id="designfooter" href=""><img src="images/logo-pied.png"/></a>
	</div></div>
 
			<?php require_once('includes/incfiles/site-footer.inc.php');?>
	</div>
</body>
</html>

--
merci pour votre coup de main. il me sera très utile.

**NoSmoking** · 24/03/2016, 19h50

Bonjour,
j'ai été faire un tour rapide sur le lien et ... rien vu comme marge à droite !?!

**Azerx** · 25/03/2016, 10h17

Pareil!

Par contre un petit truc, quand ton site passe en mode "mobile" (width<1115px) ta barre de navigation est rouge, mais si on diminue encore (width <920px) elle devient bleue (tests sous mozilla firefox

)

**sghislain** · 25/03/2016, 10h58

NoSmoking et azrex c'est bon j'ai réglé le problème de marge en fait et par rapport au menu, c'est moi même qui l'ai fait comme ça si vous trouvez que ce n'est pas bien bah dites le et je corrige. mais j'ai toujours un souci avec ma page contact. c'est la seule page qui n'est pas responsive et nécessite un scroll à droite je demande votre aide pour ça
voici mon code

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
<div style="background:#FFF; width:auto; z-index: 9999;"><div class="clearfix" style="width:auto; padding:0px 5px; margin-top:0px; text-align:left;">
            <div class="table centre" style="width:auto;"><div class="table-row">
            <div class="table-cell" style="width:auto; padding-top:5px;"><div style="width:inherit; display:block; clear:both">
    <div style="margin-right:65px;">
        <form name="ref_form" id="ref_form" class="formulaire" action="" method="POST" style="padding:0 3px 0 0px;">
                <input type="hidden" name="from" value="contacts" />
                <ul><li style="padding:12px 0 12px 5px;"><h2 style="font-size:21px; font-weight: bold;">Contactez-nous</h2>
                     <span class="required_notification">* Champs requis</span>
                </li></ul>
                <ul>
                    <li>
                        <label class="label1" for="objet"></label>
                        <input style="width:auto;" name="objet" id="objet" value="" type="text" placeholder="Saisir l'objet de votre message" required />
                    </li>
                    <li>
                        <label class="label1" for="identite"></label>
                        <input style="width:auto; text-transform: uppercase;" name="nom" id="identite" value="" type="text" placeholder="Noms Pr&eacute;noms" required />
                    </li>
                    <li>
                        <label class="label1" for="email"></label>
                        <input style="width:auto; text-transform: lowercase;" name="mail" id="mail" value="" type="email" placeholder="johndoe@gmail.com" required />
                    </li>
 
                </ul>
                <div style="display:block; clear:both;"><table border="0" cellpadding="0" cellspacing="0">
                    <tr><td width="auto" valign="top" style="padding-left:5px; text-align:center; font-size:14px; padding-top:10px;"><b></b><br>&nbsp;
                    <textarea name="message" rows="20" cols="120" style="margin-left:0px; overflow:auto; width:auto;" placeholder="Saisissez ici votre message" ></textarea></td></tr></table>
                </div>
                <ul>
                        <li>
                        <label class="label1" for="telephone"></label>
                        <input style="width:auto;" name="telephone" id="telephone" type="text" placeholder="Saisir votre numero de telephone"/>
                    </li>
                </ul>
                <ul style=" margin-top:10px;">
                    <li style="display:inline;"><button class="submit" type="submit" name="envoyer">Envoyez le message</button></li>
                </ul>
</form>

**Azerx** · 25/03/2016, 12h11

Envoyé par sghislain

NoSmoking et azrex c'est bon j'ai réglé le problème de marge

Nickel

Envoyé par sghislain

par rapport au menu, c'est moi même qui l'ai fait comme ça si vous trouvez que ce n'est pas bien bah dites le et je corrige

Je sais pas je trouvais ça bizarre que ton menu change 2 fois, surtout que tu n as pas de bleu sur ton site et que cette couleur donne l'impression que tu n'as pas paramétré tes liens

**sghislain** · 25/03/2016, 18h51

t'inquiète. aide moi pour le problème avec la page contact

Grande marge a droite de mon site sur mobile et tablette

CSS

Vue hybride

Discussions similaires

Partager

Partager