Changement de Dimension des images en fonction de l'écran

**djamess** · 25/02/2009, 11h48

Bonjour à vous!

Je développe mon site web sur un ordi Portable d'un écran de 15' et d'une résolution de couleurs vraies 32Bits 1024X768.

Je crée une feuille de style afin de placer un fond d'écran sur toute ma page et des images judicieusement positionnées et de bonnes dimensions.

Cependant, lorsque je passe sur d'autres ordinateurs avec d'autres résolutions et d'autres écrans alors là c'est le désordre total.

Mon fond d'écran prend bien toute la superficie de l'écran, pour ça c'est très bien.

Cependant pour toutes mes images qui constituent mon logo ou d'autres éléments de ma page c'est complètement redimensionné de façon non conforme à la page de mon site.

Comment faut-il faire pour garder une homogénité dans l'apparence de la page web lorsque l'on passe d'un écran à un autre avec des résolutions différentes ??

Voici le code de ma feuille de style :

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
 
	body	{
			padding: 0;
    			margin: 0;
    			width: 100%;
    			height: 100%;
 
	  }
	LI		{font: 13px Verdana;}
	B		{font: 14px Verdana; font-weight: bold;}
	A		{
			  font:12px Verdana;
			  font-weight: bold;
			  color=black;
			  text-decoration: none;
			}
	H1		{font: 16px Arial;font-weight: bold;color=black;}
	H2		{font: 14px Arial;font-weight: bold;color=black;}
 
 
	img#fond { /* Image de fond*/
	  position: absolute;
      display : block;
      width : 110%;
      height : 125%;
      }
 
	img#LogoS { /* Image dans la page qui doit avoir une dimension coérente d'un écran à un autre */
	  position: absolute;
      display : block;
      width : 12%;
      height : 25%;
	  top : 15;
      left : 60px;
 
      }
 
	  img#LogoGBranche { /* Image dans la page qui doit avoir une dimension coérente d'un écran à un autre*/
	  position: absolute;
      display : block;
      width : 70px;
      height : 197px;
	  top : 159px;
      left : 27px;
      }
 
	  img#LogoOUAV { /* Image dans la page qui doit avoir une dimension coérente d'un écran à un autre*/
	  position: absolute;
      display : block;
      width : 100px;
      height : 199px;
	  top : 165px;
      left : 65px;
      }
 
	  img#LogoOUAH { /* Image dans la page qui doit avoir une dimension coérente d'un écran à un autre*/
	  position: absolute;
      display : block;
      width : 20%;
      height : 15%;
	  top : 90px;
      left : 152px;
      }
 
	  img#LogoPBranche { /* Image dans la page qui doit avoir une dimension coérente d'un écran à un autre*/
	  position: absolute;
      display : block;
      width : 8%;
      height : 17%;
	  top : 167px;
      left : 146px;
      }
 
	  img#Tresse {/* Image dans la page qui doit avoir une dimension coérente d'un écran à un autre*/
	position: relative;
	display : block;
	width : 55%;
	height : 12%;
	top : 160;
	left : 350px;
	z-index: 85;
      }

**Ethyde** · 25/02/2009, 12h07

Bonjour,

Pourrais tu fournir le code html qui vas avec la css ?

Sinon à vue de nez je dirais que tu as trop de positionnement absolu et qu'ils ne sont pas gérer correctement (pas de contexte de positionnement).

**djamess** · 25/02/2009, 12h15

Je rajoute une information non négligeable :

Lorsque je visualise ma page sur un écran de 22' avec une résolution de
1280 X 1024, la page web est désordonnée.

Par contre lorsque je change la résolution à 1024X768 sur cet même écran tout est remis dans l'ordre.

La plage de résolution avec cette ordinateur est de :

800 X 600 à 1280 X 1024.

Complément d'information au message du dessus initial.

Merci de votre aide

**djamess** · 25/02/2009, 12h27

Voici le code qui concerne les images que je veux avoir sur ma page :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<link href="stylesheet.css" rel="stylesheet" type="text/css">
 
<body>
<p><img id="fond" src="image1.gif" alt="l'image de fond" title="l'image de fond" />
<img id="LogoS" src="image2.gif" alt="S de SOUASOUA" title="S" /> 
<img id="LogoGBranche" src="image3.gif" alt="G" title="G" /> 
<img id="LogoOUAV" src="image4.gif" alt="O" title="OU" /> 
<img id="LogoOUAH" src="image5.gif" alt="O" title="O" /> 
<img id="LogoPBranche" src="image6.gif" alt="P" title="P" /> 
<img id="Tresse" src="image7.gif" alt="T" title="T" /> 
<img id="BSoua" src="image8.gif" alt="S" title="S" /> 
 
</body>
</html>

**ledisciple** · 25/02/2009, 12h54

Envoyé par djamess

Bonjour à vous!

Je développe mon site web sur un ordi Portable d'un écran de 15' et d'une résolution de couleurs vraies 32Bits 1024X768.

Je crée une feuille de style afin de placer un fond d'écran sur toute ma page et des images judicieusement positionnées et de bonnes dimensions.

Cependant, lorsque je passe sur d'autres ordinateurs avec d'autres résolutions et d'autres écrans alors là c'est le désordre total.

Mon fond d'écran prend bien toute la superficie de l'écran, pour ça c'est très bien.

Cependant pour toutes mes images qui constituent mon logo ou d'autres éléments de ma page c'est complètement redimensionné de façon non conforme à la page de mon site.

Comment faut-il faire pour garder une homogénité dans l'apparence de la page web lorsque l'on passe d'un écran à un autre avec des résolutions différentes ??

Voici le code de ma feuille de style :

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
 
	body	{
			padding: 0;
    			margin: 0;
    			width: 100%;
    			height: 100%;
 
	  }
	LI		{font: 13px Verdana;}
	B		{font: 14px Verdana; font-weight: bold;}
	A		{
			  font:12px Verdana;
			  font-weight: bold;
			  color=black;
			  text-decoration: none;
			}
	H1		{font: 16px Arial;font-weight: bold;color=black;}
	H2		{font: 14px Arial;font-weight: bold;color=black;}
 
 
	img#fond { /* Image de fond*/
	  position: absolute;
      display : block;
      width : 110%;
      height : 125%;
      }
 
	img#LogoS { /* Image dans la page qui doit avoir une dimension coérente d'un écran à un autre */
	  position: absolute;
      display : block;
      width : 12%;
      height : 25%;
	  top : 15;
      left : 60px;
 
      }
 
	  img#LogoGBranche { /* Image dans la page qui doit avoir une dimension coérente d'un écran à un autre*/
	  position: absolute;
      display : block;
      width : 70px;
      height : 197px;
	  top : 159px;
      left : 27px;
      }
 
	  img#LogoOUAV { /* Image dans la page qui doit avoir une dimension coérente d'un écran à un autre*/
	  position: absolute;
      display : block;
      width : 100px;
      height : 199px;
	  top : 165px;
      left : 65px;
      }
 
	  img#LogoOUAH { /* Image dans la page qui doit avoir une dimension coérente d'un écran à un autre*/
	  position: absolute;
      display : block;
      width : 20%;
      height : 15%;
	  top : 90px;
      left : 152px;
      }
 
	  img#LogoPBranche { /* Image dans la page qui doit avoir une dimension coérente d'un écran à un autre*/
	  position: absolute;
      display : block;
      width : 8%;
      height : 17%;
	  top : 167px;
      left : 146px;
      }
 
	  img#Tresse {/* Image dans la page qui doit avoir une dimension coérente d'un écran à un autre*/
	position: relative;
	display : block;
	width : 55%;
	height : 12%;
	top : 160;
	left : 350px;
	z-index: 85;
      }

Je ne suis pas sur de l'explication, mais je crois que ça viens de tes positionnement en px. Si la résolution de ton écran est différente le rendu sera différent.(car il n'aura pas le même nombre de pixel sur une ligne) Si tu positionnes tes images en pourcentages, elles s'adapteront automatiquement au l'écran.

J'espère que mon commentaire pourra aider