mon site a un affichage différent sur plusieurs moniteurs

mon site a un affichage différent sur plusieurs moniteurs - HTML/CSS - Programmation

Marsh Posté le 20-02-2007 à 10:36:47    

salut, néophyte, je viens de terminer un site (en allemand) avec des css.
http://www.rechtsanwaltskanzlei-steineck.de
 
(en phase de test; donc incomplet,...)
 
L'affichage sur mon écran TFT 19" est impeccable mais sur un 17" CRT le texte sort de l'écran, ainsi que les scrollers droits, ce qui occasionne les effets visuels négatifs suivants:
 
- Il faut faire un scroll horizontal et vertical pour le reste de la page.
 
- Les menus sont trop bas et recouverts par la barrière du bas. Ce problème est en partie résolu
 
- le site recouvre tout l'écran alors que sur mon 19", il y a une marge blanche à droite comme je le souhaitais.
 
 
Faudrait-il pas mieux centrer le site entier et laisser deux petites marges á droite et à gauche.
 
mon css:

Code :
  1. /* CSS Document */
  2. .font {
  3. font-family: Verdana, Arial, Helvetica, sans-serif;
  4. font-size: 11px;
  5. font-weight: normal;
  6. font-style: normal;
  7. font-variant: normal;
  8. }
  9. .gras {
  10. font-family: Verdana, Arial, Helvetica, sans-serif;
  11. font-size: 11px;
  12. font:
  13. font-weight: normal;
  14. font-style: normal;
  15. font-weight: bold;
  16. }
  17. body {
  18. position: absolute;
  19. margin: 0em;
  20. margin-left: 0em;
  21. padding: 0em;
  22. width: 80%;
  23. height: 100%;
  24. }
  25. div#haut {
  26. margin-bottom:auto;
  27. margin-top:auto;
  28. width: auto;
  29. height: 0.50em;
  30. }
  31. div#conteneur {
  32. height: 100%;
  33. width: 100%;
  34. float:left;
  35. }
  36.  
  37. #menu {
  38. position: absolute;
  39. width: 126px;
  40. height: 520px;
  41. margin: 0px;
  42. padding: opx;
  43. left: -15px;
  44. margin-top: 160px;
  45. top: 3px;
  46. font-family: Arial, Helvetica, sans-serif;
  47. font-size: 12px;
  48. color: #000066;
  49. background-color:#FFFFFF;
  50.  }
  51. a.lien {
  52. color: #000033;
  53. text-decoration: underline;
  54. }
  55. a.lien:hover { color: #666666; background-color: #CCCC9A; }
  56. #frame {
  57. position:relative;
  58. margin-top: 140px;
  59. margin-left: 120px; /* on place ce bloc à droite du bloc menu de 180px de large */
  60. margin-bottom: 0px;
  61. padding: 10px;
  62. padding-top: 5px;
  63. height: 70%;
  64. width: 902px;
  65. overflow: auto/*cette propriété va permettre le scroll de ce bloc */
  66. font-size: 11px;
  67. font-family: Arial, Helvetica, sans-serif;
  68. border-left:dotted thin;
  69. }
  70. #bas {
  71. position:relative;
  72. margin:0px;
  73. margin-top: auto;
  74. width: 860px;
  75. height: 50px;
  76.          top: 15px;
  77. }
  78. </style>


 
 
Mon css, je le sais, n'est pas des plus optimaux, je voudrais corriger certaines choses mais je crains de faire pire.Si quelqu'n peut me conseiller. A+

Reply

Marsh Posté le 20-02-2007 à 10:36:47   

Reply

Marsh Posté le 20-02-2007 à 11:00:55    

Bonjour,
 
Cela ne dépend pas du moniteur mais de sa résolution d'affichage (longueur * largeur). En 1024*768 effectivement tu "dépasses" de la largeur d'un écran, et 1024*768 est la résolution standard pour les 17''.
 
Regarde au niveau de tes divs que tu détermines de manière fixe.  
la #bas fait 860px, la frame 902, la menu 126. Je n'ai pas pris le temps d'analyser sur ton site laquelle est laquelle, mais change ces valeurs soit en les réduisant un peu (si tu veux garder un affichage "figé" ), soit en utilisant des % (pour un affichage dynamique)
 
Ah oui et si le div#conteneur est bien le div le plus externe, une hauteur de 100% n'a aucun sens.
 

Reply

Marsh Posté le 20-02-2007 à 14:09:37    

salut, merci de ton aide. J'avais pensé á cela. Ma plus grande largeur est la bannière qui fait 1024px de large, mon frame du milieu fait 900px de large. La question que je me pose: est-ce que les marges et les bords s'ajoutent à cette largeur? je pense que oui, logique. C'est la raison. La largeur de mon menu + frame > 1024px

Code :
  1. #frame {
  2. position:relative;
  3. margin-top: 140px;
  4. margin-left: 120px; /* on place ce bloc à droite du bloc menu de 180px de large */
  5. margin-bottom: 0px;
  6. padding: 10px;
  7. padding-top: 5px;
  8. /*height: 72%;*/
  9. width:900px;


 
j'ai ajusté les largeurs et cela est déjà mieux. Cela va être tout juste car je ne pas réduire plus que cela le menu à gauche. Je cherche encore. A+

Reply

Marsh Posté le 20-02-2007 à 14:57:18    

C'est un choix aussi. Il faut que tu fasses une étude voir quel est le public cible pour ton site ... et décider d'une largeur minimale imposée. Il y a deux ou trois ans je t'aurais dit 1024 d'office, mais de nos jours de plus en plus de configs ont 1280 comme base ....
 
Mais vu le thème de ton site (je parle pas un mot d'allemand mais je devine que c'est une sorte de site de CV d'une avocate ou un truc comme ça?) je prendrais quand même toujours 1024... donc la réduction des frames à largeur fixe s'impose :)

Reply

Marsh Posté le 20-02-2007 à 15:28:53    

salut, mon écran est un 1280x1024 pouces, un Hyundai L90D+. Le site s'affiche d'une manière impeccable avec une marge blanche à droite. j'essaie d'arriver à 1024px de large mais pour cela, va falloir tronquer du texte á droite, retour forcé à la ligne,  etc.... Oui c'est un site pour une avocate. Son écran 17" n'affiche pas tout le texte sur la marge droite, elle doit scroller pour voir quelques caractères, mais tres peu. a+

Reply

Marsh Posté le 20-02-2007 à 20:56:51    

midiweb a écrit :

salut, mon écran est un 1280x1024 pouces, un Hyundai L90D+. Le site s'affiche d'une manière impeccable avec une marge blanche à droite. j'essaie d'arriver à 1024px de large mais pour cela, va falloir tronquer du texte á droite, retour forcé à la ligne,  etc.... Oui c'est un site pour une avocate. Son écran 17" n'affiche pas tout le texte sur la marge droite, elle doit scroller pour voir quelques caractères, mais tres peu. a+


Ton site est mal fait, revoit tout ca, il ne doit pas depasser les 960px de large pour une resolution général de 1024px

Reply

Marsh Posté le 21-02-2007 à 10:27:30    

N'oublie pas aussi les pauvres gens en 800*600 qui se content de 760 pixels de large ;)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed