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

Question

Tags :
kiyoko67 http://m.bestofmedia.com/sfp/images/design/noimg/no-profil-100x100.jpg
Débutant
| dans Programmation

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

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. }

Autres pages sur:

resolu css html centrer site web
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
FuMyGeNe http://m.bestofmedia.com/sfp/design/usr/fr/avatars/58/5a/166245.jpg
Débutant
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).
  • Partagez
Alerter
Autres solutions (1)
Trier par
kiyoko67 http://m.bestofmedia.com/sfp/images/design/noimg/no-profil-100x100.jpg
Débutant
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.
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.
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