De img staat een stuk boven de tabel.
Ik ben voor iemand een layout aan het maken, http://miniejjj.gratishosted.nl/v2/Fly-Net.htm, maar het wil niet helemaal lukken.
Ik heb boven het menu ( die gemaakt is uit een tabel ) een plaatje staan maar in IE staat hij er iets boven ( en in het mooie FF niet :P )
Weet iemand misschien hoe dit komt en hoe ik dit op kan lossen? Alvast bedankt.
Tabellen zijn niet bedoeld om layouts mee te maken, enkel voor het geordend weergeven van data. Layouts daarentegen maak je met behulp van divs en CSS...
Kortom, ga je daar eens in verdiepen. Grote kans dat je dit probleem helemaal niet hebt als je je layout op die manier opzet.
Kan iemand mijn vraag over tabellen beantwoorden en niet beginnen met het verhaal over Divs en CSS. Bedankt.
Sorry dat het nog een keer wordt gezegd, maar Blanche heeft wel een goed punt. Misschien dat je nu nog niet zo goed een lay-out kan maken in divs en met CSS, toch zou ik daar wel aan beginnen.
Nadat je het een beetje kent zal je merken dat lay-outs veel gemakkelijker worden te onderhouden en te maken. Tevens zijn (Blanche zei het al) ook tabellen niet bedoeld om een layout in te maken. De standaard van tegenwoordig is werken met Divs en CSS.
Je lay-out wordt later ook nog eens gemakkelijker aan te passen wanneer je met divs gaat werken. Blanche zegt dit niet om je te pesten, of om vervelend te zijn, of om betweterig te doen, maar om jou te helpen het goed aan te leren.
Edit:
Wil je toch perse met tabellen blijven werken:
Je kan proberen dit op te vangen door de rij(en) waarin dat mis gaat een hoogte mee te geven die gelijk is aan de hoogte van de afbeelding.
Wil je toch perse met tabellen blijven werken:
Je kan proberen dit op te vangen door de rij(en) waarin dat mis gaat een hoogte mee te geven die gelijk is aan de hoogte van de afbeelding.
Gewijzigd op 01/01/1970 01:00:00 door Robert Deiman
Miniejjj schreef op 11.02.2008 16:24:
Zou best kunnen, ik houd echt niet bij wat ik tegen wie zeg. Maar dan heb je blijkbaar nog niets met dat advies gedaan...2 keer dat je het zegt tegen mij
Natuurlijk het is je eigen keuze, maar ik zeg je dit echt niet zonder reden. Dit zou namelijk zomaar kunnen voorkomen dat je in een later stadium opnieuw moet beginnen omdat je bijvoorbeeld meer wilt met je layout maar dat de gebruikte tabellen dat niet toestaan.
Tevens kunnen tabellen voor fijne problemen zorgen als je je website crossbrowser probeert te krijgen. De interpretatie wil in verschillende browsers nog wel eens behoorlijk verschillen. Het probleem dat je nu hebt zou daar ook uit kunnen voortvloeien.
Als jij het graag op deze manier wilt doen, succes ermee. Ik kan je dan nu alleen niet verder helpen omdat ik geen IE ter beschikking heb om het gedrag van die tabellen te bekijken...
Miniejjj schreef op 11.02.2008 16:24:
ik heb nou eenmaal mijn keuze gemaakt mijn layout in tabellen te doen....
Ik heb de keuze gemaakt een Ferrari te kopen, het motorblok eruit te slopen en twee witte paarden ervoor te spannen.
Hoe kan ik er nu voor zorgen dat er een vierkant komt om mijn menu wat ik eerst met mijn tabel deed?
Gewijzigd op 01/01/1970 01:00:00 door Miniejjj
Miniejjj schreef op 11.02.2008 18:12:
jullie halen mij gewoon over
Wat had jij gedaan als autoverkoper, als er een klant komt die vraagt iof er een motorblok uitgesloopt kan worden, en een bevestiging voor paarden-riemen-dingessen aangemaakt kan worden? had je de klant niet overgehaald het toch niet te doen?
Of (misschien) relevanter: iemand wil pantoffels gaan gebruiken om mee te voetballen. En voetbalschoenen om binnen te lopen. Als de trainer er wat van zegt, en zegt dat diegene voortaan voetbalschoenen moet dragen, is dat dan 'overhalen'?
@Hipsta: Moet ik voor mijn nieuwe vragen een nieuw topic openen?
Ik ben nu even voor je aan het omzetten, maar het is een algemene tip om je wel in divs en css te gaan verdiepen. Dat werkt voor de toekomst veel gemakkelijker.
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
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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
#menu {
position: relative;
width: 250px;
}
#menu.content {
border-style: solid;
border-width:1px;
border-color:#004880;
top:-4px;
background-color:#e6f2fc;
}
</style>
<title>Fly-Net V2 - Homepage</title>
</head>
<body>
<!-- Header -->
<img border="0" src="header.png" width="900" height="153" alt="">
<!-- Menu 1 header -->
<div id="menu" class="header">
<img border="0" src="titel.png" width="250" height="16" alt="">
</div>
<!-- Menu 1 -->
<div id="menu" class="content">
Dit is het menu, hier kan ik alles kwijt wat ik maar kwijt wil :)
</div>
<!-- Menu 2 header -->
<div id="menu" class="header">
<img border="0" src="titel.png" width="250" height="16" alt="">
</div>
<!-- Menu 2 -->
<div id="menu" class="content">
Dit is het menu, hier kan ik alles kwijt wat ik maar kwijt wil :)
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
#menu {
position: relative;
width: 250px;
}
#menu.content {
border-style: solid;
border-width:1px;
border-color:#004880;
top:-4px;
background-color:#e6f2fc;
}
</style>
<title>Fly-Net V2 - Homepage</title>
</head>
<body>
<!-- Header -->
<img border="0" src="header.png" width="900" height="153" alt="">
<!-- Menu 1 header -->
<div id="menu" class="header">
<img border="0" src="titel.png" width="250" height="16" alt="">
</div>
<!-- Menu 1 -->
<div id="menu" class="content">
Dit is het menu, hier kan ik alles kwijt wat ik maar kwijt wil :)
</div>
<!-- Menu 2 header -->
<div id="menu" class="header">
<img border="0" src="titel.png" width="250" height="16" alt="">
</div>
<!-- Menu 2 -->
<div id="menu" class="content">
Dit is het menu, hier kan ik alles kwijt wat ik maar kwijt wil :)
</div>
</body>
</html>
Dat is wat ik nu heb ;)
Ik laat je nu eerst even gewoon proberen, je komt er vast wel uit.
Ik vind het alvast positief dat je er zelf mee aan de gang bent en dat het je prima lijkt te lukken.
Onderstaande code heb ik gemaakt voor je website, houd er rekening mee dat ik alleen de lange afbeelding voor de boven en onderkant heb gebruikt en deze hernoemd naar titel.png (bovenkant) en footer.png (onderkant)
Kijk maar of je er wat mee kan.
Edit:
Hier staat de CSS nog in het bestand zelf, maar het is beter als je deze erbuiten haalt en include in het bestand via:
Het stukje van If IE tot en met de endif moet wel gewoon in het bestand blijven staan. Heb hem ook alleen getest in Firefox en IE7 nog.
Hier staat de CSS nog in het bestand zelf, maar het is beter als je deze erbuiten haalt en include in het bestand via:
Code (php)
1
<link rel="stylesheet" href="style/style2.css" type="text/css" media="all" />
Het stukje van If IE tot en met de endif moet wel gewoon in het bestand blijven staan. Heb hem ook alleen getest in Firefox en IE7 nog.
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="author" content="Robert Deiman" />
<meta http-equiv="charset" content="iso-8859-1" />
<meta http-equiv="content-language" content="nl-en" />
<meta name="title" content="Vul hier de titel van je pagina in" />
<meta name="description" content="Vul hier een omschrijving van de website in " />
<meta name="keywords" content="Vul hier je keywords in" />
<meta name="generator" content="phpDesigner 2007 Pro" />
<title>..::.. Vul titel van je pagina in ..::..</title>
<style type="text/css">
body, html{
width:100%;
margin:0px;
padding:0px;
}
#container{
width:900px;
margin:4px auto;
}
#header{
float:left;
height:153px;
width:900px;
margin-bottom:4px;
background:#FFFFFF url('header.png') center top no-repeat;
}
#leftside{
float:left;
width:250px;
margin-right:4px;
}
.leftcontent{
float:left;
width:250px;
background-color:#E6F2FC;
margin-bottom:4px;
padding-top:0px;
padding-bottom:0px;
}
.headcontent{
background:#E6F2FC url('titel.png') left top no-repeat;
height:20px;
width:100%;
}
p.contenthead{
margin: 0px;
padding:0px;
margin-left:5px;
background:#E6F2FC url('titel.png') right top no-repeat;
text-align: center;
}
.contentfoot{
height:20px;
width:100%;
margin-bottom: 0px;
padding-bottom:0px;
background:#E6F2FC url('footer.png') left bottom no-repeat;
}
p.footers{
margin:0px;
padding:0px;
margin-left:5px;
background:#E6F2FC url('footer.png') right bottom no-repeat;
text-align:center;
}
#maincontent{
float:left;
width:646px;
background:#E6F2FC url('titel.png') left top no-repeat;
margin-bottom:4px;
}
#footer{
float:left;
width:100%;
height:100px;
}
</style>
<!--[if IE]>
<style type="text/css">
.contentfoot{
height:19px;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="leftside">
<div class="leftcontent">
<div class="headcontent">
<p class="contenthead">Titeltje</p>
</div>
Hier komt je content in het 1e linkervakje
<div class="contentfoot">
<p class="footers"> </p>
</div>
</div>
<div class="leftcontent">
<div class="headcontent">
<p class="contenthead">Titeltje</p>
</div>
Hier komt je content in het 2e linkervakje
<div class="contentfoot">
<p class="footers"> </p>
</div>
</div>
</div>
<div id="maincontent">
<div class="headcontent">
<p class="contenthead">Titeltje</p>
</div>
Het maakt niet veel uit hoe lang de tekst wordt.<br />Des te meer regels tekst, des te langer je content div wordt.<br />Hij zal dus gewoon meerekken met de inhoud.<br />Om dit te laten zien herhaalt dit stukje tekst zich een paar maal.<br />Het maakt niet veel uit hoe lang de tekst wordt.<br />Des te meer regels tekst, des te langer je content div wordt.<br />Hij zal dus gewoon meerekken met de inhoud.
<div class="contentfoot">
<p class="footers"> </p>
</div>
</div>
<div id="footer">
<div class="headcontent">
<p class="contenthead">Titeltje</p>
</div>
Hier komt de inhoud die in je footer moet komen.
<div class="contentfoot">
<p class="footers"> </p>
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="author" content="Robert Deiman" />
<meta http-equiv="charset" content="iso-8859-1" />
<meta http-equiv="content-language" content="nl-en" />
<meta name="title" content="Vul hier de titel van je pagina in" />
<meta name="description" content="Vul hier een omschrijving van de website in " />
<meta name="keywords" content="Vul hier je keywords in" />
<meta name="generator" content="phpDesigner 2007 Pro" />
<title>..::.. Vul titel van je pagina in ..::..</title>
<style type="text/css">
body, html{
width:100%;
margin:0px;
padding:0px;
}
#container{
width:900px;
margin:4px auto;
}
#header{
float:left;
height:153px;
width:900px;
margin-bottom:4px;
background:#FFFFFF url('header.png') center top no-repeat;
}
#leftside{
float:left;
width:250px;
margin-right:4px;
}
.leftcontent{
float:left;
width:250px;
background-color:#E6F2FC;
margin-bottom:4px;
padding-top:0px;
padding-bottom:0px;
}
.headcontent{
background:#E6F2FC url('titel.png') left top no-repeat;
height:20px;
width:100%;
}
p.contenthead{
margin: 0px;
padding:0px;
margin-left:5px;
background:#E6F2FC url('titel.png') right top no-repeat;
text-align: center;
}
.contentfoot{
height:20px;
width:100%;
margin-bottom: 0px;
padding-bottom:0px;
background:#E6F2FC url('footer.png') left bottom no-repeat;
}
p.footers{
margin:0px;
padding:0px;
margin-left:5px;
background:#E6F2FC url('footer.png') right bottom no-repeat;
text-align:center;
}
#maincontent{
float:left;
width:646px;
background:#E6F2FC url('titel.png') left top no-repeat;
margin-bottom:4px;
}
#footer{
float:left;
width:100%;
height:100px;
}
</style>
<!--[if IE]>
<style type="text/css">
.contentfoot{
height:19px;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="leftside">
<div class="leftcontent">
<div class="headcontent">
<p class="contenthead">Titeltje</p>
</div>
Hier komt je content in het 1e linkervakje
<div class="contentfoot">
<p class="footers"> </p>
</div>
</div>
<div class="leftcontent">
<div class="headcontent">
<p class="contenthead">Titeltje</p>
</div>
Hier komt je content in het 2e linkervakje
<div class="contentfoot">
<p class="footers"> </p>
</div>
</div>
</div>
<div id="maincontent">
<div class="headcontent">
<p class="contenthead">Titeltje</p>
</div>
Het maakt niet veel uit hoe lang de tekst wordt.<br />Des te meer regels tekst, des te langer je content div wordt.<br />Hij zal dus gewoon meerekken met de inhoud.<br />Om dit te laten zien herhaalt dit stukje tekst zich een paar maal.<br />Het maakt niet veel uit hoe lang de tekst wordt.<br />Des te meer regels tekst, des te langer je content div wordt.<br />Hij zal dus gewoon meerekken met de inhoud.
<div class="contentfoot">
<p class="footers"> </p>
</div>
</div>
<div id="footer">
<div class="headcontent">
<p class="contenthead">Titeltje</p>
</div>
Hier komt de inhoud die in je footer moet komen.
<div class="contentfoot">
<p class="footers"> </p>
</div>
</div>
</div>
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Robert Deiman
Trouwens, dit is het geval in FireFox en IE. Kan jij het aanpassen bij jou code? Ik ga weer verder met mijn code alleen werkt die neit helemaal meer :P
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
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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
.header {
margin-bottom: 6px;
}
.menu {
position: relative;
width: 250px;
margin-bottom:2px;
margin:0px;
padding:0px;
}
.content {
border-style: solid;
border-width:1px;
border-color:#004880;
top:-4px;
background-color:#e6f2fc;
width: 250px;
position: relative;
padding: 4px;
}
</style>
<title>Fly-Net V2 - Homepage</title>
</head>
<body>
<!-- Header -->
<img border="0" src="header.png" width="900" height="153" alt="" class="header">
<!-- Menu 1 header -->
<div class="menu">
<img border="0" src="titel.png" width="250" height="16" alt="">
</div>
<!-- Menu 1 -->
<div class="content">
Deze site doet het niet in Firefox, kan iemand helpen.
</div>
<!-- Menu 2 header -->
<div class="menu">
<img border="0" src="titel.png" width="250" height="16" alt="">
</div>
<!-- Menu 2 -->
<div class="content">
Alvast heel erg bedankt :)
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
.header {
margin-bottom: 6px;
}
.menu {
position: relative;
width: 250px;
margin-bottom:2px;
margin:0px;
padding:0px;
}
.content {
border-style: solid;
border-width:1px;
border-color:#004880;
top:-4px;
background-color:#e6f2fc;
width: 250px;
position: relative;
padding: 4px;
}
</style>
<title>Fly-Net V2 - Homepage</title>
</head>
<body>
<!-- Header -->
<img border="0" src="header.png" width="900" height="153" alt="" class="header">
<!-- Menu 1 header -->
<div class="menu">
<img border="0" src="titel.png" width="250" height="16" alt="">
</div>
<!-- Menu 1 -->
<div class="content">
Deze site doet het niet in Firefox, kan iemand helpen.
</div>
<!-- Menu 2 header -->
<div class="menu">
<img border="0" src="titel.png" width="250" height="16" alt="">
</div>
<!-- Menu 2 -->
<div class="content">
Alvast heel erg bedankt :)
</div>
</body>
</html>
In IE staat het zoals het moet, maar in FF staat het een beetje in elkaar. Wat moet ik veranderen om dat goed te krijgen?
Quote:
Edit: Oeps, dubbelpost, sorry daarvoor.
Miniejjj schreef op 11.02.2008 21:09:
Edit: Oeps, dubbelpost, sorry daarvoor.
Bumpen noemen we dat. ;-)
Quote:
Bumpen is het herhaaldelijk plaatsen van reacties op een thread of onderwerp in een internetforum teneinde deze thread bovenaan de lijst te houden zodat het langer onder de aandacht van de bezoekers blijft. Dit wordt meestal als irritant ervaren en daardoor niet geaccepteerd door de moderator(s) van het forum waardoor degene die bumpt een waarschuwing of ban kan krijgen. Ook kan de gebumpte thread gesloten worden, wat inhoudt dat er geen reacties meer aan toegevoegd kunnen worden. De term is afgeleid van het Engelse to bump (Nederlands: stoten).
:( Maar niet express, ik edit normaal altijd...zal voortaan beter opletten ( ik ben het systeem van SMF en phpBB gewent )
