Design écran différent entre Apache Eclipse et Apache Tomcat (Version 9)

**thtioxine** · 31/03/2022, 10h18

Bonjour
Je développe un site en local (Java , Eclipse). Sur ce site, les pages ont un rendu correcte
Nom : image.png
Affichages : 111
Taille : 28,9 Ko

Lorsque je livre ce site sur le serveur de production (qui n'est pas le même que mon serveur local), le rendu des pages est incorrecte.
Nom : image (1).png
Affichages : 107
Taille : 32,8 Ko

Nom : image (1).png
Affichages : 107
Taille : 32,8 Ko

Je pense, peut être à tort, qu'il y a un paramètre à modifier sur le serveur de prod ais je ne sais pas lequel.

Serveur local : Apache Tomcat 9.0.8, Java 1.8
Serveur Prod : Config identique

Les pages ont leur données de taille en pourcentage et non en pixels.

Cordialement

**NoSmoking** · 01/04/2022, 10h59

Bonjour,
ce n'est pas le serveur qui est responsable de l'affichage de ta page mais le moteur de rendu du navigateur.

Le serveur est par contre responsable du code de ta page via la version du langage utilisé.

Regarde donc le code HTML généré, CTRL +U dans la navigateur, vérifie que tu n'as pas de souci avec la casse pour les noms de fichiers et que les chemins d'accès soit correctement indiqués.

**thtioxine** · 04/04/2022, 23h22

Bonjour
Désolé mais j'étais absent.
Je ferais ça demain.
Merci de ton aide.
Cordialement

**thtioxine** · 05/04/2022, 10h42

Bonjour
La taille de l'input n'est pas la même alors que les CSS sont totalement identique.
J'ai inspecter l'élément par la trousse à outil de chrome et je ne vois absolument aucune différence entre les 2 écrans hors ce pb.
Serai t'il possible que ce soit un pb de police de caractère ?
Voici la page LOCAL
Nom : local.png
Affichages : 72
Taille : 68,2 Ko

Nom : local.png
Affichages : 72
Taille : 68,2 Ko

A partir du Serveur Distant
Nom : distant.png
Affichages : 75
Taille : 85,7 Ko

Et le code source

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta http-equiv="Pragma" content="no-cache" />
	<title>LOGIN</title>
	<script type="text/javascript" src="/webSIHEL/jslib/websihel.js"></script>
	<link href="/webSIHEL/css/websihel.css" rel="stylesheet" type="text/css" />
	<script>
        function init()
        {
                loginForm.nom.focus();
        }
        
        function soumet() {
                if (myTrim(loginForm.nom.value) != "" && myTrim(loginForm.password.value) != "") {
                        document.getElementById("soumis").style.display="";
                        loginForm.submit();
                        return true;
                }
                else  {
                        alert("Nom et/ou password obligatoire");
                        loginForm.nom.focus();
                        return false;
                }
        }
</script>
 
</head>
<body onload = "init();">
	<center>
	<h3>Login</h3>
	<div id="soumis" style="display:none">Soumission effectuée....Attendez</div>
	<div id="formulaire" style="width:15%">
 
		<form id="loginForm" name="loginForm" action="/webSIHEL/login/login;jsessionid=F1344949C600B23EAABEA7EEFF0CDEA6" method="post" onsubmit="return soumet();">
			<table>
				<tr>
					<td class="label">Nom</td>
					<td colspan="2"><select id="nom" name="nom">
						<option value="">Faites un choix</option>
 
							<option value="Administrateur">Administrateur</option>
 
							<option value="Consultant">Consultant</option>
 
							<option value="Gestionnaire">Gestionnaire</option>
 
					</select></td>
				</tr>
				<tr>
					<td class="label">Password</td>
					<td colspan="2"><input id="password" name="password" type="password" value=""/></td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td><input id="button" type="submit" value="Soumettre"/></td>
					<td><input id="button" type="reset" value="Annuler"/></td>
				</tr>
			</table>
		</form>
 
	</div>
	</center>
</body>
</html>

Cordialement

**NoSmoking** · 05/04/2022, 16h59

Plusieurs choses sont à signaler.

• Il apparaît effectivement que les <input type="password"> soit récalcitrant !

• Il nous manquerait le CSS appliqué et surtout celui de la <table>.

• Soyons « moderne », ton entête de fichier devrait ressembler à cela

Code html :

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

1
2
3
4
5
6
7
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ici le titre</title>
<!-- la suite du head -->

• Les balises <center> sont obsolètes en HTML5, il faut utiliser le CSS.

• Difficile d'admettre que <div id="formulaire" style="width:15%"> soit pertinent, autant ne rien mettre.

• Les IDs doivent être unique.

• Ta construction, sous forme de <table> n'est pas des plus opportunes, des méthodes plus judicieuses existent comme :

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
<form action="login.php" method="POST">
  <h2>Login</h2>
  <p>
    <label for="nom">Nom</label>
    <select id="nom" name="nom">
      <option value="">Faites un choix</option>
      <option value="Administrateur">Administrateur</option>
      <option value="Consultant">Consultant</option>
      <option value="Gestionnaire">Gestionnaire</option>
    </select>
  </p>
  <p>
    <label for="password">Password</label>
    <input id="password" type="password" name="password">
  </p>
  <p>
    <input id="send" type="submit" value="Soumettre">
    <input id="reset" type="reset" value="Annuler">
  </p>
</form>

... avec ce simple CSS :

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
form {
  width: 20em;
  margin: auto;
  padding: 0 1em;
  border: 1px solid #CCC;
}
form h2 {
  text-align: center;
}
form p {
  display: flex;
  justify-content: space-around;
}
form label {
  width: 33%;
}
form input,
form select {
  width: 60%;
  font: inherit;
}
form p:last-child input {
  width: 45%;
}

... c'est bien sûr un exemple à affiner.

**thtioxine** · 07/04/2022, 17h43

Bonjour
Bon, encore en retard pour la réponse.
Je vais faire les modifs mais je crois que tu as mis le doigt sur le pb. Les id ne sont pas uniques.
Je vais m'empresser de corriger ceci
En tout cas merci de ton aide
Cordialement

**thtioxine** · 12/04/2022, 10h42

Bonjour
Modifs effectuées suivant tes recommendations.
Résultat nickel, les 2 écrans sont identiques et propres.
LOCAL
Nom : local.png
Affichages : 53
Taille : 3,3 Ko

Nom : local.png
Affichages : 53
Taille : 3,3 Ko

DISTANT
Nom : distant.png
Affichages : 53
Taille : 4,8 Ko

Merci encore , je vais faire le reste des pages tel que tu le décris

A+

Design écran différent entre Apache Eclipse et Apache Tomcat (Version 9)

Apache

Discussions similaires

Partager

Partager