[HTML 5] Adaptation du site aux résolutions

Adaptation du site aux résolutions

Bonjour à tous,

Je débute en HTML, actuellement je crée un petit site pour m'amuser rien de bien exceptionnel 8-)
J’utilise pour m'aider BlueGriffon.
Voilà mon problème :
Par exemple j'ai une page qui fait 1548px sur 758px vu que c'est la taille de l'écran de mon ordinateur sur le navigateur
le rendu est parfait mais dès que je swich sur mon autre écran 26 pouces plus rien n'est centré tout est décalé
en gros ca ne ressemble plus a rien ! :aie:
Comment faire pour centrer tous ça ? en gros l'étendre ? :calim2:

Merci d'avance !

Bonjour,

Un peu de code nous aiderait à t'aider.

Si tu as défini les tailles de tes éléments avec des valeurs fixes, le comportement est normal.
Essaie d'appliquer des valeurs relatives (pourcentage par exemple).

Voilà le code d'une de mes pages ...:weird: J'espère que ça peut aider à résoudre le problème !
Merci de ta réponse rapide ;)

Code:

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
<!DOCTYPE html>
<html style="                                                    height: 383px;">
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
    <link href="favicon.png" type="image/png" rel="icon">
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
    <link href="favicon.png" type="image/png" rel="shortcut icon">
    <title> Chat de •GOLISTE•</title>
    <title>chat</title>
    <style type="text/css">
#fond {  
  background-color: black;
}
 
#deede {  
  background-color: black;  
  background-image: url("GIF/FOND22.jpg");
}
 
</style></head>
  <body style="                               margin-left: 7px; width: 1548px; height: 758px;"
 
    id="deede">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp;&nbsp; &nbsp; &nbsp; <iframe src="http://www.i-tchat.com/shoutbox/shoutbox.php?idShoutbox=123479"
 
      allowtransparency="true" frameborder="0" height="353" width="233">Votre
      navigateur semble incompatible, essayez d'ouvrir le
      &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a
      href="http://www.i-tchat.com" title="tchat"
      onClick="window.open(this.href+'?123479');"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;tchat&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;,
      ou rencontrez le webmaster pour plus d'informations.</iframe>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <noscript></noscript><a title="Page précédente"
 
      href="index.html"><img style="width: 45px; height: 45px;" src="Icone/FlecheRouge3%20copie.png"></a><noscript>                           </noscript><noscript>                                                                                                                                     </noscript>
    <title>Empêcher le clic droit</title>
    <script src="http://counter3.allfreecounter.com/private/countertab.js?c=811d2425ed23d683d0d1916a566f3ff5"
 
<script="" type="text/javascript">
 
      </script> <object type="application/x-shockwave-flash" data="dewplayer-mini.swf"
 
      id="dewplayer" name="dewplayer" height="30" width="200"> <param name="wmode"
 
        value="transparent"><param name="movie" value="dewplayer-mini.swf"> <param
 
        name="flashvars" value="mp3=pornstar.mp3&amp;autostart=1&amp;autoreplay=1&amp;showtime=1&amp;volume=5">
      <br>
    </object>
    <script type="text/javascript">
    //<!--
        document.oncontextmenu = new Function("return false");
    //-->
    </script>
  </body>
</html>

Ouch, c'est moche tous ces  
Code:

1 2 <body style="margin-left: 7px; width: 1548px; height: 758px;" id="deede">
Donc, essaie d'utiliser des valeurs en pourcentage pour commencer.

Hum... value="mp3=pornstar.mp3 :ptdr:

EDIT : <meta content="text/html; charset=windows-1252" http-equiv="content-type">ça existe encore windows-1252 ? Ouch !
Je te conseille d'utiliser un autre encodage de caractères, genre UTF-8 (voir là : http://j-willette.developpez.com/tut...-site-en-utf8/)