Se connecter / S'enregistrer

Résolu [Résolu] [CSS/HTML] Centrer mon site web

Solutions (2)
Tags :
  • web
  • Html
  • Design
  • Programmation
|
Bonjour à tous,

J'ai réussi à créer mon site web à peu près convenablement, mais je n'arrive pas à centrer le design. Ayant un menu à gauche et deux div à droite qui se superpose, je n'ai pas trouvé le moyen de le centrer même avec les % et j'aurais besoin de votre aide pour trouver une solution.

Je n'ai mis que la partie du code qui était utile et j'ai mis quelques explications dans le code HTML, histoire de vous expliquer comment j'ai fonctionné pour créer le design.

Merci à tous d'avance.


CODE HTML
  1. .......
  2. </script>
  3. </head>
  4.  
  5. <body onload="MM_preloadImages('images/qsn_noir.jpg','images/forum_noir.jpg','images/liens_noir.jpg','images/contact_noir.jpg')">
  6.  
  7. <!--Bannière-->
  8. <div id="head"></div>
  9.  
  10.  
  11. <!--Bouton rollover au dessous de la bannière en javascript-->
  12. <div id="menu_roll">
  13. <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Qui Sommes Nous?','','images/qsn_noir.jpg',1)"><img src="images/qsn_vert.jpg" name="Qui Sommes Nous?" width="182" height="36" border="0" id="Qui Sommes Nous?" /></a>
  14.  
  15. <a href="forum.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Forum','','images/forum_noir.jpg',1)"><img src="images/forum_vert.jpg" name="Forum" width="182" height="36" border="0" id="Forum" /></a>
  16.  
  17. <a href="liens.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Liens','','images/liens_noir.jpg',1)"><img src="images/liens_vert.jpg" name="Liens" width="182" height="36" border="0" id="Liens" /></a>
  18.  
  19. <a href="contacts.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contacts','','images/contact_noir.jpg',1)"><img src="images/contact_vert.jpg" name="Contacts" width="182" height="36" border="0" id="Contacts" /></a>
  20. </div>
  21.  
  22.  
  23. <!--Menu de gauche découpé en 3 parties. menu_g englobe la totalité des trois parties, je l'ai juste utilisé pour placé le menu. menu_haut, c'est le haut du menu. ul contient la partie du milieu qui se répète. menu_bas, c'est bas du menu. sep se sont des petits traits pour séparer les liens.-->
  24. <div id="menu_g">
  25. <div id="menu_haut"></div>
  26. <ul>
  27. <strong>
  28. <li><a href="philosophie_societe.html">Philosophie <br/>et Société</a></li>
  29. <div class="sep"></div>
  30. <li><a href="articles.html">Les Articles</a></li>
  31. <div class="sep"></div>
  32. <li><a href="sujets.html">Les Sujets</a></li>
  33. <div class="sep"></div>
  34. <li><a href="activites.html">Activités</a></li>
  35. <div class="sep"></div>
  36. </strong>
  37. </ul>
  38. <div id="menu_bas"></div>
  39. </div>
  40.  
  41.  
  42. <!--Corps situé à droite du menu, il est divisé en 3 parties. corps_milieu c'est la partie qui se répète au milieu. corps_haut_qsn c'est le haut du menu qui contient la barre de titre et le début du milieu avec une image qui contient déjà le début du texte, c'est pour ça que j'ai du les inverser et mettre corps_milieu au début pour que le texte continue dessus après avoir débuté sur l'image. corps_bas c'est évidemment le bas du corps-->
  43. <div id="corps_milieu">
  44. <div id="corps_haut_qsn">
  45. <p>blablabla</p>
  46. <div id="corps_bas"></div></div></div>
  47.  
  48.  
  49. <!--footer est en un morceau, car il n'a pas besoin de se répèter, vu le peu de texte qu'il va contenir.-->
  50. <div id="footer"><p>blablabla</p></div>
  51. </body>



CODE CSS
  1. body
  2. {
  3. background-color: #000;
  4. border: #001703 solid 1px;
  5. width: 1045px;
  6. margin-bottom: 15px;
  7. margin-left: 10px;
  8. margin-right: 10px;
  9. margin-top: 15px;
  10. }
  11.  
  12. #head
  13. {
  14. background-image: url(images/banniere.jpg);
  15. width: 946px;
  16. height: 221px;
  17. margin-left: 50px;
  18. margin-right: auto;
  19. margin-top: 20px;
  20. }
  21.  
  22. #menu_roll
  23. {
  24. margin-left: 256px;
  25. }
  26.  
  27. #menu_g
  28. {
  29. float: left;
  30. width: 222px;
  31. margin-left: 27px;
  32. margin-top: 62px;
  33. display: inline;
  34. }
  35.  
  36. #menu_haut
  37. {
  38. width: auto;
  39. background-image: url(images/menu_gauche_haut.png);
  40. background-repeat: no-repeat;
  41. height: 77px;
  42. margin-bottom: 0px;
  43. }
  44.  
  45. ul
  46. {
  47. background-image: url(images/menu_gauche_milieu.png);
  48. width: auto;
  49. background-repeat: repeat-y;
  50. margin-top: 0px;
  51. margin-bottom: 0px;
  52. padding-left: 80px;
  53. padding-top: 30px;
  54. margin-left: 0px;
  55. }
  56.  
  57. .sep
  58. {
  59. background-image: url(images/sep.png);
  60. background-repeat: no-repeat;
  61. width: 95px;
  62. height: 12px;
  63. }
  64.  
  65. #menu_bas
  66. {
  67. background-image: url(images/menu_gauche_bas.png);
  68. width: 222px;
  69. height: 54px;
  70. }
  71.  
  72. #corps_haut_qsn
  73. {
  74. width: 727px;
  75. background-image: url(images/corps_haut_QSN.jpg);
  76. background-repeat: no-repeat;
  77. padding-top: 90px;
  78. }
  79.  
  80. #corps_milieu
  81. {
  82. width: 727px;
  83. background-image: url(images/corps_milieu.jpg);
  84. background-repeat: repeat-y;
  85. margin-left: 291px;
  86. margin-top: 60px;
  87. }
  88.  
  89. #corps_bas
  90. {
  91. width: 727px;
  92. height: 48px;
  93. background-image: url(images/corps_bas.png);
  94. background-repeat: no-repeat;
  95. }
  96.  
  97. #footer
  98. {
  99. width: 946px;
  100. height: 178px;
  101. background-image: url(images/footer.jpg);
  102. background-repeat: no-repeat;
  103. margin-left: 50px;
  104. margin-top: 50px;
  105. clear: left;
  106. margin-bottom: 20px;
  107. }
Contenus similaires
Meilleure solution
partage
|
Salut,
il y a une solution simple,
en debut de ta page de style tu annules toutes les contraintes des navigateurs avec :

*{
margin:0px;
padding:0px
}

ensuite dans otn boy tu indiques la largeur totale de ton site

exemple width:800px;
et tu ecris
"margin:auto;"
et voila.

Si cela ne marche pas, tu regroupe tes trois div de ton site dans une div globale, generalement appellé "conteneur" et dans otn css tu indiques la largeur de cette div ( la meme que dans le body).
  • Commenter cette solution |
Score
0
òh
òi
|
Ah super merci, ta première solution a très bien fonctionné. Je savais pas qu'on pouvait agir sur le navigateur avec *. Encore mille merci. Bye.
  • 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