Résolution d'écran et css

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 17 Février 2009.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    935
    J'aime reçus:
    15
    Salut,

    Je voudrais pourquoi avec un ordinateur portable (écran 17 pouces) ayant une résolution d'écran de 1440 x 900 px mon site (ht**tp://www.diam**ants-infos.com) ne s'affiche pas comme il faut (du texte déborde ou est trop gros, etc...) alors qu'avec mon PC (écran 22 pouces) réglé avec une résolution d'écran de 1680 x 1050 px mon site s'affiche tout à fait normalement, j'y comprends rien, quelqu'un peut-il m'aider un peu ?

    Merci pour vos conseils.
     
  2. mahdivitche
    mahdivitche WRInaute impliqué
    Inscrit:
    6 Janvier 2008
    Messages:
    869
    J'aime reçus:
    0
    Bonjour,

    j'ai vérifie votre site dans mon pc avec plusieurs résolution et j'ai pas remarqué aucun problème ( sous FireFox )

    mais Sous IE6 tu as des probléme au niveau de position des div

    Nb: tu peut testé toi même votre site en changé la résolution de votre écran.
     
  3. jcaron
    jcaron WRInaute accro
    Inscrit:
    13 Février 2004
    Messages:
    2 579
    J'aime reçus:
    0
    Je dis ça un peu au pif, mais c'est peut-être dû au fait que tu as un mélange de tailles en "points" (pt) et "pixels" (px).

    Un "point" vaut normalement 1/72e de pouce, donc avec une résolution de 72 dpi (72 ppp en français), 1pt=1px, et pour la plupart des écrans (jusqu'à environ 100 dpi) la correspondance est maintenue. Sur les écrans à plus haute résolution, Windows est souvent configuré par défaut avec une correspondance différente.

    Si tu nous dis quel OS tu utilises (XP, Vista, autre chose...?) on pourra te dire où vérifier ce paramètre chez toi (qui te permettra de confirmer que c'est bien de là que vient le problème).

    En ce qui concerne la solution, la plus simple est de tout mettre soit en pt, soit en px, mais pas de mélanger. Evidemment, si tu choisis des pt, avec des images ça veut dire que si 1pt <> 1px, elles seront légèrement étirées et donc moins "nettes". A l'opposé, si tu choisis des px, tout sera plus petit sur un écran avec une résolution plus élevée.

    Jacques.
     
  4. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    935
    J'aime reçus:
    15
    Merci pour vos réponses.

    mahdivitche peux-tu me dire avec quelle résolution ça ne s'afficait pas correctement avec Internet Explorer ?

    jcaron mon ordinateur portable tourne avec Vista edition familiale et mon PC tourne avec Vista professionnel, quand tu dis que :
    à quoi fais-tu référence (aux fonts qui sont dans le css ?) ?

    Merci pour votre aide précieuse...
     
  5. KOogar
    KOogar WRInaute accro
    Inscrit:
    16 Novembre 2004
    Messages:
    4 643
    J'aime reçus:
    82
    Tout peut changer d'un navigateur a l'autre, d'un OS à l'autre et d'une résolution d'écran à l'autre.
    Je pense que la solution est comme le signale Jacques de ne pas mélanger les px et les pt, mais aussi d'éviter les tailles fixes,, et de fermer correctemement les tags. question d'hatitude. Le CSS est a l'inverse du HTML car c'est un langage qui demande beaucoup de rigueur

    voila,

    ton site est nickel a l'affichage sur win2000NT + firefox
    mais pete un cable sur win2000NT+IE6+7 (la page central est tout en bas, il manque un float:left entre le menu de gauche et la page central, ou la page central est mal defini ( taille fixe en trop peut-etre..

    Je test pas le reste, par habitude si le site s'affichage correctement sur ces 2 config, tout va bien pour les autres config
     
  6. jcaron
    jcaron WRInaute accro
    Inscrit:
    13 Février 2004
    Messages:
    2 579
    J'aime reçus:
    0
    Clic droit sur le bureau, "Personnaliser", "Régler la taille de la police (en PPP)" (en haut à gauche), et regarde la valeur qui est sélectionnée, je pense que tu n'as pas la même chose des deux côtés.

    A toutes les tailles dans le CSS.

    Jacques.
     
  7. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    935
    J'aime reçus:
    15
    Merci pour vos réponses.

    KOogar j'ai déjà rencontré ce problème de page centrale qui se retrouve en bas avec certains OS et résolution d'écran et je n'arrive pas à trouver la raison, peux-tu tester cet autre site ht*tp://www.gem**mes-infos.com et me dire si tu rencontre le même souci d'affichage ? Si tu as quelques pistes pour résoudre ce problème je t'en serais très reconnaissant, il doit y avoir quelques chose qui cloche dans mon css.

    jacques la taille de la police (en PPP) es teffectivement différente entre mes 2 ordinateurs. Que vaut-il mieux choisir comme taille dans le css "px" ou "pt" ? Est-ce les margin, padding etc.. doivent eux aussi être dans la même mesure que les fonts ?

    J'ai lu aussi que l'on pouvait utiliser les "em" à la place des "px" ou "pt", qu'en pensez-vous ?
     
  8. jcaron
    jcaron WRInaute accro
    Inscrit:
    13 Février 2004
    Messages:
    2 579
    J'aime reçus:
    0
    Ca dépend de ce que tu veux obtenir: en "px", ça fera toujours la même taille en pixels quelle que soit la résolution (donc sur un écran à haute résolution ce sera plus petit). En "pt", en théorie (si tout est paramétré correctement sur le PC, ce qui est rarement le cas), ça fera toujours la même taille "réelle" (ce qui peut représenter plus de pixels).

    Idéalement, il faudrait travailler en "pt" pour que ça fasse toujours la même taille, mais comme je l'ai dit plus haut, ça pose le problème des images, qui risquent d'avoir une moins bonne qualité. Ce qui fait que la plupart des gens travaillent probablement en "px" plutôt qu'en pt.

    Ceci dit, il est tout à fait possible de mélanger les deux, par exemple mettre toutes les fontes en pt et tout le reste (tailles des images et autres blocs) et px, en sachant simplement que le texte prendra "plus de place" sur certains écrans que d'autres (et donc que dans des blocs de taille fixe, on mettra moins de texte).

    Jacques.
     
  9. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    935
    J'aime reçus:
    15
    Merci jacques, c'est pas facile de trouver la bonne solution, on lit de tout sur le web et il est assez difficile de choisir entre px, pt et em.

    Est-ce que tu as constaté le même bug de mon site avec IE ?

    Qui est-ce qui m'aider à trouver ce qui ne va pas avec IE ?
     
  10. jcaron
    jcaron WRInaute accro
    Inscrit:
    13 Février 2004
    Messages:
    2 579
    J'aime reçus:
    0
    Chez moi avec IE le seul problème c'est le bloc Adsense tout en bas qui ne se déplace pas comme il faut quand on change la taille de la fenêtre, c'est assez bizarre.

    Sur Opera, les pop-ups à droite en haut sont trop larges.

    Commence par passer ton site au validateur W3C, tu verras que tu as un paquet d'erreurs (essentiellement des & qui devraient être des &amp; dans les liens, plus quelques problèmes d'ordre d'imbrication des tags), tu y verras peut-être plus clair après. Pareil pour ton CSS, tu as des "text-decoration:yes" et des "border-middle" qui ne sont pas standard.

    Jacques.
     
  11. mahdivitche
    mahdivitche WRInaute impliqué
    Inscrit:
    6 Janvier 2008
    Messages:
    869
    J'aime reçus:
    0
    [​IMG]
     
  12. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    935
    J'aime reçus:
    15
    Merci pour vos réponses.

    Je vais suivre tes conseils jacques j'ai commencé à nettoyer mon code et le mettre en conformité avec le W3C.

    J'ai un petit souci avec la date (à droite) de la barre horizontale de couleur bleue en haut de mon site qui ne s'aligne pas comme il faut dans la barre avec les autres textes écrits sur cette barre (Diamants Infos --- FranceL'univers du diamant : de la mine à la bijouterie...), ça s'affiche correctement avec IE mais la date se décale légèrement en-dessous de la barre avec Mozilla Firefox et Opera, pourtant ce que je veux faire semble simple mais en pratique avec le CSS c'est pas si simple. Comment positionné et aligné horizontalement en CSS 3 textes différents dans une barre horizontale sur toute la largeur du site, l'un aligné à gauche, l'autre centré et le dernier à droite dans la barre ? J'ai trouvé le problème, c'était à cause des listes à puces au dessus de la barre, le problème est résolu.
     
  13. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    935
    J'aime reçus:
    15
    Salut,

    J'a fait quelques modifications sur mon site (notamment dans le CSS), pourriez-vous me dire s'il s'affiche normalement avec vos ordinateurs ?

    D'avance merci.
     
Chargement...
Similar Threads - Résolution écran css Forum Date
Adapter un site suivant la résolution de l'écran en CSS Développement d'un site Web ou d'une appli mobile 2 Mai 2006
CSS + résolution ecran... Administration d'un site Web 29 Avril 2004
résolution d'écran et affichage via php Développement d'un site Web ou d'une appli mobile 11 Avril 2015
Adapter automatiquement à la résolution d'écran Débuter en référencement 8 Mars 2013
Détection résolution écran Développement d'un site Web ou d'une appli mobile 22 Juin 2011
Soucis de compatibilité navigateur et résolution d'écran Développement d'un site Web ou d'une appli mobile 17 Décembre 2010
Question ref menu et resolution ecran Débuter en référencement 4 Décembre 2009
probleme resolution ecran Développement d'un site Web ou d'une appli mobile 14 Août 2008
Résolutions d'écrans et visiteurs. Référencement Google 9 Juillet 2008
Résolution d'écran et configuration du site Développement d'un site Web ou d'une appli mobile 23 Janvier 2008
Google surf en ... quelle résolution d'écran ? Google : l'entreprise, les sites web, les services 17 Janvier 2008
Résolution d'écran Développement d'un site Web ou d'une appli mobile 3 Janvier 2008
Probleme resolution ecran Développement d'un site Web ou d'une appli mobile 22 Avril 2007
Vos commentaires sur mon site / résolution d'écran Demandes d'avis et de conseils sur vos sites 19 Juin 2006
Questions basiques sur le javascript et résolution d'écran Développement d'un site Web ou d'une appli mobile 5 Juin 2006
Résolution écran php et java Développement d'un site Web ou d'une appli mobile 2 Juin 2006
Javascript et résolution d'écran Développement d'un site Web ou d'une appli mobile 18 Mai 2006
Les résolutions d'écran et les sites web Développement d'un site Web ou d'une appli mobile 8 Mai 2006
résolution! taille d'écran! fond adaptable! AIE AIE AIE Développement d'un site Web ou d'une appli mobile 21 Avril 2006
connaitre la resolution d'ecran la plus utilisé? Problèmes de référencement spécifiques à vos sites 18 Octobre 2005