Se connecter avec
S'enregistrer | Connectez-vous

Problème d'image de fond avec easy php

Dernière réponse : dans Programmation

Bonjour à toute et à tous, voila j'ai un petit souci avec mon image de fond pour le site web que je suis entrain de créer.
Mon problème est que mon image de fond était nikel jusqu'au moment ou je rajoute quelque fonction supplémentaire, là mon image de fond se décale toute seule vers la droite me laissant une page blanche avec mon entête et mes 2 marge a la position que je souhaite.


Voici mes codes (HTML et CSS), dites moi si vous voyer un truc qui cloche s'il vous plait. ;)  merci beaucoup de vos aides :) 




code HTML:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    

  2. "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
    

  3. <html xmtns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="fr">
    

  4. <head><link href="page_menu.css" type="text/css" rel="stylesheet" />
    

  5. <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
    

  6. <style type="text/css">
    

  7.  
  8. #alliance {
    

  9. 				padding: 0;
    

  10. 				margin: 0;
    

  11. 				width: 240px;
    

  12. 				height: 240px;
    

  13. 			}
    

  14. 			.alliance {
    

  15. 				background: url(alliance.jpg) no-repeat;
    

  16. 			}
    

  17. 			.alliance:hover {
    

  18. 				background: url(alliancex.jpg) no-repeat;
    

  19. 			}
    

  20.  
  21.  
  22. #humaine {
    

  23. 				padding: 0; 
    

  24. 				margin: 0; 
    

  25. 				width: 42px;
    

  26. 				height: 42px;
    

  27. 			}
    

  28. 			.humaine {
    

  29. 				background: url(logo_humaine.jpg) no-repeat;	
    

  30. 			}
    

  31. 			.humaine:hover {
    

  32. 				background: url(humainex.jpg) no-repeat;
    

  33. 			}
    

  34.  
  35.  
  36. #gnominette {
    

  37. 				padding: 0;
    

  38. 				margin: 0;
    

  39. 				width: 42px;
    

  40. 				height: 42px;
    

  41. 			}
    

  42. 			.gnominette {
    

  43. 				background: url(logo_gnominette.jpg) no-repeat;
    

  44. 			}
    

  45. 			.gnominette:hover {
    

  46. 				background: url(gnominettex.jpg) no-repeat;
    

  47. 			}
    

  48.  
  49.  
  50. #elfeF {
    

  51. 				padding: 0;
    

  52. 				margin: 0;
    

  53. 				width: 42px;
    

  54. 				height: 42px;
    

  55. 			}
    

  56.  
  57. 			.elfeF {
    

  58. 				background: url (logo_elfette de la nuit.jpg) no-repeat;
    

  59. 			}
    

  60. 			.elfeF:hover {
    

  61. 				background: url (elfexF.jpg) no-repeat;
    

  62. 			}
    

  63.  
  64.  
  65. #draeneiF {
    

  66. 				padding: 0;
    

  67. 				margin: 0;
    

  68. 				width: 42px;
    

  69. 				height: 42px;
    

  70. 			}
    

  71. 			.draeneiF {
    

  72. 				background: url(logo_draeneiF.jpg) no-repeat;
    

  73. 			}
    

  74. 			.draeneiF:hover {
    

  75. 				background: url(draeneixF.jpg) no-repeat;
    

  76. 			}
    

  77.  
  78.  
  79.  
  80.  
  81.  
  82. #naine {
    

  83. 				padding: 0;
    

  84. 				margin: 0;
    

  85. 				width: 42px;
    

  86. 				height: 42px;
    

  87. 			}
    

  88. 			.naine {
    

  89. 				background: url(logo_naine.jpg) no-repeat;
    

  90. 			}
    

  91. 			.naine:hover {
    

  92. 				background: url(nainex.jpg) no-repeat;
    

  93. 			}
    

  94.  
  95.  
  96.  
  97.  
  98.  
  99. #humain {
    

  100. 				padding: 0;
    

  101. 				margin: 0;
    

  102. 				width: 42px;
    

  103. 				height: 42px;
    

  104. 			}
    

  105. 			.humain {
    

  106. 				background: url(logo_humain.jpg) no-repeat;
    

  107. 			}
    

  108. 			.humain:hover {
    

  109. 				background: url(humainx.jpg) no-repeat;
    

  110. 			}
    

  111.  
  112.  
  113.  
  114. #gnome {
    

  115. 				padding: 0;
    

  116. 				margin: 0;
    

  117. 				width: 42px;
    

  118. 				height: 42px;
    

  119. 			}
    

  120. 			.gnome {
    

  121. 				background: url(logo_gnome.jpg) no-repeat;
    

  122. 			}
    

  123. 			.gnome:hover {
    

  124. 				background: url(gnomex.jpg) no-repeat;
    

  125. 			}
    

  126.  
  127.  
  128.  
  129.  
  130. #elfeM {
    

  131. 				padding: 0;
    

  132. 				margin: 0;
    

  133. 				width: 42px;
    

  134. 				height: 42px;
    

  135. 			}
    

  136. 			.elfeM {
    

  137. 				background: url(logo_elfeM.jpg) no-repeat;
    

  138. 			}
    

  139. 			.elfeM:hover {
    

  140. 				background: url(elfedelanuitx.jpg) no-repeat;
    

  141. 			}
    

  142.  
  143.  
  144.  
  145.  
  146. #draeneiM {
    

  147. 				padding: 0;
    

  148. 				margin: 0;
    

  149. 				width: 42px;
    

  150. 				height: 42px;
    

  151. 			}
    

  152. 			.draeneiM {
    

  153. 				background: url(logo_draeneiM.jpg) no-repeat;
    

  154. 			}
    

  155. 			.draeneiM:hover {
    

  156. 				background: url(draeneixM.jpg) no-repeat;
    

  157. 			}
    

  158.  
  159.  
  160.  
  161.  
  162. #nain {
    

  163. 				padding: 0;
    

  164. 				margin: 0;
    

  165. 				width: 42px;
    

  166. 				height: 42px;
    

  167. 			}
    

  168. 			.nain {
    

  169. 				background: url(logo_nain.jpg) no-repeat;
    

  170. 			}
    

  171. 			.nain:hover {
    

  172. 				background: url(nainx.jpg) no-repeat;
    

  173. 			}
    

  174.  
  175.  
  176.  
  177.  
  178.  
  179.  
  180.  
  181.  
  182.  
  183.  
  184.  
  185.  
  186.  
  187. #horde {
    

  188. 				padding: 0;
    

  189. 				margin: 0;
    

  190. 				width: 240px;
    

  191. 				height: 240px;
    

  192. 			}
    

  193. 			.horde {
    

  194. 				background: url(horde.jpg) no-repeat;
    

  195. 			}
    

  196. 			.horde:hover {
    

  197. 				background: url(hordex.jpg) no-repeat;
    

  198. 			}
    

  199.  
  200.  
  201. #orquesse {
    

  202. 				padding: 0; 
    

  203. 				margin: 0; 
    

  204. 				width: 42px;
    

  205. 				height: 42px;
    

  206. 			}
    

  207. 			.orquesse {
    

  208. 				background: url(logo_orquesse.jpg) no-repeat;	
    

  209. 			}
    

  210. 			.orquesse:hover {
    

  211. 				background: url(orquexF.jpg) no-repeat;
    

  212. 			}
    

  213.  
  214.  
  215. #trollesse {
    

  216. 				padding: 0;
    

  217. 				margin: 0;
    

  218. 				width: 42px;
    

  219. 				height: 42px;
    

  220. 			}
    

  221. 			.trollesse {
    

  222. 				background: url(logo_trollesse.jpg) no-repeat;
    

  223. 			}
    

  224. 			.trollesse:hover {
    

  225. 				background: url(trollessex.jpg) no-repeat;
    

  226. 			}
    

  227.  
  228.  
  229. #taurenF {
    

  230. 				padding: 0;
    

  231. 				margin: 0;
    

  232. 				width: 42px;
    

  233. 				height: 42px;
    

  234. 			}
    

  235.  
  236. 			.taurenF {
    

  237. 				background: url (logo_taurenF.jpg) no-repeat;
    

  238. 			}
    

  239. 			.taurenF:hover {
    

  240. 				background: url (taurenxF.jpg) no-repeat;
    

  241. 			}
    

  242.  
  243.  
  244. #elfedesangF {
    

  245. 				padding: 0;
    

  246. 				margin: 0;
    

  247. 				width: 42px;
    

  248. 				height: 42px;
    

  249. 			}
    

  250. 			.elfedesangF {
    

  251. 				background: url(logo_elfette de sang.jpg) no-repeat;
    

  252. 			}
    

  253. 			.elfedesangF:hover {
    

  254. 				background: url(elfedesangxF.jpg) no-repeat;
    

  255. 			}
    

  256.  
  257.  
  258.  
  259.  
  260.  
  261. #mortevivante {
    

  262. 				padding: 0;
    

  263. 				margin: 0;
    

  264. 				width: 42px;
    

  265. 				height: 42px;
    

  266. 			}
    

  267. 			.mortevivante {
    

  268. 				background: url(logo_morte-vivante.jpg) no-repeat;
    

  269. 			}
    

  270. 			.mortevivante:hover {
    

  271. 				background: url(mortevivantex.jpg) no-repeat;
    

  272. 			}
    

  273.  
  274.  
  275.  
  276.  
  277.  
  278. #orque {
    

  279. 				padding: 0;
    

  280. 				margin: 0;
    

  281. 				width: 42px;
    

  282. 				height: 42px;
    

  283. 			}
    

  284. 			.orque {
    

  285. 				background: url(logo_orque.jpg) no-repeat;
    

  286. 			}
    

  287. 			.orque:hover {
    

  288. 				background: url(orquexM.jpg) no-repeat;
    

  289. 			}
    

  290.  
  291.  
  292.  
  293. #troll {
    

  294. 				padding: 0;
    

  295. 				margin: 0;
    

  296. 				width: 42px;
    

  297. 				height: 42px;
    

  298. 			}
    

  299. 			.troll {
    

  300. 				background: url(logo_troll.jpg) no-repeat;
    

  301. 			}
    

  302. 			.troll:hover {
    

  303. 				background: url(trollx.jpg) no-repeat;
    

  304. 			}
    

  305.  
  306.  
  307.  
  308.  
  309. #taurenM {
    

  310. 				padding: 0;
    

  311. 				margin: 0;
    

  312. 				width: 42px;
    

  313. 				height: 42px;
    

  314. 			}
    

  315. 			.taurenM {
    

  316. 				background: url(logo_taurenM.jpg) no-repeat;
    

  317. 			}
    

  318. 			.taurenM:hover {
    

  319. 				background: url(taurenxM.jpg) no-repeat;
    

  320. 			}
    

  321.  
  322.  
  323.  
  324.  
  325. #elfedesangM {
    

  326. 				padding: 0;
    

  327. 				margin: 0;
    

  328. 				width: 42px;
    

  329. 				height: 42px;
    

  330. 			}
    

  331. 			.elfedesangM {
    

  332. 				background: url(logo_elfe de sang.jpg) no-repeat;
    

  333. 			}
    

  334. 			.elfedesangM:hover {
    

  335. 				background: url(elfedesangxM.jpg) no-repeat;
    

  336. 			}
    

  337.  
  338.  
  339.  
  340.  
  341. #mortvivant {
    

  342. 				padding: 0;
    

  343. 				margin: 0;
    

  344. 				width: 42px;
    

  345. 				height: 42px;
    

  346. 			}
    

  347. 			.mortvivant {
    

  348. 				background: url(logo_mort-vivant.jpg) no-repeat;
    

  349. 			}
    

  350. 			.mortvivant:hover {
    

  351. 				background: url(mortvivantx.jpg) no-repeat;
    

  352. 			}
    

  353.  
  354.  
  355.  
  356. </style> 
    

  357.  
  358.  
  359.  
  360.  
  361.  
  362.  
  363. <title>
    

  364. </title>
    

  365. </head>
    

  366.  
  367. <body>
    

  368.  
  369.  
  370.  
  371.  
  372. </div> 
    

  373.  
  374. </html>
    

  375.  
  376. <div id="page_entete">
    

  377. </div>
    

  378.  
  379. <div id="marge_gauche">
    

  380.  
  381.     <a href="alliance.html"  class="alliance" id="alliance" img src="alliance.jpg"     style="position:absolute; left:0px; top:101px;"   />	
    

  382.  
  383. 	<a href="humaine.html"   class="humaine"  id="humaine"  img src="logo_humaine.jpg" style="position:absolute; left:75px; top:417px;"/>
    

  384. 	<a href="gnominette.html" class="gnominette" id="gnominette"  img src="logo_gnominette.jpg" style="position:absolute; left:75px; top:608px;"/>
    

  385. 	<a href="elfe.html" class="elfeF" id="elfeF"  img src="logo_elfette de la nuit.jpg" style="position:absolute; left:76px; top:545px;"/>
    

  386. 	<a href="draeneiF.html" class="draeneiF" id="draeneiF"  img src="logo_draeneiF.jpg" style="position:absolute; left:75px; top:671px;"/>
    

  387. 	<a href="naine.html" class="naine" id="naine"  img src="logo_naine.jpg" style="position:absolute; left:76px; top:481px;"/>
    

  388.  
  389. 	<a href="humain.html" class="humain" id="humain"  img src="logo_humain.jpg" style="position:absolute; left:166px; top:417px;"/>
    

  390. 	<a href="gnome.html" class="gnome" id="gnome"  img src="logo_gnome.jpg" style="position:absolute; left:167px; top:608px;"/>
    

  391. 	<a href="elfe.html" class="elfeM" id="elfeM"  img src="logo_elfe de la nuit.jpg" style="position:absolute; left:166px; top:544px;"/>
    

  392. 	<a href="draeneiM.html" class="draeneiM" id="draeneiM"  img src="logo_draeneiM.jpg" style="position:absolute; left:166px; top:671px;"/>
    

  393. 	<a href="nain.html" class="nain" id="nain"  img src="logo_nain.jpg" style="position:absolute; left:166px; top:480px;"/>
    

  394.  
  395.  </div>
    

  396.  
  397. <div id="marge_droite">
    

  398.  
  399.     <a href="horde.html"  class="horde" id="horde" img src="horde.jpg"     style="position:absolute; right:0px; top:101px;"   />	
    

  400.  
  401. 	<a href="orquesse.html"   class="orquesse"  id="orquesse"  img src="logo_orquesse.jpg" style="position:absolute; right:72px; top:414px;"/>
    

  402. 	<a href="trolesse.html" class="trolesse" id="trolesse"  img src="logo_trolesse.jpg" style="position:absolute; right:72px; top:605px;"/>
    

  403. 	<a href="taurenF.html" class="taurenF" id="taurenF"  img src="logo_taurenF.jpg" style="position:absolute; right:73px; top:542px;"/>
    

  404. 	<a href="elfedesangF.html" class="elfedesangF" id="elfedesangF"  img src="logo_elfette de sang.jpg" style="position:absolute; right:72px; top:668px;"/>
    

  405. 	<a href="morte-vivante.html" class="mortevivante" id="mortevivante"  img src="logo_morte-vivante.jpg" style="position:absolute; right:73px; top:478px;"/>
    

  406.  
  407. 	<a href="orque.html" class="orque" id="orque"  img src="logo_orque.jpg" style="position:absolute; right:163px; top:414px;"/>
    

  408. 	<a href="troll.html" class="troll" id="troll"  img src="logo_troll.jpg" style="position:absolute; right:164px; top:605px;"/>
    

  409. 	<a href="taurenM.html" class="taurenM" id="taurenM"  img src="logo_taurenM.jpg" style="position:absolute; right:163px; top:541px;"/>
    

  410. 	<a href="elfedesangM.html" class="elfedesangM" id="elfedesangM"  img src="logo_elfe de sang.jpg" style="position:absolute; right:163px; top:668px;"/>
    

  411. 	<a href="mort-vivant.html" class="mortvivant" id="mortvivant"  img src="logo_mort-vivant.jpg" style="position:absolute; right:163px; top:477px;"/>
    

  412.  
  413. 	</div>	
    

  414.  
  415. <div id="contenu">
    

  416. </div>
    

  417.  
  418. <div id="page_pied">
    

  419. </div>
    

  420. </body>



code CSS:

  1. body { 
    

  2. 				margin: 0;
    

  3. 				text-align: center;
    

  4. 			}
    

  5.  
  6.  
  7. #body {
    

  8.   width: 1440px;
    

  9.   text-align: center;
    

  10.   background: #cccccc;
    

  11.   margin-left: 0;
    

  12.   margin-right: 0,5em;
    

  13.  }
    

  14.  
  15.  #page_entete {
    

  16.    width:1440px;
    

  17.    height: 101px;
    

  18.    background-image:url(entete.jpg);
    

  19.    text-align: center;
    

  20.    clear: both;
    

  21.  }
    

  22.  
  23. 								 	#marge_gauche {
    

  24. 										width:240px;
    

  25. 										height:650px;
    

  26. 										background-image:url(margeg.jpg);
    

  27. 										float: left;
    

  28. 										}
    

  29.  
  30.  
  31. #alliance {
    

  32. 	padding: 0;
    

  33. 	margin: 0;
    

  34. 	width: 240px;
    

  35. 	height: 240px;
    

  36. }
    

  37. 		.alliance {
    

  38. 			background: url(alliance.jpg) no-repeat;
    

  39. 		}
    

  40. 		.alliance:hover {
    

  41. 			background: url(alliancex.jpg) no-repeat;
    

  42. 		}
    

  43.  
  44.  
  45. #humaine {
    

  46. 	padding: 0; 
    

  47. 	margin: 0; 
    

  48. 	width: 42px;
    

  49. 	height: 42px;
    

  50. }
    

  51.  
  52. 		.humaine {
    

  53. 			background: url(humaine.jpg) no-repeat;
    

  54. 		}
    

  55. 		.humaine:hover {
    

  56. 			background: url(humainex.jpg) no-repeat;
    

  57. 		}
    

  58.  
  59.  
  60. #gnominette {
    

  61. padding: 0;
    

  62. margin: 0;
    

  63. width: 42px;
    

  64. height: 42px;
    

  65. }
    

  66.  
  67. 		.gnominette {
    

  68. 			background: url(logo_gnominette.jpg) no-repeat;
    

  69. 		}
    

  70. 		.gnominette:hover {
    

  71. 			background: url(gnominettex.jpg) no-repeat;
    

  72. 		}
    

  73.  
  74.  
  75. #elfeF{
    

  76. padding: 0;
    

  77. margin: 0;
    

  78. width: 42px;
    

  79. height: 42px;
    

  80. }
    

  81.  
  82. 		.elfeF {
    

  83. 			background: url (logo_elfette de la nuit.jpg) no-repeat;
    

  84. 		}
    

  85. 		.elfeF:hover {
    

  86. 			background: url(elfexF.jpg) no-repeat;
    

  87. 		}
    

  88.  
  89.  
  90. #draeneiF {
    

  91. padding: 0;
    

  92. margin: 0;
    

  93. width: 42px;
    

  94. height: 42px;
    

  95. }
    

  96. 		.draeneiF {
    

  97. 			background: url(logo_draeneiF.jpg) no-repeat;
    

  98. 		}
    

  99. 		.draeneiF:hover {
    

  100. 			background: url(draeneixF.jpg) no-repeat;
    

  101. 		}
    

  102.  
  103.  
  104. #naine {
    

  105. padding: 0;
    

  106. margin: 0;
    

  107. width: 42px;
    

  108. height: 42px;
    

  109. 			}
    

  110. 		.naine {
    

  111. 			background: url(logo_naine.jpg) no-repeat;
    

  112. 		}
    

  113. 		.naine:hover {
    

  114. 			background: url(nainex.jpg) no-repeat;
    

  115. 		}
    

  116.  
  117.  
  118.  
  119. #humain {
    

  120. padding: 0;
    

  121. margin: 0;
    

  122. width: 42px;
    

  123. height: 42px;
    

  124. }
    

  125. 		.humain {
    

  126. 			background: url(logo_humain.jpg) no-repeat;
    

  127. 		}
    

  128. 		.humain:hover {
    

  129. 			background: url(humainx.jpg) no-repeat;
    

  130. 		}			
    

  131.  
  132.  
  133.  
  134. #gnome {
    

  135. padding: 0;
    

  136. margin: 0;
    

  137. width: 42px;
    

  138. height: 42px;
    

  139. }
    

  140. 		.gnome {
    

  141. 			background: url(logo_gnome.jpg) no-repeat;
    

  142. 		}
    

  143. 		.gnome:hover {
    

  144. 			background: url(gnomex.jpg) no-repeat;
    

  145. 		}
    

  146.  
  147.  
  148.  
  149.  
  150. #elfeM {
    

  151. padding: 0;
    

  152. margin: 0;
    

  153. width: 42px;
    

  154. height: 42px;
    

  155. }
    

  156. 		.elfeM {
    

  157. 			background: url(logo_elfeM.jpg) no-repeat;
    

  158. 		}
    

  159. 		.elfeM:hover {
    

  160. 			background: url(elfedelanuitx.jpg) no-repeat;
    

  161. 		}
    

  162.  
  163.  
  164.  
  165.  
  166. #draeneiM {
    

  167. padding: 0;
    

  168. margin: 0;
    

  169. width: 42px;
    

  170. height: 42px;
    

  171. }
    

  172. 		.draeneiM {
    

  173. 			background: url(logo_draeneiM.jpg) no-repeat;
    

  174. 		}
    

  175. 		.draeneiM:hover {
    

  176. 			background: url(draeneixM.jpg) no-repeat;
    

  177. 		}
    

  178.  
  179.  
  180.  
  181.  
  182. #nain {
    

  183. padding: 0;
    

  184. margin: 0;
    

  185. width: 42px;
    

  186. height: 42px;
    

  187. }
    

  188. 		.nain {
    

  189. 			background: url(logo_nain.jpg) no-repeat;
    

  190. 		}
    

  191. 		.nain:hover {
    

  192. 			background: url(nainx.jpg) no-repeat;
    

  193. 		}	
    

  194.  
  195.  
  196.  
  197. 										#marge_droite {
    

  198. 										width:240px;
    

  199. 										height:650px;
    

  200. 										background-image:url(marged.jpg);
    

  201. 										float: right;
    

  202. 										}
    

  203.  
  204.  
  205.  #horde {
    

  206. padding: 0;
    

  207. margin: 0;
    

  208. width: 240px;
    

  209. height: 240px;
    

  210. }
    

  211. 		.horde {
    

  212. 			background: url(horde.jpg) no-repeat;
    

  213. 		}
    

  214. 		.horde:hover {
    

  215. 			background: url(hordex.jpg) no-repeat;
    

  216. 		}
    

  217.  
  218.  
  219. #orquesse {
    

  220. padding: 0; 
    

  221. margin: 0; 
    

  222. width: 42px;
    

  223. height: 42px;
    

  224. }
    

  225. 		.orquesse {
    

  226. 			background: url(logo_orquesse.jpg) no-repeat;	
    

  227. 		}
    

  228. 		.orquesse:hover {
    

  229. 			background: url(orquexF.jpg) no-repeat;
    

  230. 		}
    

  231.  
  232.  
  233. #trollesse {
    

  234. padding: 0;
    

  235. margin: 0;
    

  236. width: 42px;
    

  237. height: 42px;
    

  238. }
    

  239. 		.trollesse {
    

  240. 			background: url(logo_trollesse.jpg) no-repeat;
    

  241. 		}
    

  242. 		.trollesse:hover {
    

  243. 			background: url(trollessex.jpg) no-repeat;
    

  244. 		}
    

  245.  
  246.  
  247. #taurenF {
    

  248. padding: 0;
    

  249. margin: 0;
    

  250. width: 42px;
    

  251. height: 42px;
    

  252. }
    

  253.  
  254. 		.taurenF {
    

  255. 			background: url (logo_taurenF.jpg) no-repeat;
    

  256. 		}
    

  257. 		.taurenF:hover {
    

  258. 			background: url (taurenxF.jpg) no-repeat;
    

  259. 		}
    

  260.  
  261.  
  262. #elfedesangF {
    

  263. padding: 0;
    

  264. margin: 0;
    

  265. width: 42px;
    

  266. height: 42px;
    

  267. }
    

  268. 		.elfedesangF {
    

  269. 			background: url(logo_elfette de sang.jpg) no-repeat;
    

  270. 		}
    

  271. 		.elfedesangF:hover {
    

  272. 			background: url(elfedesangxF.jpg) no-repeat;
    

  273. 		}
    

  274.  
  275.  
  276.  
  277.  
  278.  
  279. #mortevivante {
    

  280. padding: 0;
    

  281. margin: 0;
    

  282. width: 42px;
    

  283. height: 42px;
    

  284. }
    

  285. 		.mortevivante {
    

  286. 			background: url(logo_morte-vivante.jpg) no-repeat;
    

  287. 		}
    

  288. 		.mortevivante:hover {
    

  289. 			background: url(mortevivantex.jpg) no-repeat;
    

  290. 		}
    

  291.  
  292.  
  293.  
  294.  
  295.  
  296. #orque {
    

  297. padding: 0;
    

  298. margin: 0;
    

  299. width: 42px;
    

  300. height: 42px;
    

  301. }
    

  302. 		.orque {
    

  303. 			background: url(logo_orque.jpg) no-repeat;
    

  304. 		}
    

  305. 		.orque:hover {
    

  306. 			background: url(orquexM.jpg) no-repeat;
    

  307. 		}
    

  308.  
  309.  
  310.  
  311. #troll {
    

  312. padding: 0;
    

  313. margin: 0;
    

  314. width: 42px;
    

  315. height: 42px;
    

  316. }
    

  317. 		.troll {
    

  318. 			background: url(logo_troll.jpg) no-repeat;
    

  319. 		}
    

  320. 		.troll:hover {
    

  321. 			background: url(trollx.jpg) no-repeat;
    

  322. 		}
    

  323.  
  324.  
  325.  
  326.  
  327. #taurenM {
    

  328. padding: 0;
    

  329. margin: 0;
    

  330. width: 42px;
    

  331. height: 42px;
    

  332. }
    

  333. 		.taurenM {
    

  334. 			background: url(logo_taurenM.jpg) no-repeat;
    

  335. 		}
    

  336. 		.taurenM:hover {
    

  337. 			background: url(taurenxM.jpg) no-repeat;
    

  338. 		}
    

  339.  
  340.  
  341.  
  342.  
  343. #elfedesangM {
    

  344. padding: 0;
    

  345. margin: 0;
    

  346. width: 42px;
    

  347. height: 42px;
    

  348. }
    

  349. 		.elfedesangM {
    

  350. 			background: url(logo_elfe de sang.jpg) no-repeat;
    

  351. 		}
    

  352. 		.elfedesangM:hover {
    

  353. 			background: url(elfedesangxM.jpg) no-repeat;
    

  354. 		}
    

  355.  
  356.  
  357.  
  358.  
  359. #mortvivant {
    

  360. padding: 0;
    

  361. margin: 0;
    

  362. width: 42px;
    

  363. height: 42px;
    

  364. }
    

  365. 		.mortvivant {
    

  366. 			background: url(logo_mort-vivant.jpg) no-repeat;
    

  367. 		}
    

  368. 		.mortvivant:hover {
    

  369. 			background: url(mortvivantx.jpg) no-repeat;
    

  370. 		}
    

  371.  
  372.  
  373.  
  374.  #contenu {
    

  375.    width: 1400px;
    

  376.    height:650px;
    

  377.    background-image:url(fond.jpg);
    

  378.    float: center;
    

  379.  }
    

  380.  
  381.  #page_pied {
    

  382.    width:1440px;
    

  383.    height: 40px;
    

  384.    background-image:url(piedpage.jpg);
    

  385.    text-align: center;
    

  386.    clear: both;
    

  387.  }

Autres pages sur : probleme image fond easy php

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

Bonjour,

Commençons par les petites erreurs !
  • HTML ligne 372/374 : Pourquoi fermes-tu une "div" et "html" ici ? Le "body" vient juste d'être ouvert ...
  • HTML ligne 411 et du même gens : <a ... img src="..." ... /> ... En l'occurence, c'est comme ça : <a ...><img ... /></a> !

    Sinon, j'arrive pas à me donner une idée du résultat, tu voudrais pas le mettre en ligne sur un truc gratuit. Juste pour pouvoir analyser correctement la page avec des outils DOM par exemple !

    (Le navigateur Chrome a un excellent outil d'analyse Web, clic droit / inspecter élément, sers t'en !)


    Bon, j'ai remanié un peu le schmilblik, mais pas évident à analyser sans les images et compagnie !

    Donc ta page HTML est devenu :
    1. <html>
    2. 	<head>
    3. 		<title> </title>
    4. 		<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
    5. 		<link href="page_menu.css" type="text/css" rel="stylesheet" />
    6. 		<link href="page_style.css" type="text/css" rel="stylesheet" />
    7. 	</head>
    8. 	<body>
    9. 		<div id="page_entete"></div>
    10. 		<div id="marge_gauche">
    11. 			<a href="alliance.html" class="alliance" id="alliance">
    12. 				<img src="alliance.jpg" style="position:absolute; left:0px; top:101px;" />
    13. 			</a>
    14. 			<a href="humaine.html" class="humaine" id="humaine">
    15. 				<img src="logo_humaine.jpg" style="position:absolute; left:75px; top:417px;" />
    16. 			</a>
    17. 			<a href="gnominette.html" class="gnominette" id="gnominette">
    18. 				<img src="logo_gnominette.jpg" style="position:absolute; left:75px; top:608px;" />
    19. 			</a>
    20. 			<a href="elfe.html" class="elfeF" id="elfeF">
    21. 				<img src="logo_elfette de la nuit.jpg" style="position:absolute; left:76px; top:545px;" />
    22. 			</a>
    23. 			<a href="draeneiF.html" class="draeneiF" id="draeneiF">
    24. 				<img src="logo_draeneiF.jpg" style="position:absolute; left:75px; top:671px;" />
    25. 			</a>
    26. 			<a href="naine.html" class="naine" id="naine">
    27. 				<img src="logo_naine.jpg" style="position:absolute; left:76px; top:481px;" />
    28. 			</a>
    29. 			<a href="humain.html" class="humain" id="humain">
    30. 				<img src="logo_humain.jpg" style="position:absolute; left:166px; top:417px;" />
    31. 			</a>
    32. 			<a href="gnome.html" class="gnome" id="gnome">
    33. 				<img src="logo_gnome.jpg" style="position:absolute; left:167px; top:608px;" />
    34. 			</a>
    35. 			<a href="elfe.html" class="elfeM" id="elfeM">
    36. 				<img src="logo_elfe de la nuit.jpg" style="position:absolute; left:166px; top:544px;" />
    37. 			</a>
    38. 			<a href="draeneiM.html" class="draeneiM" id="draeneiM">
    39. 				<img src="logo_draeneiM.jpg" style="position:absolute; left:166px; top:671px;" />
    40. 			</a>
    41. 			<a href="nain.html" class="nain" id="nain">
    42. 				<img src="logo_nain.jpg" style="position:absolute; left:166px; top:480px;" />
    43. 			</a>
    44. 		</div>
    45. 		<div id="marge_droite">
    46. 			<a href="horde.html" class="horde" id="horde">
    47. 				<img src="horde.jpg" style="position:absolute; right:0px; top:101px;" />
    48. 			</a>
    49. 			<a href="orquesse.html" class="orquesse" id="orquesse">
    50. 				<img src="logo_orquesse.jpg" style="position:absolute; right:72px; top:414px;" />
    51. 			</a>
    52. 			<a href="trolesse.html" class="trolesse" id="trolesse">
    53. 				<img src="logo_trolesse.jpg" style="position:absolute; right:72px; top:605px;" />
    54. 			</a>
    55. 			<a href="taurenF.html" class="taurenF" id="taurenF">
    56. 				<img src="logo_taurenF.jpg" style="position:absolute; right:73px; top:542px;" />
    57. 			</a>
    58. 			<a href="elfedesangF.html" class="elfedesangF" id="elfedesangF">
    59. 				<img src="logo_elfette de sang.jpg" style="position:absolute; right:72px; top:668px;" />
    60. 			</a>
    61. 			<a href="morte-vivante.html" class="mortevivante" id="mortevivante">
    62. 				<img src="logo_morte-vivante.jpg" style="position:absolute; right:73px; top:478px;" />
    63. 			</a>
    64. 			<a href="orque.html" class="orque" id="orque">
    65. 				<img src="logo_orque.jpg" style="position:absolute; right:163px; top:414px;" />
    66. 			</a>
    67. 			<a href="troll.html" class="troll" id="troll">
    68. 				<img src="logo_troll.jpg" style="position:absolute; right:164px; top:605px;" />
    69. 			</a>
    70. 			<a href="taurenM.html" class="taurenM" id="taurenM">
    71. 				<img src="logo_taurenM.jpg" style="position:absolute; right:163px; top:541px;" />
    72. 			</a>
    73. 			<a href="elfedesangM.html" class="elfedesangM" id="elfedesangM">
    74. 				<img src="logo_elfe de sang.jpg" style="position:absolute; right:163px; top:668px;" />
    75. 			</a>
    76. 			<a href="mort-vivant.html" class="mortvivant" id="mortvivant">
    77. 				<img src="logo_mort-vivant.jpg" style="position:absolute; right:163px; top:477px;" />
    78. 			</a>
    79. 		</div>
    80. 		<div id="contenu"></div>
    81. 		<div id="page_pied"></div>
    82. 	</body>
    83. </html>


    Tout le CSS qui était dedans je l'ai mis dans "page_style.css" ...

    Après, comme j'ai pas d'image je n'arrive pas à voir le problème ... N'hésites pas à nous les partager ou comme j'ai dis préalablement, mettre en ligne ton site quelque part ...


    (par contre on a bien compris que c'était sur WoW)
    Lassé par la pub ? Créez un compte

    Créer un nouveau sujet

    Tom's guide dans le monde