Se connecter / S'enregistrer
Votre question

comment faire pour centrer ?

Tags :
  • Gif
  • Programmation
Dernière réponse : dans Programmation
3 Février 2008 14:06:30

Bonjour,

j'ai un problème pour centrer mon site Web. En effet il fait 1024 pixels de largeur fixe. Donc c'est assez génant quand on le consulte sur un écran réglé en 1280 par 1024 par exemple.

En effet j'ai un menu déroulant pour lequel j'ai utilisé les attributs css position:absolute et left:0px pour qu'il fonctionne correctement. Et du coup maintenant je n'arrive pas à centrer l'ensemble de mon site.
Même en créant un tableau à 1 seule ligne et 1 seule colonne tout autour de mon site, ce la ne fonctionne pas.
Si j'enlève l'attribut left ou position, les rollover sur mes menus ne fonctionnent plus.
Donc je suis un peu désemparé, et je ne vois aucune solution.

J'espère que vous saurez m'aider.

Merci

  1. <html>
  2. <head>
  3. <!-- TemplateBeginEditable name="doctitle" -->
  4. <title>Document sans titre</title>
  5. <link rel="stylesheet" type="text/css" href="fichiers/styles.css">
  6. <!-- TemplateEndEditable --><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  7. <!-- ImageReady Preload Script (site-final.psd) -->
  8. <SCRIPT TYPE="text/javascript">
  9. <!--
  10.  
  11. function newImage(arg) {
  12. if (document.images) {
  13. rslt = new Image();
  14. rslt.src = arg;
  15. return rslt;
  16. }
  17. }
  18.  
  19. function changeImages() {
  20. if (document.images && (preloadFlag == true)) {
  21. for (var i=0; i<changeImages.arguments.length; i+=2) {
  22. document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
  23. }
  24. }
  25. }
  26.  
  27. var preloadFlag = false;
  28. function preloadImages() {
  29. if (document.images) {
  30. site_final_03_over = newImage("images/site-final_03-over.gif");
  31. site_final_04_over = newImage("images/site-final_04-over.gif");
  32. site_final_05_over = newImage("images/site-final_05-over.gif");
  33. site_final_06_over = newImage("images/site-final_06-over.gif");
  34. site_final_07_over = newImage("images/site-final_07-over.gif");
  35. site_final_09_over = newImage("images/site-final_09-over.gif");
  36. site_final_10_over = newImage("images/site-final_10-over.gif");
  37. site_final_12_over = newImage("images/site-final_12-over.gif");
  38. site_final_13_over = newImage("images/site-final_13-over.gif");
  39. site_final_14_over = newImage("images/site-final_14-over.gif");
  40. site_final_15_over = newImage("images/site-final_15-over.gif");
  41. site_final_17_over = newImage("images/site-final_17-over.gif");
  42. preloadFlag = true;
  43. }
  44. }
  45.  
  46. function divaffiche_tour(){
  47. document.getElementById("mc_tour").style.display = "inline";
  48. }
  49. function divcache_tour(){
  50. document.getElementById("mc_tour").style.display = "none";
  51. }
  52. function divaffiche_partenaires(){
  53. document.getElementById("mc_partenaires").style.display = "inline";
  54. }
  55. function divcache_partenaires(){
  56. document.getElementById("mc_partenaires").style.display = "none";
  57. }
  58.  
  59. // -->
  60. </SCRIPT>
  61. <!-- End Preload Script -->
  62. <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
  63. </head>
  64.  
  65. <BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();">
  66.  
  67. <div>
  68. <div style="width:1024px; height:150px">
  69. <div style="float:left; width:608px; height:150px"><img src="../images/site-final_01.gif" border="0" alt="#"></div>
  70. <div style="float:left; width:416px; height:150px"><img src="../images/site-final_02.gif" border="0" alt="#"></div>
  71. </div>
  72. <div style="width:1024px; position:absolute; top:150px; float:left; z-index:100">
  73. <div style="float:left; width:218px; top:150px">
  74. <a href="#"
  75. ONMOUSEOVER="changeImages('site-final_03', 'images/site-final_03-over.gif'); return true;"
  76. ONMOUSEOUT="changeImages('site-final_03', 'images/site-final_03.gif'); return true;">
  77. <img src="../images/site-final_03.gif" name="site-final_03" border="0" width="218" height="69">
  78. </a>
  79. </div>
  80. <div id="m_tour" style="float:left; width:196px; top:150px"
  81. ONMOUSEOVER="changeImages('site-final_04', 'images/site-final_04-over.gif'); divaffiche_tour(); return true;"
  82. ONMOUSEOUT="changeImages('site-final_04', 'images/site-final_04.gif'); divcache_tour(); return true;">
  83. <a href="#"><img src="../images/site-final_04.gif" name="site-final_04" border="0" width="196" height="69"></a>
  84. <div style="display:none" id="mc_tour" class="menu"
  85. onmouseover="changeImages('site-final_04', 'images/site-final_04-over.gif'); divaffiche_tour(); return true;"
  86. onmouseout="changeImages('site-final_04', 'images/site-final_04.gif'); divcache_tour(); return true;">
  87. <div><a href="#"
  88. onmouseover="changeImages('site-final_09', 'images/site-final_09-over.gif'); return true;"
  89. onmouseout="changeImages('site-final_09', 'images/site-final_09.gif'); return true;">
  90. <img src="../images/site-final_09.gif" name="site-final_09" border="0"></a></div>
  91. <div><a href="#"
  92. onmouseover="changeImages('site-final_13', 'images/site-final_13-over.gif'); return true;"
  93. onmouseout="changeImages('site-final_13', 'images/site-final_13.gif'); return true;">
  94. <img src="../images/site-final_13.gif" name="site-final_13" border="0"></a></div>
  95. <div><a href="#"
  96. onmouseover="changeImages('site-final_15', 'images/site-final_15-over.gif'); return true;"
  97. onmouseout="changeImages('site-final_15', 'images/site-final_15.gif'); return true;">
  98. <img src="../images/site-final_15.gif" name="site-final_15" border="0"></a></div>
  99. <div><a href="#"
  100. onmouseover="changeImages('site-final_17', 'images/site-final_17-over.gif'); return true;"
  101. onmouseout="changeImages('site-final_17', 'images/site-final_17.gif'); return true;">
  102. <img src="../images/site-final_17.gif" name="site-final_17" border="0"></a></div>
  103. </div>
  104. </div>
  105. <div id="m_partenaires" style="float:left; width:194px; top:150px"
  106. ONMOUSEOVER="changeImages('site-final_05', 'images/site-final_05-over.gif'); divaffiche_partenaires(); return true;"
  107. ONMOUSEOUT="changeImages('site-final_05', 'images/site-final_05.gif'); divcache_partenaires(); return true;">
  108. <a href="#"><img src="../images/site-final_05.gif" name="site-final_05" border="0" width="194" height="69"></a>
  109. <div style="display:none" id="mc_partenaires" class="menu"
  110. onmouseover="changeImages('site-final_05', 'images/site-final_05-over.gif'); divaffiche_partenaires(); return true;"
  111. onmouseout="changeImages('site-final_05', 'images/site-final_05.gif'); divcache_partenaires(); return true;">
  112. <div><a href="#"
  113. onmouseover="changeImages('site-final_10', 'images/site-final_10-over.gif'); return true;"
  114. onmouseout="changeImages('site-final_10', 'images/site-final_10.gif'); return true;">
  115. <img src="../images/site-final_10.gif" name="site-final_10" border="0"></a></div>
  116. <div><a href="#"
  117. onmouseover="changeImages('site-final_12', 'images/site-final_12-over.gif'); return true;"
  118. onmouseout="changeImages('site-final_12', 'images/site-final_12.gif'); return true;">
  119. <img src="../images/site-final_12.gif" name="site-final_12" border="0"></a></div>
  120. <div><a href="#"
  121. onmouseover="changeImages('site-final_14', 'images/site-final_14-over.gif'); return true;"
  122. onmouseout="changeImages('site-final_14', 'images/site-final_14.gif'); return true;">
  123. <img src="../images/site-final_14.gif" name="site-final_14" border="0"></a></div>
  124. <div><a href="#"
  125. onmouseover="changeImages('site-final_19', 'images/site-final_19-over.gif'); return true;"
  126. onmouseout="changeImages('site-final_19', 'images/site-final_19.gif'); return true;">
  127. <img src="../images/site-final_19.gif" name="site-final_19" border="0"></a></div>
  128. <div><a href="#"
  129. onmouseover="changeImages('site-final_20', 'images/site-final_20-over.gif'); return true;"
  130. onmouseout="changeImages('site-final_20', 'images/site-final_20.gif'); return true;">
  131. <img src="../images/site-final_20.gif" name="site-final_20" border="0"></a></div>
  132. </div>
  133. </div>
  134. <div style="float:left; width:198px; top:150px">
  135. <a href="#"
  136. ONMOUSEOVER="changeImages('site-final_06', 'images/site-final_06-over.gif'); return true;"
  137. ONMOUSEOUT="changeImages('site-final_06', 'images/site-final_06.gif'); return true;">
  138. <img src="../images/site-final_06.gif" name="site-final_06" border="0" width="198" height="69">
  139. </a>
  140. </div>
  141. <div style="float:left; width:198px; top:150px">
  142. <a href="#"
  143. ONMOUSEOVER="changeImages('site-final_07', 'images/site-final_07-over.gif'); return true;"
  144. ONMOUSEOUT="changeImages('site-final_07', 'images/site-final_07.gif'); return true;">
  145. <img src="../images/site-final_07.gif" name="site-final_07" border="0" width="218" height="69">
  146. </a>
  147. </div>
  148. </div>
  149.  
  150. <div style="z-index:1; text-align:left; width:1024px; position:absolute; top:230px">
  151. <table width="1024" border="0">
  152. <tr>
  153. <td>
  154. <!-- TemplateBeginEditable name="contenu" -->
  155.  
  156.  
  157. <!-- TemplateEndEditable -->
  158. </td>
  159. </tr>
  160. </table>
  161. <div style="width:1024px; height:45px; text-align:center">
  162. <hr color="#D7DF23" width="450">
  163. <font face="Myriad, Arial, Helvetica, sans-serif" size="2"><a href="../plan_site.html">Plan du site</a> - <a href="../mentions.html">Mentions légales</a> - © Bioforce 2008  <img src="../images/logo.gif"></font>
  164. </div>
  165. </div>
  166.  
  167. </div>
  168.  
  169. </body>
  170. </html>

Autres pages sur : centrer

a c 232 L Programmation
3 Février 2008 23:09:39

Salut,

Remplace :

  1. <BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();">
  2.  
  3. <div>


par

  1. <BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();">
  2.  
  3. <div style="margin:auto;text-align:center;width:1024px;">
4 Février 2008 10:33:03

Merci cela marche parfaitement !
Contenus similaires
4 Février 2008 11:10:28

En fait ça marche très bien sous Firefox. Mais j'ai des soucis avec IE.
En fait, avec la modif que tu m'as donné, mon bandeau du haut restait collé à gauche alors que le reste était centré (sous IE). J'ai donc rajouté un position:absolute à ma div qui englobe ce bandeau.
Mais maintenant c'est tout mon site qui est décalé sur la droite (il n'est pas centré mais bien plus sur la droite). J'ai essayé plein de trucs mais rien n'y fait.

Je te mets le début de mon code actuel :

  1. <div style="margin:auto; text-align:center; width:1024px">
  2. <div style="width:1024px; height:150px; position:absolute">
  3. <div style="float:left; width:608px; height:150px"><img src="../images/site-final_01.gif" border="0" alt=""></div>
  4. <div style="float:left; width:416px; height:150px"><img src="../images/site-final_02.gif" border="0" alt=""></div>
  5. </div>
  6.  
  7. <div style="width:1024px; position:absolute; top:150px; float:left; z-index:100">
a c 232 L Programmation
4 Février 2008 13:23:53

Salut,

Si c'est pas centré sous IE, c'est à cause du doctype, tu n'en as pas mis, alors IE6 et supérieurs fonctionnent comme si tu utilisais IE5.5, qui ne comprend pas cette façon de centrer.

Ajoute ceci à la première ligne de ta page (avant le <html>) :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">

4 Février 2008 17:32:37

En fait j'avais bien mis un doctype, je l'avais juste pas copié dans mon message.
J'ai quand même essayé avec le bout de code que tu m'as donné (si jamais j'avais fais une faute de frappe) mais le résultat est le même.
Toujours mon site qui part sur la droite sous IE6 comme IE7.

Que faire ?

Merci pour tes réponses
a c 232 L Programmation
4 Février 2008 17:49:26

Ok. remplace ton body et ton div par :
  1. <BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();" style="text-align:center;">
  2.  
  3. <div style="margin:auto;width:1024px;text-align:left;">
6 Février 2008 11:17:44

Tout marche impecable !! Je te remercie
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