Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien
Toon posts:

html probleem

Pagina: 1
Acties:
  • 31 views sinds 30-01-2008

zondag 30 september 2007 22:22

Acties:
  • Zygivt
  • Registratie: Maart 2006
  • Laatst online: 27-11 22:02

Zygivt

Evenaren en overtreffen

Topicstarter
Beste Gotters,

ik probeer een site te maken, maar loop tegen een html probleem aan (vrees ik). Ik ben namelijk geen ervaren html-er.

Ik heb in photoshop een simpele template in elkaar geknutseld, die ge-cut en die door photoshop laten omzetten in een index.html. Ik weet dat de code daardoor niet ten goede komt, maar ik heb het vaker op deze manier gedaan en toen zonder problemen. Nu is het echter zo dat de html netjes wordt gegenereerd. Als ik in de "content" echter een tabel maak om daar dan foto's in te plaatsen dan vervormt/ rekt de template vertikaal op. Dit is niet het probleem. Het probleem is dat de slices die ik aan de zijkant gesneden heb met het doel vertikaal te kunnen herhalen, willen zich niet herhalen. Krijg ik het echter voor elkaar ze te laten herhalen dan blijven ze niet op hun plek.

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
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
257
258

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>


  <title>awf3</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body leftmargin="0" topmargin="0" bgcolor="#ffffff" marginheight="0" marginwidth="0">

<table id="Table_01" border="0" cellpadding="0" cellspacing="0" height="769" width="1025">

    <tbody>
    <tr>

        <td colspan="15" background="images/awf3_01.gif" height="3" width="1024"></td>

        <td background="images/spacer.gif" height="3" width="1"></td>

    </tr>

    <tr>

        <td colspan="2" rowspan="3" background="images/awf3_02.gif" height="299" width="190"></td>

        <td colspan="12" background="images/awf3_03.gif" height="233" width="637"></td>

        <td rowspan="3" background="images/awf3_04.gif" height="299" width="197"></td>

        <td background="images/spacer.gif" height="233" width="1"></td>

    </tr>

    <tr>

        <td colspan="12" background="images/awf3_05.gif" height="3" width="637"></td>

        <td background="images/spacer.gif" height="3" width="1"></td>

    </tr>

    <tr>

        <td colspan="12" background="images/awf3_06.gif" height="63" width="637"></td>

        <td background="images/spacer.gif" height="63" width="1"></td>

    </tr>

    <tr>

        <td rowspan="11" background="images/awf3_07.gif" height="250" width="47"></td>

        <td colspan="3" background="images/awf3_08.gif" height="27" width="205"></td>

        <td rowspan="11" background="images/awf3_09.gif" height="250" width="55"></td>

        <td colspan="7" rowspan="12" background="images/awf3_10.gif">
      <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>

        </td>

        <td colspan="3" rowspan="11" background="images/awf3_11.gif" height="250" width="303"></td>

        <td background="images/spacer.gif" height="27" width="1"></td>

    </tr>

    <tr>

        <td colspan="3" background="images/awf3_12.gif" height="24" width="205"></td>

        <td background="images/spacer.gif" height="24" width="1"></td>

    </tr>

    <tr>

        <td colspan="3" background="images/awf3_13.gif" height="21" width="205"></td>

        <td background="images/spacer.gif" height="21" width="1"></td>

    </tr>

    <tr>

        <td colspan="3" background="images/awf3_14.gif" height="22" width="205"></td>

        <td>
            <img src="images/spacer.gif" alt="" height="22" width="1"></td>

    </tr>

    <tr>

        <td colspan="3" background="images/awf3_15.gif" height="21" width="205"></td>

        <td>
            <img src="images/spacer.gif" alt="" height="21" width="1"></td>

    </tr>

    <tr>

        <td colspan="3" background="images/awf3_16.gif" height="24" width="205"></td>

        <td>
            <img src="images/spacer.gif" alt="" height="24" width="1"></td>

    </tr>

    <tr>

        <td colspan="3" background="images/awf3_17.gif" height="21" width="205"></td>

        <td>
            <img src="images/spacer.gif" alt="" height="21" width="1"></td>

    </tr>

    <tr>

        <td colspan="3" background="images/awf3_18.gif" height="21" width="205"></td>

        <td>
            <img src="images/spacer.gif" alt="" height="21" width="1"></td>

    </tr>

    <tr>

        <td colspan="3" background="images/awf3_19.gif" height="23" width="205"></td>

        <td>
            <img src="images/spacer.gif" alt="" height="23" width="1"></td>

    </tr>

    <tr>

        <td colspan="3" background="images/awf3_20.gif" height="22" width="205"></td>

        <td background="images/spacer.gif" height="22" width="1">
            </td>

    </tr>

    <tr>

        <td colspan="3" background="images/awf3_21.gif" height="24" width="205"></td>

        <td background="images/spacer.gif" height="24" width="1"></td>

    </tr>

    <tr>

        <td colspan="5" rowspan="2" background="images/awf3_22.gif" width="307">
            </td>

        <td colspan="3" rowspan="2" background="images/awf3_23.gif" width="303">
            </td>

        <td background="images/spacer.gif" height="131" width="1"></td>

    </tr>

    <tr>

        <td colspan="7" background="images/awf3_24.gif" height="59" width="414"></td>

        <td>
            <img src="images/spacer.gif" alt="" height="59" width="1"></td>

    </tr>

    <tr>

        <td colspan="3" background="images/awf3_25.gif" height="26" width="246"></td>

        <td colspan="3" background="images/awf3_26.gif" height="26" width="164"></td>

        <td background="images/awf3_27.gif" height="26" width="52"></td>

        <td background="images/awf3_28.gif" height="26" width="16"></td>

        <td background="images/awf3_29.gif" height="26" width="63"></td>

        <td background="images/awf3_30.gif" height="26" width="16"></td>

        <td background="images/awf3_31.gif" height="26" width="66"></td>

        <td colspan="2" background="images/awf3_32.gif" height="26" width="136"></td>

        <td colspan="2" background="images/awf3_33.gif" height="26" width="265"></td>

        <td>
            <img src="images/spacer.gif" alt="" height="26" width="1"></td>

    </tr>

    <tr>

        <td>
            <img src="images/spacer.gif" alt="" height="1" width="47"></td>

        <td>
            <img src="images/spacer.gif" alt="" height="1" width="143"></td>

        <td>
            <img src="images/spacer.gif" alt="" height="1" width="56"></td>

        <td>
            <img src="images/spacer.gif" alt="" height="1" width="6"></td>

        <td>
            <img src="images/spacer.gif" alt="" height="1" width="55"></td>

        <td>
            <img src="images/spacer.gif" alt="" height="1" width="103"></td>

        <td>
            <img src="images/spacer.gif" alt="" height="1" width="52"></td>

        <td>
            <img src="images/spacer.gif" alt="" height="1" width="16"></td>

        <td>
            <img src="images/spacer.gif" alt="" height="1" width="63"></td>

        <td>
            <img src="images/spacer.gif" alt="" height="1" width="16"></td>

        <td>
            <img src="images/spacer.gif" alt="" height="1" width="66"></td>

        <td>
            <img src="images/spacer.gif" alt="" height="1" width="98"></td>

        <td>
            <img src="images/spacer.gif" alt="" height="1" width="38"></td>

        <td>
            <img src="images/spacer.gif" alt="" height="1" width="68"></td>

        <td>
            <img src="images/spacer.gif" alt="" height="1" width="197"></td>

        <td></td>

    </tr>

  </tbody>
</table>

</body>
</html>


de index:
Afbeeldingslocatie: http://aycu16.webshots.com/image/29015/2000924295799727241_th.jpg

wat gebeurt als ik hem oprek:
Afbeeldingslocatie: http://aycu38.webshots.com/image/28717/2000996883578441828_th.jpg

hoe ik wil dat hij wordt na het toevoegen van foto's:
Afbeeldingslocatie: http://aycu33.webshots.com/image/29592/2000977336076894050_th.jpg

de bedoeling is dus dat awf3_22.gif en awf3_23.gif zich vertikaal gaan herhalen.
Hopelijk kan iemand mij helpen ik zoek al 2 weken naar een oplossing |:(

bij voorbaat dank.

zondag 30 september 2007 23:09

Acties:

Verwijderd

basis css tutorials gaan lezen...
daar staat alles wel over positioneren

je hebt trouwens en enorme lap html code wat door css ook 10x kleiner kan ;)

zondag 30 september 2007 23:21

Acties:
  • Savantas
  • Registratie: December 2002
  • Laatst online: 28-11 18:59

Savantas

Als ik even de discussie tabel/css skip (is al eens eerder gedaan en inderdaad, levert veel schonere code) dan moet je gewoon wat meer slices aanbrengen in Photoshop.
Ongeveer zo:
Afbeeldingslocatie: http://tweakers.net/ext/f/fd6504ed87f07619247982c322132c6a/full.gif
Het stuk tussen B kan je laten herhalen (meestal maak ik dan zelfs een extra slice van 1 of 2 pixels hoog welke ik dan laat herhalen, maar ja, dan moet je inderdaad meestal wat meer verstand van css hebben).
Wat ik nu geknipt heb is dus zonder vertikale slices, geen idee hoe je dat nu hebt. Met CSS is dat wat makkelijker uit de code te halen dan met tabelslurrie... Ik neem aan dat de middelste kolom gevuld word met tekst, volgens mij krijg je dan wel boven en onder de twee blokken erg veel witruimte, maar ja :)

[ Voor 6% gewijzigd door Savantas op 30-09-2007 23:23 ]

Ik denk niet zwart-wit, ik denk diapositief! ( ͡° ͜ʖ ͡°)

zondag 30 september 2007 23:56

Acties:
  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
Helaasch, zo werken we hier niet.
Het is hier niet de bedoeling dat je een (huge ass) lap code dumpt en wij het even voor je gaan oplossen (zie: Kan iemand even...? / Scriptrequests). Als je een probleem hebt gaan we er van uit dat je enkel relevante code post (zie: Quickstart) en desnoods even een uitgeklede test-case online zet.
Verder kan het inderdaad geen kwaad je even te verdiepen in de techniek als je een oplossing zoekt voor je probleem; het is wel de bedoeling dat je zelf een beetje moeite doet (zie wederom: Quickstart) om je probleem op te lossen voordat je het hier voorlegt.

offtopic:
En een goedbedoelde tip: als je al niet van die tables wil afstappen, prima. Maar die spacers... :X

[ Voor 19% gewijzigd door RobIII op 01-10-2007 00:00 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

Dit topic is gesloten.

Apple iPhone 17 LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2025 • Hosting door TrueFullstaq