Se connecter / S'enregistrer
Votre question

<table> -> <div> design photoshop

Tags :
  • Photoshop
  • Programmation
Dernière réponse : dans Programmation
6 Février 2008 22:56:14

Yo!

Voila j'ai découpé mon 1er design avec mon copain toshop (je code, j'ai voulu essayer) et ce méchant me sort les images dans un tableau géant (normal me direz vous), moi ça m'embète j'aimerais de vraies <div> et je comprends pas comment faire, ça merde. Est-ce possible?
je vous laisse le code de ma page:

  1. <html>
  2. <head>
  3. <title>Odelayz</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. <!-- ImageReady Slices (Odelayz.psd) -->
  8. <table id="Table_01" width="861" height="1024" border="0" cellpadding="0" cellspacing="0">
  9. <tr>
  10. <td colspan="12">
  11. <img src="images/Odelayz_01.jpg" width="860" height="34" alt=""></td>
  12. <td>
  13. <img src="images/spacer.gif" width="1" height="34" alt=""></td>
  14. </tr>
  15. <tr>
  16. <td rowspan="7">
  17. <img src="images/Odelayz_02.jpg" width="58" height="990" alt=""></td>
  18. <td colspan="9">
  19. <img src="images/Odelayz_03.jpg" width="730" height="320" alt=""></td>
  20. <td colspan="2">
  21. <img src="images/Odelayz_04.jpg" width="72" height="320" alt=""></td>
  22. <td>
  23. <img src="images/spacer.gif" width="1" height="320" alt=""></td>
  24. </tr>
  25. <tr>
  26. <td rowspan="4">
  27. <img src="images/Odelayz_05.jpg" width="18" height="509" alt=""></td>
  28. <td>
  29. <img src="images/Odelayz_06.jpg" width="70" height="95" alt=""></td>
  30. <td>
  31. <img src="images/Odelayz_07.jpg" width="99" height="95" alt=""></td>
  32. <td>
  33. <img src="images/Odelayz_08.jpg" width="116" height="95" alt=""></td>
  34. <td>
  35. <img src="images/Odelayz_09.jpg" width="119" height="95" alt=""></td>
  36. <td>
  37. <img src="images/Odelayz_10.jpg" width="99" height="95" alt=""></td>
  38. <td>
  39. <img src="images/Odelayz_11.jpg" width="89" height="95" alt=""></td>
  40. <td colspan="3" rowspan="2">
  41. <img src="images/Odelayz_12.jpg" width="169" height="309" alt=""></td>
  42. <td rowspan="6">
  43. <img src="images/Odelayz_13.jpg" width="23" height="670" alt=""></td>
  44. <td>
  45. <img src="images/spacer.gif" width="1" height="95" alt=""></td>
  46. </tr>
  47. <tr>
  48. <td colspan="6" rowspan="3">
  49. <img src="images/Odelayz_14.jpg" width="592" height="414" alt=""></td>
  50. <td>
  51. <img src="images/spacer.gif" width="1" height="214" alt=""></td>
  52. </tr>
  53. <tr>
  54. <td colspan="3">
  55. <img src="images/Odelayz_15.jpg" width="169" height="1" alt=""></td>
  56. <td>
  57. <img src="images/spacer.gif" width="1" height="1" alt=""></td>
  58. </tr>
  59. <tr>
  60. <td>
  61. <img src="images/Odelayz_16.jpg" width="103" height="199" alt=""></td>
  62. <td>
  63. <img src="images/Odelayz_17.jpg" width="17" height="199" alt=""></td>
  64. <td rowspan="3">
  65. <img src="images/Odelayz_18.jpg" width="49" height="360" alt=""></td>
  66. <td>
  67. <img src="images/spacer.gif" width="1" height="199" alt=""></td>
  68. </tr>
  69. <tr>
  70. <td colspan="9">
  71. <img src="images/Odelayz_19.jpg" width="730" height="138" alt=""></td>
  72. <td>
  73. <img src="images/spacer.gif" width="1" height="138" alt=""></td>
  74. </tr>
  75. <tr>
  76. <td colspan="9">
  77. <img src="images/Odelayz_20.jpg" width="730" height="23" alt=""></td>
  78. <td>
  79. <img src="images/spacer.gif" width="1" height="23" alt=""></td>
  80. </tr>
  81. </table>
  82. <!-- End ImageReady Slices -->
  83. </body>
  84. </html>

Autres pages sur : table div design photoshop

6 Février 2008 23:07:04

explique un peu ton probleme car la avec tout les width que tu as mit c'est normal que c'est super grand
6 Février 2008 23:21:04

le problème c'est pas que c'est grand le site est pile comme je le veux sauf que a la place des <tr> et <td> je voudrais créer une hiérarchisation en <div> avec un css mais j'y arrive pas
Contenus similaires
6 Février 2008 23:26:43

tu as pas une image que tu peux nous montrer
tu te creer une div et tu te fait des liste apres sa va fonctionner

Toi tu veux dire du jare comme sa :

.
.
.
.

ou non
6 Février 2008 23:33:21

ouais c'est ça
voici le site (rien n'est actif)
http://kpn78.free.fr/abe&lew/odelayz.html
mais justement c'est ça j'arrive pas a remplacer les td et tr et la table par une hiérarchisation de div
6 Février 2008 23:50:40

pourtant toute tes images sont bien placer je comprend pas se que tu veux faire.


<div>
<ol>
<li>
<ol>
<li>
<li>
<li>
<li>
<li>
6 Février 2008 23:51:59

pourtant toute tes images sont bien placer je comprend pas se que tu veux faire.


<div>
<ol>
<li>
<ol>
<li>
<li>
</ol>
<li>
<li>
</ol>
</div>
7 Février 2008 00:10:24

je veux savoir comment transformer pour plus avoir de tr et de td et seulement des div, ça implique de créer des id pour les div, mais j'y arrive pas
7 Février 2008 00:20:00

tu doit tout enlever ton tableau au complet si tu veux mettre des div apres tu leur donne des id ou des class et tu fait ton css dans un fichier externe
7 Février 2008 16:49:04

ouais c'est justement ça que j'arrive pas a faire parce que si je met des id et que je remplace les td et tr par des <div id="x"> même en faisant avec un css externe j'arrive pas a organiser les éléments, je devrais peut être essayer en visuel avec expression web ...
7 Février 2008 22:26:29

Y'a une option dans photoshop !
regarde du coté des parametres d'exportation, ou un truc du genre...
A un endroit il propose CSS, j'sais plus ou... :s
a c 232 L Programmation
7 Février 2008 23:31:00

Salut,

En div/CSS ça donnerait qlq chose du genre :

  1. <style type="text/css">
  2. .clear{clear:both;}
  3. .floatLeft{float:left;}
  4. </style>
  5.  
  6. <div id="Table_01" style="width:861px;height:1024px;border:0;">
  7. <div class="clear">
  8. <div class="floatLeft" style="width:860px;height:34px;background-image:images/Odelayz_01.jpg;"></div>
  9. <div class="floatLeft" style="width:1px;height:34px;background-image:images/spacer.jpg;"></div>
  10. </div>
  11. <div class="clear">
  12. <div class="floatLeft" style="width:58px;height:990px;background-image:images/Odelayz_02.jpg;"></div>
  13. <div class="floatLeft" style="width:730px;height:320px;background-image:images/Odelayz_03.jpg;"></div>
  14. <div class="floatLeft" style="width:72px;height:320px;background-image:images/Odelayz_04.jpg;"></div>
  15. <div class="floatLeft" style="width:1px;height:320px;background-image:images/spacer.jpg;"></div>
  16. </div>
  17. (....)
  18. </div>


Bon, je pense qu'il y a de bien meilleurs façons de faire ça, mais ça transforme un tableau en div :-p

8 Février 2008 00:23:43

oukay je vais creuser par la, merci
Contenus similaires
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