[RÉGLÉ] Comportement affichage

[Vicotr]

Bonjour à tous,
Y aurait il une personne pour m'aider à régler les problèmes d'affichage de mon site ?

https://tarotclubdumad.fr/

A savoir que je suis sur tourne avec Joomla! 3.8.1 Stable

J'ai plusieurs points qui ne fonctionnent pas correctement à savoir :

1-L'affichage du site sur smartphone, j'ai le fond (qui est un tapis de jeu, une image jpg) qui m'occupe tout l'écran. On arrive en touchant l'écran à faire apparaitre le site , les menus etc mais bien souvent il faut garder le doigt sur l'écran. J'ai mis l'image dans le dossier image de mon template et rentré la ligne dans le fichier css comme ceci
html {
height: 101%;
background: url(../images/Tapis.jpg) no-repeat center fixed;
background-size: cover;
}
J'ai opté pour cette solution car j'utilise en superposition des cartes dans le body
body {
margin:0;
padding:0;
background-image: url(../images/21.png),url(../images/1.png),url(../images/fond_tarot2.png),url(../images/excuse.png);
background-position-x: 100%,0%,0%,100%;
background-position-y: 500px,607px,15px,90px;
background-repeat: no-repeat;

}

2-Le comportement du menu en fonction du navigateur
Mozilla : Menu active de couleur orange avec un trait rouge en dessous avec un temps de transition en mode hover (celui souhaité)
Chrome : Affichage du menu sans aucune couleur.

3-Barre de couleur (orange celui utilisé dans mon menu principal) apparait sur toute la largeur d'écran en mode survol menu ou tout autre endroit où il y a des modules.
A savoir que cette barre serait ni plus ni moins le fameux bouton modifié que l'on accède en mode enregistré sur le front end.
Autre remarque , cette barre n'apparait pas sur chrome.

Merci d'avance à tout les contributeurs


PS : Merci d'être explicite dans vos réponses car je ne suis pas une personne aguérri dans le développement. J'ai quelques notions mais sans plus.

[lomart]

Bonjour,

Point 1:
Je n'ai pas de souci sur Android
Quelle drôle d'idée de mettre une image sur html ! surtout que vous avez #wrapper et body pour avoir 2 blocs
Cela éviterait de forcer la hauteur de html à 101%.

Point 2:
#EFD40DE6 n'est pas une valeur valide. Firefox s'en accomode en ne prenant que les 6 premiers caractères et Chrome génère une erreur et l'ignore complétement

Point 3:
Pas compris. Pouvez-vous être plus précis ?

[Vicotr]

Merci pour votre réponse
Drole d'idée ...peut être, mais n'étant pas un expert, c'est la solution trouvée. Maintenant, si vous avez une proposition, je suis ouvert et preneur. Si vous pouvez être plus précis. Je dois supprimer le Wrapper ? Je dois modifier quel fichier ?

Point 3
J'ai une barre de la couleur de mon menu qui apparait sur toute la largeur de mon écran quand on survole légèrement en décalé les modules. Pour moi , c'est le bouton modifié qui est proposé sur la partie Front end du site pour intervenir sans passé par le back end quand on est en mode connecté. Cela se produit visiblement sur le navigateur Firefox, car après essai sur un autre pc avec chrome , le problème n'apparait pas.

[lomart]

Point 1:
simplement utiliser body et #wrapper au lieu de html et body

Point 2:
Résolu ?

Point 3:
Je ne vois toujours pas. Faites une copie d'écran annoté pour montrer le souci

[Vicotr]

Bonjour, revient vers vous avec copie d'écran à l'appui
Apparition d'une barre orange sur toute la largeur de l'écran. (voir image)
Barre qui apparait lors du déplacement de la souris.
Pour moi ,c'est un comportement lié à l'identification des modules (voir présence carré dans le coin droit sur image jointe)
Version Navigateur Firefox 56.0.2 (64 bits

[Vicotr]

Rebonjour,
Je souhaiterai revenir à la réponse concernant le point 1
Vous m avez conseillé d'utiliser " body et #wrapper au lieu de html et body"
J'ai donc apporté les modifications suivantes

Ligne 19 body {

background-image: url(../images/21.png),url(../images/1.png),url(../images/fond_tarot2.png),url(../images/excuse.png);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position-x: 100%,0%,0%,100%;
background-position-y: 500px,607px,15px,90px;

}

Ligne 584 #wrapper {

background: url(../images/Tapis.jpg) no-repeat center fixed;
background-size: cover;

}

Mon souci est que je n'ai plus de superposition de mes images
Du moins, elles sont bien présentes mais elles sont masquées par l'image présente dans le Wrapper

[lomart]

Bonsoir,

Pour le point 1:
#wrapper étant dans body, donc affiché après, il suffit d'inverser les codes

Point 3:
Je ne vois toujours pas le souci. Il faudrait indiqué sur la copie d'écran l'endroit où se trouve la souris quand la barre s'affiche

Point 2:
Je pense que c'est résolu. L'habitude sur ce forum comme bien d'autre est de l'indiquer pour aider les autres internautes avec le même problème

[Vicotr]

Pour le point 1: Résolu
#wrapper étant dans body, donc affiché après, il suffit d'inverser les codes

[Vicotr]

Bonjour,
Ci joint un e nouvelle image de l'ecran
En haut à droit de l'image, on voit bien le petit carré de couleur orange indiquant qu'il s'agit d'une position.
Le phénomène se produit quand n est en mode connecté super utilisateur.
Visible sur Android aussi par ce mode de connexion

[lomart]

Bonjour,

Le phénomène se produit quand n est en mode connecté super utilisateur.

Ca c'est une information importante.
Il n'y a donc qu'un super utilisateur qui pourra trouver la solution
Il faut regarder avec un inspecteur de code le code css qui est visible dans ce cas

[Vicotr]

Concernant le point 2 , j'ai bien compris votre réponse que c'était une question de compatibilité entre navigateur.
Mais que dois je faire plus précisement.
Je dois réécrire une ligne de code couleur supplémentaire, si oui sous quelle forme d'écriture.
Simplement en rajoutant une ligne avec un caractère de moins


Point 2:
#EFD40DE6 n'est pas une valeur valide. Firefox s'en accommode en ne prenant que les 6 premiers caractères et Chrome génère une erreur et l'ignore complétement


Concernant le code CSS pour le point 3 , je pense que je dois examiner le code du menu hover vu que c'est au survol.

[Vicotr]

Visiblement se serait le bouton modifier qui prend toute la largeur..mais pas évident à retrouver
Visiblement le css pour le bouton je n'ai rien touché, je suppose que ça doit être le lien qui est rattaché à ce bouton qui pose problème
Mais impossible de trouver le début de code css qui correspondrait à ce lien
Auriez vous une petite idée ?

[Vicotr]

Ah, j'ai une autre info dont je viens de m apercevoir , ça concerne que les menus et non pas le lien rattaché au bouton.
Mais pourquoi en mode connecté sous ce profil

[Vicotr]

Le comportement a un lien avec le menu et le fait que je peux apporter une correction. Mais je n'arrive pas à voir la corrélation entre les 2

[Vicotr]

Sur celle ci , on voit la barre avec le marquage de l'id