Problème de passage du mode TABLEAUX en mode CSS

Version imprimable

Bonsoir/Bonjour tout le monde

Je possède un site depuis quelques années, et je voudrais le mettre à jour. Je voudrais notemment enlever la "mise en page tableaux" de ma page INDEX et la remplacer par une "mise en page CSS".
Le problème, c'est que j'avais fait une page INDEX tellement complexe que je n'y arrive pas
Ca fait 3 jours que je galère, que je m'arrache les cheveux, pour des résultats tous aussi désespérants les uns que les autres:(

Est-ce que vous pouvez m'aider, d'autant que je ne suis pas un spécialiste en mise en page CSS, c'est le moins que l'on puisse dire!

Ma page INDEX se composait donc de 2 tableaux principaux l'un sous l'autre, chacun des tableaux possédant des tableaux imbriqués

J'ai enlevé le maximum de choses pour ne laisser que le squelette, et j'ai mis le plus de couleurs possible, pour essayer d'être le plus lisible possible

Voilà ma page INDEX:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
 
 
 
<body>
 
 
<table width="741" cellpadding="0" cellspacing="0">
 
<tr>
      <td height="75" colspan="2" valign="top"></td>
</tr>
 
<tr><td width="180" height="11" valign="top"></td>
 
    <td width="561" rowspan="3" valign="top">
    <TABLE WIDTH=561 CELLPADDING=0 CELLSPACING=0 align="center">
 
    <TR>
        <TD width="55"><IMG SRC="" WIDTH=55 HEIGHT=1></TD>
        <TD width="54"><IMG SRC="" WIDTH=54 HEIGHT=1></TD>
        <TD width="345"><IMG SRC="" WIDTH=345 HEIGHT=1></TD>
        <TD width="48"><IMG SRC="" WIDTH=48 HEIGHT=1></TD>
        <TD width="58"><IMG SRC="" WIDTH=58 HEIGHT=1></TD>
        <TD width="1"></TD>
    </TR>
 
    <TR>
        <TD COLSPAN=2><IMG SRC="" WIDTH=109 HEIGHT=66></TD>
        <TD><IMG SRC="" WIDTH=345 HEIGHT=66></TD>
        <TD COLSPAN=2><IMG SRC="" WIDTH=106 HEIGHT=66></TD>
        <TD><IMG SRC="" WIDTH=1 HEIGHT=66></TD>
    </TR>
 
    <TR>
        <TD height="102"><IMG SRC="" WIDTH=55 HEIGHT=102></TD>
        <TD COLSPAN=3 ROWSPAN=3 valign="top"></TD>
        <TD ROWSPAN=2><IMG SRC="" WIDTH=58 HEIGHT=118></TD>
        <TD><IMG SRC="" WIDTH=1 HEIGHT=102></TD>
    </TR>
 
    <TR>
        <TD ROWSPAN=2><IMG SRC="" WIDTH=55 HEIGHT=590></TD>
        <TD height="16"><IMG SRC="" WIDTH=1 HEIGHT=16></TD>
    </TR>
 
    <TR>
      <TD height="574"><IMG SRC="" WIDTH=58 HEIGHT=574></TD>
      <TD rowspan="3"></TD>
    </TR>
 
    <TR>
      <TD height="9" COLSPAN=5 valign="top"><IMG SRC="" WIDTH=560 HEIGHT=9></TD>
    </TR>
 
    <TR>
    </TR>
 
    <TR>
      <TD height="9"><IMG SRC="" WIDTH=1 HEIGHT=9></TD>
    </TR>
 
    </TABLE>
    </td></tr>
 
<tr>
<td height="453" valign="top">
    <TABLE WIDTH=180 CELLPADDING=0 CELLSPACING=0 align="center"> 
 
    <TR>
</TR>
 
    <TR>
        <TD COLSPAN=3><IMG SRC="" WIDTH=180 HEIGHT=12></TD>
    </TR>
 
    <TR>
        <TD ROWSPAN=8><IMG SRC="" WIDTH=9 HEIGHT=233></TD>
        <TD><IMG SRC="" WIDTH=162 HEIGHT=30></TD>
        <TD ROWSPAN=8><IMG SRC="" WIDTH=9 HEIGHT=233></TD>
    </TR>
 
    <TR>
        <TD><IMG SRC="" WIDTH=162 HEIGHT=32></TD>
    </TR>
 
    <TR>
        <TD><IMG SRC="" WIDTH=162 HEIGHT=33></TD>
    </TR>
 
    <TR>
        <TD><IMG SRC="" WIDTH=162 HEIGHT=31></TD>
    </TR>
 
    <TR>
        <TD><IMG SRC="" WIDTH=162 HEIGHT=32></TD>
    </TR>
 
    <TR>
        <TD><IMG SRC="" WIDTH=162 HEIGHT=32></TD>
    </TR>
 
    <TR>
        <TD><IMG SRC="" WIDTH=162 HEIGHT=32></TD>
    </TR>
 
    <TR>
        <TD><IMG SRC="" WIDTH=162 HEIGHT=11></TD>
    </TR> 
 
    <TR> 
        <TD COLSPAN=3><IMG SRC="" WIDTH=172 HEIGHT=50></TD>
    </TR> 
 
    <TR>
        <TD COLSPAN=3><IMG SRC="" WIDTH=180 HEIGHT=9></TD>
    </TR>
 
    <TR>
        <TD ROWSPAN=2><IMG SRC="" WIDTH=9 HEIGHT=98></TD>
        <TD><IMG SRC="" WIDTH=162 HEIGHT=49></TD>
        <TD ROWSPAN=2><IMG SRC="" WIDTH=9 HEIGHT=98></TD>
    </TR>
 
    <TR>
        <TD><IMG SRC="" WIDTH=162 HEIGHT=49></TD>
    </TR>
 
    <TR>
        <TD COLSPAN=3><IMG SRC="" WIDTH=180 HEIGHT=11></TD>
    </TR>
 
    <TR>
        <TD COLSPAN=3><img src="" width="162" height="17" vspace="7"></TD>
    </TR> 
 
    <TR> 
        <TD COLSPAN=3><img src="" width="162" height="17"></TD>
    </TR>
 
    </TABLE>
    </td></tr>
 
<tr>
<td height="305" valign="top">
    <TABLE WIDTH=180 CELLPADDING=0 CELLSPACING=0>
 
    <TR>
        <TD COLSPAN=3><IMG SRC="" WIDTH=180 HEIGHT=20></TD>
    </TR>
 
    <TR>
        <TD ROWSPAN=2><IMG SRC="" WIDTH=15 HEIGHT=274></TD>
       <TD>        
        <table width="150" height="240">
        <tr>
            <td width="140" valign="top"></td>
        </tr>
        </table>
        </TD>       <TD ROWSPAN=2><IMG SRC="" WIDTH=15 HEIGHT=274></TD>
    </TR>
 
    <TR>
        <TD><IMG SRC="" WIDTH=150 HEIGHT=34></TD>
    </TR>
 
    </TABLE>
    </td></tr>
 
</table>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<TABLE WIDTH=741 align="center" CELLPADDING=0 CELLSPACING=0>
 
    <TR>
        <TD COLSPAN=3><IMG SRC="" WIDTH=741 HEIGHT=6></TD>
    </TR>
 
    <TR>
        <TD ROWSPAN=2><IMG SRC="" WIDTH=10 HEIGHT=129></TD>
        <TD COLSPAN=2><IMG SRC="" WIDTH=731 HEIGHT=4></TD>
    </TR>
 
    <TR>
        <TD>
        <table width="718" height="79">
 
        <tr>
            <td><img src="" width="88" height="31"></td>
            <td></td>
            <td></td>
            <td></td>
            <td colspan="3"></td>
        </tr>
 
        <tr>
            <td></td>
            <td></td>
            <td colspan="3"></td>
            <td></td>
            <td></td>
        </tr>
 
        </table>
        </TD>
 
        <TD><IMG SRC="" WIDTH=13 HEIGHT=125></TD>   </TR>
 
<TR>
<TD COLSPAN=3><IMG SRC="" WIDTH=741 HEIGHT=11></TD>
</TR>
 
</TABLE>
 
 
</body>

Voilà. Je voudrais donc enlever tous ces tableaux et mettre du CSS à la place

Je vous remercie 1000 fois par avance de l'aide que vous pourrez m'apporter

13/12/2008, 12h55
nathan.ontenal

Bisûnûrs, désolé pour la mise en page
Mais pourquoi avoir changé les couleurs? C'est plus facile pour ceux qui voudront m'aider?

Merci
13/12/2008, 13h21
Erwan31

Citation:

Envoyé par nathan.ontenal

Bisûnûrs, désolé pour la mise en page
Mais pourquoi avoir changé les couleurs? C'est plus facile pour ceux qui voudront m'aider?

Comme le précise Bisunurs, ne pas confondre Quote et Code, ceci afin d'éviter
les confusions d'identification du type de contenu.

Je te conseil vivement de t'entrainer à la mise en page DIV/CSS avec des tutoriels comme celui-ci (et les autres).
13/12/2008, 18h02
HiRoN

Citation:

Envoyé par Erwan31

Je te conseil vivement de t'entrainer à la mise en page DIV/CSS avec des tutoriels comme celui-ci (et les autres).

+1, ainsi que de lire afin d'apprendre les bases du CSS les cours, tu y verrass déjà + clair ensuite. Le but n'étant pas de te faire la chose mais de t'aider à y arriver (donc tentes des choses, si problème envoi le code, nous t'aiderons, mais donner directement la solution, ne te fera pas avancer dans la bonne direction) ;)
13/12/2008, 18h25
nathan.ontenal

Merci beaucoup

J'ai lu pas mal de chose sur les CSS (je ne connaissais pas le lien d'Erwan que j'ai lu avec attention, très interessant)
J'ai même un bouquin de MicroApp sur les CSS, que j'ai pas mal parcouru, j'ai fait quelques exercices

En fait, je sais faire, avec beaucoup de temps, ce qui est proposé dans le lien d'Erwan

Mais le problème, c'est que ma page index doit comporter pas mal d'absurdités, mais en tableaux je me suis toujours débrouillé (sauf sur Firefox où ça n'a jamais marché)

Or, là, malgré tous mes efforts (j'y ai passé 3 jours, + une quatrième après-midi aujourd'hui), et je n'arrive à rien:cry:

Je pense que c'est du au fait que j'ai mal fait ma page index il y'a quelques années, avec tous ces tableaux/tr/td imbriqués

Bref, je galère:(
13/12/2008, 19h00
HiRoN

Après avoir regarder ton code, effectivement, c'est le bronx :aie:
Mais dans l'idée, je pense que ce lien pourrait t'aider (site 100% hauteur, afficher la source, il faudra bien sur adapter). Reprend dans un premier temps la construction générale avant de passer au contenu.

Bonjour à tous

J'ai mis beaucoup d'ordre dans mes tableaux, et d'après les directives de ce lien:
http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

...j'ai fait mon squelette

Mais ça coince quelque part

Voilà ce que je veux:

http://i38.tinypic.com/2ce0ty0.gif

Voilà mon code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 <head> <style type="text/css"> div#menu { float: left; height: 775px; width: 180px; } div#contenu { height: 767px; width: 561px; float: left; } div#menu_haut { height: 447px; width: 180px; } div#menu_bas { height: 328px; width: 180px; } </style> </head> <body> <div id="menu"> <div id="menu_haut">Menu Haut...</div> <div id="menu_bas">menu Bas...</div> </div> <div id="contenu">Contenu...</div> </body> </html>
Ce que j'obtiens est assez bizarre

Dans dreamweaver, le contenu est en dessous du menu. J'ai d'abord le menu haut, puis le menu bas en dessous, et enfin le contenu en dessous du menu bas

Par contre, quand je demande à voir l'aperçu dans IE ou Firefox, j'obtiens la page telle que je la veux

Je n'ai pas encore inséré toutes mes images et tous mes textes, et j'ai peur de m'être trompé quelque part, mais pourtant j'ai suivi les consignes du lien

Qu'en pensez-vous?

Merci beaucoup :)

16/12/2008, 21h29
telliak

Citation:

Envoyé par nathan.ontenal

Dans dreamweaver, le contenu est en dessous du menu. J'ai d'abord le menu haut, puis le menu bas en dessous, et enfin le contenu en dessous du menu bas

Par contre, quand je demande à voir l'aperçu dans IE ou Firefox, j'obtiens la page telle que je la veux

Qu'en pensez-vous?

Bonsoir,
J'en pense que tes visiteurs utiliseront FF, IE, Opera ou autre, mais pas Dreamweaver :D.
Plus sérieusement, ne serait-ce pas ta fenêtre de visualisation dans DW qui serait trop étroite et ne permettrait pas à contenu de se placer à côté des menus ?
Tu pourrais également définir une largeur pour l'ensemble, soit avec un div conteneur global, soit dans body.

Bonjour,

Essaye

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
body {
  width : 741px;
  }
 
#menu {
  float: left;
  height: 775px;
  width: 180px;
  }
#menu_haut {
  height: 447px;
  width: 180px;
  }
#menu_bas {
  height: 328px;
  width: 180px;
  }
 
#contenu {
  height: 767px;  /* la hauteur ne variera pas ? */
/*  width: 561px;
  float: left; */
margin-left : 180px;
  }

++
Les "div" sont inutiles dans les noms de tes styles.

-