Bugs d'affichage de mon site selon le navigateur

Azzedine

Membre confirmé
1 Février 2004
74
3
Pont-Sainte-Maxence
Bonjour,
N'étant pas professionnel du web mais ayant tout de même quelques vielles notions en logique j'ai décidé de faire mon site moi même à l'aide du logiciel mac Flux IV (assez peu répandu). Pour deux ou trois choses spécifiques je suis allé chercher des bouts de code sur internet et je les ai adaptés (pour ces parties tout va bien d'ailleurs). J'ai contrôlé mon site dans Safari sur le mac et tout est OK donc j'ai posté le site dans un sous domaine isolé le temps de faire contrôler par d'autres yeux. Après une résolution d'un bug qui donnait l'adresse du CSS en local au lieu de laisser juste le nom du fichier (puisque dans le même répertoire). Bref, ceci réglé j'affiche le site dans Safari Mac c'est OK, je vais voir chez un ami beurkiste et certaines zones se chevauchent... Intrigué je regarde dans un Safari iPad et là le bug de chevauchement s'affiche. J'ai voulu contrôler avec Firefox sur le mac et effectivement il y a chevauchement, seul problème : je ne peux pas m'appuyer sur ce que je vois dans Firefox vu qu'il a cette cochonnerie de malware "MacVx" installé et impossible de le virer avec adware medic. J'ai quand même essayé de voir dans le code mais je ne sais pas comment régler l'erreur du faite de mon novisme.
Après quelques investigations et essais j'ai pu résoudre partiellement le problème, en faite dans Safari pour ordinateur ou chrome l'interligne par défaut est de 1,15 comme visualisé dans Flux ce qui fait que je positionnais mes div pour cet espacement. Par contre Opera le met à 1 et Firefox doit le mettre à 1,2, ce qui fait que tout est décalé, dans Opera ça laisse un vide et dans Firefox les zones se chevauchent parfois. J'ai donc redéfinit l'interligne à 1,15 pour éviter de tout devoir recalculer. Désormais tout va bien sur Chrome, Safari (Mac ou iBidules) et Opera, mais, visiblement, le bug persiste dans Firefox et Internet explorer comme si ceux-ci n'en faisaient qu'à leur tête, imposant la valeur de l'interligne au détriment des définitions dans le code... Quelle solution pour régler cela? J'ai pu voir, qu'en France, ce qui compte pour moi, il y a une majorité de Chrome et qu'internet explorer arrive en troisième position mais Firefox est second, ça fait que je dois me passer d'à peu près de 45% du marché, ce qui est inacceptable. Qu'est-ce qui ne va pas? comment résoudre ce bug? Y a t'il d'autres erreurs (dans le code ou ailleurs) dans le site?
Le site : http://test.azzedesign.com
Merci d'avance à tous ceux qui pourraient m'aider à corriger ce qui ne va pas.
 
Bonsoir, merci de la réponse, en faite il semble que le bug soit minimisé dans la page d'index mais une fois qu'on clique par exemple sur l'onglet "Nos engagements" le bug devient flagrant, également dans "Nous contacter".
Visiblement j'utilise mal les div en leur donnant un absolute et une position et dims mais je ne sais pas comment faire, je n'ai pas bien compris ce qui se dit ici
 
Visiblement j'utilise mal les div en leur donnant un absolute et une position et dims mais je ne sais pas comment faire, je n'ai pas bien compris ce qui se dit ici
Effectivement le positionnement en absolute est déconseillé, un site se construit dans le flux Html, pas besoin de bloquer les éléments, ton approche est classique comme avec le print.
Ensuite il existe une solution qui te permet d'avoir moins de soucis c'est d'utiliser un reset css en premier dans ta feuille de styles. Cela va régler pas mal de soucis de comportement selon les navigateurs... à essayer. :rolleyes::cool:
 
Bon... J'ai essayé de comprendre ce qui se disait sur les sites comme alsacreation sur la façon d'utiliser et de déclarer dans le CSS mais, vu que personne ne sait expliquer concrètement, je n'ai rien compris. Et comme je ne veux pas un site sur un modèle basic, mais MON site comme je le veux, ça restera ainsi et aux chiottes Firefox PC et IE.
Bon, pour expliquer cela, j'ai un cerveau qui bloque intégralement dès qu'on se borne à expliquer de façon théorique, pour cela je n'ai jamais pu réussir mes études supérieures à cause des dérivées et des intégrales. Par contre je connais pratiquement toute la norme NFC 15-100 et je sais comment câbler n'importe quel appareillage électrique parce que c'est concret et non abstrait. J'e m'en sortait haut la main en informatique industrielle car les composant avaient une fonction concrète mais rien a faire des qu'on tombait sur une fonction dérivée ou intégrale car plus rien de concret pour moi (ou de la façon dont on me l'a expliqué). Ici pareil, les sites ne donnent pas la liste des éléments et leur fonction, la liste des fonctions et leur action, etc. mais se contentent d'expliquer de manière abstraite, pour cela je bloque dès la première ligne, la lire 100, 1000, 10000 ou même 100000000000000000000000000000000000000 fois n'y changera rien, je ne comprendrais pas de cette manière.
Ça se finira ainsi : soit on me l'explique concrètement, soit le site reste ainsi jusqu'à ce que je puisse payer un dev pour le faire (en France, vu le contexte fiscal, chaque politique se sera payé 15 villas à plusieurs millions avant que je réussisse à économiser 100 balles pour ça...).
 
Dernière édition:
Le web c'est du HTML pour la base + CSS pour les styles, on garde le "flux" HTML le plus libre possible, les <div> sont donc des modules qui s'adaptent et se "poussent" selon leur contenu vers le bas.

Vu qu'aujourd'hui 25 à 45 % du trafic ce fait sur mobile ou tablette tu dois prévoir des règles CSS qui sont basées sur la technique Responsive qui va adapter ton contenu selon la largeur du navigateur du visiteur.
Et comme je ne veux pas un site sur un modèle basic, mais MON site comme je le veux, ça restera ainsi et aux chiottes Firefox PC et IE.

Refaire la roue de tout cela si ça te branche pourquoi pas… mais tu trouves des solutions pré-fabriquées qui sont déjà bien foutues sur tous les points précédents, il te reste à personnaliser via les CSS. Tu trouves aussi des moteurs de templates.

Il faut oublier ton positionnement absolute qui "coince" complètement ton site. :rolleyes: :cool: :hungry:
 
Dernière édition:
Oui, j'ai trouvé un tuto digest et j'essaye de tout refaire au fur et à mesure. J'ai encore cette fâcheuse tendance à imposer la hauteur mais quand certains navigateurs comme firefox, IE ou Opera varient sur l'interligne c'est une mauvaise idée. J'ai vu donc en jouant sur les marges. Le résultat bientôt...
 
Oui, j'ai trouvé un tuto digest et j'essaye de tout refaire au fur et à mesure. J'ai encore cette fâcheuse tendance à imposer la hauteur mais quand certains navigateurs comme firefox, IE ou Opera varient sur l'interligne c'est une mauvaise idée. J'ai vu donc en jouant sur les marges. Le résultat bientôt...
 
Oui, j'ai trouvé un tuto digest et j'essaye de tout refaire au fur et à mesure. J'ai encore cette fâcheuse tendance à imposer la hauteur mais quand certains navigateurs comme firefox, IE ou Opera varient sur l'interligne c'est une mauvaise idée. J'ai vu donc en jouant sur les marges. Le résultat bientôt...
 
Pour les marges je te conseille d'incorporer un RESET CSS en premier dans ta feuille de styles, tout sera identique par la suite.
Et comment on fait ça? qu'est-ce que ça implique?
Merci.
 
Je t'ai déjà indiqué cela plus haut, pour être complet sur Alsacréations va lire :
Reset CSS
Styles de base

J'avoue que le Reset CSS s'adresse au vrai webdesigner qui sait ce qu'il fait, car dans ce cas il faut bien définir les balises HTML pour ne pas les laisser orphelines de leur style standard (perso j'utilise celle d'Eric Meyer), Alsacréations te propose un feuille de base alternative moins destructive. Pour faire simple, tous les éléments qui te posent problèmes doivent recevoir un style personnalisé sinon c'est le navigateur qui prend la main et fout le boxon.

Bonne lecture… :rolleyes: :cool:
 
Bon... J'ai tout refait, j'ai remis en ligne.
Du coup je pense que c'est bien plus propre maintenant. J'ai juste besoin d'avis sur le code et le reste aussi. Merci.
Le site test.
 
C'est propre au niveau respect du flux HTML… mais ce n'est pas responsif et sur tablette ou smartphone ton site est difficile à consulter… dommage.

Ton bandeau reste perfectible avec une image à gauche qui comble un vide et ne sert à rien. Un simple margin left permet de positionner ton logo, la conception même de ce bandeau n'est pas correcte, le positionnement peut fonctionner avec le principe du "float:left" et un jeu de z-index, tout ceci pour porter le responsif facilement en jouant sur des règles de max-width sur les largeurs des <div> principales.

Tu appliques aussi le responsif sur les images, et tu auras un site correct sur smartphone et tablette :

essai_test_site.jpg

Le menu en image avec survol en onMouseHover n'est plus d'usage, surtout vu ce qu'il est graphiquement, tu peux avoir le même rendu en CSS pur, ainsi ce menu serait facile à gérer en responsif avec une règle MediaQuerie sur la largeur 768px.

Autre point à supprimer : la largeur dans le body… ça ne sert à rien.