Espace indésirable haut de page impossible à supprimer depuis la modif utf-8

**RinaBK** · 29/01/2021, 06h05

Bonjour tout le monde,

J'avais créé mon site dans un encodage pas très pratique et j'ai modifié l'encodage de ma page pour la mettre en UTF-8. Tout fonctionne à merveille, sauf que j'ai à présent un espace sur le haut de ma page et j'ai tout essayé, impossible de le supprimer. Voici mon fichier 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
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
 
body,td,th,input,textarea,select {
	font-family: "Verdana", sans-serif;
	font-size: 14px;
	color: #000000;
}
body {
	background-color: #FFFFFF;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
a:link, a:visited {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #A8022C;
	text-decoration: none;
}
a:active {
	color: #FFFF4F;
	text-decoration: none;
}
h1 {
	font-size: 25px;
	text-decoration: underline;
	margin: 15px 0px 10px 0px;
}
 
h2 {
	font-size: 20px;
	text-decoration: underline;
	margin: 15px 0px 10px 0px;
}
h3 {
	font-size: 17px;
	text-decoration: underline;
	margin: 15px 0px 10px 0px;
}
.error {
	font-weight: bold;
	color: #A8022C;
}
.valide {
	font-weight: bold;
	color: #033D21;
}
.relode:hover {
	background-color: #CCCCCC;
}
.menuT {
	font-weight: bold;
	padding: 10px 0px 2px 0px;
}
.menu1 {
	text-indent: 10px;
}

Bien que j'ai réglé le padding et le margin à 0px et bien que ma page HTML/PHP trouve mon fichier CSS, j'ai ce maudis espace qui ne veut pas partir... Voici un aperçu en image :

Nom : printscreen1.jpg
Affichages : 334
Taille : 68,5 Ko

Nom : printscreen1.jpg
Affichages : 334
Taille : 68,5 Ko

On voir bien l'espace en blanc entre le départ de mon tableau (noir) et de la fenêtre de mon navigateur. Normalement, le cadre noir devrait coller à la fenêtre du haut de mon navigateur.
Voici ma page HTML qui montre bien qu'il n'y a rien entre la balise <body> et <table> :

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
<?php
define('MAJ','29.01.2021 05:59:22');
 
 
//      Inclusions des fichiers principaux
define('INCLUDES_FILES',array('header'=>'header.php',
                                                                                                        'footer'=>'footer.php',
                                                                                                        'variables'=>'variables.php',
                                                                                                        'fonctions'=>'fonctions.php'
                                                                                                        ));
 
foreach(INCLUDES_FILES as $index => $files) {
        if (!file_exists('includes/'.$files)) { header('Location: alerte.php?warning='.$files); }
        if (($index == 'variables') || ($index == 'fonctions')) { include('includes/'.$files); }
}
?>
<!DOCTYPE lang="fr-CH">
<html>
<head>
	<title>Administrations</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="pragma" content="no-cache" />
	<link rel="stylesheet" href="images/designs/styles.css" />
	<script src="https://kit.fontawesome.com/2e9b34a81e.js"></script>
</head>
 
<body>
<table border="0" width="100%" cellpadding="15" cellspacing="0">
	<tr><td colspan="2" align="left" valign="top" bgcolor="#000000"><div style="color: #FFFFFF; font-weight: bold; font-size: 37px;">ADMINISTRATION de Gwanda.ch</div></td></tr>
	<tr>
		<td width="150" align="left" valign="top" bgcolor="#CCCCCC">
 
 
 
			<div align="left" class="menuT"><a href="index.php" target="_parent"><nobr>Administration</nobr></a></div>
			<div align="left" class="menu1"><a href="infoPHP.php" target="_blank"><nobr>PHP Infos</nobr></a></div>
 
			<div align="left" class="menuT"><a href="sites.php" target="_parent"><nobr>Gestion des Sites</nobr></a></div>
			<div align="left" class="menu1"><a href="config.php" target="_parent"><nobr>Configurations</nobr></a></div>
			<div align="left" class="menu1"><a href="news.php" target="_parent"><nobr>News</nobr></a></div>
			<div align="left" class="menu1"><a href="faq.php" target="_parent"><nobr>Support/FAQ</nobr></a></div>
			<div align="left" class="menu1"><a href="compteurs.php" target="_parent"><nobr>Compteurs Visites</nobr></a></div>
			<div align="left" class="menu1"><a href="simleys.php" target="_parent"><nobr>Simleys</nobr></a></div>
 
			<div align="left" class="menuT"><a href="gwanda.php" target="_parent"><nobr>Gwanda</nobr></a></div>
			<div align="left" class="menu1"><a href="gw_users.php" target="_parent"><nobr>Membres</nobr></a></div>
			<div align="left" class="menu1"><a href="gw_tutos.php" target="_parent"><nobr>Tutoriels</nobr></a></div>
			<div align="left" class="menu1"><a href="gw_tutosmsg.php" target="_parent"><nobr>Messages des tutoriels</nobr></a></div>
 
 
 
		</td>
		<td align="left" valign="top">
 
			<?
                        $accent = 'Page avec des éàè # €$ " ';
                        echo htmlspecialchars($accent);
 
?>
 
			<div align="center"><a href="" target="_parent" title="Remonter sur le haut de la page" style="top: 0;"><span style="font-size: 20px;"><i class="fas fa-sort-up"></i></span></a></div>
		</td>
	</tr>
</table>
<div align="right" style="color: #CCCCCC;">Mise &agrave; jour le <?=MAJ;?>&nbsp;&nbsp;</div>
</body>
</html>

Bref... J'ai ce problème depuis que j'ai mis mes fichier avec l'encodage UTF-8. Mais je ne comprends pas trop le raport et pourquoi cet espace?
J'ai tout testé, modifier l'encodage de ma page CSS, j'ai tout réécrit, j'ai placé le code CSS dans le header, etc. Et là, je suis à cours d'idée.
Quelqu'un pourrait peut-être m'aider à trouver une solution pour supprimer cet espace blanc??

**Doksuri** · 29/01/2021, 09h06

il faut que tu regardes le CSS applique, en inspectant l'element
ma theorie est que le html, body ou ton conteneur herite d'une marge

**RinaBK** · 29/01/2021, 09h27

Seulement, il n'y en a pas... Tous les fichiers que j'ai inclut dans ma page sont vides et il n'y a même pas un seul espace à l'intérieur.
Comme on le voit dans les copier/coller que j'ai placé dans mon précédent message, il n'y a absolument rien qui pourrait expliquer cet espace sur le haut de la page. Du moins, je ne voit rien... D'autant plus, que j'ai ce problème uniquement depuis l'encodage UTF-8 de mes fichiers. C'est comme si depuis l'encodage mon fichier CSS ne comprenait plus margin: 0px;J'ai pu corriger ce problème en ajoutant le style suivant, mais ce n'est qu'un pansement, car cela causera des problèmes d'affichage sur d'autres page du site.

Code :

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

style="margin: -19px 0px 0px 0px;"

**Doksuri** · 29/01/2021, 09h48

l'espace de sort pas de nulle part... c'est pas le navigateur qui a decide de mettre un espace la juste pour t'embeter... un style CSS ajoute l'espace

il faut absolument que tu inspecte la page pour trouver d'ou vient cet espace, tu pourras le corriger "proprement" apres

**RinaBK** · 29/01/2021, 10h22

Merci pour ton aide

Envoyé par Doksuri

l'espace de sort pas de nulle part... c'est pas le navigateur qui a decide de mettre un espace la juste pour t'embeter...

Heureusement, car là, j'aurais eu 3 navigateurs qui chercherait à m’embêter. Quoi que, je les maltraite tellement qu'ils auraient de quoi se venger

Envoyé par Doksuri

un style CSS ajoute l'espace

il faut absolument que tu inspecte la page pour trouver d'ou vient cet espace, tu pourras le corriger "proprement" apres

L'espace vient de ma fonction PHP, ceci-dit, PHP ne lit pas les espaces. De plus, les fichiers inclut par cette fonction sont vides.

Donc, c'est assez étrange... Surtout qu'avant de convertir mon ficher en UTF-8, il n'y avait pas d'espace et le fichier n'a pas changé mis à par la conversion UTF-8

**Doksuri** · 29/01/2021, 10h28

quels sont les contenus de tes fichiers variable/functions ?
de plus, il serait preferable de les inclure dans le <head>, et dans un <script>

**NoSmoking** · 29/01/2021, 16h48

Bonjour,
cela ressemble à de la fusion de marge mais compte-tenu de ce que tu nous montres il n'y apparemment aucune raison.
C'est donc bien visiblement dans tes fichiers inclus qu'il traine un ou plusieurs caractères non visibles du type de ÿ.

Maintenant si je puis me permettre :

Code html :

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

1
2
<!DOCTYPE lang="fr-CH">
<html>

devrait être remplacé par :

Code html :

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

1
2
<!DOCTYPE html>
<html lang="fr-CH">

De plus comme tu te remets en route, oublie les <table> pour structurer tes pages, c'était au siècle dernier que cela se faisait, aujourd’hui tu peux passer directement aux Grid Layout, qui sont simples à appliquer pour une mise en page comme la tienne. (je pourrais éventuellement t'en fournir un squelette).

Dernier point :

Code html :

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

<span style="font-size: 20px;"><i class="fas fa-sort-up"></i></span>

utiliser fontawesome.com juste pour cela me parait un peu lourd quand un simple :

Code html :

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

<span style="font-size: 20px;">▲</span>

est suffisant (▲ => ▲).

**RinaBK** · 29/01/2021, 18h56

Envoyé par Doksuri

quels sont les contenus de tes fichiers variable/functions ?

Ils sont vides, je viens de les créer.
J’ai juste copier/coller l’architecture de ma page index.php car je voulais retravailler sur le code HTML de cette page.

Envoyé par NoSmoking

Bonjour,
cela ressemble à de la fusion de marge mais compte-tenu de ce que tu nous montres il n'y apparemment aucune raison.
C'est donc bien visiblement dans tes fichiers inclus qu'il traine un ou plusieurs caractères non visibles du type de ÿ.

Comme je viens de dire à Doksuri, tous les fichiers dont vides. Avec ABCIWEB, on s’est rendu compte qu’il était nécessaire de créer de nouveaux fichiers encodé UTF-8 pour que l’encodage fonctionne. J’ai donc créé un nouveau fichier index.php et j’ai juste placé la partie PHP et HTML. J’ai créé les fichiers heade.php, footer.php, variables.php et fonctions.php, mais je n’ai rien mis à l’intérieur. J’avais justement dans l’idée de revoir la partie HTML. Le seul autre fichier que j’ai inclus et rempli est le fichier styles.css pour la mise en page.

Lorsque j’ai vu l’espace s’afficher, j’ai commencé par chercher sur le code HTML pour voir si le problème venait de là, j’ai tout bidouillé, déplacé les éléments HTML, changer le tableau en div, bref, je crois que sur le côté HTML, j’ai tout essayé. Ensuite, ne trouvant pas la solution, je me suis mise à tout décortiquer. J’ai supprimé en premier le code PHP et l’espace est parti. Donc, j’ai ajouté petit à petit la partie PHP et c’est là que je me suis rendue compte que cela venait du code d’inclusion de fichier. J’ai ensuite remplis les fichiers pour voir si c’était parce qu’ils étaient vides, mais l’espace n’a pas bougé. J’ai recréé les fichiers en me disant que peut-être l’encodage à merdouiller sur ces fichiers, mais là aussi rien n’a changé. J’ai modifié le code PHP pour l’inclusion des fichiers de différentes façons, mais l'espace était toujours présent. Quoi que je fasse, l’espace ne veut pas partir et le code PHP est correct, car c’est l’une des première chose que l’on a corrigé avec ABCIWEB. D’autant plus, que je n’ai rien changé à mes lignes de code. J’ai juste fait du copier/coller.

Alors, je me suis dit que peut-être c’était le fichier CSS. Donc, j’ai modifié l’encodage du fichier CSS pour le mettre aussi en UTF-8, mais là aussi le problème n’a pas changé. J’ai même supprimé tous les espace possible, retaper chaque ligne de code en me disant qu’il y avait peut-être un caractère invisible, mais toujours rien… Avec ABCIWEB, on s’est dit que c’était peut-être un soucis au niveau du CSS, c’est pour cela que j’ai ouvert ce sujet ici.

Envoyé par NoSmoking

Maintenant si je puis me permettre :

Code html :

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

1
2
<!DOCTYPE lang="fr-CH">
<html>

devrait être remplacé par :

Code html :

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

1
2
<!DOCTYPE html>
<html lang="fr-CH">

Oh oui, c’est lorsque j’ai voulu placer le meta de l’encodage de la page. Je l’ai placé un peu partout et j’ai dû oublier de remettre les choses correctement. Je cherche tellement à savoir pourquoi j'ai cet espace, qu'en bidouillant à gauche et à droite, j'ai mis un peu la zizanie dans mon HTML. Mais je vais tout remettre en place.

Envoyé par NoSmoking

De plus comme tu te remets en route, oublie les <table> pour structurer tes pages, c'était au siècle dernier que cela se faisait, aujourd’hui tu peux passer directement aux Grid Layout, qui sont simples à appliquer pour une mise en page comme la tienne. (je pourrais éventuellement t'en fournir un squelette).

C’est bien que tu me parle de ça, car vu que de toute façon, je ne peux pas utiliser les anciens fichiers de mon site à cause de l’encodage, je me suis dit que je devrais profiter de l’occasion pour revoir l’architecture HTML.

Ceci-dit, le ‘Grid Layout’ c’est du Responsive CSS ou ça n’a rien à voir ?
De plus, d’utiliser le ‘Grid Layout’ ne va pas me compliquer les chose, si je dois, par exemple faire une boucle for() ? C’est les chiffres des layout qui m’inquiètent. Bon, je n’ai jamais testé cette méthode, alors je me questionne encore pas mal.

Envoyé par NoSmoking

Dernier point :

Code html :

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

<span style="font-size: 20px;"><i class="fas fa-sort-up"></i></span>

utiliser fontawesome.com juste pour cela me parait un peu lourd quand un simple :

Code html :

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

<span style="font-size: 20px;">▲</span>

est suffisant (▲ => ▲).

Je sais que le HTML propose des icônes, mais ils ne me plaisent pas beaucoup… Et je me suis dit, avec fontawesome, j’ai un choix assez conséquent que le HTML ne me propose pas.

Merci à vous deux pour vos réponses

**RinaBK** · 29/01/2021, 20h52

Oula !!! Le problème était bien plus loin que le code des pages qui était tout à fait correct. Ce qui n'allait pas, c'est que j'ai encodé mes pages en UTF-8, mais qu'il aurait fallut que j'utilise la conversion de fichier de l'UNICODE vers UTF-8. Effectivement, Ultra-Edit est un traitement de texte spécialement pour la programmation et offre une multitude de fonctionnalité sur l'encodage des fichiers et bien plus encore. En fait, l'encodage que j'avais utilisé était la conversion UTF-8 Edition ASCII. Cette conversion arrangeait bel et bien le problème des caractères accentués, mais posait problème à l'affichage de la page, d'où l'espace indésirable. C'est en utilisant la conversion UNICODE vers UTF-8 que l'espace indésirable a disparut et mes caractères accentués s'affichent toujours correctement.

Quand je pense à toutes les manipulations au niveau code, et tout ce que j'ai fais pour trouver la solution et c'était juste à cause de l'UNICODE

Avec tout ça, je vais me faire un bon café et je vais me mettre à refaire le HTML de la page. En même temps, je vais tester les Grid Layout que NoSmoking m'a gentiment proposé d'utiliser.

Je garde ce sujet ouvert pour les Grid Layout, ou j'en ouvre un autre lorsque je vais me retrouver confronté à des questions sur les Grid Layout ??

**NoSmoking** · 30/01/2021, 10h47

Un lien toujours utile : Passez à l'UTF-8 sans manquer une étape.

Je garde ce sujet ouvert pour les Grid Layout, ou j'en ouvre un autre lorsque je vais me retrouver confronté à des questions sur les Grid Layout ??

Une discussion = une question,
donc il est préférable d'ouvrir une nouvelle discussion et de mettre celle-ci en résolue.

Nota : précise également les navigateurs ciblés, les solutions pouvant être différentes si IE est à prendre en compte.

**RinaBK** · 30/01/2021, 11h11

Envoyé par NoSmoking

Une discussion = une question,
donc il est préférable d'ouvrir une nouvelle discussion et de mettre celle-ci en résolue.

Ok parfait

Envoyé par NoSmoking

Nota : précise également les navigateurs ciblés, les solutions pouvant être différentes si IE est à prendre en compte.

Oui, bien que j’utilise principalement FireFox, je contrôle d'office toujours avec IE et Chrome vu que c'est les navigateurs les plus utilisés. Normalement, je le fais aussi avec Opera, mais j'ai pas encore pris le temps de l'installer.

Espace indésirable haut de page impossible à supprimer depuis la modif utf-8

CSS

Discussions similaires

Partager

Partager