[RÉGLÉ] problème d'affichage lors d'une restauration

[jmpo]

bonjour,

ma fille doit expliquer son site internet dans un local ou il n'y pas le WiFi… j'ai donc restauré ce site en local. A ma grande surprise (mauvaise) l'affichage est modifié sur certaines pages… J'ai supprimé et recommencer la restauration, mais rien ne change.
Avez-vous une idée?
Voici deux copies écrans

- en localhost: il y a un décalage
- sur le site distant: parfait.

Merci d'avance.

jean-marie

[RobertG]

Si on regarde bien, "petites saucisses" prend une hauteur un peu plus importante en local, ce qui renvoie la ligne suivante sous la 3° case.
Maintenant, je n'ai pas le pourquoi de cette différence de comportement.

[jmpo]

Merci Robert... en plus il y a 9 catégories de produits (9 pages différentes) et le problème d’affichage ne se fait que sur 3 d’entre-elles...

[RobertG]

Question annexe : le même navigateur est-il utilisé dans les deux cas ?

[jmpo]

Oui... le même navigateur

[lomart]

Bonsoir,

Avez-vous essayer en modifiant la largeur de la fenêtre ?

[jmpo]

Bonsoir, non pas essayé de modifier la largeur de la fenêtre... j’essayerai demain.
Merci et bonne soirée

[daneel]

Bonsoir,

Vérifier dans le code source de la page si vous n'avez pas des appels http externe au site (bouton droit / code source puis rechercher http://) donc ayant besoin d'une connexion internet comme l'utilisation de google font ou d'une librairie js comme jquery. Si c'est le cas, vous devez recopier ces fichiers dans votre template et corriger les url pour les indiquer en local dans votre site.

Généralement, les différences peuvent correspondre à des éléments qui ne sont pas téléchargés faute de connexion, parfois ce n'est pas grand chose.

Yann

[jmpo]

Bonsoir,

Vérifier dans le code source de la page si vous n'avez pas des appels http externe au site (bouton droit / code source puis rechercher http://) donc ayant besoin d'une connexion internet comme l'utilisation de google font ou d'une librairie js comme jquery. Si c'est le cas, vous devez recopier ces fichiers dans votre template et corriger les url pour les indiquer en local dans votre site.

Généralement, les différences peuvent correspondre à des éléments qui ne sont pas téléchargés faute de connexion, parfois ce n'est pas grand chose.

Yann

Le seul appel externe dans la page est vers http://www.w3.org/1999/xhtml

[jmpo]

Bonsoir,

Avez-vous essayer en modifiant la largeur de la fenêtre ?

Après essai de largeur de fenêtre, le problème est toujours présent.

[daneel]

Vous avez un exemple en ligne ?

Vous avez bien vérifié http et https ? Aucune police google font ? le site utilise le template de base ?

[jmpo]

Vous pouvez voir ici http://tfe.clic-nature.com/index.php...ory/12-legumes
Sur le site en local, l’affichage pose problème à « maïs ». Mais ce qui est curieux c’est que ce problème n’arrive que dans 3 des 9 catégories.

[jmpo]

J’ai oublié de préciser que j’ai utilisé le Template J51 London

[RobertG]

On retrouve le même problème qu'en local, ici à caused e "haricots en conserve", sur deux lignes. Essaie de réduire la taille de ces titres

[daneel]

Il y a bien 3 appels dans le code source de la page vers des fontes google. en réalité, le concepteur du template a remplacé http:// par //
pour permettre l'affichage aussi bien en http et https.

 <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=PT+Serif:400,700,900&subset=latin" />

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Montserrat:400,700,900&subset=latin" />

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato:400,700,900&subset=latin" />

La fonte "PT Serif" est présente sur toutes les pages. Si elle n'est pas téléchargée, elle est remplacée par une police alternative, ce qui peut donner des différences. Pour que le site fonctionne vraiment sans connexion internet, il faut télécharger ces fontes et remplacer les chemins dans le code du template.

https://fonts.google.com/specimen/PT+Serif

On trouve des méthodes sur divers blogs dont un script goofy.php qui vérifie si la police est présente localement avant de la télécharger automatiquement une seule fois.(en cherchant un peu, tu dois pouvoir retrouver cela rapidement)

il y a peut être d'autres problèmes d'affichage en mode offline (donc déconnecté d'internet) mais je n'ai été plus loin
Comme je l'ai indiqué, parfois ce n'est pas vraiment important si par exemple la police alternative respecte la mise en forme.

EDIT : Effectivement, comme l'indique Robert, les titres sur deux lignes posent problème car il y a un décalage à cause de la hauteur.
Il faut réduire la taille de caractère ou corriger la css avec une hauteur minimum de 390px ( http://prntscr.com/jpyilv ).