De PHPhulp kroeg
achtergrond laten door lopen
wat moet ik in de css of html code veranderen?
css code
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
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
/* CSS layout */
body {
margin: 0;
padding: 0;
}
#top_nav {
background-color: #99CCFF;
}
#masthead {
min-width: 600px;
}
#logo {
float: left;
width: 16px;
Background-color: #003399;
background-repeat: repeat-y;
overflow:hidden;
}
#header {
margin-left:16px;
background-color: #99CCFF;
font-family: "Times New Roman", Times, serif;
font-size: 36pt;
color: #0000FF;
}
#container {
clear: both;
min-width: 600px;
}
#left_col {
width: 30px;
float: left;
background-color: #003399;
background-repeat: repeat-y;
overflow:hidden;
}
#right_col {
float: right;
width: 200px;
width: 200px;
float: right;
background-color: #0000FF;
background-repeat: repeat;
color: #FFFFFF;
font-family: "Times New Roman", Times, serif;
font-size: 10pt;
}
#page_content {
margin-left: 30px;
margin-right: 200px;
background-color: #99CCFF;
background-repeat: repeat;
font-family: "Times New Roman", Times, serif;
font-size: 12pt;
color: #0000FF;
}
#footer {
clear: both;
background-color: #6699FF;
}
html code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled 1</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="masthead">
<div id="top_nav">
</div>
<div id="logo" style="width: 16px; height: 55px">
<img height="16" src="../../ttvyerseke.png" width="16" /></div>
<div id="header">
TTVYerseke</div>
</div>
<div id="container">
<div id="left_col">
left<br />
col</div>
<div id="right_col">
tekst</div>
<div id="page_content">
<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 />
</div>
</div>
<div id="footer">
kk</div>
</body>
</html>
body {
margin: 0;
padding: 0;
}
#top_nav {
background-color: #99CCFF;
}
#masthead {
min-width: 600px;
}
#logo {
float: left;
width: 16px;
Background-color: #003399;
background-repeat: repeat-y;
overflow:hidden;
}
#header {
margin-left:16px;
background-color: #99CCFF;
font-family: "Times New Roman", Times, serif;
font-size: 36pt;
color: #0000FF;
}
#container {
clear: both;
min-width: 600px;
}
#left_col {
width: 30px;
float: left;
background-color: #003399;
background-repeat: repeat-y;
overflow:hidden;
}
#right_col {
float: right;
width: 200px;
width: 200px;
float: right;
background-color: #0000FF;
background-repeat: repeat;
color: #FFFFFF;
font-family: "Times New Roman", Times, serif;
font-size: 10pt;
}
#page_content {
margin-left: 30px;
margin-right: 200px;
background-color: #99CCFF;
background-repeat: repeat;
font-family: "Times New Roman", Times, serif;
font-size: 12pt;
color: #0000FF;
}
#footer {
clear: both;
background-color: #6699FF;
}
html code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled 1</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="masthead">
<div id="top_nav">
</div>
<div id="logo" style="width: 16px; height: 55px">
<img height="16" src="../../ttvyerseke.png" width="16" /></div>
<div id="header">
TTVYerseke</div>
</div>
<div id="container">
<div id="left_col">
left<br />
col</div>
<div id="right_col">
tekst</div>
<div id="page_content">
<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 />
</div>
</div>
<div id="footer">
kk</div>
</body>
</html>
Gebruik code-tags voor het overzichtelijk weergeven van je code[/modedit]
Gewijzigd op 18/07/2010 17:09:47 door Joren de Wit
En zoveel <br /> is nutteloos.
Zoek liever op een goede footer tutorial.
Dit soort reacties voegt niets toe. Als je niets nuttigs te melden hebt, post dan niets![/modedit]
Gewijzigd op 18/07/2010 17:08:49 door Joren de Wit
Ik had je toch verteld hoe je dat moest doen?
Verander bij de container position:relative.
Bij de balken links en rechts: position:absolute;top:0;bottom:0
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
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
/* CSS layout */
body {
margin: 0;
padding: 0;
background-color: #99CCFF;
}
#top_nav {
background-color: #99CCFF;
}
#masthead {
min-width: 600px;
}
#logo {
float: left;
width: 16px;
Background-color: #003399;
background-repeat: repeat-y;
overflow:hidden;
}
#header {
margin-left:16px;
background-color: #99CCFF;
font-family: "Times New Roman", Times, serif;
font-size: 36pt;
color: #0000FF;
}
#container {
clear: both;
min-width: 600px;
position: relative;
}
#left_col {
width: 30px;
float: left;
background-color: #003399;
background-repeat: repeat-y;
overflow: hidden;
top: 0px;
position: absolute;
bottom: 0px;
}
#right_col {
width: 200px;
float: right;
background-color: #0000FF;
background-repeat: repeat;
color: #FFFFFF;
font-family: "Times New Roman", Times, serif;
font-size: 10pt;
position: absolute;
top: 0px;
bottom: 0px;
}
#page_content {
margin-left: 30px;
margin-right: 200px;
background-color: #99CCFF;
background-repeat: repeat;
font-family: "Times New Roman", Times, serif;
font-size: 12pt;
color: #0000FF;
}
#footer {
clear: both;
background-color: #6699FF;
}
body {
margin: 0;
padding: 0;
background-color: #99CCFF;
}
#top_nav {
background-color: #99CCFF;
}
#masthead {
min-width: 600px;
}
#logo {
float: left;
width: 16px;
Background-color: #003399;
background-repeat: repeat-y;
overflow:hidden;
}
#header {
margin-left:16px;
background-color: #99CCFF;
font-family: "Times New Roman", Times, serif;
font-size: 36pt;
color: #0000FF;
}
#container {
clear: both;
min-width: 600px;
position: relative;
}
#left_col {
width: 30px;
float: left;
background-color: #003399;
background-repeat: repeat-y;
overflow: hidden;
top: 0px;
position: absolute;
bottom: 0px;
}
#right_col {
width: 200px;
float: right;
background-color: #0000FF;
background-repeat: repeat;
color: #FFFFFF;
font-family: "Times New Roman", Times, serif;
font-size: 10pt;
position: absolute;
top: 0px;
bottom: 0px;
}
#page_content {
margin-left: 30px;
margin-right: 200px;
background-color: #99CCFF;
background-repeat: repeat;
font-family: "Times New Roman", Times, serif;
font-size: 12pt;
color: #0000FF;
}
#footer {
clear: both;
background-color: #6699FF;
}
JE HTML
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITLE</title>
</head>
<body>
<div id="wrapper">
HIER AL JE CONTENT PLAATSEN ENZ.
HIER AL JE CONTENT PLAATSEN ENZ.
HIER AL JE CONTENT PLAATSEN ENZ.
HIER AL JE CONTENT PLAATSEN ENZ.
HIER AL JE CONTENT PLAATSEN
<div id="push"></div>
</div>
<div id="footer">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITLE</title>
</head>
<body>
<div id="wrapper">
HIER AL JE CONTENT PLAATSEN ENZ.
HIER AL JE CONTENT PLAATSEN ENZ.
HIER AL JE CONTENT PLAATSEN ENZ.
HIER AL JE CONTENT PLAATSEN ENZ.
HIER AL JE CONTENT PLAATSEN
<div id="push"></div>
</div>
<div id="footer">
</div>
</body>
</html>
JE 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
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
/*
** RESETS
** Hierbij haal ik de padding,margins weg zorg ik dat de html/body container schermvullend is!
*/
html,body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
padding: 0;
}
/*
** Dit is de wrapper hier komt alle content in :)
** De margin zorgt er in dit geval voor dat de wrapper altijd gecentreerd staat in het beeld
** De min waarde in de margin haalt de footer weer naar boven :)
*/
#wrapper
{
margin: 0 auto -116px; /*Waardes van de footer meenemen! heb je dus een top van 16px moet je deze ook aftrekken*/
min-height: 100%;
width: 100%;
height: auto !important; /* !important zorgt ervoor dat een element voorang krijgt! */
background: #FF0000;
}
/*
** Dit zorgt ervoor dat de content niet onder de footer gaat :)
** Deze moet gelijk zijn aan de footer hoogte
*/
#push
{
position: relative;
min-height: 100px;
height: 100px;
}
/*
** Dit is de footer deze blijft nu altijd aan de onderkant van je scherm plakken
*/
#footer
{
position: relative;
clear: both;
bottom: 0px;
top: 16px; /*Top waarde van de wrapper*/
height: 100px; /*Hoogte van de footer conclusie van de wrapper: 100 + 16 = 116 dus de min waarde word 116*/
width: 100%; /*Zorgt dat de footer over de hele lengte gaat*/
background: #00FF00;
}
** RESETS
** Hierbij haal ik de padding,margins weg zorg ik dat de html/body container schermvullend is!
*/
html,body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
padding: 0;
}
/*
** Dit is de wrapper hier komt alle content in :)
** De margin zorgt er in dit geval voor dat de wrapper altijd gecentreerd staat in het beeld
** De min waarde in de margin haalt de footer weer naar boven :)
*/
#wrapper
{
margin: 0 auto -116px; /*Waardes van de footer meenemen! heb je dus een top van 16px moet je deze ook aftrekken*/
min-height: 100%;
width: 100%;
height: auto !important; /* !important zorgt ervoor dat een element voorang krijgt! */
background: #FF0000;
}
/*
** Dit zorgt ervoor dat de content niet onder de footer gaat :)
** Deze moet gelijk zijn aan de footer hoogte
*/
#push
{
position: relative;
min-height: 100px;
height: 100px;
}
/*
** Dit is de footer deze blijft nu altijd aan de onderkant van je scherm plakken
*/
#footer
{
position: relative;
clear: both;
bottom: 0px;
top: 16px; /*Top waarde van de wrapper*/
height: 100px; /*Hoogte van de footer conclusie van de wrapper: 100 + 16 = 116 dus de min waarde word 116*/
width: 100%; /*Zorgt dat de footer over de hele lengte gaat*/
background: #00FF00;
}
Edit
Verder zou ik nooit een Times als font gebruiken :)
Reden waarom: Wiki link
Gewijzigd op 22/07/2010 23:52:47 door Michael Beers
Gewijzigd op 24/07/2010 18:14:46 door Alexander Kraan