Question sur responsive

**leroilion94** · 18/03/2016, 23h49

bonjours, juste une question

j'ai un lien http://lab.maltewassermann.com/viewport-resizer/

et quand je passe par exemple http://www.developpez.net/

et quand je veux visualiser 1920*1080
il y a le côté droit qui est hors de l'ecran

es-ce que ca vien du site ou ça vien de chez vous car vous n'avez pas fait media

merci

Invité · 19/03/2016, 10h27

Bonjour,

le "viewport-resizer" a certainement déjà des bordures de chaque coté (et barres de scroll).

Donc si ton écran fait 1920px, et que tu veux visualiser avec le "viewport-resizer" en 1920px, il est normal que tu doivent un peu scroller pour voir le contenu.

le site www.developpez.net "standard" est responsive jusqu'à un certain point, au-delà duquel il existe une version "Mobile" du site.
Regarde tout en bas de page à gauche : un select avec écrit "standard". Passe-le à "Mobile".

**leroilion94** · 19/03/2016, 12h36

merci je vous ai fait un petit cadre

http://communautaire.legtux.org/cadre.php

avec ces media

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
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
/*********************************************************************************************************Début du desing Respensive Ecrans ordinateurs*********************************************************************************************************/
      @media (min-width: 1200px)
	  {
/*********************************************************************************************************Début du body******************************************************************************************************************************************/
      body
	  {
	  font-family:Arial, Helvetica, sans-serif;/* un font texte */
	  font-size:11px; /* taille du texte */
/*	  background-color:#F8FFE6; /* Couleur de fond */
	  color:#000000; /* couleur du texte */
	  }
/*********************************************************************************************************Fin du body********************************************************************************************************************************************/
 
/*********************************************************************************************************Début du global****************************************************************************************************************************************/
      .global
	  {
	  background-color:#9900FF;
	  border:#CCCCCC 1px solid;
	  margin:10px;
	  min-height:100px;
	  }
/*********************************************************************************************************Fin du global******************************************************************************************************************************************/
     }
 
/*********************************************************************************************************Fin du desing Respensive Ecrans ordinateurs***********************************************************************************************************/
/*********************************************************************************************************Début du desing Respensive Ecrans ordinateurs*********************************************************************************************************/
 
	  @media (min-width: 980px)
	  {
/*********************************************************************************************************Début du body******************************************************************************************************************************************/
      body
	  {
	  font-family:Arial, Helvetica, sans-serif;/* un font texte */
	  font-size:11px; /* taille du texte */
/*	  background-color:#F8FFE6; /* Couleur de fond */
	  color:#000000; /* couleur du texte */
	  }
/*********************************************************************************************************Fin du body********************************************************************************************************************************************/
 
/*********************************************************************************************************Début du global****************************************************************************************************************************************/
      .global
	  {
	  background-color:#9900FF;
	  border:#CCCCCC 1px solid;
	  margin:10px;
	  min-height:100px;
	  }
/*********************************************************************************************************Fin du global******************************************************************************************************************************************/
     }
/*********************************************************************************************************Fin du desing Respensive Portables et tablettes*******************************************************************************************************/
 
/*********************************************************************************************************Début du desing Respensive Portable et tablette*******************************************************************************************************/
 
      @media (min-width: 768px) and (max-width: 979px)
	  {
/*********************************************************************************************************Début du body******************************************************************************************************************************************/
      body
	  {
	  font-family:Arial, Helvetica, sans-serif;/* un font texte */
	  font-size:11px; /* taille du texte */
/*	  background-color:#F8FFE6; /* Couleur de fond */
	  color:#000000; /* couleur du texte */
	  }
/*********************************************************************************************************Fin du body********************************************************************************************************************************************/
 
/*********************************************************************************************************Début du global****************************************************************************************************************************************/
      .global
	  {
	  background-color:#9900FF;
	  border:#CCCCCC 1px solid;
	  margin:10px;
	  min-height:100px;
	  }
/*********************************************************************************************************Fin du global******************************************************************************************************************************************/
     }
/*********************************************************************************************************Fin du desing Respensive Portable et tablette*********************************************************************************************************/
/*********************************************************************************************************Début du desing Respensive Portable et tablette*******************************************************************************************************/
 
      @media (max-width: 767px)
	  {
/*********************************************************************************************************Début du body******************************************************************************************************************************************/
      body
	  {
	  font-family:Arial, Helvetica, sans-serif;/* un font texte */
	  font-size:11px; /* taille du texte */
/*	  background-color:#F8FFE6; /* Couleur de fond */
	  color:#000000; /* couleur du texte */
	  }
/*********************************************************************************************************Fin du body********************************************************************************************************************************************/
 
/*********************************************************************************************************Début du global****************************************************************************************************************************************/
      .global
	  {
	  background-color:#9900FF;
	  border:#CCCCCC 1px solid;
	  margin:10px;
	  min-height:100px;
	  }
/*********************************************************************************************************Fin du global******************************************************************************************************************************************/
     }
/*********************************************************************************************************Fin du desing Respensive Portable et tablette*********************************************************************************************************/
 
/*********************************************************************************************************Début du desing Respensive Portables******************************************************************************************************************/
 
      @media (max-width: 480px)
	  {
/*********************************************************************************************************Début du body******************************************************************************************************************************************/
      body
	  {
	  font-family:Arial, Helvetica, sans-serif;/* un font texte */
	  font-size:11px; /* taille du texte */
/*	  background-color:#F8FFE6; /* Couleur de fond */
	  color:#000000; /* couleur du texte */
	  }
/*********************************************************************************************************Fin du body********************************************************************************************************************************************/
 
/*********************************************************************************************************Début du global****************************************************************************************************************************************/
      .global
	  {
	  background-color:#9900FF;
	  border:#CCCCCC 1px solid;
	  margin:10px;
	  min-height:100px;
	  }
/*********************************************************************************************************Fin du global******************************************************************************************************************************************/
     }
/*********************************************************************************************************Fin du desing Respensive Portables********************************************************************************************************************/
-->
</style></head>
 
<body>
 
 
<div class="global"></div>
</body>
</html>

là tout les media on voit bien la bordure droite

et quand on visualise 1920*1080 le cadre continue hors de mon ecrant il n'y a pas de scrool en bas pour titre info

es-ce que c'est normal ou pas
merci

peut-être il faut rajouté une autre media ?

**leroilion94** · 10/04/2016, 17h54

bonjours, je suis gentil j'attendais 1 mois pour faire un petit up

je repose ma petite question

quand je visualise avec cette outil

http://lab.maltewassermann.com/viewport-resizer/

et que je selectione et que je reclique sur Customize: 1920x1080

mon cadre dépasse de l’écran

il n'y a pas de scrool

a votre avis c'est normal ou ca vient d'un bug ou bien c'est parce que je n'ai pas mis tout les media css

merci de votre gentille

Invité · 10/04/2016, 18h28

Oui.

**leroilion94** · 10/04/2016, 18h52

oui a qu'elle question

bug ou il faut rajouter d'autres média si oui lesquelles

merci

Invité · 10/04/2016, 20h46

Non.

**leroilion94** · 10/04/2016, 21h24

ok excusez moi de vous déranger

oui non oui non oui non

je te remercie pour tes réponses a moi déchiffrez lol

**Tsilefy** · 12/04/2016, 01h22

Je ne fais que passer et je ne repasserais sans doute pas, mais outre tout problème potentiel lié à ton code, ceci empêche l'utilisation des media queries:

Code :

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

1
2
3
4
5
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Les media queries exigent un doctype html5 et un viewport. Donc si tu utilises ceci pour commencer, ça sera déjà une bonne base:

Code :

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

1
2
3
4
5
<!doctype html>
<html lang="fr-FR">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8">

Pour le reste, je t'invite à consulter les différents tutoriaux sur Developpez.net et ailleurs.

**leroilion94** · 12/04/2016, 07h41

Merci de ton aide

mis ma question c'est juste savoir pour quoi

quand je suis 1080x1920 mon cadre on le voit bien

et quand je passe 1920x1080 mon cadre est hors de mon écran sans faire de scroll en bas

Es-ce que ça vient de mon code ou ca vient de chez eux le beug

c’était juste ça ma question et rien d'autre

si vous me répondez que ca vient du site c'est parfait

et si ça vient de chez moi car j'ai peut-être oublié un média query dite moi le quelle est ça sera bon

après ça sera résolu

je ne suis pas là pour vous embête je suis là pour savoir pour quoi mon cadre dépasse de mon écran

peut-être il faut ajoute un média query avec width 2000px

a vous de me dire ?

Merci de votre aide

**JujuPomme** · 04/05/2016, 17h18

Bonjour,

Envoyé par leroilion94

et si ça vient de chez moi car j'ai peut-être oublié un média query dite moi le quelle est ça sera bon

Sinon, tu peux essayer de comprendre et de reprendre les bases. Deux mois là-dessus, à part trouver quelqu'un pour te pondre ton boulot, je ne comprends pas bien ce que tu as pu faire.

De plus, et ça c'est pour moi, si Jreaux t'as répondu de la sorte, je te conseil de relire calmement tes posts et de te mettre à notre place, lecteurs mais également âme charitable à vouloir t'aider.

Néanmoins, bon courage !

Question sur responsive

Responsive design en CSS

Discussions similaires

Partager

Partager