Tom's Guide > Forum > Programmation > [Résolu] Aide CSS, positionnement

[Résolu] Aide CSS, positionnement

Forum Programmation : [Résolu] Aide CSS, positionnement

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre

Lire la meilleure réponse, apportée par Allstar27.

Mot :    Pseudo :           
 
M@cduf   14-09-2009 à 17:57:16

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é) :


Code :
  1. <div id="ConteneurGlobal"> <!-- Encadrer qui englobe tous la page -->
  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 -->
  7. <div id="ConteneurCorps"> <!-- Encadrer qui englobe le corps et les menus -->
  9. <div id="MenuGlobalG"> <!-- Encadrer qui englobe les menus -->
  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 -->
  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 -->
  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 -->
  43. </div> <!-- Fermeture de l'ensemble de tous les menus -->
  46. <div id="MenuGlobalD"> <!-- Encadrer qui englobe les menus -->
  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 -->
  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 -->
  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 -->
  79. <div id="Corps"> <!-- Ouverture du corps pour intégrer du text/image -->
  81. <!-- ****************************************************** -->
  83. <p>MON TEXTE</p>
  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 -->
  91. </div> <!-- Fermeture du conteneur -->




Et voici le css :


Code :
  1. #ConteneurGlobal
  2. {
  3.     width: 990px;
  4.     height: auto;
  5.     margin: auto;
  6.     border: 2px solid #cccccc;
  10. }
  12. #Header
  13. {
  15.     background:url(.);
  16.     background-repeat: no-repeat;
  17.     height:203px;
  18.     width:990px;
  19.     margin:auto;
  21. }
  23. #BasHeader
  24. {
  26.     background:url(..);
  27.     background-repeat: no-repeat;
  28.     height:18px;
  29.     width:990px;
  30.     margin:auto;
  31.     margin-top:-24px;
  33. }
  35. #ConteneurCorps
  36. {
  37.     width: 990px;
  38.     height: auto;
  39.     margin: auto;
  40.     margin-top:-21px;
  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. }
  54. #MenuGlobalD
  55. {
  56.     float: right;
  57.     width: 150px;
  58.     height: auto;
  59.     margin-right:0px;
  60.     margin-left:0px;
  61.     margin-top:-9px;
  63. }
  65. .TitreMenuG
  66. {
  68.     background:url(.);
  69.     background-repeat: no-repeat;
  70.     height:21px;
  71.     width:148px;
  72. }
  75. .TitreMenuD
  76. {
  77.     background:url(.);
  78.     background-repeat: no-repeat;
  79.     height:21px;
  80.     width:148px;
  81.     margin-left:2px;
  82. }
  85. .Menu
  86. {
  87.     height:auto;
  88.     width:150px;
  90. }
  92. #Corps
  93. {
  94.     background:url();
  95.     background-repeat: repeat;
  96.     height:15px;
  97.     width:694px;
  98.     margin:auto;
  99.     height:auto;
  103. }
  105. #BasCorps
  106. {
  108.     background:url();
  109.     background-repeat: no-repeat;
  110.     height:116px;
  111.     width:694px;
  112.     margin:auto;
  113.     margin-top:-12px;
  114. }
  116. #Footer
  117. {
  118.     background:url();
  119.     background-repeat: no-repeat;
  120.     height:35px;
  121.     width:990px;
  122.     margin:auto;
  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!


Message édité par M@cduf le 14-09-2009 à 18:04:50
------------------------------ Besoin d'aide?
Je suis là!

 

Répondre
Meilleure réponse apportée par Allstar27

Code :
  1. #ConteneurGlobal
  2. {
  3. width: 990px;
  4. OVERFLOW: auto;
  5. margin: auto;
  6. border: 2px solid #cccccc;
  7. }

Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
Badge Programmation Bronze Allstar27   14-09-2009 à 18:36:13
Meilleure réponse

Code :
  1. #ConteneurGlobal
  2. {
  3. width: 990px;
  4. OVERFLOW: auto;
  5. margin: auto;
  6. border: 2px solid #cccccc;
  7. }


Message édité par Allstar27 le 14-09-2009 à 18:37:02
------------------------------ Rémunère ton site
Hosting Favicon
Clic pas ici
 Répondre à Allstar27
M@cduf   14-09-2009 à 20:30:42

Merci je n'avais pas pensé à ce paramètre.


Message édité par M@cduf le 14-09-2009 à 20:34:51
------------------------------ Besoin d'aide?
Je suis là!

 

Répondre à M@cduf

Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > [Résolu] Aide CSS, positionnement
Aller à :

Il y a 842 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,252 secondes
Liens