[CSS] - mise en place design - pb IE / firefox

- mise en place design - pb IE / firefox [CSS] - HTML/CSS - Programmation

Marsh Posté le 04-08-2006 à 17:15:50    

Bonjour à tous,
 
étant plus graphisme que codeur , j'ai tout de même essayé de me lancé dans le css pour mettre en page mon design. Cependant lors du résultat , IE m'affiche mal les emplacements de mes cadres alros que firefox le fait très bien. J'ai entendu parler des problèmes entre ces deux browsers mais je pensais qu'avec du CSS tout irait bien.  
 
Je vous donne donc l'adresse :
 
http://dreams.studio.web.free.fr/design1.html
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. body {
  8. margin: 0;
  9. font-family: verdana, arial, sans-serif;
  10. font-size: 75%;
  11. text-align:center;
  12. background-color:#666666}
  13. .global {
  14. width: 760px;
  15. height: 745px;
  16. margin-right:auto;
  17. margin-left:auto;
  18. margin-top:10px;
  19. padding:0px;
  20. text-align:left;
  21. background-color:#CCCCCC
  22. }
  23. .menu {
  24. background-image:url(images/design1/background/menu.jpg)
  25.     background-color:#FFFFFF;
  26. width: 760px;
  27. height: 140px; /* cette ligne indique la hauteur du bloc menu */
  28. float:left;
  29. margin: 0px;
  30. }
  31. .eventplaylist {
  32. background-image:url(images/design1/background/eventplaylist.jpg);
  33.     background-color:#FFFFFF;
  34. width: 760px;
  35. height: 171px; /* cette ligne indique la hauteur du bloc menu */
  36. float:left;
  37. margin: 0px;
  38. }
  39. .leftframe {
  40. background-image:url(images/design1/background/leftframe.jpg);
  41.     background-color:#FFFFFF;
  42. width: 266px;
  43. height: 245px; /* cette ligne indique la hauteur du bloc menu */
  44. float:left;
  45. margin: 0px;
  46. }
  47. .rightframe {
  48. background-image:url(images/design1/background/rightframe.jpg);
  49.     background-color:#FFFFFF;
  50. width: 494px;
  51. height: 245px; /* cette ligne indique la hauteur du bloc menu */
  52. float:left;
  53. margin: 0px;
  54. }
  55. .newsletter{
  56. background-image:url(images/design1/background/newletter.jpg);
  57.     background-color:#FFFFFF;
  58. width: 266px;
  59. height: 110px; /* cette ligne indique la hauteur du bloc menu */
  60. float:left;
  61. margin: 0px;
  62. }
  63. .titrepartenaires{
  64. background-image:url(images/design1/background/titrepartenaires.jpg);
  65.     background-color:#FFFFFF;
  66. width: 494px;
  67. height: 37px; /* cette ligne indique la hauteur du bloc menu */
  68. float:right;
  69. margin: 0px;
  70. }
  71. .partenaires{
  72. background-image:url(images/design1/background/partenaires.jpg);
  73.     background-color:#FFFFFF;
  74. width: 494px;
  75. height: 60px; /* cette ligne indique la hauteur du bloc menu */
  76. float:right;
  77. margin: 0px;
  78. }
  79. .sspartenaires{
  80.     background-color:#FFFFFF;
  81. width: 494px;
  82. height: 13px; /* cette ligne indique la hauteur du bloc menu */
  83. float:right;
  84. margin: 0px;
  85. }
  86. .barregrise{
  87. background-image:url(images/design1/background/barregrise.jpg);
  88.     background-color:#FFFFFF;
  89. width: 760px;
  90. height: 20px; /* cette ligne indique la hauteur du bloc menu */
  91. float:left;
  92. margin: 0px;
  93. }
  94. .bas{
  95. background-image:url(images/design1/background/bas.jpg);
  96.     background-color:#FFFFFF;
  97. width: 760px;
  98. height: 60px; /* cette ligne indique la hauteur du bloc menu */
  99. float:left;
  100. margin: 0px;
  101. }
  102. </style>
  103. </head>
  104. <body>
  105. <div class="global">
  106. <div class="menu">
  107. </div><!-- fin menu -->
  108. <div class="eventplaylist">
  109. </div><!-- fin evenement playlist -->
  110. <div class="leftframe">
  111. </div><!-- fin cadre de gauche -->
  112. <div class="rightframe">
  113. </div>
  114. <!-- fin cadre de droite -->
  115. <div class="newsletter">
  116. </div><!-- fin cadre de la newsletter -->
  117. <div class="titrepartenaires">
  118. </div><!-- fin cadre du titrepartenaires -->
  119. <div class="partenaires">
  120. </div>
  121. <!-- fin cadre des partenaires -->
  122. <div class="sspartenaires">
  123. </div><!-- fin cadre du dessous partenaires -->
  124. <div class="barregrise">
  125. </div><!-- fin cadre de la barre grise du bas -->
  126. <div class="bas">
  127. </div><!-- fin cadre de la barre grise du bas -->
  128. </div><!-- fin global -->
  129. </body>
  130. </html>


 
Merci de m'aider et/ou de me donner quelques conseils précieux.
 
bonne journée.


Message édité par khephren-spirit le 04-08-2006 à 17:24:06
Reply

Marsh Posté le 04-08-2006 à 17:15:50   

Reply

Marsh Posté le 04-08-2006 à 22:39:42    

1-Utilise des id à la place des classes pour tout ce qui est unique
2-Utilise les commentaires conditionnels


Message édité par CNeo le 04-08-2006 à 22:40:02
Reply

Marsh Posté le 04-08-2006 à 23:56:27    

MAJ : à priori dans le 3ème cadre de partenaires , il y en a un qui fait 13px de hauteur et donc le problème vient de là. Je ne sais pas pourquoi mais dreamweaver n 'accepte pas les cadre de moins de 18 ou 19 px !  Car je viens d'essayer avec une plus grande image et ça marche.  
 
Don voilà si quelqu'un à une solution pour gérer même des cadres de moins de 18-19px , merci.
 
Bonne soirée ou nuit


Message édité par khephren-spirit le 05-08-2006 à 01:47:33
Reply

Marsh Posté le 05-08-2006 à 09:46:15    

Une solution ? Coder à la main.
 
CNeo, l'emploi d'identifiant en lieu et plasse de classe n'est pas une obligation. En effet, c'est une façon de garantir l'unicité de ton élément dans ta page, mais vérifie, peu de navigateurs respectent réellement cette règle.
Le réel intérêt est surtout pour l'emploi de script DOM et du fameux GetElementById.
 
khephren-s pirit, ton problème est un problème de flux. J'ai pas testé, j'ai la flemme de virer tes numéros de ligne.

Reply

Marsh Posté le 05-08-2006 à 10:28:07    

gebruik a écrit :

Une solution ? Coder à la main.
 
CNeo, l'emploi d'identifiant en lieu et plasse de classe n'est pas une obligation. En effet, c'est une façon de garantir l'unicité de ton élément dans ta page, mais vérifie, peu de navigateurs respectent réellement cette règle.
Le réel intérêt est surtout pour l'emploi de script DOM et du fameux GetElementById.
 
khephren-s pirit, ton problème est un problème de flux. J'ai pas testé, j'ai la flemme de virer tes numéros de ligne.


 
Le traitement du même élément possédant une classe ou un id par le navigateur est parfois différent. ;) Mais il est vrai que coder "à la main" est la seule solution.

Reply

Marsh Posté le 05-08-2006 à 12:21:01    

C'est gentil d'avoir répondu cependant je ne comprend pas Gebruik ce que tu entends par : problème de flux ?
 
J'ai pourtant fait les 3/4 à la main pour le css si ce n'est la totalité . Pr ce qui est du html j'ai laissé dreamweaver. Etrange ...

Reply

Marsh Posté le 05-08-2006 à 13:49:17    

Et bien pour faire simple, le positionnement de tes éléments dépendent de l'élément précédent.
Il convient parfois de sortir certains éléments du flux en les positionnant en absolu, ça évite les décalages que tu peux rencontrer selon les navigateurs.
Sans entrer dans les détails, essaie de penser un peu différemment l'aspect de ta page, en créant des conteneurs, genre un header, un conteneur principal et un footer. Dans ces conteneur, positionne tes éléments.
Si tu colles tu float à outrance, tout se suit et le premier petit décalage rencontré aura des conséquences sur le reste.
 
Tu peux nous indiquer une URL ou regarder le résultat ?

Reply

Marsh Posté le 05-08-2006 à 18:04:08    

hey,
 
ouai ok je comprend le raisonnement , j'ai pourtant lu quelques truc sur le positionnement en absolu , mais peux-ton centrer ( sur ts les naviguateurs )une page en absolu car ceux sont des valeurs dont le point 0 est bient le coin haut gauche de la page.
Sinon le resultat est visible http://dreams.studio.web.free.fr/design1.html
 
malgré tout ça j'ai décidé de faire de plus grosses images et ça marche  mais je ne comprend toujours pas la taille minimal dans dreamweaver !

Reply

Marsh Posté le 07-08-2006 à 17:54:49    

ie ne respecte pas les standards w3c c'est pour ça qu'il n'a affiche pas correctement tes pages, il y a quelques contraintes pour eviter cela et quelques astuces.  
Le probleme c'est que souvent, les modifications faite pour que ie affiche correctement la page genere des bug avec mozilla...
 
La meilleur solution c'est faire une fonction javascript qui charge un css different en fonction du navigateur. Comme ça tu as un resultat a peu pres équivalent quelques soit le navigateur utilisé par le client.

Reply

Sujets relatifs:

Leave a Replay

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