Tom's Guide > Forum > Programmation > [Résolu] [Résolu] [CSS/HTML] Centrer mon site web

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

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

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

Mot :    Pseudo :           
 
kiyoko67   23-07-2009 à 00:48:01

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

Code :
  1. .......
  2. </script>
  3. </head>
  5. <body onload="MM_preloadImages('images/qsn_noir.jpg','images/forum_noir.jpg','images/liens_noir.jpg','images/contact_noir.jpg')">
  7. <!--Bannière-->
  8. <div id="head"></div>
  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>
  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>
  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>
  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>
  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>
  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>
  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

Code :
  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. }
  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. }
  22. #menu_roll
  23. {
  24.     margin-left: 256px;
  25. }
  27. #menu_g
  28. {
  29.     float: left;
  30.     width: 222px;
  31.     margin-left: 27px;
  32.     margin-top: 62px;
  33.     display: inline;
  34. }
  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. }
  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. }
  57. .sep
  58. {
  59.     background-image: url(images/sep.png);
  60.     background-repeat: no-repeat;
  61.     width: 95px;
  62.     height: 12px;
  63. }
  65. #menu_bas
  66. {
  67.     background-image: url(images/menu_gauche_bas.png);
  68.     width: 222px;
  69.     height: 54px;
  70. }
  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. }
  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. }
  89. #corps_bas
  90. {
  91.     width: 727px;
  92.     height: 48px;
  93.     background-image: url(images/corps_bas.png);
  94.     background-repeat: no-repeat;
  95. }
  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. }


Message édité par kiyoko67 le 23-07-2009 à 18:58:29
Répondre
Meilleure réponse apportée par FuMyGeNe
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).
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
FuMyGeNe   23-07-2009 à 09:52:51
Meilleure réponse

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

------------------------------ What we do in life. . . Echoes in eternity. . .
 Répondre à FuMyGeNe
kiyoko67   23-07-2009 à 18:57:55

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.

Répondre à kiyoko67
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > [Résolu] [Résolu] [CSS/HTML] Centrer mon site web
Aller à :

Il y a 2344 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,384 secondes
Liens