Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1458 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1419905
khephren-s​pirit
Posté le 04-08-2006 à 17:15:50  profilanswer
 

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
mood
Publicité
Posté le 04-08-2006 à 17:15:50  profilanswer
 

n°1420140
CNeo
Posté le 04-08-2006 à 22:39:42  profilanswer
 

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
n°1420224
khephren-s​pirit
Posté le 04-08-2006 à 23:56:27  profilanswer
 

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
n°1420289
gebruik
Posté le 05-08-2006 à 09:46:15  profilanswer
 

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.

n°1420296
CNeo
Posté le 05-08-2006 à 10:28:07  profilanswer
 

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.

n°1420329
khephren-s​pirit
Posté le 05-08-2006 à 12:21:01  profilanswer
 

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 ...

n°1420381
gebruik
Posté le 05-08-2006 à 13:49:17  profilanswer
 

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 ?

n°1420502
khephren-s​pirit
Posté le 05-08-2006 à 18:04:08  profilanswer
 

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 !

n°1421731
vomegaz
~Libriste & Gulden Draak fan~
Posté le 07-08-2006 à 17:54:49  profilanswer
 

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.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Effacer la mise en forme d'un fichierfonction open et firefox
Centrer mes images en CSS sans blocSVG Compatible FireFox ?
Pb mise en page css pour impression[HTML/CSS/JS/PHP] DEBUTANTS / NEWBIES, ce topic est pour vous :)
[Mise en place appli web]Serveur web+tomcatProbleme de couleurs de police sous Firefox
[Flash/AS] problème d'affichage avec Firefox 
Plus de sujets relatifs à : [CSS] - mise en place design - pb IE / firefox


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR