Soucis de css lors de l'hébergement ?

Sujet résolu

13 novembre 2018 à 14:39:23

Bonjour,

J'ai commencé à hébergé mon site sous OVH, en local toutes mes pages prenaient correctement la taillé de l'écran sans dépasser.
Et la sous ovh, et ce qui est bizarre est que cela concerne que certaines pages pas toutes, tout en haut de l'écran, au dessus de mon header, il y a comme un padding d'environ 10px, et je ne comprend pas d ou il sort, quand je regarde en console, impossible de cliquer dessus pour voir à quoi cela correspond.
J'ai essayé de faire un copier coller d'une page a qui le soucis n'est pas présent, et j'ai encore ce même soucis sur les pages concernées ...

Une idée de quoi ça peut venir ?

Mewen_bzh

13 novembre 2018 à 14:59:53

Bonjour,

Impossible de répondre quoi que ce soit avec aussi peu de détails.

Pourrais-tu nous donner un lien vers l'une des pages de ton site qui présente ce "défaut" s'il te plaît ?

Je ne réponds pas aux messages privés.

Maxime L

13 novembre 2018 à 16:37:06

Bonjour,

J'ai déjà eu ce problème avec un :

<?php include('header.php') ?>

En effet, j'avais un header commun à toutes mes pages.

J'ai donc décidé le mettre en header.php et de l'inclure. Très bonne idée Sauf que lors du test en upload une marge d'environ 20px est apparue au dessus de ce même header. Pour le moment, je n'ai toujours pas régler mon problème mais je pense que cela vient de la présence ou non du <header> et </header> dans le fichier de base .php.

P.S : j'ai moi aussi un hébergement OVH.

Si cela ne vient pas d'une inclusion en php, je ne peux pas vous aider.

Bonne journée et j'espère que cela vous aura aidé.

yggdrasil83

13 novembre 2018 à 19:43:02

Voila pour l'exemple : https://www.airquinze.com/index.php

sur la page index.php il y a ce soucis. Dans "nos créations" et "qui sommnes-nous" non.J'ai aussi ce trouvé ce soucis dans le panier.

j'utilise un template que j'appel des chacunes de mes pages, je ne sais pas si ça vient vraiment d'une inclusion, mais ce qui me semble bizarre c'est que le template est le meme pour chaque page, seul le contenu en dessous du menu change, donc pourquoi il y a un padding tout en haut sur certaines et pas d'autres ... assez bizarre.

Redstruct90

13 novembre 2018 à 22:01:45

J ai deja rencontre ce probleme en localhost, verifie que tu n a pas un saut de ligne avant ton inclusion.

//Si tu as un saut de ligne ici, supprime le
<?php include('tonfichier.php');?>

-
Edité par Redstruct90 13 novembre 2018 à 22:02:26

ChrisLebure

13 novembre 2018 à 22:21:21

Bonsoir,

gros problème sur la page index.php : de nombreuses balises qui devraient être dans <head></head> sont dans le body !!!
à corriger sans tarder... avec en prime un caractère bizarre juste après la balise <body>

tout ceci repéré grâce à l'inspecteur web, impitoyable observateur...

-
Edité par ChrisLebure 13 novembre 2018 à 22:22:48

romain-valin

14 novembre 2018 à 3:28:45

"gros problème sur la page index.php : de nombreuses balises qui devraient être dans <head></head> sont dans le body !!!"

oui et non, c'est une "bonne" pratique de mettre certaines balises dedans, mais c'est pas obligatoire.

S'il a choisi intentionnellement de ne pas les mettre dans la balise dans ce bloc c'est ok. (même s'il serait mieux pour la lisibilité de les mettre avant la balise body.

Au passage ta balise script ou tu inclus jQuery n'est pas bonne, le lien n'est pas valide.

-
Edité par romain-valin 14 novembre 2018 à 3:30:14

Développeur PHP / Symfony en Freelance

Mewen_bzh

14 novembre 2018 à 9:03:36

Bonjour,

Je te conseille de passer ton site au validateur HTML du W3C : https://validator.w3.org/

Sur les pages où tu observes un décalage, tu verras que tu obtiens l'erreur suivante :

Error: Non-space characters found without seeing a doctype first. Expected <!DOCTYPE html>.

From line 1, column 1; to line 1, column 2

↩<!DOCT

Il y a apparemment des caractères non autorisés avant le doctype, ce qui empêche ce dernier d'être correctement interprété. Et quand cela se produit, le head n'est pas interprété non plus puis le validateur commence à râler parce qu'il trouve un body avant d'avoir pu lire le head, etx etc.

Las navigateurs arrivent à récupérer les informations et à les afficher car ils sont plus ou moins tolérants aux erreurs mais cela peut engendrer ce type de soucis d'affichage.

Regarde attentivement le code des pages, tu devrais y trouver au moins un caractère indésirable (ne serait-ce qu'un pauvre petit espace insécable).

Je ne réponds pas aux messages privés.

yggdrasil83

14 novembre 2018 à 9:16:03

Bonjour, merci pour vos réponses.

J'ai vérifié pour le saut de ligne avant l'inclusion je n'en ai pas.

Je viens de vérifier pour les balises, en effet en console c'est dans body mais dans mon template j'ai pourtant bien mis tout ceci dans le head :

<?php
	session_start();
?>

<!DOCTYPE html>
<html>

	<head>
		<title>R15Creation</title>
		<meta charset="UTF-8">
		<meta name="description" content="rugby">
		<meta name="keywords" content="rugby">
		<meta name="author" content="Sioly Thibault">
		<link href="/css/style.css" rel="stylesheet">
		<script type="text/javascript" src=/"js/jquery.min.js"></script>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<!-- jquery -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<!-- Bootstrap -->
		<link href="/css/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<script type="text/javascript" src="/css/bootstrap/js/bootstrap.min.js"></script>
		<!-- templatezoom-master -->
		<script src="/js/jquery.elevateZoom-3.0.8.min.js"></script>
	</head>

	<body>
		<div class="page">
			<div id="header">

				<!-- MON MENU -->

			<div class="container">
				  <?= $content ?>
			</div>

			<!-- MON FOOTER -->
		</div>

		<script type="text/javascript" src="/js/js.js"></script>
	</body>
</html>

Pour jquery, en effet j'ai bien une erreur en console, mais il marche bien pourtant :/

edit : et en console je viens de voir qu'au niveau du header j'ai : &#65279, d ou le saut de ligne en haut... mais je n'ai jamais mis ça dans mon code ... Je comprend vraiment pas d'ou sortent tout ces soucis

-
Edité par yggdrasil83 14 novembre 2018 à 9:18:47

Mewen_bzh

14 novembre 2018 à 9:26:58

&#65279 est la caractère unicode pour 'ZERO WIDTH NO-BREAK SPACE' (http://www.fileformat.info/info/unicode/char/feff/index.htm)

Tu n'est pas le seul à avoir ce problème : https://stackoverflow.com/questions/9691771/why-is-65279-appearing-in-my-html ou encore https://openclassrooms.com/forum/sujet/bug-amp-65279-49314 par exemple.

Vérifie que tes fichiers sont bien enregistrés en utf-8 sans BOM et cela devrait régler ton problème.

Je ne réponds pas aux messages privés.

romain-valin

14 novembre 2018 à 9:41:16

Le problème vient de la ligne 4, tu as un saut de ligne

Pour être tranquille met les choses comme ça :

<!DOCTYPE html>
<?php
    session_start();
?>

Pour jQuery, ça marche parce que tu le charge 2 fois...

Supprime la ligne 15 (le src de cette ligne est pas bon)

Développeur PHP / Symfony en Freelance

yggdrasil83

14 novembre 2018 à 9:55:31

Génial merci beaucoup j'ai enregistrer sans BOM tout est bon !

D'accord merci pour jquery je vais corriger ça :).