[CSS] probleme de z-index ou de positionnement

probleme de z-index ou de positionnement [CSS] - HTML/CSS - Programmation

Marsh Posté le 21-06-2007 à 15:09:00    

Bonjour tout le monde !
 
j'ai un site qui ne s'affiche pas bien du tout avec ie alors qu'avec Firefox, tout est bien en place.
 
je me suis basé sur Firefox pour monter mon design mais quand j'ai voulu le tester sur la toile, tout était en l'air !
j'ai l'impression que ma balise body ne passe pas sur le background. PB de z-index ?
 
l'adresse : http://www.toto.net
 
Quelqu'un peut-il m'aiguiller là-dessus SVP ?
Merci d'avance
 
Mon fichier index.php :

Code :
  1. <div id="body">
  3. <div id="en_tete">
  4. </div>
  6. <div id="menu">
  7. </div>
  10. <div id="conteneur">
  11. </div>
  13. <div id="filigrane">
  14. </div>
  16. <div id="logo">
  17. </div>
  19. </div>


 
Mon fichier CSS

Code :
  1. html, body
  2. {
  3. background-color: #6798d6;
  4. font-family: Arial,Verdana;
  5. font-size: 10pt;
  6. color: black;
  7. margin-left:50px;
  8. margin-top:50px;
  9. text-align: center;
  10. }
  12. a
  13. {
  14. color: black;
  15. text-decoration: none;
  16. }
  18. a img
  19. {
  20. border: none;
  21. text-decoration: none;
  22. }
  24. a:hover
  25. {
  26. color: #f18645;
  27. text-decoration: none;
  28. }
  30. li
  31. {
  32. list-style-image: url("images/puce.gif" );
  33. list-style-type:square;
  34. margin-left: 80px;
  35. margin-top: 1em;
  36. }
  38. input, textarea
  39. {
  40. border:1px solid #f18645;
  41. background-color: #83e0eb;
  42. font-weight:bold;
  43. }
  45. label
  46. {
  47. display:block;
  48. width:200px;
  49. margin:center;
  50. }
  52. #body
  53. {
  54. position:relative;
  55. border:1px solid #f79459;
  56. background-color: #bad7fc;
  57. width: 800px;
  58. height: 550px;
  59. margin-left: auto;
  60. margin-right: auto;
  61. text-align:left;
  62. }
  64. #logo
  65. {
  66. margin-left:-80px;
  67. margin-top:-610px;
  68. z-index:1;
  69. }
  71. #filigrane
  72. {
  73. position:relative;
  74. float:right;
  75. margin-right:-65px;
  76. bottom:120px;
  77. z-index:1;
  78. }
  80. #menu
  81. {
  82. margin-left:-100px;
  83. margin-top:200px;
  84. border:1px solid #f79459;
  85. background-color: #83e0eb;
  86. font-weight:bold;
  87. width:150px;
  88. height:250px;
  89. font-size: 10pt;
  90. padding: 0.5em;
  91. line-height:50px;
  92. }
  94. #conteneur
  95. {
  96. width:600px;
  97. height:500px;
  98. margin-left: auto;
  99. margin-top: -400px;
  100. margin-right:auto;
  101. font-size: 10pt;
  102. color:black;
  103. text-align:justify;
  104. }
  106. #en_tete
  107. {
  108. border:1px solid #f79459;
  109. background-color: #83e0eb;
  110. margin-right:-50px;
  111. margin-top:-20px;
  112. float: right;
  113. z-index:2;
  114. padding-bottom: 0.7em;
  115. font-weight:bold;
  116. }
  118. #en_tete li
  119. {
  120. margin-left:15px;
  121. margin-right:15px;
  122. float:left;
  123. list-style-type:none;
  124. list-style-image:none;
  125. }
  127. .texteorange
  128. {
  129. color: #f79459;
  130. }
  132. .textebleu
  133. {
  134. color: #83e0eb;
  135. }
  137. #contact
  138. {
  139. position:absolute;
  140. top:0px;
  141. left:350px;
  142. }
  144. #signature
  145. {
  147. font-weight:bold;
  149. float:right;
  150. } */


Message édité par snp le 21-06-2007 à 22:39:02
Reply

Marsh Posté le 21-06-2007 à 15:09:00   

Reply

Marsh Posté le 21-06-2007 à 15:34:39    

il manque ul pour tes lis.

Reply

Marsh Posté le 21-06-2007 à 15:46:26    

je crois pas que le pb vienne de là !!


Message édité par snp le 21-06-2007 à 15:48:36
Reply

Marsh Posté le 21-06-2007 à 22:39:28    

pb résolu en mettant du absolute partout (ou presque)

Reply

Marsh Posté le 21-06-2007 à 22:40:53    

Ouais tu es trop fort :o

Message cité 1 fois
Reply

Marsh Posté le 22-06-2007 à 08:13:15    

xtof_83 a écrit :

Ouais tu es trop fort :o


    C'est déjà bien il a une solution qui fonctionne.
    Maintenant j'aie bien peur que le rendu ne soit pas correct pour toutes les résolutions...

Reply

Marsh Posté le 22-06-2007 à 08:20:18    

Pourquoi avoir remplacé l'adresse du site par http://www.toto.net :??:


Message édité par gilou le 24-06-2007 à 21:45:33

---------------
Me: Django Localization, Yogo Puzzle, Chrome Grapher, C++ Signals, Brainf*ck.
Reply

Marsh Posté le 22-06-2007 à 16:00:43    

c'est lequel son vrai site alors ?

Reply

Marsh Posté le 22-06-2007 à 22:02:14    

parce que c un site que je ne souhaite pas afficher ici après réflexion.
Ox90, peux-tu effacer ton lien STP ?

Reply

Marsh Posté le 22-06-2007 à 22:45:17    

Tu as honte de ton site ?

Reply

Marsh Posté le 22-06-2007 à 22:45:17   

Reply

Marsh Posté le 22-06-2007 à 23:47:47    

La solution en relative est d'aplliquer un "wrap" un bloc qui va contenir ton site.
 
div body
div wrap
div header
/div
div menu
/div
div footer
/div
/div
/div
 
tu piges?
 
 
AUtre chose, les PNG ne marchent pas sur IE6, fais attention.
 
Il faut faire un gif sans fond.
 
Maintenant, j'espére que ton site n'est pas sérieux, car un gars qui affiche ça :
 

Citation :

Votre partenaire en prestations CAO (sous-traitance d'études, de modélisation, de ressaisie etc...) et création de sites internet dynamiques !


 
et qui a du mal avec trois pauvres blocs ça craint du genou, non?


Message édité par stravoguine le 22-06-2007 à 23:55:11
Reply

Marsh Posté le 24-06-2007 à 21:03:14    

Fermé à la demande du createur du topic, pour des raisons euh... que vous devinerez.
A+,


---------------
There's more than what can be linked! --    Iyashikei Anime Forever!    --  AngularJS c'est un framework d'engulé!  --
Reply

Sujets relatifs:

Leave a Replay

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