Se connecter / S'enregistrer

Résolu Aide CSS, positionnement

Solutions (2)
Tags :
  • Programmation
|
Bonjour ,

Au lieu de vous racontez mon problème voyez par vous même : CLIQUEZ ICI.

Voici mon code html (ne faite pas attention aux commentaires je n'est pas encore réédité) :

Spoiler

  1. <div id="ConteneurGlobal"> <!-- Encadrer qui englobe tous la page -->
  2.  
  3.  
  4. <a href="./index.php"><div id="Header"></div></a> <!-- Image de la bannière -->
  5. <div id="BasHeader"></div> <!-- BAS de la bannière -->
  6.  
  7. <div id="ConteneurCorps"> <!-- Encadrer qui englobe le corps et les menus -->
  8.  
  9. <div id="MenuGlobalG"> <!-- Encadrer qui englobe les menus -->
  10.  
  11. <div class="TitreMenuG"><h1>Menu 1 G</h1></div> <!-- Titre du menu 1 gauche -->
  12. <div class="Menu"> <!-- Premier menu à gauche de la page -->
  13. <ul>
  14. <li><a href="#">Info 1</a></li>
  15. <li><a href="#">Info 2</a></li>
  16. <li><a href="#">Info 3</a></li>
  17. <li><a href="#">Info 4</a></li>
  18. </ul>
  19. </div> <!-- Fermeture du premier menu à gauche de la page -->
  20.  
  21. <div class="TitreMenuG"><h1>Menu 2 G</h1></div> <!-- Titre du menu 2 gauche -->
  22. <div class="Menu"> <!-- Premier menu à gauche de la page -->
  23. <ul>
  24. <li><a href="#">Info 1</a></li>
  25. <li><a href="#">Info 2</a></li>
  26. <li><a href="#">Info 3</a></li>
  27. <li><a href="#">Info 4</a></li>
  28. </ul>
  29. </div> <!-- Fermeture du premier menu à gauche de la page -->
  30.  
  31. <div class="TitreMenuG"><h1>Menu 3 G</h1></div> <!-- Titre du menu 3 gauche -->
  32. <div class="Menu"> <!-- Premier menu à gauche de la page -->
  33. <ul>
  34. <li><a href="#">Info 1</a></li>
  35. <li><a href="#">Info 2</a></li>
  36. <li><a href="#">Info 3</a></li>
  37. <li><a href="#">Info 4</a></li>
  38. </ul>
  39. </div> <!-- Fermeture du premier menu à gauche de la page -->
  40.  
  41.  
  42.  
  43. </div> <!-- Fermeture de l'ensemble de tous les menus -->
  44.  
  45.  
  46. <div id="MenuGlobalD"> <!-- Encadrer qui englobe les menus -->
  47.  
  48. <div class="TitreMenuD"><h1>Menu 1 D</h1></div> <!-- Titre du menu droit -->
  49. <div class="Menu"> <!-- Premier menu à gauche de la page -->
  50. <ul>
  51. <li><a href="#">Info 5</a></li>
  52. <li><a href="#">Info 6</a></li>
  53. <li><a href="#">Info 7</a></li>
  54. <li><a href="#">Info 8</a></li>
  55. </ul>
  56. </div> <!-- Fermeture du premier menu à droite de la page -->
  57.  
  58. <div class="TitreMenuD"><h1>Menu 2 D</h1></div> <!-- Titre du menu 2 droit -->
  59. <div class="Menu"> <!-- Premier menu à gauche de la page -->
  60. <ul>
  61. <li><a href="#">Info 5</a></li>
  62. <li><a href="#">Info 6</a></li>
  63. <li><a href="#">Info 7</a></li>
  64. <li><a href="#">Info 8</a></li>
  65. </ul>
  66. </div> <!-- Fermeture du premier menu à droite de la page -->
  67.  
  68. <div class="TitreMenuD"><h1>Menu 3 D</h1></div> <!-- Titre du menu 3 droit -->
  69. <div class="Menu"> <!-- Premier menu à gauche de la page -->
  70. <ul>
  71. <li><a href="#">Info 5</a></li>
  72. <li><a href="#">Info 6</a></li>
  73. <li><a href="#">Info 7</a></li>
  74. <li><a href="#">Info 8</a></li>
  75. </ul>
  76. </div> <!-- Fermeture du premier menu à droite de la page -->
  77. </div> <!-- Fermeture de l'ensemble de tous les menus -->
  78.  
  79. <div id="Corps"> <!-- Ouverture du corps pour intégrer du text/image -->
  80.  
  81. <!-- ****************************************************** -->
  82.  
  83. <p>MON TEXTE</p>
  84.  
  85. <!-- **************************************************** -->
  86. </div><!-- Fermeture du corps -->
  87. <div id="BasCorps"></div>
  88. </div> <!-- Fermeture du conteneurCorps -->
  89. <div id="Footer"> <p>Copyright © 2009 | tous droit réservé | Street King</p></div> <!-- Image du pied de page -->
  90.  
  91. </div> <!-- Fermeture du conteneur -->



Et voici le css :

Spoiler

  1. #ConteneurGlobal
  2. {
  3. width: 990px;
  4. height: auto;
  5. margin: auto;
  6. border: 2px solid #cccccc;
  7.  
  8.  
  9.  
  10. }
  11.  
  12. #Header
  13. {
  14.  
  15. background:url(.);
  16. background-repeat: no-repeat;
  17. height:203px;
  18. width:990px;
  19. margin:auto;
  20.  
  21. }
  22.  
  23. #BasHeader
  24. {
  25.  
  26. background:url(..);
  27. background-repeat: no-repeat;
  28. height:18px;
  29. width:990px;
  30. margin:auto;
  31. margin-top:-24px;
  32.  
  33. }
  34.  
  35. #ConteneurCorps
  36. {
  37. width: 990px;
  38. height: auto;
  39. margin: auto;
  40. margin-top:-21px;
  41.  
  42. }
  43. #MenuGlobalG
  44. {
  45. float: left;
  46. width: 150px;
  47. height: auto;
  48. margin-right:0px;
  49. margin-left:0px;
  50. margin-top:-9px;
  51. }
  52.  
  53.  
  54. #MenuGlobalD
  55. {
  56. float: right;
  57. width: 150px;
  58. height: auto;
  59. margin-right:0px;
  60. margin-left:0px;
  61. margin-top:-9px;
  62.  
  63. }
  64.  
  65. .TitreMenuG
  66. {
  67.  
  68. background:url(.);
  69. background-repeat: no-repeat;
  70. height:21px;
  71. width:148px;
  72. }
  73.  
  74.  
  75. .TitreMenuD
  76. {
  77. background:url(.);
  78. background-repeat: no-repeat;
  79. height:21px;
  80. width:148px;
  81. margin-left:2px;
  82. }
  83.  
  84.  
  85. .Menu
  86. {
  87. height:auto;
  88. width:150px;
  89.  
  90. }
  91.  
  92. #Corps
  93. {
  94. background:url();
  95. background-repeat: repeat;
  96. height:15px;
  97. width:694px;
  98. margin:auto;
  99. height:auto;
  100.  
  101.  
  102.  
  103. }
  104.  
  105. #BasCorps
  106. {
  107.  
  108. background:url();
  109. background-repeat: no-repeat;
  110. height:116px;
  111. width:694px;
  112. margin:auto;
  113. margin-top:-12px;
  114. }
  115.  
  116. #Footer
  117. {
  118. background:url();
  119. background-repeat: no-repeat;
  120. height:35px;
  121. width:990px;
  122. margin:auto;
  123.  
  124. }




Sinon je connais aussi la solution en passant par un tableau pour mettre ne place mon thème mais j'ai déjà utilisé les "float" donc je n'est pas envi de recommencer!
Contenus similaires
Meilleure solution
partage
|
  1. #ConteneurGlobal
  2. {
  3. width: 990px;
  4. OVERFLOW: auto;
  5. margin: auto;
  6. border: 2px solid #cccccc;
  7. }
  • Commenter cette solution |
Score
0
òh
òi
|
Merci je n'avais pas pensé à ce paramètre.
  • 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