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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°872989
art_dupond
je suis neuneu... oui oui !!
Posté le 14-10-2004 à 11:16:25  profilanswer
 

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
mood
Publicité
Posté le 14-10-2004 à 11:16:25  profilanswer
 

n°873094
Lorr Hyde
L'univers est trop grand Zut !
Posté le 14-10-2004 à 13:45:38  profilanswer
 

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.
n°873118
esrevni
à contrario
Posté le 14-10-2004 à 14:09:59  profilanswer
 

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

n°873254
art_dupond
je suis neuneu... oui oui !!
Posté le 14-10-2004 à 15:57:55  profilanswer
 

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
n°873919
Azzazel
Posté le 15-10-2004 à 11:02:51  profilanswer
 

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.

n°873983
art_dupond
je suis neuneu... oui oui !!
Posté le 15-10-2004 à 12:47:46  profilanswer
 

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
n°873984
art_dupond
je suis neuneu... oui oui !!
Posté le 15-10-2004 à 12:49:41  profilanswer
 

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


---------------
oui oui

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

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

 

Sujets relatifs
Décalage des variables?XHTML + CSS valid : décalage aléatoire avec Firefox et Mozilla
XML -> Array = Décalage :'(apprendre les principale commandes pour ecrire un vbs
Fenêtre principale à la souris sous Visual ?Pq ma popup change ma page principale ???
[CSS] border d'une image-lien de couleur ?[MFC]Titre de la fenetre principale de l'application
[CSS] border-bottom marche pas ! [résolu]JFrame principale et JFrames filles...
Plus de sujets relatifs à : décalage de <div> si pas de border dans div principale

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.072 secondes

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)