Van <td> naar <div>
Ik heb een template gemaakt en gesliced.. en gesaved voor web&devices. als ik deze nu open in Dreamweaver staat alles in <td> en ik kan beter met <div> werken (proffesioneler) is mij verteld.
Weet iemand hoe ik alles inm div kan krijgen in plaats van tabellen?
Groeten,
Stef
Verder kun je met CSS je divjes een stijl geven.
<div id"div1">
CSS:
#div1 {
background: #333;
}
Raad je wel aan om je te verdiepen in HTML en CSS voordat je de fout begaat om je td's/tr's in te wisselen voor DIV's
Gewijzigd op 12/07/2010 10:03:50 door www JdeRuijterNL
Je kunt beter zelf opnieuw beginnen. Hetgene wat dreamweaver doet is niet altijd volgens de regels. Wat ik gelezen heb met CS5 is dat het wel in divjes wordt opgedeeld.
Code (php)
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
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
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
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>contact</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- Save for Web Styles (contact.psd) -->
<style type="text/css">
<!--
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:768px;
}
#contact-01_ {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:25px;
}
#contact-02_ {
position:absolute;
left:0px;
top:25px;
width:29px;
height:743px;
}
#contact-03_ {
position:absolute;
left:29px;
top:25px;
width:197px;
height:61px;
}
#contact-04_ {
position:absolute;
left:226px;
top:25px;
width:4px;
height:743px;
}
#contact-05_ {
position:absolute;
left:230px;
top:25px;
width:197px;
height:61px;
}
#contact-06_ {
position:absolute;
left:427px;
top:25px;
width:4px;
height:92px;
}
#contact-07_ {
position:absolute;
left:431px;
top:25px;
width:193px;
height:61px;
}
#contact-08_ {
position:absolute;
left:624px;
top:25px;
width:4px;
height:92px;
}
#contact-09_ {
position:absolute;
left:628px;
top:25px;
width:193px;
height:61px;
}
#contact-10_ {
position:absolute;
left:821px;
top:25px;
width:4px;
height:92px;
}
#contact-11_ {
position:absolute;
left:825px;
top:25px;
width:167px;
height:61px;
}
#contact-12_ {
position:absolute;
left:992px;
top:25px;
width:32px;
height:743px;
}
#contact-13_ {
position:absolute;
left:29px;
top:86px;
width:197px;
height:123px;
}
#contact-14_ {
position:absolute;
left:230px;
top:86px;
width:197px;
height:31px;
}
#contact-15_ {
position:absolute;
left:431px;
top:86px;
width:193px;
height:31px;
}
#contact-16_ {
position:absolute;
left:628px;
top:86px;
width:193px;
height:31px;
}
#contact-17_ {
position:absolute;
left:825px;
top:86px;
width:167px;
height:31px;
}
#contact-18_ {
position:absolute;
left:230px;
top:117px;
width:53px;
height:651px;
}
#contact-19_ {
position:absolute;
left:283px;
top:117px;
width:697px;
height:44px;
}
#contact-20_ {
position:absolute;
left:980px;
top:117px;
width:12px;
height:651px;
}
#contact-21_ {
position:absolute;
left:283px;
top:161px;
width:697px;
height:48px;
}
#contact-22_ {
position:absolute;
left:29px;
top:209px;
width:9px;
height:559px;
}
#contact-23_ {
position:absolute;
left:38px;
top:209px;
width:181px;
height:397px;
}
#contact-24_ {
position:absolute;
left:219px;
top:209px;
width:7px;
height:559px;
}
#contact-25_ {
position:absolute;
left:283px;
top:209px;
width:697px;
height:397px;
}
#contact-26_ {
position:absolute;
left:38px;
top:606px;
width:181px;
height:162px;
}
#contact-27_ {
position:absolute;
left:283px;
top:606px;
width:697px;
height:162px;
}
-->
</style>
<!-- End Save for Web Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- Save for Web Slices (contact.psd) -->
<div id="Table_01">
<div id="contact-01_">
<img id="contact_01" src="images/contact_01.jpg" width="1024" height="25" alt="" />
</div>
<div id="contact-02_">
<img id="contact_02" src="images/contact_02.jpg" width="29" height="743" alt="" />
</div>
<div id="contact-03_">
<img id="contact_03" src="images/contact_03.jpg" width="197" height="61" alt="" />
</div>
<div id="contact-04_">
<img id="contact_04" src="images/contact_04.jpg" width="4" height="743" alt="" />
</div>
<div id="contact-05_">
<img id="contact_05" src="images/contact_05.jpg" width="197" height="61" alt="" />
</div>
<div id="contact-06_">
<img id="contact_06" src="images/contact_06.jpg" width="4" height="92" alt="" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>contact</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- Save for Web Styles (contact.psd) -->
<style type="text/css">
<!--
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:768px;
}
#contact-01_ {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:25px;
}
#contact-02_ {
position:absolute;
left:0px;
top:25px;
width:29px;
height:743px;
}
#contact-03_ {
position:absolute;
left:29px;
top:25px;
width:197px;
height:61px;
}
#contact-04_ {
position:absolute;
left:226px;
top:25px;
width:4px;
height:743px;
}
#contact-05_ {
position:absolute;
left:230px;
top:25px;
width:197px;
height:61px;
}
#contact-06_ {
position:absolute;
left:427px;
top:25px;
width:4px;
height:92px;
}
#contact-07_ {
position:absolute;
left:431px;
top:25px;
width:193px;
height:61px;
}
#contact-08_ {
position:absolute;
left:624px;
top:25px;
width:4px;
height:92px;
}
#contact-09_ {
position:absolute;
left:628px;
top:25px;
width:193px;
height:61px;
}
#contact-10_ {
position:absolute;
left:821px;
top:25px;
width:4px;
height:92px;
}
#contact-11_ {
position:absolute;
left:825px;
top:25px;
width:167px;
height:61px;
}
#contact-12_ {
position:absolute;
left:992px;
top:25px;
width:32px;
height:743px;
}
#contact-13_ {
position:absolute;
left:29px;
top:86px;
width:197px;
height:123px;
}
#contact-14_ {
position:absolute;
left:230px;
top:86px;
width:197px;
height:31px;
}
#contact-15_ {
position:absolute;
left:431px;
top:86px;
width:193px;
height:31px;
}
#contact-16_ {
position:absolute;
left:628px;
top:86px;
width:193px;
height:31px;
}
#contact-17_ {
position:absolute;
left:825px;
top:86px;
width:167px;
height:31px;
}
#contact-18_ {
position:absolute;
left:230px;
top:117px;
width:53px;
height:651px;
}
#contact-19_ {
position:absolute;
left:283px;
top:117px;
width:697px;
height:44px;
}
#contact-20_ {
position:absolute;
left:980px;
top:117px;
width:12px;
height:651px;
}
#contact-21_ {
position:absolute;
left:283px;
top:161px;
width:697px;
height:48px;
}
#contact-22_ {
position:absolute;
left:29px;
top:209px;
width:9px;
height:559px;
}
#contact-23_ {
position:absolute;
left:38px;
top:209px;
width:181px;
height:397px;
}
#contact-24_ {
position:absolute;
left:219px;
top:209px;
width:7px;
height:559px;
}
#contact-25_ {
position:absolute;
left:283px;
top:209px;
width:697px;
height:397px;
}
#contact-26_ {
position:absolute;
left:38px;
top:606px;
width:181px;
height:162px;
}
#contact-27_ {
position:absolute;
left:283px;
top:606px;
width:697px;
height:162px;
}
-->
</style>
<!-- End Save for Web Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- Save for Web Slices (contact.psd) -->
<div id="Table_01">
<div id="contact-01_">
<img id="contact_01" src="images/contact_01.jpg" width="1024" height="25" alt="" />
</div>
<div id="contact-02_">
<img id="contact_02" src="images/contact_02.jpg" width="29" height="743" alt="" />
</div>
<div id="contact-03_">
<img id="contact_03" src="images/contact_03.jpg" width="197" height="61" alt="" />
</div>
<div id="contact-04_">
<img id="contact_04" src="images/contact_04.jpg" width="4" height="743" alt="" />
</div>
<div id="contact-05_">
<img id="contact_05" src="images/contact_05.jpg" width="197" height="61" alt="" />
</div>
<div id="contact-06_">
<img id="contact_06" src="images/contact_06.jpg" width="4" height="92" alt="" />
Etc.
Maar ik wil graag een aparte(los van elkaar) style.css nu heb ik al geprobeerd het gewoon te knippen en te plakken in .css maar dat lukt niet:P
Groeten!
je maakt met DW een nieuwe pagina daar plak je de styles in
en dan zet je onder je <titel>
en tussen de <head></head>
dit <link href="bestandsnaam.css" rel="stylesheet" type="text/css" />
Waar bestandsnaam staat dat wel veranderen naar het bestand wat je als css
gebruikt. meestal style.css
maar dit werkt niet:(
dan zet je dus tussen de <head> en </head>:
Code (php)
1
<link href="style.css" rel="stylesheet" type="text/css" />
zoals thomas hierboven beschreef.
Verder: Hoe ziet je style.css er uit? Nee niet plakken! Ik wil alleen weten of je misschien de <style> en </style> tags er ook in hebt gezet o.i.d.
Ook websites met tabellen kunnen er professioneel uitzien:-)
Cornel
Dat heb ik vaak :P
p.s. heb de code goed geplaatst in index.php :P
ik wil de button tekst veranderen via css en ook direct een overlay:P maar werkt nog niet echt :p
Gewijzigd op 14/07/2010 10:22:17 door Stef ter Braak