Uitrekbare content, met een plakkerige footer
Dan zie je dat de footer niet onder de content/menu komt, wat heel jammer is.
Als je nu naar faq zou gaan zie je dat de pagina nu een heel stuk langer is, ook daar zou de footer dan onder de uitgerekte content moeten komen.
Ik had de content/menu/header al in 1 container gezet om dan die uit te laten rekken en dat dan daar de footer onder kon.
Helaas was dat niet gelukt.
Het is niet de bedoeling dat de footer aan de onderkant van de browser blijft plakken.(wat ik alleen maar heb gevonden op de zoektocht
naar de oplossing van mijn probleem, maar dat de footer ten alle tijden onder de container div wordt geplakt
Indien je niet weet wat ik precies wil, kijk dan nog even hier: http://goblinwar.nl/layoutschets.jpg voor een schets ervan
Code van index.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="container">
<div id='bovenrand'>
</div>
<div id="header">
</div>
<div id="menu">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
<div id='bovenrand'>
</div>
<div id="header">
</div>
<div id="menu">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
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
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
html
{
height: 100%;
}
* html #container
{
height: 100%;
}
/*
*
{
margin: 0px;
padding: 0px;
}*/
/*Begin eigen code */
body
{
height: 100%;
background-color:#c9ddc2;
font-size:14px;
font-family:calibri;
color:#d4af37;
}
/* Begin indeling van het middenstuk(scherm)*/
#bovenrand
{
top:0px;
height:5px;
width:800px;
background-color:#c9ddc2;
}
#header
{
position:absolute;
padding:0px;
margin-right:150px;
top: 5px;
text-align:center;
height: 200px;
width:800px;
background-color:#c9ddc2;
background-image:url(../img/header.jpg);
background-repeat:no-repeat;
}
#gsbalk
{
position:absolute;
top:170px;
height:30px;
min-width:200px;
margin-left:300px;
/*background-color:#054109;*/
}
#lijnonderheader
{
position:absolute;
height:22px;
width:800px;
top:195px;
visibility:visible;
}
#menu
{
position:absolute;
background-color:#054109;
top:213px;
width:200px;
min-height:392px;
}
#content
{
position:absolute;
top:205px;
margin-left:200px;
background-color:#054109;/*#0d5507;*/
width:565px;
min-height:400px;
padding-left:35px;
}
#container
{
position:relative;
width:800px;
padding-bottom:60px;
min-height: 100%;
min-height:600px;
background-color:#054109;
}
#footer
{
/*position:relative;*/
width:800px;
height:60px;
background-image:url(../img/footer.jpg);
background-repeat:no-repeat;
}
{
height: 100%;
}
* html #container
{
height: 100%;
}
/*
*
{
margin: 0px;
padding: 0px;
}*/
/*Begin eigen code */
body
{
height: 100%;
background-color:#c9ddc2;
font-size:14px;
font-family:calibri;
color:#d4af37;
}
/* Begin indeling van het middenstuk(scherm)*/
#bovenrand
{
top:0px;
height:5px;
width:800px;
background-color:#c9ddc2;
}
#header
{
position:absolute;
padding:0px;
margin-right:150px;
top: 5px;
text-align:center;
height: 200px;
width:800px;
background-color:#c9ddc2;
background-image:url(../img/header.jpg);
background-repeat:no-repeat;
}
#gsbalk
{
position:absolute;
top:170px;
height:30px;
min-width:200px;
margin-left:300px;
/*background-color:#054109;*/
}
#lijnonderheader
{
position:absolute;
height:22px;
width:800px;
top:195px;
visibility:visible;
}
#menu
{
position:absolute;
background-color:#054109;
top:213px;
width:200px;
min-height:392px;
}
#content
{
position:absolute;
top:205px;
margin-left:200px;
background-color:#054109;/*#0d5507;*/
width:565px;
min-height:400px;
padding-left:35px;
}
#container
{
position:relative;
width:800px;
padding-bottom:60px;
min-height: 100%;
min-height:600px;
background-color:#054109;
}
#footer
{
/*position:relative;*/
width:800px;
height:60px;
background-image:url(../img/footer.jpg);
background-repeat:no-repeat;
}
Gewijzigd op 01/01/1970 01:00:00 door Dennis
Die footer komt door de position die je gebruikt. Door een container omheen te zetten en daar de elementen met een float in te zetten is t ook gefixed.
De container moet dus absolute worden?
Daarin moet ik de header content enz inzetten die relative moeten zijn?
Welke waardes moet ik dan aan de footer meegeven?
Verder wil ik de switch nog uitbreiden met een aparte titel voor elke pagina.
En het gebruik van een switch is toch veel veiliger? anders kan je een hele andere webpagina als $p opgeven
Code (php)
1
2
3
4
2
3
4
<div id="header"></div>
<div id="content"></div>
<div style="clear: both; height: 30px"> </div>
<div id="footer"></div>
<div id="content"></div>
<div style="clear: both; height: 30px"> </div>
<div id="footer"></div>
de css van de footer ziet er als volgt uit:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
#footer {
clear: both;
height: 30px;
padding: 10px 0;
background: #FFEA6F;
border-top: 3px solid #E8AD35;
font-size: smaller;
color: #E8AD35;
}
clear: both;
height: 30px;
padding: 10px 0;
background: #FFEA6F;
border-top: 3px solid #E8AD35;
font-size: smaller;
color: #E8AD35;
}
Het belangrijkste is om die clear both DIV er tussen te doen. Hopelijk snap je het zo.
Helaas werkt het nog niet...
ZOu je misschien ook de rest van de css van de andere divs kunnen posten?
Dat helpt misschien?
En gebruik jij dan ook min-height?
Gewijzigd op 01/01/1970 01:00:00 door Dennis
Iemand anders een idee?
@aapjuh, onzin die extra div. Je footer moet clearen, niet de div ertussen.
Gewijzigd op 01/01/1970 01:00:00 door Willem Jan Z
edit: Haal AL je postition:absolute weg. Waarom staan ze er :/
Gewijzigd op 01/01/1970 01:00:00 door Willem Jan Z
Oh ik zal ze even weghalen die absolute's
Superbedankt, door die absolutes was de layout dus gek geworden:S, nu komt de tekst door een soort paddingtop helemaal onderaan, maar nu kan ik dit misschien wel fixen. bednakt voor het stapje in de goede richting!
Gewijzigd op 01/01/1970 01:00:00 door Dennis