Se connecter avec
S'enregistrer | Connectez-vous

comment faire pour centrer ?

Dernière réponse : dans Programmation

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

Lassé par la pub ? Créez un compte
Expert Programmation

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;">

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">
Expert Programmation

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.    "<a href="http://www.w3.org/TR/html4/loose.dtd" target="_blank">http://www.w3.org/TR/html4/loose.dtd</a>">

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
Expert Programmation

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;">
Lassé par la pub ? Créez un compte

Répondre Créer un nouveau sujet

Tom's guide dans le monde