[CSS/HTML] Tabel probleem
Om maar meteen met de deur in huis te vallen, ik heb een probleem met een tabel. Ik wil mijn content verdelen in, links de tekst (nieuws, etc.) en rechts, advertenties. Nu heb ik dat zo ver alleen stuit ik tegen een probleem aan waar ik niet uit kan komen.
Ik heb 1 DIV, van de hele content, en daar in 2 tabellen gemaakt, en die in css een positie geven, alleen pakt dit niet helemaal zo uit als ik het wil. Zodra ik mijn linker tabel vul met tekst en daarna de zelfde tabel nog eens kopieer, dan gaat mijn rechter tabel mee met de onderste tabel van de linker.
Misschien klinkt dit allemaal een beetje rommelig maar ik geef de code wel even mee en een voorbeeld van wat er gebeurd.
CSS
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
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
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
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
html{
padding: 0;
margin: 0;
}
body{
margin-right: auto;
margin-left: auto;
font-family: Arial, Veranda;
text-align: center;
font-size: 12px;
}
#total {
font-size: 12px;
font-family: Arial;
position: center;
background-color: #b5b5b5;
width: 875px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
/*BEGIN HEADER */
#header {
background-image: url(header.gif);
background-repeat: no-repeat;
width: 289px;
height: 56px;
float:left;
}
#tussen {
width : 7px;
height: 56px;
background-color: #a5a6a6;
float: left;
}
#midcontent {
width: 280px;
height: 56px;
background-color: #515151;
float: left;
}
#tussenklein {
width: 7px;
height: 56px;
background-color: #a5a6a6;
float:left;
}
#rechtscontent {
text-align: left;
width : 292px;
height : 56px;
background-color: #515151;
float:left;
}
#topleftcontent {
width: 289px;
height: 122px;
background-color: #bababa;
float: left;
}
#toprightcontent {
width: 586px;
height: 122px;
background-color: #bababa;
float: left;
}
#eindheader{
width: 875px;
height: 10px;
background-color: #898383;
float:left;
}
/* END HEADER */
/* BEGIN MENU */
#menu {
width: 875px;
height: 20px;
background-color: #666464;
float: left;
}
ul {
text-align: center;
margin: 0;
padding: 0;
list-style-type: none;
height: 25px;
width: 875px;
}
li {
margin-left: auto;
margin-right: auto;
float: left;
}
ul a {
text-align: center;
}
ul li a:hover
{
display:block;
text-align: center;
width: 94px;
height: 25px;
text-decoration: underline;
color: #FFFFFF;
}
ul a:visited
{
display:block;
text-align:center;
width: 94px;
height: 25px;
text-decoration: none;
font-family: Arial;
font-size: 12px;
color: #c1c1c1;
}
ul a:active
{
display:block;
text-align:center;
width: 94px;
height: 25px;
text-decoration: none;
font-family: Arial;
font-size: 12px;
color: #c1c1c1;
}
ul a:link
{
display: block;
text-align:center;
width: 94px;
height: 25px;
text-decoration: none;
font-family: Arial;
font-size: 12px;
color: #c1c1c1;
}
/* END MENU */
/* BEGIN CONTENT */
#content { //dit is dus de hele content
min-height: 450px;
height: auto !important;
height: 450px;
width: 875px;
background-color: #b5b5b5;
text-align: left;
float: left;
}
/* EIND CONTENT */
/* FOOTER */
#footer {
width: 875px;
height: 20px;
background-color: #666464;
float: left;
clear:both;
}
/* OPMAAK TABBELEN */
td.rightcontent { // kleur van de td van de rechter tabel
background-color: #939698;
}
table.leftcontent { //deze tabel is voor het nieuws gedeelte
margin-left: 4px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #939698;
font-size: 12px;
width: 650px;
float: left;
}
table.rightcontent { //deze tabel is voor de advertenties
margin-right: 4px;
margin-top: -3px;
font-size: 12px;
width: 200px;
float: right;
}
table.login {
margin-left: 0px;
margin-top: -2px;
}
input.submit {
margin-top: 15px;
float: left;
text-align: center;
}
/* EIND TABELEN OPMAAK */
/* TEKST OPMAAK */
h3.right {
border: 1px solid #000000;
background-image: url(teksth3.gif);
background-repeat: repeat-x;
color: #000000;
font-size: 12px;
margin-top: 10px;
margin-bottom: 0px;
font-weight: bold;
text-align: center;
}
h3 {
border: 1px solid #000000;
background-image: url(teksth3.gif);
background-repeat: repeat-x;
color: #000000;
font-size: 12px;
margin-top: 10px;
margin-bottom: 0px;
font-weight: bold;
}
h2 {
font-size: 10px;
font-family: Arial;
text-align: right;
color: #FFFFFF;
}
h1 {
font-size: 12px;
color: #000000;
font-weight: bold;
}
p.topcontent{
margin-top: 2px;
font-size: 11px;
font-family: Arial;
text-align: center;
color: #FFFFFF;
font-weight: bold;
}
p.leftcontent{
font-size: 12px;
font-family: Arial;
text-align: Left;
color: #FFFFFF;
}
/* EIND TEKST OPMAAK */
padding: 0;
margin: 0;
}
body{
margin-right: auto;
margin-left: auto;
font-family: Arial, Veranda;
text-align: center;
font-size: 12px;
}
#total {
font-size: 12px;
font-family: Arial;
position: center;
background-color: #b5b5b5;
width: 875px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
/*BEGIN HEADER */
#header {
background-image: url(header.gif);
background-repeat: no-repeat;
width: 289px;
height: 56px;
float:left;
}
#tussen {
width : 7px;
height: 56px;
background-color: #a5a6a6;
float: left;
}
#midcontent {
width: 280px;
height: 56px;
background-color: #515151;
float: left;
}
#tussenklein {
width: 7px;
height: 56px;
background-color: #a5a6a6;
float:left;
}
#rechtscontent {
text-align: left;
width : 292px;
height : 56px;
background-color: #515151;
float:left;
}
#topleftcontent {
width: 289px;
height: 122px;
background-color: #bababa;
float: left;
}
#toprightcontent {
width: 586px;
height: 122px;
background-color: #bababa;
float: left;
}
#eindheader{
width: 875px;
height: 10px;
background-color: #898383;
float:left;
}
/* END HEADER */
/* BEGIN MENU */
#menu {
width: 875px;
height: 20px;
background-color: #666464;
float: left;
}
ul {
text-align: center;
margin: 0;
padding: 0;
list-style-type: none;
height: 25px;
width: 875px;
}
li {
margin-left: auto;
margin-right: auto;
float: left;
}
ul a {
text-align: center;
}
ul li a:hover
{
display:block;
text-align: center;
width: 94px;
height: 25px;
text-decoration: underline;
color: #FFFFFF;
}
ul a:visited
{
display:block;
text-align:center;
width: 94px;
height: 25px;
text-decoration: none;
font-family: Arial;
font-size: 12px;
color: #c1c1c1;
}
ul a:active
{
display:block;
text-align:center;
width: 94px;
height: 25px;
text-decoration: none;
font-family: Arial;
font-size: 12px;
color: #c1c1c1;
}
ul a:link
{
display: block;
text-align:center;
width: 94px;
height: 25px;
text-decoration: none;
font-family: Arial;
font-size: 12px;
color: #c1c1c1;
}
/* END MENU */
/* BEGIN CONTENT */
#content { //dit is dus de hele content
min-height: 450px;
height: auto !important;
height: 450px;
width: 875px;
background-color: #b5b5b5;
text-align: left;
float: left;
}
/* EIND CONTENT */
/* FOOTER */
#footer {
width: 875px;
height: 20px;
background-color: #666464;
float: left;
clear:both;
}
/* OPMAAK TABBELEN */
td.rightcontent { // kleur van de td van de rechter tabel
background-color: #939698;
}
table.leftcontent { //deze tabel is voor het nieuws gedeelte
margin-left: 4px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #939698;
font-size: 12px;
width: 650px;
float: left;
}
table.rightcontent { //deze tabel is voor de advertenties
margin-right: 4px;
margin-top: -3px;
font-size: 12px;
width: 200px;
float: right;
}
table.login {
margin-left: 0px;
margin-top: -2px;
}
input.submit {
margin-top: 15px;
float: left;
text-align: center;
}
/* EIND TABELEN OPMAAK */
/* TEKST OPMAAK */
h3.right {
border: 1px solid #000000;
background-image: url(teksth3.gif);
background-repeat: repeat-x;
color: #000000;
font-size: 12px;
margin-top: 10px;
margin-bottom: 0px;
font-weight: bold;
text-align: center;
}
h3 {
border: 1px solid #000000;
background-image: url(teksth3.gif);
background-repeat: repeat-x;
color: #000000;
font-size: 12px;
margin-top: 10px;
margin-bottom: 0px;
font-weight: bold;
}
h2 {
font-size: 10px;
font-family: Arial;
text-align: right;
color: #FFFFFF;
}
h1 {
font-size: 12px;
color: #000000;
font-weight: bold;
}
p.topcontent{
margin-top: 2px;
font-size: 11px;
font-family: Arial;
text-align: center;
color: #FFFFFF;
font-weight: bold;
}
p.leftcontent{
font-size: 12px;
font-family: Arial;
text-align: Left;
color: #FFFFFF;
}
/* EIND TEKST OPMAAK */
Nu had ik in eerste instantie #content verdeeld in 2 containers namelijk, leftcontent en rightcontent, alleen wil ik graag dat mijn pagina dus een bepaalde hoogte standaard heeft, en als ik dus mijn leftcontent vul met tekst, dan loopt die netjes door, alleen omdat mijn rightcontent dus een andere container is, blijft die dus netjes op zijn plaats. Daarom heb ik gekozen voor 1 container.
//EDIT
Met position: relative; werkt het wel in Firefox, alleen in IE8 blijft de tabel zich het zelfde gedragen.
Met position: absolute; wil het ook niet, omdat Firefox zet de tabel in het midden, alleen zet IE8 het weer ergens anders neer.
Gewijzigd op 01/01/1970 01:00:00 door Lol lol
*bump*
Je moet geen tabel gebruiken voor lay-out.
Karl schreef op 21.05.2009 18:50:
Je moet geen tabel gebruiken voor lay-out.
Dus moet ik de tabellen die ik nu gebruik in een DIV zetten.
En ik dacht dat data, wat er nu in principe in staat, wel in een tabel mag, en DIV's voor de lay-out, wat ik in principe heb gedaan, alleen wil ik de content verdelen.
lol schreef op 21.05.2009 18:53:
Dus moet ik de tabellen die ik nu gebruik in een DIV zetten.
En ik dacht dat data, wat er nu in principe in staat, wel in een tabel mag, en DIV's voor de lay-out, wat ik in principe heb gedaan, alleen wil ik de content verdelen.
Ja, data mag, maar wel data als een adressenlijst, resultatenlijst, uitslagenlijst, tabel. Dus echt data die in een tabel gaat.Karl schreef op 21.05.2009 18:50:
Je moet geen tabel gebruiken voor lay-out.
Dus moet ik de tabellen die ik nu gebruik in een DIV zetten.
En ik dacht dat data, wat er nu in principe in staat, wel in een tabel mag, en DIV's voor de lay-out, wat ik in principe heb gedaan, alleen wil ik de content verdelen.
Tekst gaat niet in een tabel dus dat moet ook met div's en span's.
Gewijzigd op 01/01/1970 01:00:00 door lol lol
Rofl.
Edit: Voordat ik commentaar krijg dat dit niets aanvult, maak ik maar even een lijstje met verkeerde dingen in je css.
- Position is niet letterlijk positie in een layout, zoals tabellen dat konden. Zoek het eens op google.
- Geen shorthands gebruikt? Maakt css een stuk netter.
- Waarom al die floats?
- Nederlandse id/class namen gemixt met engelse?
- Gebruik #menu ul li a etc. om je menu list te stylen, wat als je nou nog een list ergens later wilt gebruiken? Ga je dan alle waardes weer resetten?
- Negatieve margin waarde?
- Kleurcodes kunnen korter, zoals #000000 kan worden #000.
- Gebruik je header tags eens goed, als je een klein font wilt gebruiken, gebruik h6. Ga niet h2 verkleinen naar 12px.
Gewijzigd op 01/01/1970 01:00:00 door Mitchell
Lol, had niet door dat die er nog steeds in stond.
Bedankt voor de tips, ik zal er even nakijken en verbeteren.
En heb je nog een idee om de content te splitsen in links en rechts?
Of zou ik, wat ik eerst had, de DIV Content wegdoen en opsplitsen in left- en rightcontent?
En dan de height van rightcontent aanpassen aan de height van leftcontent.
Gewijzigd op 01/01/1970 01:00:00 door lol lol
Als je niet weet wat een css reset is, zoek het eens op, je zult css een stuk makkelijker gaan vinden. :)
Mitchell schreef op 21.05.2009 19:52:
Oja en nog het meest belangrijk is om een css reset te gaan gebruiken, vooral als je met tabellen werkt, tabellen hebben veel extra breedte wat nogal nadelig is voor het box model. Zoals lijnen, padding etc.
Als je niet weet wat een css reset is, zoek het eens op, je zult css een stuk makkelijker gaan vinden. :)
Als je niet weet wat een css reset is, zoek het eens op, je zult css een stuk makkelijker gaan vinden. :)
Inderdaad, die CSS Reset is erg handig, bedankt daarvoor.
Alleen heb ik nog steeds hetzelfde probleem, de rechter content gaat nog steeds mee met de linker content, dus blijft niet op zijn plaats staan.
*sorry voor dubbelpost, had beter mijn vorige post kunnen editten.*
Gewijzigd op 01/01/1970 01:00:00 door lol lol
Ik heb nog even zitten googlen en kwam op de term Faux Columns, nu weet ik nog niet echt zeker of die gaat werken voor wat ik wil, misschien weet iemand anders er meer van?
Nogmaals, wat ik nu heb is: 2 DIV's voor links content en rechts content, daaromheen zit een 1 DIV genaamd, content, maar nu stuit ik nog steeds op het zelfde probleem, dat mijn rechts content mee gaat met de onderste links content.(Begin post staat een link naar een voorbeeld, hoewel dat met tables is, omdat ik meerdere dingen heb geprobeerd maar het niet voor elkaar krijg.)
PS: Als bumpen niet mag, excuses.
Faux Columns is dat de achtergrond van alle kolommen zo lang wordt als de langste. Zo lijken alle kolommen even lang, maar zijn ze in feite niet.
Jezpur schreef op 22.05.2009 20:54:
Faux Columns is dat de achtergrond van alle kolommen zo lang wordt als de langste. Zo lijken alle kolommen even lang, maar zijn ze in feite niet.
Dus is dat eigenlijk geen optie voor dit probleem. Of dit is natuurlijk wel de oplossing voor het probleem, want ik kan op geen mogelijkheid de rechts-content "vast zetten".
Heb jij nog een idee hoe ik mijn content dan kan verdelen in links-content en rechts-content, zonder dat rechts-content mee gaat met links-content zodra deze wordt gekopieerd?
Gewijzigd op 01/01/1970 01:00:00 door lol lol
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
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
CSS:
#container {
width: 800px;
overflow: hidden;
}
#container #left {
float: left;
width: 200px;
}
#container #center {
float: left;
width: 400px;
}
#container #right {
float: left;
width: 200px;
}
HTML:
<div id="container">
<div id="left">
// content
</div>
<div id="center">
// content
</div>
<div id="right">
// content
</div>
</div>
#container {
width: 800px;
overflow: hidden;
}
#container #left {
float: left;
width: 200px;
}
#container #center {
float: left;
width: 400px;
}
#container #right {
float: left;
width: 200px;
}
HTML:
<div id="container">
<div id="left">
// content
</div>
<div id="center">
// content
</div>
<div id="right">
// content
</div>
</div>
Werkt meestal wel.
Nu werkt het wel, bedankt voor alle reacties!
Achteraf lijken dingen toch zo overduidelijk:)
Gewijzigd op 01/01/1970 01:00:00 door lol lol