décalage de <div> si pas de border dans div principale

décalage de <div> si pas de border dans div principale - HTML/CSS - Programmation

Marsh Posté le 14-10-2004 à 11:16:25    

youp
 
 
voici ce que je voudrais avoir (bon):
 
http://www.pcfwave.com/brols/bon.PNG
 
 
et voilà ce que j'ai sous firefox (pas bon) (pas de problème avec ie):
 
http://www.pcfwave.com/brols/pasbon.PNG
les deux <div> en verts ne sont plus collés en haut :(
 
 
 
en fait, j'ai un <div id="MAINDIV"> qui contient les trois <div> du milieu (vert, bleu et vert).
 
si je mets un bord à MAINDIV, j'obtiens ce que je veux mais avec un bord (je ne veux pas de bord).
 
si je ne mets pas de bord à MAINDIV j'obtiens le "pas bon"
 
 
 
voilà le code de la page:
 

Code :
  1. <html>
  2. <head>
  3. <style>
  4. body {
  5. margin: 0px;
  6. padding: 0px;
  7. background-color: #fff;
  8. font-family: Verdana, Arial, helvetica, sans-serif;
  9. font-size: 10pt;
  10. }
  12. #banner {
  13. margin: 0px;
  14. padding: 0px;
  15. height: 110px;
  16. background-color: #000;
  17. width: 100%;
  18. }
  20. #main {
  21. padding: 0px;
  22. width: 800px;
  23. /*
  24. border: 1px dashed #white;
  25. */
  26. }
  28. #left {
  29. float: left;
  30. margin: 20px 0 0 0;
  31. padding: 0px;
  32. width: 150px;
  33. border: 1px solid green;
  34. height: 200px;
  35. }
  37. #right {
  38. float: right;
  39. margin: 20px 0 0 0;
  40. padding: 0px;
  41. width: 150px;
  42. height: 200px;
  43. border: 1px solid green;
  44. }
  46. #middle {
  47. margin: 20px 156px 0 156px;
  48. padding: 0px;
  49. height: 100px;
  50. border: 1px solid blue;
  51. }
  53. #footer {
  54. margin: 0px;
  55. padding: 0px;
  56. border-top: 2px solid #aaa;
  57. text-align: center;
  58. background-color: #fff;
  59. width: 100%;
  60. }
  62. #headerMenu {
  63. background-color: #EEE;
  64. border: 1px solid #CCC;
  65. color: #000;
  66. margin: 0px;
  67. padding: 0px 0px 2px 20px;
  68. position: absolute;
  69. z-index:100;
  70. height: 16px;
  71. WIDTH: 100%; /* PRÉCISION POUR OPERA */
  72. }
  74. .clearer {
  75. clear: both;
  76. height:1px;
  77. font-size:1px;
  78. border:0px;
  79. margin:0px;
  80. padding:0px;
  81. background:transparent;
  82. }
  84. </style>
  85. </head>
  87. <body>
  89. <div id="banner">
  91. </div> <!-- end BANNER div -->
  93. <div id="headerMenu">
  94. </div> <!-- end HEADERMENU div -->
  96. <div id="main">
  97. <div id="left">
  99. </div> <!-- end LEFT div -->
  101. <div id="right">
  103. </div> <!-- end RIGHT div -->
  105. <div id="middle">
  107. </div> <!-- end MIDDLE div -->
  109. <div class="clearer"></div>
  110. </div> <!-- end MAIN div -->
  112. <div id="footer">
  113. </div> <!-- end FOOTER div -->
  115. </body>
  117. </html>


 
 
 
si quelqu'un a une idée...
 
 
merci :jap:


Message édité par art_dupond le 14-10-2004 à 11:17:09

---------------
oui oui
Reply

Marsh Posté le 14-10-2004 à 11:16:25   

Reply

Marsh Posté le 14-10-2004 à 13:45:38    

art_dupond a écrit :

Code :
  1. #left {
  2. margin: 20px 0 0 0;
  3. }
  4. #right {
  5. margin: 20px 0 0 0;
  6. }




 
Comme d'ab, c'est IE qui a tout faux.
 
Tu as bien indiquer un margin de 20px ... :)  
Donc il y a une marge de 20px ... ;)


Message édité par Lorr Hyde le 14-10-2004 à 13:46:21

---------------
Tout n'est descriptible que du point de vue de l'observateur, donc sûrement faux pour le reste du monde.
Reply

Marsh Posté le 14-10-2004 à 14:09:59    

ouais mais dans le middle ausi y a "margin: 20px" :/

Reply

Marsh Posté le 14-10-2004 à 15:57:55    

en fait, j'ai un banner en haut, puis un menu déroulant (headermenu) que je positionne en "absolute" (j'arrive pas à le faire autrement), puis les autres <div>
 
du coup, je mets margin-top aux "autres <div> pour laisser la place à mon menu déroulant.
 
et ils ont bien la meme marge donc normalement ils devraient être à la même hauteur.
 
et pourquoi qu'avec un bord dans la <div id=main> ca marche (que je parle bien la france dis donc :sweat: ) ???


---------------
oui oui
Reply

Marsh Posté le 15-10-2004 à 11:02:51    

Tu tiens absolument au positionnement absolute de ton header ? (super jeu de mot :)
Si tu le place dans le flux tu auras beaucoup moins de problème de positionnement et tu pourra aussi gerer plus facilement le redimensionnement lors de l'affichage avec une taille de police plus grande.

Reply

Marsh Posté le 15-10-2004 à 12:47:46    

yop ca marche sans le mettre en absolute :)
 
J'avais fait ca parce qu'avec un autre menu que j'avais pris, il fallait que ce soit en absolute mais là ca va :)
 
 
par contre si quelqu'un sait pourquoi ca marche avec le bord et pas sans... juste pour savoir ;)
 
 
merci en tout cas, ca marche, c'est le principal :)


---------------
oui oui
Reply

Marsh Posté le 15-10-2004 à 12:49:41    

ah non ca marche pas :(
 
j'avais oublié de retirer le bord du coup ca marchait :p


---------------
oui oui
Reply

Sujets relatifs:

Leave a Replay

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