Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
982 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Soucis CSS IE/Mozilla

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Soucis CSS IE/Mozilla

n°1769536
hybryd
Posté le 05-08-2008 à 14:32:14  profilanswer
 

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>

mood
Publicité
Posté le 05-08-2008 à 14:32:14  profilanswer
 

n°1769876
gebruik
Posté le 05-08-2008 à 22:56:13  profilanswer
 

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.

n°1769889
hybryd
Posté le 06-08-2008 à 00:04:53  profilanswer
 

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

n°1770086
hybryd
Posté le 06-08-2008 à 11:44:48  profilanswer
 

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

n°1770481
mIRROR
Chevreuillobolchévik
Posté le 07-08-2008 à 08:34:41  profilanswer
 

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
n°1770898
hybryd
Posté le 07-08-2008 à 18:58:48  profilanswer
 

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 ^^

n°1770922
mIRROR
Chevreuillobolchévik
Posté le 07-08-2008 à 19:47:25  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Soucis CSS IE/Mozilla

 

Sujets relatifs
soucis preg_match sur contenu htmlSoucis de form dans un form - help svp
Menu CSS[RESOLU] Centrage background css
Des soucis smarty pour intégrer mon menu sous cms made simpleMa page s'imprime sans tenir compte du CSS
Fond d'écran en CSSprobleme CSS
[CSS] div contener qui s'adapte au contenu[CSS] Largeur de div modulable
Plus de sujets relatifs à : Soucis CSS IE/Mozilla

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.165 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR