Photoshop Site
ik heb alles gesliced in photoshop en wat is dan makkelijker dat ik het in dreamweaver bewerkt? en http://throneking.100webspace.net moet ook in de layout gezet worden.
Of is het makkelijker als ik alles bewerk? en dan is de vraag hoe? ik heb het al 2 jaar niet meer gedaan en ben bijna alles vergeten
Bijvoorbeeld als ik zon plaatje heb (onbewerkt) :<td colspan="15">
<img src="images/Lay_01.gif" width="760" height="99" alt=""></td>
Moet het dan in dit worden gemaakt:
<td><img>"images/Lay_01.gif" width="760" height="99" alt=""></td></img>
Of wie zouw me daarmee willen helpen dan PM me maar even geef ik me msn.
Groetjes Nick,
Echter snap ik je punt wel. Ik en zovelen zijn ook begonnen met tabellen sites.
<center><html>
<head>
<title>::Throne King The Game::</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { background-image: url(images/1.GIF); }
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Lay.psd) -->
<table id="Table_01" width="761" height="771" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="15">
<img src="images/Lay_01.gif" width="760" height="99" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="99" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/Lay_02.gif" width="448" height="1" alt=""></td>
<td colspan="3" rowspan="2">
<img src="images/Lay_03.gif" width="103" height="20" alt=""></td>
<td rowspan="2">
<img src="images/Lay_04.gif" width="119" height="20" alt=""></td>
<td colspan="3" rowspan="4">
<img src="images/Lay_05.gif" width="90" height="188" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="8" rowspan="3">
<img src="images/Lay_06.gif" width="448" height="187" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="19" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/Lay_07.gif" width="103" height="23" alt=""></td>
<td>
<img src="images/Lay_08.gif" width="119" height="23" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/Lay_09.gif" width="222" height="145" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="145" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="images/Lay_10.gif" width="81" height="483" alt=""></td>
<td colspan="2">
<img src="images/Lay_11.gif" width="173" height="163" alt=""></td>
<td colspan="2">
<img src="images/Lay_12.gif" width="7" height="163" alt=""></td>
<td colspan="9">
<img src="images/Lay_13.gif" width="417" height="163" alt=""></td>
<td rowspan="6">
<img src="images/Lay_14.gif" width="82" height="483" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="163" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="images/Lay_15.gif" width="174" height="78" alt=""></td>
<td colspan="10">
<img src="images/Lay_16.gif" width="423" height="77" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="77" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/Lay_17.gif" width="21" height="162" alt=""></td>
<td rowspan="4">
<img src="images/Lay_18.gif" width="13" height="243" alt=""></td>
<td colspan="2" rowspan="3">
<img src="images/Lay_19.gif" width="192" height="164" alt=""></td>
<td rowspan="4">
<img src="images/Lay_20.gif" width="10" height="243" alt=""></td>
<td colspan="3" rowspan="2">
<img src="images/Lay_21.gif" width="186" height="162" alt=""></td>
<td rowspan="4">
<img src="images/Lay_22.gif" width="1" height="243" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/Lay_23.gif" width="3" height="242" alt=""></td>
<td colspan="2">
<img src="images/Lay_24.gif" width="171" height="161" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="161" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<img src="images/Lay_25.gif" width="192" height="81" alt=""></td>
<td colspan="3" rowspan="2">
<img src="images/Lay_26.gif" width="186" height="81" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/Lay_27.gif" width="192" height="79" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="79" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="81" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="170" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="6" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="159" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="33" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="60" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="119" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="7" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="82" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html></center>
moet ik tog allemaal veradnerne? maar in wat?
Verder kan je ook even googlen naar CSSplay. :) Daar staan ook wel voorbeelden op.
En Robert dit is niet wat ik bedoel:P
EdiT: hbe hem f fonline gezet:P
http://crimie.cr.funpic.de/
Gewijzigd op 01/01/1970 01:00:00 door Nick Ven
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
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
<style type="text/css">
html, body
{
margin: auto;
text-align: center;
background-color: #fff;
font-family: verdana, arial, sans;
}
#wrapper
{
height: 98%;
width: 800px;
border: 1px solid black;
text-align: left;
margin: auto;
background-color: #000;
}
#header
{
width: 100%;
border-bottom: 1px solid #000;
height: 200px;
background-color: red;
}
#holder1
{
Margin: 30px;
border: 1px solid #000;
width: 740px;
height: 250px;
background-color: #fff;
border: 1px solid red;
}
#blok1
{
float: left;
height: 200px;
width: 200px;
border: 1px solid #000;
margin-left: 20px;
margin-left: 20px;
margin-top: 20px;
}
#menu
{
font-size: 14px;
height: 20px;
border-bottom: 1px solid #000;
width: 195px;
padding-left: 5px;
background-color: red;
font-weight: bolder;
}
#blok2
{
float: right;
height: 200px;
width: 480px;
border: 1px solid #000;
margin: 20px;
margin-left: 10px;
}
#nieuws
{
font-size: 14px;
height: 20px;
border-bottom: 1px solid #000;
width: 475px;
padding-left: 5px;
background-color: red;
font-weight: bolder;
}
#holder2
{
Margin: 30px;
border: 1px solid #000;
width: 740px;
height: 250px;
background-color: #fff;
border: 1px solid red;
}
#blok3
{
float: left;
height: 200px;
width: 218px;
border: 1px solid #000;
margin-left: 20px;
margin-left: 20px;
margin-top: 20px;
}
#partners
{
font-size: 14px;
height: 20px;
border-bottom: 1px solid #000;
width: 213px;
padding-left: 5px;
background-color: red;
font-weight: bolder;
}
#blok4
{
float: left;
height: 200px;
width: 218px;
border: 1px solid #000;
margin-left: 20px;
margin-left: 20px;
margin-top: 20px;
}
#characters
{
font-size: 14px;
height: 20px;
border-bottom: 1px solid #000;
width: 213px;
padding-left: 5px;
background-color: red;
font-weight: bolder;
}
#blok5
{
float: left;
height: 200px;
width: 218px;
border: 1px solid #000;
margin-left: 20px;
margin-left: 20px;
margin-top: 20px;
}
#screenshots
{
font-size: 14px;
height: 20px;
border-bottom: 1px solid #000;
width: 213px;
padding-left: 5px;
background-color: red;
font-weight: bolder;
}
</style>
<html>
<head>
<title>een titel</title>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="holder1">
<div id="blok1">
<div id="menu">Menu</div>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
<div id="blok2">
<div id="nieuws">news</div>
hier komt het laatste nieuws
</div>
</div>
<div id="holder2">
<div id="blok3">
<div id="partners">
Partners
</div>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
<div id="blok4">
<div id="characters">
Characters
</div>
Hier komen characters
</div>
<div id="blok5">
<div id="screenshots">
screenshots
</div>
Hier komen screenshots
</div>
</div>
</div>
</body>
</html>
html, body
{
margin: auto;
text-align: center;
background-color: #fff;
font-family: verdana, arial, sans;
}
#wrapper
{
height: 98%;
width: 800px;
border: 1px solid black;
text-align: left;
margin: auto;
background-color: #000;
}
#header
{
width: 100%;
border-bottom: 1px solid #000;
height: 200px;
background-color: red;
}
#holder1
{
Margin: 30px;
border: 1px solid #000;
width: 740px;
height: 250px;
background-color: #fff;
border: 1px solid red;
}
#blok1
{
float: left;
height: 200px;
width: 200px;
border: 1px solid #000;
margin-left: 20px;
margin-left: 20px;
margin-top: 20px;
}
#menu
{
font-size: 14px;
height: 20px;
border-bottom: 1px solid #000;
width: 195px;
padding-left: 5px;
background-color: red;
font-weight: bolder;
}
#blok2
{
float: right;
height: 200px;
width: 480px;
border: 1px solid #000;
margin: 20px;
margin-left: 10px;
}
#nieuws
{
font-size: 14px;
height: 20px;
border-bottom: 1px solid #000;
width: 475px;
padding-left: 5px;
background-color: red;
font-weight: bolder;
}
#holder2
{
Margin: 30px;
border: 1px solid #000;
width: 740px;
height: 250px;
background-color: #fff;
border: 1px solid red;
}
#blok3
{
float: left;
height: 200px;
width: 218px;
border: 1px solid #000;
margin-left: 20px;
margin-left: 20px;
margin-top: 20px;
}
#partners
{
font-size: 14px;
height: 20px;
border-bottom: 1px solid #000;
width: 213px;
padding-left: 5px;
background-color: red;
font-weight: bolder;
}
#blok4
{
float: left;
height: 200px;
width: 218px;
border: 1px solid #000;
margin-left: 20px;
margin-left: 20px;
margin-top: 20px;
}
#characters
{
font-size: 14px;
height: 20px;
border-bottom: 1px solid #000;
width: 213px;
padding-left: 5px;
background-color: red;
font-weight: bolder;
}
#blok5
{
float: left;
height: 200px;
width: 218px;
border: 1px solid #000;
margin-left: 20px;
margin-left: 20px;
margin-top: 20px;
}
#screenshots
{
font-size: 14px;
height: 20px;
border-bottom: 1px solid #000;
width: 213px;
padding-left: 5px;
background-color: red;
font-weight: bolder;
}
</style>
<html>
<head>
<title>een titel</title>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="holder1">
<div id="blok1">
<div id="menu">Menu</div>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
<div id="blok2">
<div id="nieuws">news</div>
hier komt het laatste nieuws
</div>
</div>
<div id="holder2">
<div id="blok3">
<div id="partners">
Partners
</div>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
<div id="blok4">
<div id="characters">
Characters
</div>
Hier komen characters
</div>
<div id="blok5">
<div id="screenshots">
screenshots
</div>
Hier komen screenshots
</div>
</div>
</div>
</body>
</html>
Hij is ook te bekijken op jurgen-meijer.nl/css_layout.html
Natuurlijk kan het met minder regels maar ik heb het even zo gedaan voor het gemak. Dat je ook snapt wat er bedoeld wordt.
Gewijzigd op 01/01/1970 01:00:00 door Jurgen assaasas
Nick Ven schreef op 10.07.2007 20:01:
hoezo van me photoshop file? van me layout?
En Robert dit is niet wat ik bedoel:P
EdiT: hbe hem f fonline gezet:P
http://crimie.cr.funpic.de/
En Robert dit is niet wat ik bedoel:P
EdiT: hbe hem f fonline gezet:P
http://crimie.cr.funpic.de/
Dit is precies waar het om draait. Je kan hiervan leren hoe je CSS kan gebruiken in combinatie met DIVS. Het gaat erom dat je niet alleen de layout werkend krijgt, maar dat je het ook snapt.
Dit is in vergelijking met een aantal jaren terug een "nieuwe" methode om je website in te delen. Tabellen horen daar niet voor gebruikt te worden, en daarvoor is de div in het leven geroepen.
Ik snap dat dit niet is wat je bedoeld, want het lost je probleem niet meteen op. Maar neem maar van mij aan dat het heel veel scheelt als je weet hoe het werkt. Op gegeven moment wil je de layout aanpassen en dan weet je niet wat je moet doen om het aan te passen ;)
screenshot en deze code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#blok5
{
float: left;
height: 200px;
width: 218px;
border: 1px solid #000;
margin-left: 20px;
margin-left: 20px;
margin-top: 20px;
}
#screenshots
{
font-size: 14px;
height: 20px;
border-bottom: 1px solid #000;
width: 213px;
padding-left: 5px;
background-color: red;
font-weight: bolder;
}
{
float: left;
height: 200px;
width: 218px;
border: 1px solid #000;
margin-left: 20px;
margin-left: 20px;
margin-top: 20px;
}
#screenshots
{
font-size: 14px;
height: 20px;
border-bottom: 1px solid #000;
width: 213px;
padding-left: 5px;
background-color: red;
font-weight: bolder;
}
Als ik het goed begrijp :P maar dat is dan tog niet mijn site (A)
Gewijzigd op 01/01/1970 01:00:00 door Nick Ven