28172 sujets

CSS et mise en forme, CSS3

Problème adaptation résolution

Bonjour à tous, c'est encore moi ^^

En soumettant un problème sur ce forum, un (super) utilisateur m'a fait remarqué que chez lui, la largeur de ma page dépasse la taille de son écran et il s'affiche donc une scroll bar horizontale, pourtant, ma div "corps" est en width: 100em (em donc normalement une unité relative variant selon la résolution).

pour gagner en lisibilité, vous pouvez acceder directement au site en ligne sur http://synoveo.alwaysdata.net

d'avance merci Smiley smile
Bonjour,

em est une unité basée sur la typographie, et - à priori - utilisée pour la typographie.
Le super article sur le super site.

Elle n'est pas censée être utilisée pour dimensionner des blocs - sauf indirectement, avec line-height - puisque pour un corps de texte de 16px ( ex. ), 100em = 1600px. Le résultat ne dépend en aucun cas de la taille et/ou résolution de l'écran, mais uniquement de ton corps de texte appliqué sur <body>.

Pour dimensionner des blocs en relatif on utilisera plutôt les pourcentages, qui eux, seront relatifs à l'écran.

Bonne continuation !
Salut Smiley smile

Ten a écrit :
Elle n'est pas censée être utilisée pour dimensionner des blocs

A bon ? et pourquoi ça ?

La majorité des sites web utilisent une largeur de 960px pour les div conteneur. Si tu met un max-width comme je te l'ai conseillé par M.P. sur #corps tu vas voir que ton site se redimensionnera déjà à la volée et sera lisible sur la plupart des résolutions d'ordinateurs (il faudra probablement passer par les media queries pour les smartphones) .

Et vu que tu as utilisé des unités relatives, le redimensionnement ne crée pas de scroll horizontal, donc c'est déjà clairement un bon début.

Mais bon forcément ça déstructure un peu le site, il te suffira de diminuer un peu les width des div concernés et tout rentre dans l'ordre (je viens de tester).

Bonne continuation à toi Smiley smile
Bonjour.

En passant, deux remarques qui n'ont rien à voir :

1. On écrit "accueil", et non "acceuil"

2. Que signifie cette mention "optimisé pour Firefox", qui ramène aux pires heures de la guerre des navigateurs, avec les sites optimisés pour IE ou pour Netscape Navigator. Que, par exemple, si tu utilises des propriétés CSS provisoires, tu ne les préfixes qu'avec "-moz-" ?

Une telle mention n'a pas lieu d'être. Un site web doit être affiché correctement sur un maximum de navigateurs et versions de navigateurs (dans la mesure du possible).

Firefox compte 24,78 % d'utilisateurs dans le monde et 31,94 % d'utilisateurs en France. Comptes-tu avoir un affichage défaillant dans +/- 70% des navigateurs ?

Amicalement.
Modifié par thierry (23 Feb 2012 - 10:35)
Bonjour,

a écrit :
A bon ? et pourquoi ça ?


"em" est l'expression anglaise pour designer un cadratin, qui en typo, est une unité de mesure de longueur des espaces (largeur de la lettre). Cette unité relative est donc par définition utilisée pour gérer la taille des typos et non pas des blocs (bien que cela doit sans doute fonctionner).
Modifié par NeOxY (23 Feb 2012 - 16:24)
normalement le problème est réglé, pourriez vous me dire si tout s'affiche bien chez vous ? (des marges gauches et droites, très petite marge haut et bas, pas de scroll horizontal)

J'ai mis optimisé pour Firefox car c'est mon navigateur et que c'est celui sur lequel je test en premier, surtout que IE à tendance à ne pas faire comme les autres, mais j'adapte au fur et à mesure pour que ce soit compatible (pour l'instant tout fonctionne sur tous les navigateurs).

Quand j'aurai fini l'ensemble du site je vérifierai toutes les compatibilité et cette mention devrait disparaitre.
Modifié par Justaman (23 Feb 2012 - 17:27)
Sujet clos
Aller à