Partage

Problème de background sur la version mobile

30 novembre 2016 à 23:47:31

Bonsoir à tous,

Après des mois de travail acharné sur mon site web et d'innombrables consultations de ce forum pour trouver réponse aux tous aussi innombrables problèmes que j'ai rencontrés, vous me trouvez ici résigné, dépité, désespéré ! J'ai toujours plus ou moins réussi à me dépatouiller tout seul mais là, je bloque !

Voilà mon problème : je me suis attaqué, il y a peu, à la version mobile de mon site web et je rencontre un problème avec le background. Je le voudrais en mode "cover" et fixe afin qu'il s'adapte, non pas à la taille de ma page web mais à la taille de l'écran qui le lit.

Ce qui me perturbe avant tout, c'est que le site semble très bien réagir aux propriétés que je lui donne depuis "l'outil de simulation de mobiles" (vous voyez de quoi je veux parler ? le truc avec Ctrl+Maj+I puis Ctrl+Maj+M) de Chrome mais lorsque je le teste sur un vrai mobile (Galaxy S4 et S5), on dirait qu'il n'en fait qu'à sa tête ! Par exemple, je précise bien la propriété "background-attachment:fixed" sur ma balise body mais le background défile quand même avec le scroll (alors qu'il est bien fixe depuis Chrome...).

Vous pourrez trouver le site en question (et donc tout le code qui lui est associé) à l'adresse suivante : https://bastidescape.000webhostapp.com/index.html

Je l'ai hébergé provisoirement sur cet hébergeur gratuit pour des raisons pratiques.

Ah, et une autre question qui me vient comme ça, bien que j'ai créé une feuille de style à part pour la version mobile, j'ai comme l'impression que les navigateurs vont "piocher" certaines propriétés dans ma feuille de style "classique". C'est normal ?

Merci de m'avoir lu jusqu'au bout. Maintenant, si vous pouvez m'aider, c'est encore mieux !

Lucky13

1 décembre 2016 à 1:26:14

Hello,

Il est un peu tard pour analyser ton code, mais la position fixed à parfois un comportement étrange sur certains navigateurs mobile (j'ai déjà eu ce problème et ne l'utilise plus)

Pour ton doute sur le chevauchement de feuille de style, il y a un test simple : utiliser l'inspecteur d'éléments de ton navigateur pour voir quelle feuille est chargée après actualisation de la page / Ou n'utiliser qu'une seule feuille css et placer ta règle media-queries à la fin et regarder le résultat sur ton mobile. Par contre elle est étrange, il y a plein de déclarations vides...

header
{
	
}

#banniere
{
	
}

#tete
{
	
}

header h1
{
    
}

nav
{
	
}

nav ul
{
    
}

nav li
{
    
}

copié/collé puis supprimé ? bref cela ne sert à rien...

Sinon je trouve ton design agréable, et ce jeu de lumière avec le background (simple mais original) me plaît beaucoup.

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

AbcAbc6

1 décembre 2016 à 1:29:55

Bonjour, bonsoir,

on vas procédé par étape, d’abord corriger les erreurs puis voir les problèmes que tu indique par la suite.

Tu utilises un mauvais doctype, en effet dans ton code tu utilises des balises tel que <header> <nav> <aside> <article> etc... ce sont des balises html5 donc ton doctype devrais être celui de l'html5 (et on en profite pour indiquer la langue du document). Replace par

<!DOCTYPE HTML>
<html lang="fr">

C'est important car tu pourras plus facilement voir tes erreurs avec le validateur html https://validator.w3.org

ligne 20 pour l’attribut height et width l'unité par défaut est le pixel, il n'est pas utile de le précisé height="300" c'est bon.

Ligne 29, 30, 31 name="bourse" l’attribut name est obsolète sur les éléments excepté les éléments de formulaire, à supprimer.

Ligne 32 la balise <img> ne sort JAMAIS sans sont attribut alt obligatoire même vide.

Je trouves que les textes alternatif devrais être revus, il ne doivent pas expressément dire ce qu'est l'image (loupe, interrogation, bourse....) mais indiquer une information utile à l'utilisateur qui n'affiche pas les images (pour diverses raisons) voici pourquoi il faut les utiliser : https://www.youtube.com/watch?v=oB3LelGzFII

et comment : http://www.pompage.net/traduction/Bien-utiliser-le-texte-alternatif

ligne 45 tu ferme un lien non ouvert.

Ligne 51, 57 un ID est unique dans la page, tu ne peux avoir plusieurs id="clé" idem pour id="scenarios" (et je recommanderais de ne pas utilisé d'accent dans les nom d'ID et class)

ligne 79 c'est </p> et pas <p/>.

Il est tout a fait possible en css ( pseudo-class:hover) d'afficher une autre image au passage de la souris sur un lien ou une image, pas besoin de JS pour cela.

Comment vos visiteur peuvent-il savoir qu'une information secrète est accessible si on clique sur l'image secret.jpg ? Un changement du curseur ou autre information visuelle serrais un plus.

Pour ce qui est de ta css ligne 5 tu la charge, et ligne 13 tu charge la même css avec un media="screen and (min-width: 1025px), quelle règle le navigateur vas t-il charger d’après toi. Tu peux faire un clique droit sur ta page, puis inspecter l'élément dans l'inspecteur tu te positionne sur body et tu regarde les styles qui sont appliquer. Tu verras qu'il sont en double.

Pour tes images de clé pour tes titres ce sont des images de pure décoration, elle n’apporte aucun contenu au document et donc c'est en css qu'il faut les indiquer (en background) pas en html !

Je trouve la police CloisterBlack difficile à lire pour un paragraphe entier surtout que tu diminue la taille de la police.

Coté CSS

le width: 100%; sur le body et pour les autre block également, est inutile au mieux, source de problème au pire, le body comme tout les block prennent la largeur de leur parent, lire https://blog.goetter.fr/2011/11/30/width-100-tu-es-le-mal/ (cela te crée une barre de scroll horizontal)

page contact.html

vire cette vilaine balise <center> c'est en css que l'on centre les éléments et une grande image ne s'affiche pas en changeant la taille de celle-ci mais on fait deux images une grande et une petite. Quand on clique sur la petite c'est la grande qui ce charge, sinon tes visiteurs charge la grande image et ce même si il ne désire pas. Je ne te dis pas la lenteur d'affichage sur mobile (puisque tu souhaite optimiser pour eux)

Si tu corriges déjà tout ça, cela t'aideras à mieux cerner les autres problèmes.

-
Edité par AbcAbc6 1 décembre 2016 à 1:32:06

FoNeTiK

1 décembre 2016 à 10:54:34

==>Lucky13

Concernant le comportement des navigateurs mobile, j'ai essayé sur le navigateur par défaut de samsung ("Internet") ainsi que sur Chrome et le résultat est le même. Je doute donc que l'on puisse incriminer ceux-ci. Il faudra tout de même que je teste sur les autres principaux navigateurs mobiles...

Pour le chevauchement des feuilles de style, je pense que AbcAbc6 y a répondu plus bas. J'y reviendrai. ;-)

Les déclarations vides, c'est effectivement un copier/coller de mon css de base. Je compte supprimer tout ce qui est vide quand j'aurais terminé mais je les laisse pour le moment, ça peut me servir (partisans du moindre effort, bonjour !).

Et merci beaucoup pour tes retours sur le design, cela me fait plaisir et mon conforte dans mes choix (il en est passé par des stades avant d'en arriver là ce fichu site !)

==>AbcAbc6

1 2	`<!DOCTYPE HTML>` `<html` `lang="fr">`

C'est important car tu pourras plus facilement voir tes erreurs avec le validateur html https://validator.w3.org

Je te crois sur parole, pour moi c'est du chinois ça. J'ai donc remplacé tout ça :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

par ça

<!DOCTYPE HTML>

<html lang="fr">

C'est bon ?

Ligne 29, 30, 31 name="bourse" l’attribut name est obsolète sur les éléments excepté les éléments de formulaire, à supprimer.

Je le vire partout alors !

Ligne 32 la balise <img> ne sort JAMAIS sans sont attribut alt obligatoire même vide.

Je l'ignorais... mais le hasard fait bien les choses, je l'ai mis sur quasiment toutes mes images !

Pour les textes alternatifs, je vais aller regarder les liens que tu m'as donnés.

ligne 45 tu ferme un lien non ouvert.

Exact, il était tout frais celui là !

ligne 79 c'est </p> et pas <p/>.

Oui, et j'ai trouvé 2-3 autres <p> pas ou mal fermés en relisant. :euh:

Ligne 51, 57 un ID est unique dans la page, tu ne peux avoir plusieurs id="clé" idem pour id="scenarios" (et je recommanderais de ne pas utilisé d'accent dans les nom d'ID et class)

Je l'ai mis plusieurs fois parce que je leur applique les mêmes propriétés CSS, c'est pas correct ? (pour les accents tu as raison, je vais remédier à ça. Quand je vois que de simples majuscules dans le nom de mes fichiers font bugger l'hébergeur...)

Il est tout a fait possible en css ( pseudo-class:hover) d'afficher une autre image au passage de la souris sur un lien ou une image, pas besoin de JS pour cela.

Tu dis ça pour mes : onmouseover="this.src='images/jeu_hover.png'" ? Je vais creuser un peu la question pour faire ça en css alors.

Comment vos visiteur peuvent-il savoir qu'une information secrète est accessible si on clique sur l'image secret.jpg ? Un changement du curseur ou autre information visuelle serrais un plus.

J'ai volontairement supprimé le changement de curseur, je trouvais l'indice trop évident à trouver sinon. Ils sont censés essayer "d'écrire à la plume sur le parchemin". Et puis, il y a quelque chose à gagner à la clé alors il ne faut pas que ce soit trop simple !

MAIS OUIIIIIIIIIII !!! C'était tellement évident ! Je n'y avais même pas pensé ! Pffff

Pour tes images de clé pour tes titres ce sont des images de pure décoration, elle n’apporte aucun contenu au document et donc c'est en css qu'il faut les indiquer (en background) pas en html !

Euh... ça peut se faire en css ça ? En mettant 2 images côte à côte en background sur mon "article h1" ? Je vois pas trop là... Il faut que l'écartement entre les 2 clefs dépende de la largeur du texte en plus...

Je trouve la police CloisterBlack difficile à lire pour un paragraphe entier surtout que tu diminue la taille de la police.

Je vais essayer d'en trouver une plus lisible alors. Mais c'est fichtrement difficile à trouver des typo moyenageuses qui se lisent aisément !!!

C'ETAIT DONC CA CETTE PU...NAISE (oui, je me retiens, j'ai des enfants à la maison !) DE BARRE DE SCROLL !!!!! J'y ai passé quelques heures à chercher à la virer. HALLELUJAH !

vire cette vilaine balise <center> c'est en css que l'on centre les éléments

J'ai remplacé par <span class="centre"> quand c'était dans un paragraphe et par <div class="centre"> quand c'était des images hors paragraphes, c'est mieux ?

et une grande image ne s'affiche pas en changeant la taille de celle-ci mais on fait deux images une grande et une petite. Quand on clique sur la petite c'est la grande qui ce charge, sinon tes visiteurs charge la grande image et ce même si il ne désire pas. Je ne te dis pas la lenteur d'affichage sur mobile (puisque tu souhaite optimiser pour eux)

Je le savais en plus... Je devais en avoir marre le jour où j'ai fait ça. ^^

Si tu corriges déjà tout ça, cela t'aideras à mieux cerner les autres problèmes.

Oui, ça en fait des erreurs ! J'ai presque honte de vous avoir présenté un tel torchon...

Je vais tranquillement corriger tout ça et je reviens vers vous si jamais je ne m'en sors toujours pas.

En tout cas, un grand merci à toi ! Je suis toujours sidéré que des gens passent du temps à se casser la tête à lire des lignes et des lignes de codes en traquant les (nombreuses) erreurs et tout ça pour... rien. Juste le plaisir d'aider. Un GRAND merci alors, à toi et à tous les gens qui, comme toi, viennent en aide à ceux qui en ont besoin.

-
Edité par FoNeTiK 1 décembre 2016 à 11:00:20

Lucky13

1 décembre 2016 à 11:21:57

Oui AbcAbc6 à pour habitude de chercher et d'argumenter ses interventions, tout le monde devrait faire ainsi... tu peux aussi lui mettre un +1, ça fait toujours plaisir et cela informe que me message est pertinent pour ceux qui consultent ton sujet

Par contre tu aurais du utiliser le validateur en ligne pour connaitre tous les erreurs HTML toi même -> https://validator.w3.org/

En attendant la suite...

-
Edité par Lucky13 1 décembre 2016 à 11:23:13

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

FoNeTiK

2 décembre 2016 à 20:13:33

Pfiou ! Ca y est, j'ai fait toutes les modifs que tu as pu relever plus celles que le validateur html considérait comme des erreurs. Mon site est maintenant clean (sauf la version en anglais, mais je ferais ça à la toute fin)

La mauvaise nouvelle... Mon background ne s'est pas amélioré sur la version mobile...

Donc si quelqu'un a des pistes, le sujet est rouvert.

AbcAbc6

3 décembre 2016 à 0:04:56

bonsoir,

FoNeTiK a écrit:

La mauvaise nouvelle... Mon background ne s'est pas amélioré sur la version mobile...

En fait je m'en doutais un peu, mais cette première étape étais nécessaire.

La première interrogation est pourquoi une deuxième balise meta viewport avec comme valeur maximum-scale ?

Ma deuxième interrogation porte sur la règle media de style.css qui à mon sens n'a pas lieux d'être. (Luky corrige moi si je me trompe)

Je procède comme ceci : style.css est charger dans tout les cas (donc sans règle média) et une règle média pour la version mobile. Dans mobile.css je ne modifie que les styles qui doivent l'être en fonction des points de rupture du design. Pour le coups j'ai l'impression que tu souhaites faire une css uniquement pour mobile et une autre uniquement pour desktop. Tu auras des doublons dans ces deux css.

Ensuite qu'aimerais tu obtenir comme effet ? Parce tu as changé l'image de fond du body dans ta style.css pour fond.png alors qu'avant (si je ne m'abuse) c’était maze.png .

De plus tu as indiquer dans mobile.css mazemobile.png sur l'élément html et non sur le body. D’où mon incompréhension de ce que tu souhaite faire.