Se connecter / S'enregistrer

Résolu CSS: Safari OK, Chrome Ok, Firefox pas OK

Solutions (9)
Tags :
  • Safari
  • Programmation
|
Bonjour,
j'ai actuellement quelques difficultés quant a la rédaction de mon fichier CSS,
Avec Safari et Chrome, toutes mes div s'affichent impecablement tandis qu'avec Firefox,
il m'affiche un paquet groupé de mes div,
j'ai essayé plusieurs solution en changeant position etc mais rien n'a marché;
Quelqu'un aurait t-il une idée pour remédier à ce probleme ?
Bonne journée

ah oui, l'url du site : http://consert.free.fr et le fichier Css est style.css
Contenus similaires
Meilleure solution
partage
|
Je vois que tu débutes dans la programmation, un conseil suis ce tutoriel, tu avanceras plus vite : Voir.

Concernant ton code, je vais le retaper correctement :

Page HTML:

  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. <link rel="stylesheet" type="text/css" href="./stylet.css" />
  6. </head>
  7.  
  8. <body>
  9. <div id="header">
  10. <div class="title"><p>Ton titre</p></div>
  11. </div>
  12.  
  13. <div id="menu"></div>
  14.  
  15. <div id="middle"></div>
  16.  
  17. <div id="footer"></div>
  18.  
  19. </body>
  20. </html>


Page CSS :

  1. div#header {
  2.  
  3. background-image : url(./img/banner.jpg);
  4. width : 740 px;
  5. height : 160 px;
  6. margin:auto
  7. border: 1px solid black;
  8.  
  9. }
  10. div.title {
  11.  
  12. background-image : url(./img/title.png);
  13. height : 60 px;
  14. width : 160 px;
  15. border:1px solid black;
  16.  
  17. }
  18. div.title p{
  19.  
  20. font-size:22px;
  21. text-align : center;
  22. }
  23.  
  24. div#menu {
  25.  
  26. background-image : url(./img/menu.jpg);
  27. background-repeat : repeat-x;
  28. height : 35 px;
  29. width : 740 px;
  30. margin:auto;
  31. border:1px solid black;
  32.  
  33. }
  34. div#middle {
  35. height : 500 px;
  36. width : 740 px;
  37. margin:auto;
  38. border:1px solid black;
  39.  
  40. }
  41. div#footer {
  42.  
  43. height : 80 px;
  44. width : 740 px;
  45. background-color:yellow;
  46. margin:auto;
  47. border:1px solid red;
  48. }


  • Commenter cette solution |
Score
0
òh
òi
|
Meilleure réponse sélectionnée par patateforte.
  • Commenter cette réponse |
Score
0
òh
òi
|
Pas de soucis,

si ton problème est résolu choisis une meilleur réponse.
  • Commenter cette réponse |
Score
0
òh
òi
|
D'accord merci :) 
  • Commenter cette réponse |
Score
0
òh
òi
|
- Sur IE ton site s'affiche correctement mais n'est pas centré.
- Sur OPERA ton site s'affiche correctement et il est centré.

Pour résoudre ce problème utilise le code que j'ai mis.
  • Commenter cette réponse |
Score
0
òh
òi
|
En revanche est-ce que quelqu'un pourrait vérifier si sur Opéra et IE, les div s'affichent correctement, Grand merci

EDIT: J'avais pas vu que tu m'avais répondu désolé, oui je vais transformer mon code html pour mettre le doctype, en fait je ne le met pas toujours pour aller plus vite, pour les div, est-ce vraiment obligatoire de remplacer les class par des id ?
  • Commenter cette réponse |
Score
0
òh
òi
|
En fait j'ai trouvé le problème, j'avais mis des espaces entre mes valeurs et mes unités,
par exemple au lieu de 1px, 1 px, et ça ne fonctionnait pas à cause de ça.
En tout cas merci a toi M@cduf de t'être penché sur mon problème.
Bonne soirée !
  • Commenter cette réponse |
Score
0
òh
òi
|
OK alors voila le code html :
  1. <html>
  2. <head>
  3. <title>TAXI AIRPORT 93</title>
  4. <link href="style.css" rel="stylesheet" type="text/css">
  5. </head>
  6. <body>
  7.  
  8. <div class="header">
  9. <div class="title">
  10. </div>
  11. </div>
  12.  
  13. <div class="menu">
  14. </div>
  15.  
  16. <div class="middle">
  17. </div>
  18.  
  19. <div class="footer">
  20. </div>
  21.  
  22. </body>
  23. </html>


Et le CSS :

  1. .title {
  2. height : 60 px;
  3. width : 160 px;
  4. background-image : url(/img/title.png);
  5. border-width : 1 px;
  6. border-color: red;
  7. border-style: solid;
  8. text-align : center;
  9. font-size : 22px;
  10. }
  11.  
  12. .header {
  13. width : 740 px;
  14. height : 160 px;
  15. background-image : url(img/banner.jpg);
  16. margin-left: auto;
  17. margin-right: auto;
  18. border-width : 1 px;
  19. border-color: black;
  20. border-style: solid;
  21. }
  22.  
  23. .menu {
  24. height : 35 px;
  25. width : 740 px;
  26. background-image : url(img/menu.jpg);
  27. background-repeat : repeat-x;
  28. margin-left: auto;
  29. margin-right: auto;
  30. border-width : 1 px;
  31. border-color: black;
  32. border-top-style:solid;
  33. border-right-style:solid;
  34. border-left-style:solid;
  35. }
  36.  
  37.  
  38. .middle {
  39. height : 500 px;
  40. width : 740 px;
  41. margin-left: auto;
  42. margin-right: auto;
  43. border-width : 1 px;
  44. border-color: black;
  45. border-bottom-style:solid;
  46. border-right-style:solid;
  47. border-left-style:solid;
  48. }
  49.  
  50. .footer {
  51. height : 80 px;
  52. width : 740 px;
  53. background-color : yellow;
  54. margin-left: auto;
  55. margin-right: auto;
  56. border-style: solid;
  57. border-width : 1 px;
  58. border-color: red;
  59. }
  • Commenter cette réponse |
Score
0
òh
òi
|
Salut,

J'ajoute que ça ne fonctionne pas sous Opéra aussi.
Affiche ton code source html et css.
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS