[HTML] Ma page HTML incorrecte sur un autre PC

Bonjour,

Je viens de creer une presentation sous forme de page HTML que j'ai gravée sur un CD autorun . seulement j'ai rencontre un problème : ma page d'accueil de ma présentation gravée s'affiche incorrectement sur un autre PC type desktop, alors que sur mon PC laptop tout est bien : la partie "corps" est affichée en dessous de la partie "menu" de la page d'accueil.

Je me demande comment faire pour résoudre ce problème ??

Merci

Bonjour,
peut-être que tu n'as pas regardé la page sur le même navigateur ou sur la même version de navigateur, d'où la différence d'affichage.

Bonsoir,

Pour information les deux PC sont munis de la meme version de systeme 'exploitation XP SP2 et meme navigateur IE

Au paravant j'avais comme configuration dans le CSS, pour la taille en largeur et hauteur des parties constituant le body en px. on m'a conseille de les mettre en pourcentage . ce qui est fait et ce soir je vais refaire le test.

Merci

Bonsoir,

Citation:

Envoyé par atlass218

et meme navigateur IE

Sauf qu'il y a plusieurs versions de IE : 5, 5.5, 6, 7
Le rendu peut être différent selon les versions.

Citation:

Envoyé par atlass218

Au paravant j'avais comme configuration dans le CSS, pour la taille en largeur et hauteur des parties constituant le body en px. on m'a conseille de les mettre en pourcentage . ce qui est fait et ce soir je vais refaire le test.

Passer la largeur du conteneur en % n'est pas suffisant si tu 'as pas pensé à le faire sur toutes les largeurs de blocs.

> Vérifier bien entendu si la résolution de l'écran (> largeur du viewport) n'est pas susceptible de pousser un bloc vers le bas (différences d'affichage éventuels même avec des largeur en px)
> Vérifier que le zoom texte est normal (affichage > taille du texte > moyenne)
> Vérifier que le zoom graphique (si IE7+) est à 100% (en bas à droite dans la barre des tâches
> Vérifier que les options d'accessibilité (outils > option internet > accessibilité) soient identiques (tout décocher)
> Vérifier qu'une police a été spécifié pour le document dans la CSS.
> Enfin c'est peu probable mais vérifier que la résolution des polices de l'OS est bien fixée à 96ppp (et non à 120ppp) sur les 2 OS

Bonjour,

Tu peux aussi donner le code HTML et CSS de la page.
Ça nous permettrait de vérifier que du float, par exemple, est correctement fabriqué pour des résolutions différentes.
As-tu regardé ta page en changeant les dimensions de la fenêtre de ton navigateur ?

-

Bonjour

Apres avoir change les unites des dimensions de la largeur et de la hauteur des div du mode "px" au mode "pourcentage %". La structure du design s'est ameliore sur les autres PC, mais il reste que le texte au niveau de la partie du corps depasse la largeur de l'ecran et on a un texte non complet . par contre, sur mon PC j'ai pas eu de probleme.

Voici XTML et du CSS comme il a ete demande par GihefBey

XHTML:

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>PREMIER ESSAI</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Essai" href="intro.css" />
   </head>
   <body>
   <div id="en_tete">
  <img src= "essai.gif"/>
</div>
 
 
   <div id="menu"> <!-- Cadre englobant tous les sous-menus (en bleu marine sur le schéma) -->
 
 
 <div class="element_menu">
				<h3>RADIONAV</h3>
				<ul>
						<li><a href="INTERRACTIF/radionav/vor.html">VOR</a></li><br/>
						<br/>
						<li><a href="radionav/ILS MEDV/ils.html">ILS</a></li><br/>
						<br/>
						<li><a href="radionav/dme.html">DME</a></li>
				</ul>
		</div>
 
		<div class="element_menu">
				<h3>RADIOCOM</h3> <!-- Titre du sous-menu -->
				<ul>
						<li><a href="radiocom/emetteur.html">EMETTEURS/RECEPTEURS</a></li> <br/>
						<br/>
						<li><a href="radiocom/chaine radio/chaine.html">CHAINE_RADIO</a></li><br/>
						<br/>
 
 
						<li><a href="radiocom/chargeur.html">CHARGEUR_DE_BATTERIE</a></li><br/>
						<br/>
						<li><a href="radiocom/onduleur.html">ONDULEUR</a></li><br/>
 
				</ul>
		</div>
 
 
		<div class="element_menu">
				<h3>DIVERS</h3> <!-- Titre du sous-menu -->
				<ul>
				<li><a href="MAINTENANCE/maintenance.html">MAINTENANCE PREVENTIVE</a></li><br/>
				<br/>
				<li><a href="MAINTENANCE/maintenance.html">MAINTENANCE CORRECTIVE</a></li><br/>
				<br/>
 
 
				<li><a href="INFORMATIQUE/infor.html">INFORMATIQUE</a></li><br/>
				<br/>
				<li><a href="telephonie/telephn.html">TELEPHONIE</a></li>
 
 
				</ul>
		 </div>
 
 
	</div> 
 
	<div id="corps">
 
 
   <p>
   Les techniciens assurent le bon fonctionnement des équipements de la navigation , de communication. En plus de la coordination effectuée 
   le service de visualisation, service electrique, etc... Ceci est réalisé d'une part, par  les contrôles quotidiens  effectués de façon régulière suivant 
   un planning de maintenance préventive préétabli par la direction. d'autre part, par la participation effective  
 des equipements de la naviagtion  durant l'operation de maintenance de controle en vol.<br/>
 
   Le souci des techniciens  est donc de garantir un fonctionnement correct des équipements pour assurer 
    le service qualité souhaités par les compagnies.
 
   </p>
   <p>
   Le service <strong>"Radionavigation"</strong> assure la maintenance des équipements suivants:<br/>
   <dl>
   <dt>* pour la <em>"Radionavigation"</em>:</dt>
   <br/>
   <br/>
   <dd><strong>ILS , DME ,  VOR, RADIOBALISE .</strong></dd>
   <br/>
   <br/>
   <dt>* pour la <em>"Radiocommunication"</em>:</dt>
   <br/>
   <br/>
   <dd><strong>Chaine Radio , Panneau D'état, Enregistreur,Chargeur de batterie, Onduleur.</strong></dd>
 
   </dl>
   En plus, les electroniciens de la securite aerienne sont amenes a effectuer une coordination avec le service <em>"RADAR"</em>, et 
   le service <em>"BALISAGE"</em> pour assurer le bon fonctionnement des équipements liés au <em>"Radar"</em> et au <em>"Balisage"</em>.</p> 
 
 
</div>
 
 
 
 
 
<div id="pied_de_page">
 
<p><img src="13.gif" class="imageflottante13" alt="Image flottante" /></p>
<p><img src="image.gif" class="imageflottanteimage" alt="Image flottante" /></p>
 
   <h3>CREATEUR ET EDITEUR</h3>
 
</div>
 
</body>
</html>

CSS:

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
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
body
{
   width: 100%;
   margin: auto; 
   margin-top: 10px; 
   margin-bottom: 10px;    
   background-color: rgb(193,255,255);
 
}
 
#en_tete
{
   width: 750px;
   height: 300px;
   margin-top: 6px;
   margin-bottom: 6px;
   text-align: center;
 
   padding-top: 15px;
 
   margin-left: 220px;
}
 
/* Le menu */
 
#menu
{
   float: left; 
   width: 230px; 
 margin-left: 40px; 
margin-top: 3px; 
}
 
.element_menu
{
   background-color: rgb(255,210,255);
 
   margin-bottom: 0px;  
padding-bottom:5px;
padding-top:10px;
 
}
 
 
.element_menu h3 
{    
 
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
border: 2px solid;
 
}
 
.element_menu ul
{
 
   padding: 0px; 
   padding-left: 20px; 
   margin: 0px; 
   margin-bottom: 10px; 
}
 
.element_menu a 
{
   color: blue;
}
 
.element_menu a:hover 
{
   background-color: red;
   color: yellow;
}
 
/* Le corps de la page */
 
#corps
{
   width: 800px;
   margin-left: 300px; 
   margin-bottom: 0px; 
   padding: 20px; 
   color: black;
   background-color: rgb(210,210,210);  
 
   margin-top: 10px;
}
 
#corps h1 
{
   color: blue;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
 
#corps h2 
{
   height: 30px;
   padding-left: 30px;
   color: red;
   text-align: left;
text-decoration: underline;
 
}
#corps h3 
{
   height: 20px;
   width: 400px;
   padding-left: 30px;
   color: marron;
   text-align: left;
text-decoration: underline;
}
 
 
p:first-letter 
{
   float: left; 
   font-size: 2em; 
   font-family: Arial, Georgia, "Times New Roman", Times, serif;
   font-weight: bold; 
   margin-right: 5px; 
color: blue
 
}
 
p
{
 
 text-align: justify;
 
}
 
em
{
color: green;
font-weight: bold;
 
}
 
 
#pied_de_page 
{
 
  width: 840px;
height: 135px;
 font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
padding-top: 30px;
   text-align: center;
   color: black;
background-color: lime; 
margin-left: 210px;
margin-bottom: 20px;
padding-bottom:20px;
margin-top: 0px;
 
 
}
.imageflottante13
{
   float: left;
}
 
.imageflottanteimage
{
   float: right;
}

merci

Je ne peux pas tester ces défauts, mais essaye autrement.

Place l'ensemble du contenu de ta page dans un bloc auquel tu donneras une largeur. Comme ça, ce qu'il contiendra n'aura plus besoin de largeurs (sauf le menu).
Code:

1 2 3 4 5 6 7 8 <body> <div id="conteneur"> <div id="en_tete"> ... le reste ... </div> </div>  </body>
Modifie le #corps. Enlève-lui sa width.

-