Se connecter avec
S'enregistrer | Connectez-vous
Votre question

Question

M@cduf http://m.bestofmedia.com/sfp/design/usr/fr/avatars/d4/d9/641831.jpg
Expert Programmation
Habitué
| dans Programmation

Aide CSS, positionnement

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!

Autres pages sur:

aide css positionnement
Répondre Afficher les solutions
0
Vous devez être inscrit pour voter pour une question
  • Partagez
  • Etre averti des réponses
  • Ajouter aux favoris
Alerter
Lassé par la pub ? Créez un compte
Ces contenus peuvent également vous intéresser
Solutions (2)
Meilleure solution
allstar27 http://m.bestofmedia.com/sfp/design/usr/fr/avatars/23/e4/223512.jpg
Expert Programmation
Initié 
  1. #ConteneurGlobal
  2. {
  3.  width: 990px;
  4.  OVERFLOW: auto;
  5.  margin: auto;
  6.  border: 2px solid #cccccc;
  7. }
  • Partagez
Alerter
Autres solutions (1)
Trier par
M@cduf http://m.bestofmedia.com/sfp/design/usr/fr/avatars/d4/d9/641831.jpg
Expert Programmation
Habitué
Voter contre
Vous devez avoir un badge bronze dans cette catégorie pour votre contre une solution.
Score 0
Voter pour
Ce score indique à quel point cette solution est soutenue par la communauté. Vous devez être inscrit pour voter pour une solution. Créez votre compte ou identifiez-vous.
Merci je n'avais pas pensé à ce paramètre.
Alerter
Lassé par la pub ? Créez un compte
Nouvelle question Proposez une autre solution
non identifié
Vous n'êtes pas identifié. Se connecter ou S'enregistrer
Votre réponse
Tom's guide dans le monde