Se connecter / S'enregistrer
Votre question

[Probleme avec IE] photoshop et les tranches

Tags :
  • web
  • Programmation
Dernière réponse : dans Programmation
Anonyme
4 Janvier 2011 16:54:50

Bonjour !

J'ai crée un page web avec photoshop. J'ai utilisé plusieurs tranches pour pouvoir faire un menu avec gestion souris (onmouseover, onmouseout).
Sous firefox, ça fonctionne nickel mais par contre sous explorer j'ai des soucis, les tranches laisse des ligne blanches un peu partout :/ 

Une idée pour remédier à ca ? :) 

Merci

Arsenik

Autres pages sur : probleme photoshop tranches

a c 232 L Programmation
4 Janvier 2011 20:49:22

Salut,

C'est certainement un problème de margin.
Mais sans code, on ne pourra pas t'en dire plus
m
0
l
Anonyme
4 Janvier 2011 22:51:59

le voici :) 

  1. <html>
  2. <head>
  3. <title>5YMED_Geoffroy</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. </head>
  6. <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
  7. <!-- Save for Web Slices (5YMED_Geoffroy.psd) -->
  8. <table id="Tableau_01" width="1025" height="769" border="0" cellpadding="0" cellspacing="0">
  9. <tr>
  10. <td colspan="10">
  11. <img src="images/5YMED_Geoffroy_01.jpg" width="1024" height="75" alt=""></td>
  12. <td>
  13. <img src="images/spacer.gif" width="1" height="75" alt=""></td>
  14. </tr>
  15. <tr>
  16. <td colspan="4">
  17. <img src="images/5YMED_Geoffroy_02.jpg" width="234" height="4" alt=""></td>
  18. <td colspan="3" rowspan="2">
  19.  
  20.  
  21. <!-- MODIFICATION BOUTON 1 !-->
  22.  
  23.  
  24. <img
  25. src="images/5YMED_Geoffroy_03.jpg"
  26. name="bouton1"
  27. alt=""
  28. onmouseover="bouton1.src='images/5YMED_Geoffroy_03 (2).jpg' "
  29. onmouseout="bouton1.src='images/5YMED_Geoffroy_03.jpg' " />
  30. </td>
  31. <td colspan="3" rowspan="4">
  32. <img src="images/5YMED_Geoffroy_04.jpg" width="645" height="64" alt=""></td>
  33. <td>
  34. <img src="images/spacer.gif" width="1" height="4" alt=""></td>
  35. </tr>
  36. <tr>
  37. <td colspan="2" rowspan="3">
  38. <img src="images/5YMED_Geoffroy_05.jpg" width="62" height="60" alt=""></td>
  39. <td rowspan="2">
  40.  
  41.  
  42. <!-- MODIFICATION BOUTON 2 !-->
  43.  
  44.  
  45. <img
  46. src="images/5YMED_Geoffroy_06.jpg"
  47. name="bouton2"
  48. alt=""
  49. onmouseover="bouton2.src='images/5YMED_Geoffroy_06 (2).jpg' "
  50. onmouseout="bouton2.src='images/5YMED_Geoffroy_06.jpg' " /></td>
  51. <td rowspan="7">
  52. <img src="images/5YMED_Geoffroy_07.jpg" width="27" height="689" alt=""></td>
  53. <td>
  54. <img src="images/spacer.gif" width="1" height="37" alt=""></td>
  55. </tr>
  56. <tr>
  57. <td colspan="3" rowspan="2">
  58. <img src="images/5YMED_Geoffroy_08.jpg" width="145" height="23" alt=""></td>
  59. <td>
  60. <img src="images/spacer.gif" width="1" height="5" alt=""></td>
  61. </tr>
  62. <tr>
  63. <td>
  64. <img src="images/5YMED_Geoffroy_09.jpg" width="145" height="18" alt=""></td>
  65. <td>
  66. <img src="images/spacer.gif" width="1" height="18" alt=""></td>
  67. </tr>
  68. <tr>
  69. <td rowspan="4">
  70. <img src="images/5YMED_Geoffroy_10.jpg" width="61" height="629" alt=""></td>
  71. <td colspan="2">
  72.  
  73.  
  74. <!-- MODIFICATION BOUTON 3 !-->
  75.  
  76.  
  77. <img
  78. src="images/5YMED_Geoffroy_11.jpg"
  79. name="bouton3"
  80. alt=""
  81. onmouseover="bouton3.src='images/5YMED_Geoffroy_11 (2).jpg' "
  82. onmouseout="bouton3.src='images/5YMED_Geoffroy_11.jpg' " /></td>
  83. <td rowspan="4">
  84. <img src="images/5YMED_Geoffroy_12.jpg" width="3" height="629" alt=""></td>
  85. <td colspan="3">
  86.  
  87.  
  88. <!-- MODIFICATION BOUTON 4 !-->
  89.  
  90.  
  91. <img
  92. src="images/5YMED_Geoffroy_13.jpg"
  93. name="bouton4"
  94. alt=""
  95. onmouseover="bouton4.src='images/5YMED_Geoffroy_13 (2).jpg' "
  96. onmouseout="bouton4.src='images/5YMED_Geoffroy_13.jpg' " /></td>
  97. <td colspan="2" rowspan="2">
  98. <img src="images/5YMED_Geoffroy_14.jpg" width="642" height="94" alt=""></td>
  99. <td>
  100. <img src="images/spacer.gif" width="1" height="42" alt=""></td>
  101. </tr>
  102. <tr>
  103. <td colspan="2" rowspan="3">
  104. <img src="images/5YMED_Geoffroy_15.jpg" width="146" height="587" alt=""></td>
  105. <td colspan="3">
  106. <img src="images/5YMED_Geoffroy_16.jpg" width="145" height="52" alt=""></td>
  107. <td>
  108. <img src="images/spacer.gif" width="1" height="52" alt=""></td>
  109. </tr>
  110. <tr>
  111. <td rowspan="2">
  112. <img src="images/5YMED_Geoffroy_17.jpg" width="115" height="535" alt=""></td>
  113. <td colspan="3">
  114.  
  115.  
  116. <!-- MODIFICATION VIDEO !-->
  117.  
  118.  
  119. <video width=640 height=512 controls>
  120. <source src="video/5YMED_Geoffroy_video.mp4" type="video/mp4" />
  121. <source src="video/5YMED_Geoffroy_video.theora.ogv" type="video/ogg" />
  122.  
  123. </video>
  124. </td>
  125. <td rowspan="2">
  126. <img src="images/5YMED_Geoffroy_19.jpg" width="32" height="535" alt=""></td>
  127. <td>
  128. <img src="images/spacer.gif" width="1" height="512" alt=""></td>
  129. </tr>
  130. <tr>
  131. <td colspan="3">
  132. <img src="images/5YMED_Geoffroy_20.jpg" width="640" height="23" alt=""></td>
  133. <td>
  134. <img src="images/spacer.gif" width="1" height="23" alt=""></td>
  135. </tr>
  136. <tr>
  137. <td>
  138. <img src="images/spacer.gif" width="61" height="1" alt=""></td>
  139. <td>
  140. <img src="images/spacer.gif" width="1" height="1" alt=""></td>
  141. <td>
  142. <img src="images/spacer.gif" width="145" height="1" alt=""></td>
  143. <td>
  144. <img src="images/spacer.gif" width="27" height="1" alt=""></td>
  145. <td>
  146. <img src="images/spacer.gif" width="3" height="1" alt=""></td>
  147. <td>
  148. <img src="images/spacer.gif" width="115" height="1" alt=""></td>
  149. <td>
  150. <img src="images/spacer.gif" width="27" height="1" alt=""></td>
  151. <td>
  152. <img src="images/spacer.gif" width="3" height="1" alt=""></td>
  153. <td>
  154. <img src="images/spacer.gif" width="610" height="1" alt=""></td>
  155. <td>
  156. <img src="images/spacer.gif" width="32" height="1" alt=""></td>
  157. <td></td>
  158. </tr>
  159. </table>
  160. <!-- End Save for Web Slices -->
  161. </body>
  162. </html>





j'ai un autre "soucis", la video en mp4, codec h264, ne s'affiche pas non plus sur Safari :/  normalement, elle devrait s'affiche, sachant que le codec est sensé etre supporté non ?

merci :p 
m
0
l
Contenus similaires
a c 232 L Programmation
5 Janvier 2011 00:24:12

Hmm, vu qu'on a aucune image, c'est difficile de voir exactement ce que ça donne.
Tu pourrais pas uploader ta page avec toutes les images quelque part, qu'on voit directement à quoi ça ressemble, ça sera plus pratique pour l'éditer
m
0
l
Anonyme
5 Janvier 2011 00:39:34

Bien sur,




Au niveau des 4 boutons de menu, il y a deux lignes blanche et sous 2 boutons, idem.
(Ne pas faire attention au gros carré blanc plus bas, c'est un emplacement de video :p  )
m
0
l
a c 232 L Programmation
5 Janvier 2011 09:33:45

En fait, je disais de mettre tout le fichier HTML avec les images sur internet, pas de faire un screenshot.
Mais ça doit être dû à la taille de tes images "calendrier" & "mes cadeaux", dans la source, tu ne spécifies pas leur taille, du coup, ça doit aider à ce que le tableau se perde.
m
0
l
Anonyme
5 Janvier 2011 10:57:54

non malheureusement ce n'est pas ça non plus :/ 
je viens d'ajouter les width et height, c'est la mm chose :( 


je vx bien le mettre en ligne, tu connais un hebergeur qui vaux le coup ? :) 
m
0
l
a c 232 L Programmation
5 Janvier 2011 11:34:16

désolé, je ne connais pas trop d'hébergeur gratuit.
sinon tu peux faire un zip et l'envoyer sur un service de stockage (rapidshare, megaupload...)
m
0
l
a c 232 L Programmation
5 Janvier 2011 22:13:40

  • C'est découpé super bizarrement.
  • Calendrier n'est pas sur la même ligne que Mes Cadeaux.
  • Mes Cadeaux fait 41px de haut, alors que les autres font 42px
  • ...

    Franchement, ce découpage est assez pourri, j'imagine que c'est Photoshop qui t'a fait ça tout seul ?

    Perso, ce que j'aurais fait, ça aurait été une seule image de fond avec ton père noel, ton chalet, ton bonhomme de neige et les montagnes...
    Cette image, je l'aurais mise en background d'une div.
    Et après 4 petites images "Calendrier", "Mes Cadeaux", "Météo" et "Contact", que j'aurais placé comme je veux dans cette div. (avec la possibilité d'avoir une petite image avec l'effet de neige et fond transparent que tu mets au dessus de chacune de tes 4 sections)

    Là le soucis, c'est que si tu veux ajouter une 5ème section, tu dois recommencer tout ton découpage :/ 
    m
    0
    l
    Anonyme
    5 Janvier 2011 22:24:51

    C'est que c'est un travail de cours, j'ai des consignes strictes
    Je dois faire un montage photoshop avec des tranches (pour y placer la video et le menu) et l'enregistrer pour le web (page html) d'ou le découpage, qui je te l'accorde est complètement spécial.

    Sinon je suis tout a fait d'accord que les div auraient été la meilleur manière :p 
    Je vais laisser ça, de toute facon le prof vérifiera sur firefox et safari, donc voilà mais question de perfection, le bon fonctionnement sur ie aurai été sympa :p 

    Enfin, merci quand mm hein ;) 
    m
    0
    l
    a c 232 L Programmation
    6 Janvier 2011 01:00:13

    Je comprend bien tes consignes, mais je vois pas ce que ça empêche ? T'es obligé d'utiliser ce que photoshop t'a donné comme fichier html ?
    Surtout que l'utilisation de tableaux pour faire un site, c'est trop "années 90" :p 
    m
    0
    l
    Anonyme
    6 Janvier 2011 13:57:34

    Non, ce n'est pas préciser.. mais c'est de cette maniere qu'on à vu ça en classe.
    J'ai un autre cours ou justement l'accent est mis sur les div :) 

    autant faire comme le cours :) 

    m
    0
    l
    Tom's guide dans le monde
    • Allemagne
    • Italie
    • Irlande
    • Royaume Uni
    • Etats Unis
    Suivre Tom's Guide
    Inscrivez-vous à la Newsletter
    • ajouter à twitter
    • ajouter à facebook
    • ajouter un flux RSS