Adaptation site à toutes les résolutions

**mexicanino** · 10/10/2008, 12h42

bonjour

je voudrais savoir si quelqu'un peux me dire
si mon code est faux car je n'arrive pas à resoudre mon probleme
d'adaptation de mon site selon la resolution d'ecran de la personne
qui regarde mon site

merci de me conseiller

j'ai rajouter le code

Code :

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

1
2
3
4
5
div {
width: 80%;
max-width: 1000px;
min-width: 700px;
}

mais ça ne marche pas

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
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
315
316
317
318
319
<!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>RnSoul : l'empreinte du nouveau son</title>
<style type="text/css">
<!--
div {
width: 80%;
max-width: 1000px;
min-width: 700px;
}
 
.style14 {      color: #FFFFFF;
        font-weight: bold;
        font-size: 12px;
}
.style15 {      color: #000000;
        font-weight: bold;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
}
.style2 {       color: #FFFFFF;
        font-weight: bold;
        font-size: 10px;
        font-family: Arial, Helvetica, sans-serif;
}
#Layer12 {      position:absolute;
        left:133px;
        top:145px;
        width:75px;
        height:15px;
        z-index:105;
}
#Layer40 {      position:absolute;
        left:687px;
        top:556px;
        width:219px;
        height:22px;
        z-index:106;
}
body {
        background-color: #000000;
}
#Layer5 {
        position:absolute;
        left:687px;
        top:583px;
        width:397px;
        height:20px;
        z-index:107;
}
#Layer10 {
        position:absolute;
        left:687px;
        top:610px;
        width:192px;
        height:19px;
        z-index:108;
}
#Layer11 {
        position:absolute;
        left:687px;
        top:637px;
        width:179px;
        height:17px;
        z-index:109;
}
#Layer15 {
        position:absolute;
        left:687px;
        top:665px;
        width:87px;
        height:7px;
        z-index:110;
}
#Layer16 {
        position:absolute;
        left:660px;
        top:884px;
        width:26px;
        height:24px;
        z-index:111;
}
#Layer17 {
        position:absolute;
        left:640px;
        top:495px;
        width:55px;
        height:39px;
        z-index:112;
}
#Layer18 {
        position:absolute;
        left:63px;
        top:252px;
        width:161px;
        height:162px;
        z-index:113;
}
#Layer19 {
        position:absolute;
        left:268px;
        top:660px;
        width:131px;
        height:204px;
        z-index:74;
}
#Layer20 {
        position:absolute;
        left:1121px;
        top:199px;
        width:235px;
        height:11px;
        z-index:113;
}
#Layer21 {
        position:absolute;
        left:637px;
        top:744px;
        width:161px;
        height:17px;
        z-index:113;
}
#Layer22 {
        position:absolute;
        left:641px;
        top:780px;
        width:101px;
        height:89px;
        z-index:114;
}
#Layer25 {
        position:absolute;
        left:756px;
        top:780px;
        width:97px;
        height:88px;
        z-index:115;
}
#Layer26 {
        position:absolute;
        left:870px;
        top:780px;
        width:67px;
        height:63px;
        z-index:116;
}
#Layer31 {
        position:absolute;
        left:985px;
        top:780px;
        width:82px;
        height:81px;
        z-index:117;
}
#Layer32 {
        position:absolute;
        left:774px;
        top:884px;
        width:36px;
        height:20px;
        z-index:118;
}
#Layer33 {
        position:absolute;
        left:888px;
        top:884px;
        width:34px;
        height:13px;
        z-index:119;
}
#Layer34 {
        position:absolute;
        left:1002px;
        top:884px;
        width:31px;
        height:14px;
        z-index:120;
}
-->
</style>
 
</head>
 
<body>
<div id="conteneur">
	  <div id="header">header <a
<div id="Layer14" style="position:absolute; left:161px; top:-2px; width:119px; height:87px; z-index:100"><img src="http://www.rnsoul.com/logo2008.jpg" width="180" height="144"alt="" /></div>
<div id="Layer12"><img src="http://www.rnsoul.com/00tete.jpg" width="1280" height="30"alt="" /></div>
</div>
<div id="Layer13" style="position:absolute; left:1119px; top:185px; width:169px; height:123px; z-index:89"><img src="http://www.rnsoul.com/pub.jpg" width="276" height="352" /></div>
<div id="Layer8" style="position:absolute; left:627px; top:25px; width:71px; height:26px; z-index:96">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="728" height="90">
    <param name="movie" value="http://www.rnsoul.com/pub.swf" />
    <param name="quality" value="high" />
    <embed src="http://www.rnsoul.com/pub.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="728" height="90"></embed>
  </object>
</div>
 
 
 
 
	  <div id="centre">
<div id="Layer53" style="position:absolute; left:152px; top:408px; width:115px; height:15px; z-index:80"><img src="http://www.rnsoul.com/dates.jpg" width="451" height="23"alt="" /></div>
<div id="Layer24" style="position:absolute; left:151px; top:189px; width:117px; height:10px; z-index:82"><img src="http://www.rnsoul.com/actu.jpg" width="451" height="23"alt="" /></div>
<div id="Layer2" style="position:absolute; left:153px; top:628px; width:164px; height:15px; z-index:83"><img src="http://www.rnsoul.com/video.jpg" width="451" height="23"alt="" /></div>
<div id="Layer3" style="position:absolute; left:637px; top:189px; width:122px; height:18px; z-index:84; visibility: visible;"><img src="http://www.rnsoul.com/music.jpg" width="451" height="23"alt="" /></div>
<div id="Layer9" style="position:absolute; left:1154px; top:546px; width:97px; height:0px; z-index:85"><img src="http://www.rnsoul.com/sondage.jpg" width="210" height="23"alt="" /></div>
<div id="Layer46" style="position:absolute; left:636px; top:417px; width:223px; height:306px; z-index:66;">tbn f<img src="http://www.rnsoul.com/top5.jpg" width="455" height="297" /> </div>
<div id="Layer39" style="position:absolute; left:535px; top:325px; width:184px; height:213px; z-index:43; visibility: hidden;">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" name="sondage.swf?id=question1.xml" width="180" height="220" id="sondage.swf?id=question1.xml">
    <param name="movie" value="http://www.rnbnextlevel.com/sondage/sondage.swf?id=question4.xml" />
    <param name="quality" value="high" />
    <embed src="http://www.rnbnextlevel.com/sondage/sondage.swf?id=question4.xml" width="180" height="220" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="sondage.swf?id=question1.xml"></embed>
  </object>
</div>
</script>
  <embed src="http://www.radiofg.com/live/bandeaunew.swf" width="160" height="60" type="application/x-shockwave-flash" scale="ShowAll" play="true" loop="True" menu="true" wmode="Window" quality="1"></embed>
</div>
<div id="Layer4" style="position:absolute; left:49px; top:661px; width:414px; height:194px; z-index:51; visibility: hidden;">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="450" height="200">
    <param name="movie" value="http://www.portal-corporation.com/V2player/V2player_napht.swf?playlistXML=http://www.portal-corporation.com/V2player/071026192424494795678.xml" />
    <param name="quality" value="high" />
    <embed src="http://www.portal-corporation.com/V2player/V2player_napht.swf?playlistXML=http://www.portal-corporation.com/V2player/071026192424494795678.xml" width="450" height="200" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
  </object>
</div>
<div id="Layer1" style="position:absolute; left:638px; top:227px; width:454px; height:176px; z-index:90;">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="450" height="200">
    <param name="movie" value="http://www.portal-corporation.com/V2player/V2player_napht.swf?playlistXML=http://www.portal-corporation.com/V2player/080926214856117062681.xml" />
    <param name="quality" value="high" />
    <embed src="http://www.portal-corporation.com/V2player/V2player_napht.swf?playlistXML=http://www.portal-corporation.com/V2player/080926214856117062681.xml" width="450" height="200" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
  </object>
</div>
<div id="Layer48" style="position:absolute; left:1170px; top:586px; width:159px; height:181px; z-index:75">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="180" height="220">
    <param name="movie" value="../sondage/sondage.swf?id=question4.xml" />
    <param name="quality" value="high" />
    <embed src="../sondage/sondage.swf?id=question4.xml" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="180" height="220"></embed>
  </object>
</div>  
<div id="Layer40">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="400" height="20">
    <param name="movie" value="http://www.rnsoul.com/top1.swf" />
    <param name="quality" value="high" />
    <embed src="top1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="20"></embed>
  </object>
</div>
<div id="Layer5">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="400" height="20">
    <param name="movie" value="http://www.rnsoul.com/top2.swf" />
    <param name="quality" value="high" />
    <embed src="top2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="20"></embed>
  </object>
</div>
<div id="Layer10">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="400" height="20">
    <param name="movie" value="http://www.rnsoul.com/top3.swf" />
    <param name="quality" value="high" />
    <embed src="top3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="20"></embed>
  </object>
</div>
<div id="Layer17">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="70" height="35">
    <param name="movie" value="http://www.rnsoul.com/top_5.swf" />
    <param name="quality" value="high" />
    <embed src="http://www.rnsoul.com/top_5.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="70" height="35"></embed>
  </object>
<div id="Layer27" style="position:absolute; left:508px; top:163px; width:0px; height:4px; z-index:79"></div>
</div>
 
 
 
 
 
  	</div>
 
	  <div id="pied"></div>
</div>
<div id="Layer45" style="position:absolute; left:174px; top:225px; width:412px; height:126px; z-index:53">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="404" height="170">
    <param name="movie" value="http://www.rnsoul.com/hfqkjq.swf" />
    <param name="quality" value="high" />
    <embed src="http://www.rnsoul.com/hfqkjq.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="404" height="170"></embed>
  </object>
</div>
<div id="Layer23" style="position:absolute; left:169px; top:442px; width:106px; height:24px; z-index:52"><img src="http://www.rnsoul.com/0003.gif" width="418" height="176"alt="" /></div>  
<div id="Layer23" style="position:absolute; left:316px; top:593px; width:128px; height:47px; z-index:52">
  </noscript>
  <marquee class="Scroller" behavior="scroll" direction="left" width="100%" height="19" scrollamount="2" scrolldelay="0" onMouseOver="this.stop()" onMouseOut="this.start()">
  <font size="2" face="Arial, Helvetica, sans-serif"><strong><em></em></strong><font color="#00000"><strong>LES CUIZINES  26/10/07  20:00 - CHELLES ---------- IDA SKRATCH BATTLE 08/12/2007 20:00 - KARKOW, KARKOW / POLAND ---------- ADIDAS PARTY  22/11/2007 20:00 - LYON, LYON ---------- R-ASH + X-ECUTIONERS 	06/12/2007 20:00 - PARIS, Ile-de-France ----------</strong></font></font>
  </marquee>
</div>
<div id="Layer47" style="position:absolute; left:219px; top:682px; width:316px; height:155px; z-index:68;">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="330" height="160">
    <param name="movie" value="http://www.rnsoul.com/video010108.swf" />
    <param name="quality" value="high" />
    <embed src="http://www.rnsoul.com/video010108.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="330" height="160"></embed>
  </object>
</div>
<div id="Layer21"><img src="http://www.rnsoul.com/dl.jpg" width="451" height="23"alt="" /></div>
<div id="Layer22"><img src="http://www.rnsoul.com/album1.png" width="98" height="98"alt="" /></div>
<div id="Layer25"><img src="http://www.rnsoul.com/album1.png" width="98" height="98"alt="" /></div>
<div id="Layer26"><img src="http://www.rnsoul.com/album1.png" width="98" height="98"alt="" /></div>
<div id="Layer31"><img src="http://www.rnsoul.com/album1.png" width="98" height="98"alt="" /></div>
<div id="Layer32"><img src="http://www.rnsoul.com/dl.png" width="65" height="22"alt="" /></div>
<div id="Layer33"><img src="http://www.rnsoul.com/dl.png" width="65" height="22"alt="" /></div>
<div id="Layer34"><img src="http://www.rnsoul.com/dl.png" width="65" height="22"alt="" /></div>
<div id="Layer16"><img src="http://www.rnsoul.com/dl.png" width="65" height="22"alt="" /></div>
<div id="Layer30" style="position:absolute; left:618px; top:917px; width:101px; height:31px; z-index:34"><img src="http://www.rnsoul.com/btline2.gif" width="799" height="40"alt="" /></div>
<div id="Layer36" style="position:absolute; left:417px; top:157px; width:15px; height:4px; z-index:40; visibility: hidden;"><a href="../../../www.rnsoul.com"><img src="http://www.rnbnextlevel.com/DL.gif" width="14" height="14" border="0"alt="" /></a></div>
<div id="Layer37" style="position:absolute; left:344px; top:215px; width:9px; height:11px; z-index:41; visibility: hidden;"><a href="../../../www.rnsoul.com"><img src="http://www.rnbnextlevel.com/DL.gif" width="14" height="14" border="0"alt="" /></a></div>
<div id="Layer38" style="position:absolute; left:460px; top:160px; width:10px; height:5px; z-index:42; visibility: hidden;"><a href="../../../www.rnsoul.com"><img src="http://www.rnbnextlevel.com/DL.gif" width="14" height="14" border="0"alt="" /></a></div>
<div id="Layer28" style="position:absolute; left:115px; top:917px; width:84px; height:29px; z-index:32"><img src="http://www.rnsoul.com/btline2.gif" width="799" height="40"alt="" /></div>
<div id="Layer29" class="style2" style="position:absolute; left:286px; top:897px; width:300px; height:12px; z-index:33">A Propos de | RnSoul  | Nous Contacter</div>
<div id="Layer7" style="position:absolute; left:505px; top:18px; width:0px; height:90px; z-index:95"><img src="file:///E|/Recupe  disque D/wwwrnbnextlevelcom/barG.jpg" width="2" height="94"alt="" /></div>
</div>
</body>
</html>

**Erwan31** · 11/10/2008, 00h24

Bonjour,
la réponse dépendra en partie de ton interface et de ce que tu y met.
Sinon en règle générale, je te conseil de ne pas dépasser une certaine largeur d'interface utile via un max-width (correctif nécessaire pour IE6- qui n'implémente pas cette propriété)
et d'adapter sa largeur à la résolution de sortie, que ce soit via un appareil portatif (PDA, Iphone, GSM...) ou via un écran standard.

Ce qui donnerait par exemple pour le div conteneur:

Code :

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

1
2
 
div {max-width: 1100px; width: 95%;...}

Et pour simplifier tous les bloc (div ou autre) descendant devront avoir une largeur en %.
Le sujet à déjà été traité à plusieurs reprise ici même, tu peux faire une recherche.
Sinon faire une rechercher sur Design fluide dans ton moteur de recherche favoris

**Valki** · 11/10/2008, 18h11

Bonjour,

Pour ma part quand j'en arrive à des max-width, c'est que je me suis bien planté sur l'architecture du site et ça m'amène généralement à réfléchir différemment...

Pour répondre au sujet "Adaptation site à toutes les résolutions" : utiliser une architecture de width en % est la meilleure solution.

**Erwan31** · 11/10/2008, 20h11

Envoyé par Valki

Bonjour,
Pour ma part quand j'en arrive à des max-width, c'est que je me suis bien planté sur l'architecture du site et ça m'amène généralement à réfléchir différemment...

Je vois pas pourquoi. Tu peux développer?

**Valki** · 13/10/2008, 15h16

Bonjour,

1. Question d'accessibilité
- Par exemple, la possibilité d'augmenter la taille des polices de caractère pour les mal-voyants, un max-width peut rendre la lisibilité difficile et ne fonctionnera pas dans certains cas : "Anticonstitutionnellement" en 18px dans un menu avec max-width à 100px, je te laisse imaginer...

2. Question esthétique
- Je privilégie les interfaces en % pour l'esthétique, qui plus est, cela s'adapte à tout type d'ecran (cf ce forum), en veillant à ce que les contenus permettent de descendre jusqu'en 760px de large avec une bonne lisibilité.

Enfin, ce n'est que ma façon de procéder, je ne critique pas ceux qui utilisent le max-width, mais pour ma part et dans ma façon de construire une architecture, cette utilisation est en général un echec.

J'espère que c'est plus clair.

**Erwan31** · 13/10/2008, 16h19

Bonjour,

Envoyé par Valki

1. Question d'accessibilité
- Par exemple, la possibilité d'augmenter la taille des polices de caractère pour les mal-voyants, un max-width peut rendre la lisibilité difficile et ne fonctionnera pas dans certains cas : "Anticonstitutionnellement" en 18px dans un menu avec max-width à 100px, je te laisse imaginer...

Ton raisonnement est un peu particulier, 100px serait plutôt adéquate pour une valeur de min-width pour éviter justement que le le justification d'une colonne soit trop courte. Les max-width évitent au contraire d'avoir des lignes trop longues. Exemple: max-width:600px ou alors max-width: 40em (pour ne pas dépasser environ 80 caractères par ligne) sachant que le nombre de caractère par ligne ne devrait pas dépasser 80-90 pour un bon confort de lecture.

Envoyé par Valki

2. Question esthétique
- Je privilégie les interfaces en % pour l'esthétique, qui plus est, cela s'adapte à tout type d'ecran (cf ce forum), en veillant à ce que les contenus permettent de descendre jusqu'en 760px de large avec une bonne lisibilité.

C'est en effet une bonne méthode si tu vises l'accessibilité visuelle en 800X600, mais dans ce cas autant aller au bout de cette logique et prendre en compte les très petites résolutions, je veux dire essentiellement celle des appareils portatifs via une CSS handheld (fonctionne pas encore sur tous les navigateurs pour mobile), un style switcher ou tout autre méthode permettant d'afficher une version linéarisée pour mobile.

Ceci dit pour des raison d'ergonomie, il est souvent préférable de limiter la largeur totale...

**Valki** · 13/10/2008, 16h45

re,

Mon exemple prouvait simplement que le max-width n'est pas respecté dans certains cas ou le contenu "déborde", d'où un résultat d'affichage qui peut devenir douteux (surtout si certains éléments contenus sont en float).
L'utilisation de % règle ce problème (pour les float du moins) et oblige à réfléchir différemment l'architecture de l'interface.

Après je continue de penser, que fixer un max-width pour la largeur d'un site ne sert strictement à rien, surtout quand on voit le nombre de résolutions possibles et les ecran 16/9ème qui debarquent à tour de bras. Imagine une largeur en 2048 avec un maxwidth de 800 ou 1024, perte d'espace, incofort visuel et j'en passe... Libre à chacun de les utiliser ou non, mais pour moi une largeur globale de site en % est un gage d'accessibilité et de professionnalisme.

Enfin pour les portables ou autres "petits ecrans", je pense qu'une interface différente est nécessaire et on communiquera plus aisément (voir redirigera) sur une adresse adaptée exemple http://mobiles.monsite.com. Une fois encore les % permettront aisément de s'adapter aux interfaces diverses et variées, alors que les max-width et surtout min-width risquent fort d'entrainer des affichages désastreux.

Pour terminer, le sujet est vaste "% VS px fixés", libre à chacun de faire ce que bon lui semble, je donnais juste mes retours d'expérience et une partie de ma technique de travail largement éprouvée.

**Erwan31** · 13/10/2008, 17h17

Envoyé par Valki

Après je continue de penser, que fixer un max-width pour la largeur d'un site ne sert strictement à rien, surtout quand on voit le nombre de résolutions possibles et les ecran 16/9ème qui debarquent à tour de bras. Imagine une largeur en 2048 avec un maxwidth de 800 ou 1024, perte d'espace, incofort visuel et j'en passe... Libre à chacun de les utiliser ou non, mais pour moi une largeur globale de site en % est un gage d'accessibilité et de professionnalisme.

Alors on va dire qu'on est pas d'accord

Une interface utile trop large (comme des lignes de texte trop longues ça c'est certain) peut provoquer à la longue une fatigue visuelle due à un parcours de l'œil trop important. Celui-ci a besoin de scanner rapidement les contenus dans une première lecture.
N'oublions pas que le mode de visualisation d'une page d'accueil n'est pas identique à un document imprimé.
Par ailleurs la surcharge d'information ou les problèmes esthétiques qui en découlent ne sont pas exclus, mais les avis divergent encore là-dessus...
Ceci dit je n'en fais pas une généralité, le choix à faire dépendra aussi du contenu, du type de site, sa stratégie de com etc.

Envoyé par Valki

Une fois encore les % permettront aisément de s'adapter aux interfaces diverses et variées, alors que les max-width et surtout min-width risquent fort d'entrainer des affichages désastreux.

Un min/max-width n'empêche pas l'utilisation des %, ça va avec au contraire
mais le min-width n'est en effet pas recommandé pour la version mobile.
Il est évident que ces 2 propriétés sont à utiliser avec parcimonie, pour ma part je l'utilise souvent uniquement pour la largeur totale.

**Valki** · 13/10/2008, 17h37

Une interface utile trop large (...) peut provoquer à la longue une fatigue visuelle due à un parcours de l'œil trop important

C'est à Samsung et HP qu'il faut le dire

**Erwan31** · 13/10/2008, 18h01

Envoyé par Valki

C'est à Samsung et HP qu'il faut le dire

Ok je les appelle

Plus sérieusement rien n'oblige à remplir toute la largeur de l'écran, d'ailleurs ces tailles ont été prévu pour d'autres usages : jeux video, films et travail d'infographie.

**Valki** · 13/10/2008, 18h52

Oui mais tu sais bien qu'à terme tous ces applicatifs se feront en ligne via le navigateur

**Erwan31** · 13/10/2008, 20h14

Envoyé par Valki

Oui mais tu sais bien qu'à terme tous ces applicatifs se feront en ligne via le navigateur

D'accord mais ça change quoi?

**Valki** · 13/10/2008, 23h23

Imagine Photoshop, un jeux vidéo, un film, bloqué en 800px x 600px sur un ecran en paramétré à 1024px de large.

Etant donné que ce qui se passe dans le navigateur s'approche de + en + des logiciels dédiés, on comprendra que le 100% de large sans restrictions (min-width et max-width) est de mise, cqfd

**Erwan31** · 14/10/2008, 02h06

Envoyé par Valki

Imagine Photoshop, un jeux vidéo, un film, bloqué en 800px x 600px sur un ecran en paramétré à 1024px de large.

Quand je parlais de limiter la largeur de l'interface, cela ne concernait que celle des sites web traditionnels et non ces types de contenus.

Adaptation site à toutes les résolutions

CSS

Discussions similaires

Partager

Partager