Soucis CSS IE/Mozilla

Soucis CSS IE/Mozilla - HTML/CSS - Programmation

Marsh Posté le 05-08-2008 à 14:32:14    

Bonjour a tous, je rencontre actuellement un soucis de présentation sur mon site.
IE présente mon site telle que je le souhaite, la partie de droite (les images) s'aligne correctement le nombre d'image horizontal change en fonction de la taille de la fenetre, par contre sur Mozilla, je me retrouve avec une unique colonne d'image, je souhaiterai que la présentation soit identique sur Mozilla que celle de IE.
 
Le site : www.hybryd.fr
 
Le CSS :
 

Code :
  1. /********************************************
  2. *
  3. * Shop 660 (Banner + Menu right)
  4. *
  5. ********************************************/
  7. body.oneElement {
  8. width:65em;
  9. }
  10. body.oneElement #myBanner {
  11. width:64.3em;
  12. height:auto;
  13. float:left;
  14. }
  15. body.oneElement #barLeft, body.oneElement #barRight {
  16. display:none;
  17. }
  18. body.oneElement #menuRight {
  19. width:17.8em;
  20. float:left;
  21. margin:0 0 0 0.3em;
  22. padding:0.5em;
  23. font-size:0.9em;
  24. border-left:1px solid #eee;
  25. background-color:#f2f2f2;
  26. height:110em;
  27. }
  28. body.oneElement #menuRight p {
  29. float:left;
  30. width:100%;
  31. }
  32. body.oneElement #menuRight p a {
  33. margin:0.5em 0 0 0;
  34. float:left;
  35. }
  36. body.oneElement #menuRight ul {
  37. width:14em;
  38. margin:0.5em 0 0.5em 0.5em;
  39. float:left;
  40. }
  41. body.oneElement #menuRight ul li .button {
  42. margin:0.5em 0 0 0;
  43. width:100%;
  44. }
  54. .combobox {
  55. background-color: #FFFFFF;
  56. color: #808080;
  57. font-size: 10pt;
  58. font-family: arial;
  59. font-weight: bold;
  60. }
  65. .style1 {
  66. color: #FFFFFF;
  67. font-weight: bold;
  68. font-size: large;
  69. }
  80. .skullheart a {
  81. float:left;
  82. display: block;
  83. width: 150px;
  84. height: 150px;
  85. background: transparent url(/users/1620000/1619246/370976/img/370976_skullheart.gif) no-repeat;
  86. }
  88. .skullheart a:hover {
  89. background-position: 0 -150px;
  90. }
  92. .ball a {
  93. float:left;
  94. display: block;
  95. width: 150px;
  96. height: 150px;
  97. background: transparent url(/users/1620000/1619246/381907/img/381907_8ballcopie2.gif) no-repeat;
  98. }
  100. .ball a:hover {
  101. background-position: 0 -150px;
  102. }
  103. .alcool1 a {
  104. float:left;
  105. display: block;
  106. width: 150px;
  107. height: 150px;
  108. background: transparent url(/users/1620000/1619246/381907/img/381907_alcool1copie2.gif) no-repeat;
  109. }
  111. .alcool1 a:hover {
  112. float:left;
  113. background-position: 0 -150px;
  114. }
  115. .antz1 a {
  116. float:left;
  117. display: block;
  118. width: 150px;
  119. height: 150px;
  120. background: transparent url(/users/1620000/1619246/381907/img/381907_antz1copie2.gif) no-repeat;
  121. }
  123. .antz1 a:hover {
  124. background-position: 0 -150px;
  125. }
  126. .bewareofwolf a {
  127. float:left;
  128. display: block;
  129. width: 150px;
  130. height: 150px;
  131. background: transparent url(/users/1620000/1619246/381907/img/381907_bewareofwolfcopie.gif) no-repeat;
  132. }
  134. .bewareofwolf a:hover {
  135. background-position: 0 -150px;
  136. }
  137. .bluehelmet a {
  138. float:left;
  139. display: block;
  140. width: 150px;
  141. height: 150px;
  142. background: transparent url(/users/1620000/1619246/381907/img/381907_bluehelmecopie.gif) no-repeat;
  143. }
  145. .bluehelmet a:hover {
  146. background-position: 0 -150px;
  147. }
  149. .carte a {
  150. float:left;
  151. display: block;
  152. width: 150px;
  153. height: 150px;
  154. background: transparent url(/users/1620000/1619246/381907/img/381907_cartecopie.gif) no-repeat;
  155. }
  157. .carte a:hover {
  158. background-position: 0 -150px;
  159. }
  160. .classx a {
  161. float:left;
  162. display: block;
  163. width: 150px;
  164. height: 150px;
  165. background: transparent url(/users/1620000/1619246/381907/img/381907_classxcopie2.gif) no-repeat;
  166. }
  168. .classx a:hover {
  169. background-position: 0 -150px;
  170. }
  171. .coeur a {
  172. float:left;
  173. display: block;
  174. width: 150px;
  175. height: 150px;
  176. background: transparent url(/users/1620000/1619246/381907/img/381907_coeurcopie2.gif) no-repeat;
  177. }
  179. .coeur a:hover {
  180. background-position: 0 -150px;
  181. }
  183. .evilwolf2 a {
  184. float:left;
  185. display: block;
  186. width: 150px;
  187. height: 150px;
  188. background: transparent url(/users/1620000/1619246/381907/img/381907_evilwolf2copie.gif) no-repeat;
  189. }
  191. .evilwolf2 a:hover {
  192. background-position: 0 -150px;
  193. }
  194. .evilw a {
  195. float:left;
  196. display: block;
  197. width: 150px;
  198. height: 150px;
  199. background: transparent url(/users/1620000/1619246/381907/img/381907_evilwolfcopie3.gif) no-repeat;
  200. }
  202. .evilw a:hover {
  203. background-position: 0 -150px;
  204. }
  206. .eyes1 a {
  207. float:left;
  208. display: block;
  209. width: 150px;
  210. height: 150px;
  211. background: transparent url(/users/1620000/1619246/381907/img/381907_eyes1copie.gif) no-repeat;
  212. }
  214. .eyes1 a:hover {
  215. background-position: 0 -150px;
  216. }
  218. .fish a {
  219. float:left;
  220. display: block;
  221. width: 150px;
  222. height: 150px;
  223. background: transparent url(/users/1620000/1619246/381907/img/381907_fishcopie.gif) no-repeat;
  224. }
  226. .fish a:hover {
  227. background-position: 0 -150px;
  228. }
  229. .freetibet1 a {
  230. float:left;
  231. display: block;
  232. width: 150px;
  233. height: 150px;
  234. background: transparent url(/users/1620000/1619246/381907/img/381907_freetibet1copie.gif) no-repeat;
  235. }
  237. .freetibet1 a:hover {
  238. background-position: 0 -150px;
  239. }
  242. .geek a {
  243. float:left;
  244. display: block;
  245. width: 150px;
  246. height: 150px;
  247. background: transparent url(/users/1620000/1619246/381907/img/381907_geekcopie.gif) no-repeat;
  248. }
  250. .geek a:hover {
  251. background-position: 0 -150px;
  252. }
  253. .infectuousman a {
  254. float:left;
  255. display: block;
  256. width: 150px;
  257. height: 150px;
  258. background: transparent url(/users/1620000/1619246/381907/img/381907_infectuousmancopie.gif) no-repeat;
  259. }
  261. .infectuousman a:hover {
  262. background-position: 0 -150px;
  263. }
  264. .infectuouswoman a {
  265. float:left;
  266. display: block;
  267. width: 150px;
  268. height: 150px;
  269. background: transparent url(/users/1620000/1619246/381907/img/381907_infectuouswomancopie.gif) no-repeat;
  270. }
  272. .infectuouswoman a:hover {
  273. background-position: 0 -150px;
  274. }
  275. .invader1 a {
  276. float:left;
  277. display: block;
  278. width: 150px;
  279. height: 150px;
  280. background: transparent url(/users/1620000/1619246/381907/img/381907_invader1copie.gif) no-repeat;
  281. }
  283. .invader1 a:hover {
  284. background-position: 0 -150px;
  285. }
  286. .jesus a {
  287. float:left;
  288. display: block;
  289. width: 150px;
  290. height: 150px;
  291. background: transparent url(/users/1620000/1619246/381907/img/381907_jesuscopie.gif) no-repeat;
  292. }
  294. .jesus a:hover {
  295. background-position: 0 -150px;
  296. }
  297. .nuage a {
  298. float:left;
  299. display: block;
  300. width: 150px;
  301. height: 150px;
  302. background: transparent url(/users/1620000/1619246/381907/img/381907_nuagecopie.gif) no-repeat;
  303. }
  305. .nuage a:hover {
  306. background-position: 0 -150px;
  307. }
  308. .om a {
  309. float:left;
  310. display: block;
  311. width: 150px;
  312. height: 150px;
  313. background: transparent url(/users/1620000/1619246/381907/img/381907_omcopie.gif) no-repeat;
  314. }
  316. .om a:hover {
  317. background-position: 0 -150px;
  318. }
  319. .panneau1 a {
  320. float:left;
  321. display: block;
  322. width: 150px;
  323. height: 150px;
  324. background: transparent url(/users/1620000/1619246/381907/img/381907_panneau1copie.gif) no-repeat;
  325. }
  327. .panneau1 a:hover {
  328. background-position: 0 -150px;
  329. }
  330. .poker1 a {
  331. float:left;
  332. display: block;
  333. width: 150px;
  334. height: 150px;
  335. background: transparent url(/users/1620000/1619246/381907/img/381907_poker1copie.gif) no-repeat;
  336. }
  338. .poker1 a:hover {
  339. background-position: 0 -150px;
  340. }
  341. .poker2 a {
  342. float:left;
  343. display: block;
  344. width: 150px;
  345. height: 150px;
  346. background: transparent url(/users/1620000/1619246/381907/img/381907_poker2copie.gif) no-repeat;
  347. }
  349. .poker2 a:hover {
  350. background-position: 0 -150px;
  351. }
  352. .poker3 a {
  353. float:left;
  354. display: block;
  355. width: 150px;
  356. height: 150px;
  357. background: transparent url(/users/1620000/1619246/381907/img/381907_poker3copie.gif) no-repeat;
  358. }
  360. .poker3 a:hover {
  361. background-position: 0 -150px;
  362. }
  363. .poker4 a {
  364. float:left;
  365. display: block;
  366. width: 150px;
  367. height: 150px;
  368. background: transparent url(/users/1620000/1619246/381907/img/381907_poker4copie.gif) no-repeat;
  369. }
  371. .poker4 a:hover {
  372. background-position: 0 -150px;
  373. }
  375. .pornstar2 a {
  376. float:left;
  377. display: block;
  378. width: 150px;
  379. height: 150px;
  380. background: transparent url(/users/1620000/1619246/381907/img/381907_pornstar2copie.gif) no-repeat;
  381. }
  383. .pornstar2 a:hover {
  384. background-position: 0 -150px;
  385. }
  387. .pornstar a {
  388. float:left;
  389. display: block;
  390. width: 150px;
  391. height: 150px;
  392. background: transparent url(/users/1620000/1619246/381907/img/381907_pornstarcopie.gif) no-repeat;
  393. }
  395. .pornstar a:hover {
  396. background-position: 0 -150px;
  397. }
  398. .psych a {
  399. float:left;
  400. display: block;
  401. width: 150px;
  402. height: 150px;
  403. background: transparent url(/users/1620000/1619246/381907/img/381907_psychcopie.gif) no-repeat;
  404. }
  406. .psych a:hover {
  407. background-position: 0 -150px;
  408. }
  409. .scrapbook4 a {
  410. float:left;
  411. display: block;
  412. width: 150px;
  413. height: 150px;
  414. background: transparent url(/users/1620000/1619246/381907/img/381907_scrapbook4copie.gif) no-repeat;
  415. }
  417. .scrapbook4 a:hover {
  418. background-position: 0 -150px;
  419. }
  420. .scrapbook5 a {
  421. float:left;
  422. display: block;
  423. width: 150px;
  424. height: 150px;
  425. background: transparent url(/users/1620000/1619246/381907/img/381907_scrapbook5copie.gif) no-repeat;
  426. }
  428. .scrapbook5 a:hover {
  429. background-position: 0 -150px;
  430. }
  431. .star2 a {
  432. float:left;
  433. display: block;
  434. width: 150px;
  435. height: 150px;
  436. background: transparent url(/users/1620000/1619246/381907/img/381907_star2copie.gif) no-repeat;
  437. }
  439. .star2 a:hover {
  440. background-position: 0 -150px;
  441. }
  442. .star5 a {
  443. float:left;
  444. display: block;
  445. width: 150px;
  446. height: 150px;
  447. background: transparent url(/users/1620000/1619246/381907/img/381907_star5copie.gif) no-repeat;
  448. }
  450. .star5 a:hover {
  451. background-position: 0 -150px;
  452. }
  453. .star6 a {
  454. float:left;
  455. display: block;
  456. width: 150px;
  457. height: 150px;
  458. background: transparent url(/users/1620000/1619246/381907/img/381907_star6copie.gif) no-repeat;
  459. }
  461. .star6 a:hover {
  462. background-position: 0 -150px;
  463. }
  464. .tribal1 a {
  465. float:left;
  466. display: block;
  467. width: 150px;
  468. height: 150px;
  469. background: transparent url(/users/1620000/1619246/381907/img/381907_tribal1copie.gif) no-repeat;
  470. }
  472. .tribal1 a:hover {
  473. background-position: 0 -150px;
  474. }
  475. .tribal2 a {
  476. float:left;
  477. display: block;
  478. width: 150px;
  479. height: 150px;
  480. background: transparent url(/users/1620000/1619246/381907/img/381907_tribal2copie.gif) no-repeat;
  481. }
  483. .tribal2 a:hover {
  484. background-position: 0 -150px;
  485. }
  486. .tribal3 a {
  487. float:left;
  488. display: block;
  489. width: 150px;
  490. height: 150px;
  491. background: transparent url(/users/1620000/1619246/381907/img/381907_tribal3copie.gif) no-repeat;
  492. }
  494. .tribal3 a:hover {
  495. background-position: 0 -150px;
  496. }
  497. .tryagain a {
  498. float:left;
  499. display: block;
  500. width: 150px;
  501. height: 150px;
  502. background: transparent url(/users/1620000/1619246/381907/img/381907_tryagaincopie.gif) no-repeat;
  503. }
  505. .tryagain a:hover {
  506. background-position: 0 -150px;
  507. }
  509. .music a {
  510. float:left;
  511. display: block;
  512. width: 150px;
  513. height: 150px;
  514. background: transparent url(/users/1620000/1619246/381907/img/381907_music.gif) no-repeat;
  515. }
  517. .music a:hover {
  518. background-position: 0 -150px;
  519. }
  520. .fuck a {
  521. float:left;
  522. display: block;
  523. width: 150px;
  524. height: 150px;
  525. background: transparent url(/users/1620000/1619246/381907/img/381907_fuck.gif) no-repeat;
  526. }
  528. .fuck a:hover {
  529. background-position: 0 -150px;
  530. }
  531. .bear a {
  532. float:left;
  533. display: block;
  534. width: 150px;
  535. height: 150px;
  536. background: transparent url(/users/1620000/1619246/381907/img/381907_bear.gif) no-repeat;
  537. }
  539. .bear a:hover {
  540. background-position: 0 -150px;
  541. }
  542. .im a {
  543. float:left;
  544. display: block;
  545. width: 150px;
  546. height: 150px;
  547. background: transparent url(/users/1620000/1619246/381907/img/381907_im.gif) no-repeat;
  548. }
  550. .im a:hover {
  551. background-position: 0 -150px;
  552. }
  553. .skull a {
  554. float:left;
  555. display: block;
  556. width: 150px;
  557. height: 150px;
  558. background: transparent url(/users/1620000/1619246/381907/img/381907_skull.gif) no-repeat;
  559. }
  561. .skull a:hover {
  562. background-position: 0 -150px;
  563. }
  565. .yin a {
  566. float:left;
  567. display: block;
  568. width: 150px;
  569. height: 150px;
  570. background: transparent url(/users/1620000/1619246/381907/img/381907_yin.gif) no-repeat;
  571. }
  573. .yin a:hover {
  574. background-position: 0 -150px;
  575. }


 
Le body :
 

Code :
  1. <body class="oneElement">
  8. <center>
  9. <select class="combobox" name="SiteMap" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1">
  10. <option selected>Homme</option>
  11. <option value="http://370976.spreadshirt.net/fr/FR/Shop/Index/index/productTypeCategory/24">T-shirts</option>
  12. <option value="http://370976.spreadshirt.net/fr/FR/Shop/Index/index/productTypeCategory/27">Sweats</option>
  13. <option value="http://370976.spreadshirt.net/fr/FR/Shop/Index/index/productTypeCategory/11">Manches longues</option>
  14. <option value="http://370976.spreadshirt.net/fr/FR/Shop/Index/index/productTypeCategory/29">Lingerie</option>
  15. </select>
  16. <select class="combobox" name="SiteMap" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1">
  17. <option selected>Femme</option>
  18. <option value="http://370976.spreadshirt.net/fr/FR/Shop/Index/index/productTypeCategory/33">T-shirts</option>
  19. <option value="http://370976.spreadshirt.net/fr/FR/Shop/Index/index/productTypeCategory/34">Débardeurs</option>
  20. <option value="http://370976.spreadshirt.net/fr/FR/Shop/Index/index/productTypeCategory/37">Sweats</option>
  21. <option value="http://370976.spreadshirt.net/fr/FR/Shop/Index/index/productTypeCategory/35">Manches Longues</option>
  22. <option value="http://370976.spreadshirt.net/fr/FR/Shop/Index/index/category/Robes-64777">Robes</option>
  23. <option value="http://370976.spreadshirt.net/fr/FR/Shop/Index/index/productTypeCategory/39">Lingerie</option>
  24. </select>
  25. <select class="combobox" name="SiteMap" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1">
  26. <option selected>Accessoires  </option>
  27. <option value="http://370976.spreadshirt.net/fr/FR/Shop/Index/index/productTypeCategory/5">Casquettes</option>
  28. <option value="http://370976.spreadshirt.net/fr/FR/Shop/Index/index/productTypeCategory/47">Sacs</option>
  29. <option value="http://370976.spreadshirt.net/fr/FR/Shop/Index/index/productTypeCategory/49">Mugs</option>
  31. </select>
  33. <p class="style1">Choissisez un motif pour naviguer</p></center>
  34. <div><table   border="0" align="center">
  38.   <tr >
  39.     <td align="center" >
  40. <div class="nuage" >
  41. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/nuage-5631341" ></a>
  42. </div>
  44. <div class="pornstar2" >
  45. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/pornstar2-5624275" ></a>
  46. </div>
  48. <div class="skull" >
  49. <a href="https://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/skull-5707362" ></a>
  50. </div>
  52. <div class="star5" >
  53. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/star5-5624276" ></a>
  54. </div>
  56. <div class="om" >
  57. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/om-5631342" ></a>
  58. </div>
  60. <div class="bear" >
  61. <a href="https://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/bloodybear-5707358" ></a>
  62. </div>
  64. <div class="tribal2" >
  65. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/tribal2-5592113" ></a>
  66. </div>
  68. <div class="invader1" >
  69. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/invader1-5584206" ></a>
  70. </div>
  72. <div class="star6" >
  73. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/star6-5636665" ></a>
  74. </div>
  76. <div class="fuck" >
  77. <a href="https://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/fuck-5701628" ></a>
  78. </div>
  80. <div class="eyes1" >
  81. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/eyes1-5631340" ></a>
  82. </div>
  84. <div class="im" >
  85. <a href="https://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/im-5707361" ></a>
  86. </div>
  88. <div class="alcool1">
  89. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/alcool1-5584165" ></a>
  90. </div>
  92. <div class="classx" >
  93. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/classx-5482535" ></a>
  94. </div>
  96. <div class="skullheart" >
  97. <a href="http://hybryd.spreadshirt.net/fr/FR/Shop/Index/design/design/skulheart-5731977" ></a>
  98. </div>
  100. <div class="coeur" >
  101. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/coeur-5631338" ></a>
  102. </div>
  104. <div class="fish" >
  105. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/fish-5517940" ></a>
  106. </div>
  108. <div class="jesus" >
  109. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/jesus-5592116" ></a>
  110. </div>
  112. <div class="geek" >
  113. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/geek-5636663" ></a>
  114. </div>
  116. <div class="music" >
  117. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/music-5688244" ></a>
  118. </div>
  120. <div class="evilw" >
  121. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/evilwolf-5598785" ></a>
  122. </div>
  124. <div class="tribal3" >
  125. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/tribal3-5592114" ></a>
  126. </div>
  128. <div class="freetibet1" >
  129. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/freetibet1-5584198" ></a>
  130. </div>
  132. <div class="antz1" >
  133. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/antz1-5584169" ></a>
  134. </div>
  136. <div class="star2" >
  137. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/star2-5588055" ></a>
  138. </div>
  140. <div class="ball">
  141. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/8bal-5588033" ></a>
  142. </div>
  144. <div class="bewareofwolf" >
  145. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/bewarewolf-5584233" ></a>
  146. </div>
  148. <div class="bluehelmet" >
  149. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/bluehelmet-5503241" ></a>
  150. </div>
  154. <div class="evilwolf2" >
  155. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/evilwolf2-5584231" ></a>
  156. </div>
  158. <div class="tryagain" >
  159. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/tryagain-5622477" ></a>
  160. </div>
  162. <div class="pornstar" >
  163. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/pornstar-5518111" ></a>
  164. </div>
  170. <div class="panneau1" >
  171. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/panneau1-5584222" ></a>
  172. </div>
  178. <div class="tribal1" >
  179. <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/tribal1-5589565" ></a>
  180. </div>
  182. </td>
  183.   </tr>
  184. </table>
  185. </div>

Reply

Marsh Posté le 05-08-2008 à 14:32:14   

Reply

Marsh Posté le 05-08-2008 à 22:56:13    

Commence déjà par mettre un Doctype : tu éviteras que IE ne passe en mode dégradé et n'utilise ses propres méthodes de calcul.

Reply

Marsh Posté le 06-08-2008 à 00:04:53    

Oki je viens de mettre le doctype mais du coup toute mes images sont sur une seule et unique colone

Reply

Marsh Posté le 06-08-2008 à 11:44:48    

En fait ce que je souhaite c'est avoir la meme présentation que sur IE quand le doctype n'est pas mis, pour les images survolé je ne peux pas utiliser de java

Reply

Marsh Posté le 07-08-2008 à 08:34:41    

oula je viens de regarder la source
t as mis

Code :
  1. <center><img src="/users/1620000/1619246/370976/img/370976_headerss_copie.gif" /></center>


dans ton head
je pense que c est ton principal souci quand tu fous un doctype  :sweat:

 

pour le reste quelques conseils

 

dans un premier temps pourquoi creer une table pour ca :??:

Code :
  1. <div><table   border="0" align="center">
  2.  
  3.   <tr >
  4.     <td align="center" >    
  5.     <div class="nuage" > 
  6.     <a href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/nuage-5631341" ></a> 
  7.     </div>
  8. [...]
  9.     </td>
  10.   </tr>
  11. </table></div>
 

essaie avec un truc comme ca

 
Code :
  1. <div id="motif">     
  2.     <a id="nuage" href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/nuage-5631341" ></a> 
  3. [...]
  4. </div>
 

apres faut savoir
tu mets align="center" mais tu les floates tous a gauche tu veux faire quoi en fait ?
de plus, <center> n existe plus et align="center" non plus
utilise text-align:center en css a la place
visiblement tu veux le float left donc tu enleves la table comme je t ai dit et tu laisses les float

 

tu confonds class et id: nuage, pornstar, skull... sont uniques donc des id et pas des classes

 

sinon ton code est pas optimisé c est chiant a lire
tu fais

Code :
  1. #motif a {
  2.    float:left;
  3.    width: 150px;
  4.    height: 150px;
  5. }
  6.  
  7. #motif a:hover {background-position: 0 -150px;}
 

ca t evitera de répéter 150 fois du code inutile (et le float:left entraine le display:block donc pas besoin de se repeter)
apres t as plus qu a preciser le nom de l image pour chaque id
si t as des cas particuliers (genre plusieurs images font 175px de large) c ets la que tu dois utiliser les classes (ou eventuellement customiser un peu les ID si c est vraiment unique comme cas particulier)

 

enfin bon ca sent du code pondu par une vieille version de dreamweaver modifié par quelqu un qui sait pas tres bien ce qu il fait
remets un peu d ordre dans tout ca et ca sera plus simple ensuite ^^


Message édité par mIRROR le 07-08-2008 à 08:37:20

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 07-08-2008 à 18:58:48    

Bon j'avoue que le CSS j'y comprend absolument rien j'ai suivi les conseils d'un pote pour faire cette horreur :p
Pour dreamweaver non non je l'utilise pas ^^
 
bon alors pour remettre un peu d'ordre il faudrait que je fasse un truc du genre alors :
 
je declare l'id motif comme tu l'as dis et une ID image

Code :
  1. #motif a { 
  2. float:left; 
  3. width: 150px; 
  4. height: 150px;
  5. }
  6. #motif a:hover {background-position: 0 -150px;}
  8. #nuage {
  9. background: transparent url(/users/1620000/1619246/381907/img/381907_nuagecopie.gif) no-repeat;
  10. }


et je rappel le tout en html comme tu me l'indiques
 

Code :
  1. <div id="motif">         <a id="nuage" href="http://370976.spreadshirt.net/fr/FR/Shop/Index/design/design/nuage-5631341" ></a></div>


 
Jusque la je pense avoir compris ^^
 
Par contre le float left c'est mon ami qui me l'avais conseillé je sais plus pkoi a vrai dire...
Avec ce que tu m'as dit j'option de nouveau toutes les images en vertical, je souhaiterai avoir au moins trois images par ligne et la je vois pas trop comment faire ^^

Reply

Marsh Posté le 07-08-2008 à 19:47:25    

float permet a tes blocks de flotter comme leur nom l indique si motif etait assez large tes images tiendraient donc sur une seule ligne horizontale
si tu donnes a motif la largeur des trois images ca s alignera en blocs de trois images
#motif {width:450px;}

 

et oublie pas l image dans <head>
en html cette balise ne designe pas l en tete (donc le logo que tu as mis) mais les elements nécéssaires au fonctionnement de la page (lle titre, es css, le javascript et les metadatas. d ailleurs la plupart de tes metas sont inutiles depuis quelques années)
il faut mettre ton logo dans le body
je te rappelle qu il faut mettre un doctype sur ta page comme te l a conseillé gebruik et que c est cette image qui fait bugger ta page quand tu en mets un


Message édité par mIRROR le 07-08-2008 à 19:48:47

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed