[RESOLU] Taille minimale de police sur FF provoque un gros décalage

Bonjour à tous,

Tout heureux d'avoir fini la nouvelle version de mon site internet il y une semaine. Voici qu'un visiteur m'interpelle sur un problème d'affichage sous firefox. En effet ce dernier utilise une police de taille minimale équivalente à 15 pixels.

L'accueil de mon site est structuré comme ça :

header (762px)
navigation gauche (150px) - contenu principal (612px)
footer (762px)

L'impact de ce paramètre positionné fait que la taille des titres de sections dans mon menu principal (header) augmente d'un pixel et provoque un décalage du header sur mon contenu principal. De ce fait la navigation gauche se retouve projetée tout à droite de mon site sur une largeur de 150 pixels. Le contenu principal lui ayant disparu.

Il faudrait que j'empêche mon header de déborder finalement sur la partie du mileu, mais j'avoue que je sais pas trop quoi faire.

Je n'avais pas pensé aux utilisateurs qui jouaient avec les tailles minimum de police. Je suis bien embêté.
Merci de votre aide.
Modifié par PhilouMinety (07 Feb 2010 - 22:52)

Salut,

Il serait bon de nous fournir une page en ligne pour que nous puissions être en mesure de t'apporter une solution à ton problème. Sans cela j'ai peur que cela soit difficile.

Arf autant pour moi excuse! C'est vrai que ça sera plus simple. Sorry!

Voici l'adresse de mon accueil : http://www.emiliana.nu/fr/

Bon j'ai trouvé une solution entre deux.

J'ai rajouté à mon code au niveau du header la ligne suivante:

overflow: hidden;

Ca empêche donc mon header de déborder sur mon contenu du milieu et de me créer des décalages à tout va.

Cependant ca soulève quelques questions. En effet, j'empêche quelque part mon header de se développer. Mais si l'utilisateur met une police super grande, certains titres de sections peuvent disparaître avec l'overflow en hidden. Quels seraient selon vous les critères et méthodes à prendre en compte pour ces utilisateurs qui jouent avec la taille de police dans leur navigateur.

Merci d'avance pour vos réponses.

Bonjour,

Le problème de base, c'est que tu fixe la hauteur des éléments, ce que tu ne devrais pas faire.

Et, le overflow:hidden, c'est une très mauvaise idée, tu rends portion de ton contenu inaccessibles à tous ceux qui agrandissent un peu (car certains ont besoins de caractères bien plus grand que 15px de haut pour lire) les textes. Cela ne concerne pas uniquement les mal-voyants, dans le groupe tu peux rajouter les personnes âgées, les personnes qui ont un mal de tête et tous ceux qui trouvent que la police de base est trop petite (et elle est d'ailleurs minuscule).

Salut.

Pour le overflow je suis effectivement d'accord avec toi. Tout le site suit avec un agrandissement du texte sauf le menu principal qui bouffe mon contenu.


EDIT : 07/02/2010 - 22h40

Bon j'ai rajouté un "clear: left" sur la partie qui suivait mon header et ça a l'air de marcher. Et j'ai supprimé le "overflow: hidden" sur mon header et j'ai remplacé "height" par "min-height"

J'ai fais des tests avec une police "24" dans firefox et toutes mes parties son visibles. Les parties s'adaptent bien à la police maintenant.

Je vais également revoir la taille de police de mon site et revoir l'encodage du texte au niveau du css. J'avais complétement fait abstraction de cet élément et je me rends compte combien ça peut être gênant pour l'internaute et pour la catégorie de gens que tu citais.

Merci pour l'aide.
Modifié par PhilouMinety (07 Feb 2010 - 22:54)