[RÉGLÉ] souci d'affichage

[Nathy78]

Bonjour à tous,

J'ai créé mon template responsive design avec template creator. J'ai vérifié si ma page était bien visible sur écran d'ordinateur de bureau fixe, sur écran de portable de type 14 pouces, sur écran de téléphone mobile (pas nickel mais lisible) et mon client me hurle dessus parce que sur son écran de 17 pouces, l'affichage n'est pas bon. L'image de fond se réplique à droite et le pied de l'image est tronqué. Les composants de mon image sont déplacés, bref, c'est moche.

Voici ce que moi je vois :

et ce que lui voit :


Sauriez vous me conseiller ? Merci

[chabi01]

Re : souci d'affichage

Bonjour,
Une url pour voir ?
Tu n'as pas du donner les règles pour certaines largeur d'écran.
Cordialement,

[Nathy78]

Re : souci d'affichage

bien sûr, voici le lien du site : http://http://cibele.fr/

Pour la largeur de l'image, dans template creator, j'ai indiqué 90%, mais je crois qu'il s'agit de la largeur. Rien indiqué pour la hauteur

[fyleos]

Re : souci d'affichage

Bonjour,

Pour l'image de fond, il faut ce code :

body {
background: url(../images/cloture-bois.JPG) center center no-repeat fixed;
background-size: cover;
}

Et du coup, supprimer le background du wrapper (le body se paramètre dans les paramètres du site dans template creator et non dans les css du wrapper). Pour le background-size, il faut le rajouter dans CSS perso au même endroit.

Pour les flèche, quel que soit l'écran, elles s'affichent pareil. perso, je ne suis pas adepte de l'utilisation d'un tableau pour la mise en page.

[RobertG]

Re : souci d'affichage

Quel navigateur utilise-t-il et quelle définition d'écran ? Je viens de tester le site sans rencontrer d'anomalie, même en essayant des tailles d'écrans différentes, sous Firefox et Chrome.

Je me réponds : le problème se manifeste sur Safari !

[Nathy78]

Re : souci d'affichage

Fyléos, je viens de faire les modifications telles qu'indiquées. Merci bcp.

Toi qui semble bien connaitre template creator, peux tu m'expliquer pourquoi, alors que j'ai créé deux templates (l'une pour l'accueil où je viens d'enlever le bandeau titre du site à la demande de mon client, l'autre pour la visualisation des pages du site). Si dans le menu gestion des templates, je choisis la première par défaut, lorsque je clique sur l'un des choix de menu (par exemple, abaxus), il s'affiche selon la template 1 et non selon la template 2, alors que dans le menu abaxus, j'ai bien indiqué la template 2.

J'en déduis que je ne peux utiliser plusieurs templates, alors que normalement c'est possible. Comment faire ?

Par ailleurs, tu me parles de la présentation via un tableau, en effet, ce n'est sans doute pas le mieux, mais là aussi, je ne vois pas comment ajouter des images avec un roll over sur une image background. J'ai donc une image de fond, que je voulais initialement mettre dans la template 1 mais vus mon souci... je l'ai mise dans le tableau, puis j'ai positionné mes boutons roll over. Si tu as une meilleure idée, je ne demande qu'à progresser... Merci

[Nathy78]

Re : souci d'affichage

Robert, en effet, il semble qu'avec firefox et chrome, c'est ok. Je teste mon travail sur ces deux outils. Je crois qu'il utilise le nullissime internet explorer... et visiblement, safari aboutit au même visuel bizarrre...

[RobertG]

Re : souci d'affichage

Sur mon PC, pas de problème avec la dernière version de IE.

[Nathy78]

Re : souci d'affichage

il faudrait voir avec les écrans extra large pour voir car son portable l'est

[chabi01]

Re : souci d'affichage

Je vois que tu as déjà beaucoup d'indications.
Par contre, une petite chose en plus : ton client va à nouveau "te hurler dessus" si il voit le poids total de ta page et le temps de chargement : 4,2 Mo et 12.5 secondes de chargement total... c'est beauuuucoup !!!

Cordialement,

[RobertG]

Re : souci d'affichage

Effectivement, sous Chrome, en 1920 * 1080, j'ai du blanc en bas (habituellement, je suis en 1600*900 sur mon navigateur)

[chabi01]

Re : souci d'affichage

Bonjour,
Je viens de regarder ta page : elle n'est pas vraiment responsive.
Sur la page d'accueil, ton énorme image de fond ne se retaille pas, les blocs images ronds se décalent en redimensionnant l'écran.
Si je clique sur le lien "Abaxus", tu as tes blocs qui se réduisent effectivement mais au détriment de l'affichage : le texte devient illisible rapidement...

Cordialement

[Nathy78]

Re : souci d'affichage

Bonjour Chabi, j'ai tenté durant le week-end d'améliorer certains points (poids de l'image de fond par ex), mais du coup, mon rendu est s'est détérioré. L'image de fond est un format png à 100%, mais elle ne s'étire pas pour occuper toute la largeur de la fenêtre. Je ne comprends pas pourquoi.
Initialement, j'ai créé deux templates, l'une pour l'accueil avec l'image de fond en fond de bloc, et l'autre pour afficher le contenu. Hélas, bien que le menu "qui sommes nous" pointe vers la matrice "page accueil", c'est la template 2 "contenu" qui ressort, que je désigne la template 1 par défaut ou non. Je ne comprends pas pourquoi.
Mon client m'a même demandé d'enlever le bandeau titre, ce que j'ai fait sur les deux templates. La mise à jour n'est pas prise en compte. Je ne comprends pas pourquoi.
Ne pouvant faire appel à la template 1, j'ai cherché sur le forum joomla et sur un forum de développeur comment mettre une image en fond d'article sur la page d'accueil et insérer des boutons réactifs au roll over sans recourir au tableau. Je n'ai pas réussi à positionner mes boutons sans recourir à un tableau. Mais en effet, je crains que le tableau ne soit pas responsive et du coup, les ronds sont mal placés par rapport au dessin de fond (avec l'ovale et les flèches demandées par mon client)
Je suis vraiment à bout d'idée et mon "client employeur" devient vraiment très désagréable. Je ne sais plus que faire.

Je suis très loin d'avoir des compétences de développeur, ce que j'ai dit dès le début à mon "employeur", mais il n'entend rien et exige de moi des solutions sur mesure.

Au secours...

[chabi01]

Re : souci d'affichage

Bonsoir,
Plutôt que d'utiliser un tableau, tu peux travailler avec un positionnement en div unique (identifié par des id et pas des class) et les régler via ta feuille de style mobile.css de ton template.
Cela te permettra d'ajuster ton positionnement pour chaque définition d'écran indiqué dans ton fichier css par les médiaqueries.

Cordialement,

[Nathy78]

Re : souci d'affichage

Merci Chabi, j'ai essayé cette technique, mais je ne maitrise pas et le résultat est très insatisfaisant, d'autant que mon image background, bien qu'en format png à 100%, n'occupe pas l'intégralité du contenant.
Ce serait déjà bien de commencer par réussir à faire en sorte que mon background article occupe tout l'espace disponible pour l'article...