De PHPhulp kroeg
Div boven footerdiv floaten
Ik heb een div, die als 'footer' dient. Deze is 95% breed en heeft een bottom margin van 3px. Nu wil ik boven deze div, een kleine div van slechts 200px breedte. Deze dient rechts boven de footerdiv gefloat te worden, zodat het lijkt alsof het een 'tab' is.
Zo dus:
http://i31.tinypic.com/8voggx.gif
Hoe kan ik dit het makkelijkst uitwerken, zodat het voor élke browser het zelfde resultaat geeft? Ik heb al vele manieren geprobeerd, en het mocht niet baten.
Bedankt,
Gewijzigd op 01/01/1970 01:00:00 door Bram Ergelo
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
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
// CSS:
#main {
width: 100%;
}
#main #tabs {
width: 100%;
}
#main #tabs .tab {
width: 200px;
float: right;
margin-right: 5%;
}
#main #content {
width: 95%;
}
// HTML:
<div id="main">
<div id="tabs">
<div class="tab">
Tekst
</div>
</div>
<div id="content">
Tekst
</div>
</div>
#main {
width: 100%;
}
#main #tabs {
width: 100%;
}
#main #tabs .tab {
width: 200px;
float: right;
margin-right: 5%;
}
#main #content {
width: 95%;
}
// HTML:
<div id="main">
<div id="tabs">
<div class="tab">
Tekst
</div>
</div>
<div id="content">
Tekst
</div>
</div>
Moet dit niet al werken?
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
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
<!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-GB">
<head>
<title>How to keep footers at the bottom of the page (CSS demo)</title>
<style media="screen" type="text/css">
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
#tab {
position: absolute;
right: 0px;
top: -50px;
width: 200px;
height: 50px;
background: #ccc;
}
/* other non-essential CSS */
#header p,
#header h1 {
margin:0;
padding:10px 0 0 10px;
}
#footer p {
margin:0;
padding:10px;
}
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
height:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<!-- Header start -->
<p><a href="http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page" title="How to keep footers at the page bottom with valid CSS">« Back to the CSS article</a> by <a href="http://matthewjamestaylor.com">Matthew James Taylor</a></p>
<h1>How to keep footers at the bottom of the page (CSS demo)</h1>
<!-- Header end -->
</div>
<div id="body">
<!-- Body start -->
<p>In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the <a href="http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page">full article</a> for all the details.</p>
<!-- Body end -->
</div>
<div id="footer">
<div id="tab">
<p>Hier je tab ...</p>
</div>
<!-- Footer start -->
<p><strong>Footer</strong> (always at the bottom). View more <a href="http://matthewjamestaylor.com/blog/-website-layouts">website layouts</a> and <a href="http://matthewjamestaylor.com/blog/-web-design">web design articles</a>.</p>
<!-- Footer end -->
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
<title>How to keep footers at the bottom of the page (CSS demo)</title>
<style media="screen" type="text/css">
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
#tab {
position: absolute;
right: 0px;
top: -50px;
width: 200px;
height: 50px;
background: #ccc;
}
/* other non-essential CSS */
#header p,
#header h1 {
margin:0;
padding:10px 0 0 10px;
}
#footer p {
margin:0;
padding:10px;
}
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
height:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<!-- Header start -->
<p><a href="http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page" title="How to keep footers at the page bottom with valid CSS">« Back to the CSS article</a> by <a href="http://matthewjamestaylor.com">Matthew James Taylor</a></p>
<h1>How to keep footers at the bottom of the page (CSS demo)</h1>
<!-- Header end -->
</div>
<div id="body">
<!-- Body start -->
<p>In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the <a href="http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page">full article</a> for all the details.</p>
<!-- Body end -->
</div>
<div id="footer">
<div id="tab">
<p>Hier je tab ...</p>
</div>
<!-- Footer start -->
<p><strong>Footer</strong> (always at the bottom). View more <a href="http://matthewjamestaylor.com/blog/-website-layouts">website layouts</a> and <a href="http://matthewjamestaylor.com/blog/-web-design">web design articles</a>.</p>
<!-- Footer end -->
</div>
</div>
</body>
</html>
Nu wil ik alleen nog een ruimte van 3 pixels tussen de footer en de onderkant, en dat de footer gecentreerd word, gezien deze slechts 95% breedte moet hebben.
'.....:
Kijk, daar schiet ik wat mee op. Mooi.
Nu wil ik alleen nog een ruimte van 3 pixels tussen de footer en de onderkant, en dat de footer gecentreerd word, gezien deze slechts 95% breedte moet hebben.
Nu wil ik alleen nog een ruimte van 3 pixels tussen de footer en de onderkant, en dat de footer gecentreerd word, gezien deze slechts 95% breedte moet hebben.
Ik zou zeggen, verdiep je wat in CSS.
'Karl:
Ik zou zeggen, verdiep je wat in CSS.
Heb ik gedaan, ik heb al meerdere pogingen gedaan om met positioning en margins een footerdiv uit te lijnen, alleen kom ik geen stap vooruit.'.....:
Kijk, daar schiet ik wat mee op. Mooi.
Nu wil ik alleen nog een ruimte van 3 pixels tussen de footer en de onderkant, en dat de footer gecentreerd word, gezien deze slechts 95% breedte moet hebben.
Nu wil ik alleen nog een ruimte van 3 pixels tussen de footer en de onderkant, en dat de footer gecentreerd word, gezien deze slechts 95% breedte moet hebben.
Ik zou zeggen, verdiep je wat in CSS.