Footer onder content
Ik ben bezig mijn site "liquid" aan het maken, en nu zit ik met een probleem.
Ik wil dat mijn footer gewoon recht onder mijn content div komt. Dit werkt op alles pagina's perfect, behalve op "home" waar ik 2 keer position: absolute; gebruik binnen de content.
kort samengevat:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul id="navbar">
//header
</ul>
<div id="content">
<ul id="posttitel">
//posttitel heeft: position: absolute;
</ul>
<div id="postlistcontent">
//postlistcontent heeft: position: absolute;
</div>
</div>
<ul id="navbar">
//footer
</ul>
//header
</ul>
<div id="content">
<ul id="posttitel">
//posttitel heeft: position: absolute;
</ul>
<div id="postlistcontent">
//postlistcontent heeft: position: absolute;
</div>
</div>
<ul id="navbar">
//footer
</ul>
Relevante 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
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
#navbar {
height: 40px;
list-style-type: none;
position: relative;
margin: 0;
padding: 0;
text-align: center;
background: url(images/menugloss.png) #404040 repeat-x;
}
#content {
margin: 10px;
clear: both;
display: block;
position: relative;
}
#footer {
clear: both;
}
#postlist {
position: absolute;
list-style-type: none;
padding: 0;
margin: 0;
}
#postlist li {
padding: 0;
margin: 0;
}
.posttitel {
border-bottom: 1px solid #FFFFFF;
font-size: 16px;
}
#postlistcontent {
position: absolute;
margin-top: 25px;
margin-left: 250px;
}
height: 40px;
list-style-type: none;
position: relative;
margin: 0;
padding: 0;
text-align: center;
background: url(images/menugloss.png) #404040 repeat-x;
}
#content {
margin: 10px;
clear: both;
display: block;
position: relative;
}
#footer {
clear: both;
}
#postlist {
position: absolute;
list-style-type: none;
padding: 0;
margin: 0;
}
#postlist li {
padding: 0;
margin: 0;
}
.posttitel {
border-bottom: 1px solid #FFFFFF;
font-size: 16px;
}
#postlistcontent {
position: absolute;
margin-top: 25px;
margin-left: 250px;
}
Online voorbeeld: www.stevenhack.nl voor de fout, elke andere link voor het goede resultaat.
Ik heb van alles geprobeerd:
- clear
- position
- display
Het enige verreiste is dus dat ik geen width/height wil opgegeven, omdat het liquid moet worden. Hopelijk kan iemand mij helpen.
Edit: Ik heb het opgelost denk ik:
Ik heb in je css aangepast:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
#postlist {
position: relative;
list-style-type: none;
padding: 0;
margin: 0;
}
position: relative;
list-style-type: none;
padding: 0;
margin: 0;
}
en
Code (php)
1
2
3
4
5
2
3
4
5
#postlistcontent {
position: relative;
margin-top: 25px;
margin-left: 250px;
}
position: relative;
margin-top: 25px;
margin-left: 250px;
}
de volledige css:
style.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
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
body {
font-family: Papyrus, Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: center;
margin: 0;
padding: 0px;
color: #FFFFFF;
background: #404040;
}
a {
color: #FFFFFF;
font-size: 14px;
text-decoration: underline;
}
#body {
top: 0;
padding: 0px;
margin: 0 auto;
text-align: left;
}
#header {
background: url(images/header2.jpg) no-repeat top center;
height: 110px;
}
#middle {
padding: 0;
margin: 0;
position: relative;
}
#navbar {
height: 40px;
list-style-type: none;
position: relative;
margin: 0;
padding: 0;
text-align: center;
background: url(images/menugloss.png) #404040 repeat-x;
}
#navbar li {
display: inline-block;
margin: 6px;
}
.menuitem {
width: 100px;
display: block;
color: #FFFFFF;
font-size: 18px;
text-decoration: none;
text-align: center;
}
#content {
margin: 10px;
clear: both;
display: block;
position: relative;
}
#footer {
clear: both;
}
#postlist {
position: relative;
list-style-type: none;
padding: 0;
margin: 0;
}
#postlist li {
padding: 0;
margin: 0;
}
.posttitel {
border-bottom: 1px solid #FFFFFF;
font-size: 16px;
}
.posttitel a {
text-decoration: none;
}
.postcontent {
padding: 15px;
}
#postlistcontent {
position: relative;
margin-top: 25px;
margin-left: 250px;
}
/*****************/
/* FORMULIER CSS */
/*****************/
form {
border: 1px dashed #FFFFFF;
padding: 15px;
width: 800px;
font-size: small;
}
label {
float: left;
width: 75px;
text-align: right;
margin-right: 15px;
}
input {
background-color: #f5f5f5;
font-family: Papyrus, Arial, Helvetica, sans-serif;
font-size: small;
border: 1px solid #FFFFFF;
margin-bottom: 5px;
}
textarea {
width: 300px;
height: 150px;
background-color: #f5f5f5;
border: 1px solid #FFFFFF;
font-family: Papyrus, Arial, Helvetica, sans-serif;
font-size: small;
margin-bottom: 5px;
}
font-family: Papyrus, Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: center;
margin: 0;
padding: 0px;
color: #FFFFFF;
background: #404040;
}
a {
color: #FFFFFF;
font-size: 14px;
text-decoration: underline;
}
#body {
top: 0;
padding: 0px;
margin: 0 auto;
text-align: left;
}
#header {
background: url(images/header2.jpg) no-repeat top center;
height: 110px;
}
#middle {
padding: 0;
margin: 0;
position: relative;
}
#navbar {
height: 40px;
list-style-type: none;
position: relative;
margin: 0;
padding: 0;
text-align: center;
background: url(images/menugloss.png) #404040 repeat-x;
}
#navbar li {
display: inline-block;
margin: 6px;
}
.menuitem {
width: 100px;
display: block;
color: #FFFFFF;
font-size: 18px;
text-decoration: none;
text-align: center;
}
#content {
margin: 10px;
clear: both;
display: block;
position: relative;
}
#footer {
clear: both;
}
#postlist {
position: relative;
list-style-type: none;
padding: 0;
margin: 0;
}
#postlist li {
padding: 0;
margin: 0;
}
.posttitel {
border-bottom: 1px solid #FFFFFF;
font-size: 16px;
}
.posttitel a {
text-decoration: none;
}
.postcontent {
padding: 15px;
}
#postlistcontent {
position: relative;
margin-top: 25px;
margin-left: 250px;
}
/*****************/
/* FORMULIER CSS */
/*****************/
form {
border: 1px dashed #FFFFFF;
padding: 15px;
width: 800px;
font-size: small;
}
label {
float: left;
width: 75px;
text-align: right;
margin-right: 15px;
}
input {
background-color: #f5f5f5;
font-family: Papyrus, Arial, Helvetica, sans-serif;
font-size: small;
border: 1px solid #FFFFFF;
margin-bottom: 5px;
}
textarea {
width: 300px;
height: 150px;
background-color: #f5f5f5;
border: 1px solid #FFFFFF;
font-family: Papyrus, Arial, Helvetica, sans-serif;
font-size: small;
margin-bottom: 5px;
}
Je kan relative en absolute niet gaan mengen, of dat is mijn ervaring toch^^
Nu voor je pagina code (vb met de standaard index):
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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Steven Hack - Website</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Steven Hack">
<meta name="keywords" content="Steven, Hack, Personal, Website, Webdesign, Tilburg, Noord, Brabant, Holland">
<meta name="description" content="Website of Steven Hack.">
<meta name="robots" content="all">
<link href="Steven/style.css" rel="stylesheet" type="text/css" media="screen">
<script src="Steven/javascript.js" type="text/javascript"></script>
<!--[if lt ie 8]>
<style type="text/css" media="screen">
#navbar li {display: inline;}
</style>
<![endif]-->
</head>
<body>
<div id="body">
<div id="header">
</div>
<div id="middle">
<ul id="navbar">
<li><a class="menuitem" href="/">Home</a></li>
<li><a class="menuitem" href="">Projects</a></li>
<li><a class="menuitem" href="">Webdesign</a></li>
<li><a class="menuitem" href="">School</a></li>
</ul>
<div id="content">
<ul id="postlist">
<li><span class="posttitel"><a href="javascript:;" onclick="ShowPost('ajax=true&item=1');">Welcome to my Website</a></span></li>
<li><span class="posttitel"><a href="javascript:;" onclick="ShowPost('ajax=true&item=2');">Project Ideas</a></span></li>
<li><span class="posttitel"><a href="javascript:;" onclick="ShowPost('ajax=true&item=3');">AJAX</a></span></li>
</ul>
<div id="postlistcontent">
Welcome at this new site. I came on this idea because i wanted to make a new site layout,
but I couldn't think of anything to make. So i thought about making a digital portfolio.
After finishing most of the layout i found it pretty cool, so now i use it as my site layout!
</div>
</div>
</div>
<div id="footer"></div>
<ul id="navbar">
<li><a class="menuitem" href="/">Home</a></li>
<li><a class="menuitem" href="">Sitemap</a></li>
<li><a class="menuitem" href="">Disclaimer</a></li>
<li><a class="menuitem" href="">Contact</a></li>
</ul>
</div>
</body>
</html>
<html>
<head>
<title>Steven Hack - Website</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Steven Hack">
<meta name="keywords" content="Steven, Hack, Personal, Website, Webdesign, Tilburg, Noord, Brabant, Holland">
<meta name="description" content="Website of Steven Hack.">
<meta name="robots" content="all">
<link href="Steven/style.css" rel="stylesheet" type="text/css" media="screen">
<script src="Steven/javascript.js" type="text/javascript"></script>
<!--[if lt ie 8]>
<style type="text/css" media="screen">
#navbar li {display: inline;}
</style>
<![endif]-->
</head>
<body>
<div id="body">
<div id="header">
</div>
<div id="middle">
<ul id="navbar">
<li><a class="menuitem" href="/">Home</a></li>
<li><a class="menuitem" href="">Projects</a></li>
<li><a class="menuitem" href="">Webdesign</a></li>
<li><a class="menuitem" href="">School</a></li>
</ul>
<div id="content">
<ul id="postlist">
<li><span class="posttitel"><a href="javascript:;" onclick="ShowPost('ajax=true&item=1');">Welcome to my Website</a></span></li>
<li><span class="posttitel"><a href="javascript:;" onclick="ShowPost('ajax=true&item=2');">Project Ideas</a></span></li>
<li><span class="posttitel"><a href="javascript:;" onclick="ShowPost('ajax=true&item=3');">AJAX</a></span></li>
</ul>
<div id="postlistcontent">
Welcome at this new site. I came on this idea because i wanted to make a new site layout,
but I couldn't think of anything to make. So i thought about making a digital portfolio.
After finishing most of the layout i found it pretty cool, so now i use it as my site layout!
</div>
</div>
</div>
<div id="footer"></div>
<ul id="navbar">
<li><a class="menuitem" href="/">Home</a></li>
<li><a class="menuitem" href="">Sitemap</a></li>
<li><a class="menuitem" href="">Disclaimer</a></li>
<li><a class="menuitem" href="">Contact</a></li>
</ul>
</div>
</body>
</html>
Deze code is al heel wat mooier en leest makkelijker.
Maak altijd voor een mooie geordende structuur en je zal je fouten veel makkelijker vinden ;)
Gewijzigd op 01/01/1970 01:00:00 door Lex Nonavailable
Wat betreft je oplossing: Hier had ik ook al naar gekeken, alleen wanneer ik beide "sub-contents" position: relative; geef, komen ze onder elkaar te staan.
voorbeeld: www.stevenhack.nl
Overigens is absolute en relative wel degelijk te mengen. Als je namelijk een div absolute wil laten positioneren vanuit een andere div (container) moet die container relative zijn.
Gewijzigd op 01/01/1970 01:00:00 door Steven Hack
Edit:
dit is je style.css correct:
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
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
body {
font-family: Papyrus, Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: center;
margin: 0;
padding: 0px;
color: #FFFFFF;
background: #404040;
}
a {
color: #FFFFFF;
font-size: 14px;
text-decoration: underline;
}
#body {
top: 0;
padding: 0px;
margin: 0 auto;
text-align: left;
}
#header {
background: url(images/header2.jpg) no-repeat top center;
height: 110px;
}
#middle {
padding: 0;
margin: 0;
}
#navbar {
height: 40px;
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
background: url(images/menugloss.png) #404040 repeat-x;
}
#navbar li {
display: inline-block;
margin: 6px;
}
.menuitem {
width: 100px;
display: block;
color: #FFFFFF;
font-size: 18px;
text-decoration: none;
text-align: center;
}
#content {
width: 100%;
margin: 10px;
clear: both;
float: left;
}
#footer {
clear: both;
}
div#postlist {
float: left;
width: auto;
}
ul#postlist {
list-style-type: none;
padding: 0;
margin: 0;
}
ul#postlist li {
padding: 0;
margin: 0;
}
.posttitel {
border-bottom: 1px solid #FFFFFF;
font-size: 16px;
}
.posttitel a {
text-decoration: none;
}
.postcontent {
padding: 15px;
}
#postlistcontent {
width: 80%;
float: right;
}
/*****************/
/* FORMULIER CSS */
/*****************/
form {
border: 1px dashed #FFFFFF;
padding: 15px;
width: 800px;
font-size: small;
}
label {
float: left;
width: 75px;
text-align: right;
margin-right: 15px;
}
input {
background-color: #f5f5f5;
font-family: Papyrus, Arial, Helvetica, sans-serif;
font-size: small;
border: 1px solid #FFFFFF;
margin-bottom: 5px;
}
textarea {
width: 300px;
height: 150px;
background-color: #f5f5f5;
border: 1px solid #FFFFFF;
font-family: Papyrus, Arial, Helvetica, sans-serif;
font-size: small;
margin-bottom: 5px;
}
font-family: Papyrus, Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: center;
margin: 0;
padding: 0px;
color: #FFFFFF;
background: #404040;
}
a {
color: #FFFFFF;
font-size: 14px;
text-decoration: underline;
}
#body {
top: 0;
padding: 0px;
margin: 0 auto;
text-align: left;
}
#header {
background: url(images/header2.jpg) no-repeat top center;
height: 110px;
}
#middle {
padding: 0;
margin: 0;
}
#navbar {
height: 40px;
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
background: url(images/menugloss.png) #404040 repeat-x;
}
#navbar li {
display: inline-block;
margin: 6px;
}
.menuitem {
width: 100px;
display: block;
color: #FFFFFF;
font-size: 18px;
text-decoration: none;
text-align: center;
}
#content {
width: 100%;
margin: 10px;
clear: both;
float: left;
}
#footer {
clear: both;
}
div#postlist {
float: left;
width: auto;
}
ul#postlist {
list-style-type: none;
padding: 0;
margin: 0;
}
ul#postlist li {
padding: 0;
margin: 0;
}
.posttitel {
border-bottom: 1px solid #FFFFFF;
font-size: 16px;
}
.posttitel a {
text-decoration: none;
}
.postcontent {
padding: 15px;
}
#postlistcontent {
width: 80%;
float: right;
}
/*****************/
/* FORMULIER CSS */
/*****************/
form {
border: 1px dashed #FFFFFF;
padding: 15px;
width: 800px;
font-size: small;
}
label {
float: left;
width: 75px;
text-align: right;
margin-right: 15px;
}
input {
background-color: #f5f5f5;
font-family: Papyrus, Arial, Helvetica, sans-serif;
font-size: small;
border: 1px solid #FFFFFF;
margin-bottom: 5px;
}
textarea {
width: 300px;
height: 150px;
background-color: #f5f5f5;
border: 1px solid #FFFFFF;
font-family: Papyrus, Arial, Helvetica, sans-serif;
font-size: small;
margin-bottom: 5px;
}
En zet al je tekst in <p> tags en alles zal werken ;)
Gewijzigd op 01/01/1970 01:00:00 door Lex Nonavailable
In ieder geval wil ik enige tips niet zonder proberen af te slaan, maar naar testen blijkt het inderdaad geen nut te hebben.
aapjuh schreef op 29.05.2009 00:03:
Bedankt voor je uitgebreide hulp hier en op msn LextruX. Nu werkt het perfect!
graag gedaan^^