Sticky footer
Ik ben bezig met een website te maken maar krijg me footer (.bottom) niet onder aan
heb de hele internet al afgezocht hoe ik dit moest doen maar niks help iemand enig idee
hoe ik dit moet oplossen:
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
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
*{
margin: 0;
}
html, body {
margin:0;
padding:0;
height:100%;
background-image: url('http://scrapzz.nl/sjatje/image/back.jpg');
background-repeat: no-repeat;
background-attachment:fixed;
}
div.ads{
background-image: url('http://scrapzz.nl/sjatje/image/bodyback.png');
height: 800;
width: 250px;
position: fixed;
bottom: 400px;
top: 40px;
left: 40px;
border: #000000 solid 3px;
padding-bottom: 60px;
padding: 10px;
}
div.main{
background-image: url('http://scrapzz.nl/sjatje/image/bodyback.png');
height: auto;
width: 1000px;
position: absolute;
top: 40px;
left: 340px;
border: #000000 solid 3px;
padding-bottom: 60px;
overflow:none;
}
div.menu{
background-image: url('http://scrapzz.nl/sjatje/image/menuback.png');
padding-top: 0px;
width: 980px;
height: 30px;
padding: 10px;
}
ul.menustyle li{
display: inline;
padding-right: 20px;
height: 60px;
width: 90px;
}
ul.menustyle{
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type:none;
}
li.menuitem a{
display: inline-block;
background-color: #073a6e;
border-radius: 5px;
height: 30px;
width: 90px;
text-decoration: none;
text-align: center;
font-family: "Segoe Marker", "Times New Roman";
font-size: 18pt;
color: #000;
}
li.menuitem a:hover{
background-color: #10477e;
text-decoration: none;
color: #000;
}
div.content{
padding-top: 10px;
padding-left: 10px;
height: auto;
width: auto;
}
div.bottom{
position: fixed;
width: 1600px;
height: 60px;
bottom: 0px;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
}
margin: 0;
}
html, body {
margin:0;
padding:0;
height:100%;
background-image: url('http://scrapzz.nl/sjatje/image/back.jpg');
background-repeat: no-repeat;
background-attachment:fixed;
}
div.ads{
background-image: url('http://scrapzz.nl/sjatje/image/bodyback.png');
height: 800;
width: 250px;
position: fixed;
bottom: 400px;
top: 40px;
left: 40px;
border: #000000 solid 3px;
padding-bottom: 60px;
padding: 10px;
}
div.main{
background-image: url('http://scrapzz.nl/sjatje/image/bodyback.png');
height: auto;
width: 1000px;
position: absolute;
top: 40px;
left: 340px;
border: #000000 solid 3px;
padding-bottom: 60px;
overflow:none;
}
div.menu{
background-image: url('http://scrapzz.nl/sjatje/image/menuback.png');
padding-top: 0px;
width: 980px;
height: 30px;
padding: 10px;
}
ul.menustyle li{
display: inline;
padding-right: 20px;
height: 60px;
width: 90px;
}
ul.menustyle{
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type:none;
}
li.menuitem a{
display: inline-block;
background-color: #073a6e;
border-radius: 5px;
height: 30px;
width: 90px;
text-decoration: none;
text-align: center;
font-family: "Segoe Marker", "Times New Roman";
font-size: 18pt;
color: #000;
}
li.menuitem a:hover{
background-color: #10477e;
text-decoration: none;
color: #000;
}
div.content{
padding-top: 10px;
padding-left: 10px;
height: auto;
width: auto;
}
div.bottom{
position: fixed;
width: 1600px;
height: 60px;
bottom: 0px;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
}
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
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
<div id="container">
<div class="ads">hoi</div>
<div class="main">
<div class="menu">
<ul class="menustyle">
<li class="menuitem">
<a href="#">Home</a>
</li>
<li class="menuitem">
<a href="#">Webshop</a>
</li>
</ul>
</div>
<div class="content">
<h1>Nieuw</h1>
<img src="/test.png"/>
<br/>
<h1>Meest verkocht</h1>
<img src="/test.png"/>
<br/>
<h1>Meest verkocht</h1>
<img src="/test.png"/>
</div>
</div>
<div class="bottom">© *.nl</div>
</div>
<div class="ads">hoi</div>
<div class="main">
<div class="menu">
<ul class="menustyle">
<li class="menuitem">
<a href="#">Home</a>
</li>
<li class="menuitem">
<a href="#">Webshop</a>
</li>
</ul>
</div>
<div class="content">
<h1>Nieuw</h1>
<img src="/test.png"/>
<br/>
<h1>Meest verkocht</h1>
<img src="/test.png"/>
<br/>
<h1>Meest verkocht</h1>
<img src="/test.png"/>
</div>
</div>
<div class="bottom">© *.nl</div>
</div>
Hij blijft wel onder de rechte menu (.ads) maar niet onder de main
Gewijzigd op 23/02/2013 19:51:46 door ScrapZz nl
Tim Slootweg op 23/02/2013 20:17:14:
Bij mij staat hij gewoon onderaan de pagina, wat wil je dan precies of werkt dit bij jou niet?
Bij mij werkt dit juist niet nee:
sjatje.scrapzz.nl
Als je hem een background-color meegeeft, dan zie je precies welke vorm hij zich aanmeet.
Wel overlapt de main-div die footer, maar met een z-index met een hogere waarde kan je dat weer oplossen.
Dit is natuurlijk behoorlijk gokken zo.....
- Aar - op 23/02/2013 20:29:52:
Laat eens wat zien? Screenshot? Welke browser?
Dit is natuurlijk behoorlijk gokken zo.....
Dit is natuurlijk behoorlijk gokken zo.....
Ik had de website al in een reactie gegeven (sjatje.scrapzz.nl) en hij doet het bij chrome,ie9 en opera (overige browser weet ik niet)
Gewijzigd op 23/02/2013 20:33:57 door ScrapZz nl
Ik zie de nu 'nu rode' balk netjes aan de onderkant van het scherm gekleefd, en hij blijft ook bovenop de andere divjes liggen? Wat me correct lijkt (recente FF)
Gewijzigd op 23/02/2013 20:36:46 door - Ariën -
- Aar - op 23/02/2013 20:34:53:
Hoe zie jij het dan daarin? Soms verschillen browsers nog wel eens van hun werkwijze. Dus een screenshot zou vast niet overbodig zijn.
Ik zie de nu 'nu rode' balk netjes aan de onderkant van het scherm gekleefd, en hij blijft ook bovenop de andere divjes liggen? Wat me correct lijkt (recente FF)
Ik zie de nu 'nu rode' balk netjes aan de onderkant van het scherm gekleefd, en hij blijft ook bovenop de andere divjes liggen? Wat me correct lijkt (recente FF)
bij mij is het zo en andere pc in huis ook:
bij mij overlapt ie dus elk andere divje
Dat de breedtte volledig doorloopt? Og..
Wees a.u.b. eens wat duidelijker, dan kunnen we je makkelijker helpen.
- Aar - op 23/02/2013 20:45:47:
Wat wil je nou eigenlijk?
Dat de breedtte volledig doorloopt? Og..
Wees a.u.b. eens wat duidelijker, dan kunnen we je makkelijker helpen.
Dat de breedtte volledig doorloopt? Og..
Wees a.u.b. eens wat duidelijker, dan kunnen we je makkelijker helpen.
de rode balk moet onder op blijven en niet de andere overlappen dat is wat ik wil!
Tim Slootweg op 23/02/2013 20:49:44:
Ik weet niet zeker of dit werkt maar volgens mij kan je de linker div float left meegeven en dan de footer clear left.
Werkt ook niet blijf el kaar overlappen
@aar
Dan overlapt main de footer weer en dat is ook niet de bedoeling hij moet juist er onder komen zoals hier:
Gewijzigd op 23/02/2013 21:22:16 door ScrapZz nl
Standaard overlappen de ad's en 'main' divjes je footer. Als je er een z-index aan de footer hangt, dan ligt deze bovenop de andere.
Hier in FF krijg ik dat prima voor elkaar trouwens.
Gewijzigd op 24/02/2013 00:28:09 door - Ariën -
- Aar - op 24/02/2013 00:23:32:
Welke browser gebruik je nou eigenlijk?
Google chrome
ScrapZz nl op 23/02/2013 19:49:12:
Ik ben bezig met een website te maken maar krijg me footer (.bottom) niet onder aan
heb de hele internet al afgezocht hoe ik dit moest doen maar niks help iemand enig idee hoe ik dit moet oplossen
heb de hele internet al afgezocht hoe ik dit moest doen maar niks help iemand enig idee hoe ik dit moet oplossen
Ik heb er een epistel aan gewijd waarin precies staat hoe je dat moet doen: Create a Fixed ('Sticky') Footer with CSS (tutorial). Er zijn diverse opties, met elk zijn eigen techniek. Wellicht dat dat wat sneller gaat.
Tim Slootweg op 24/02/2013 12:14:25:
Maar dit is natuurlijk geen sticky footer meer, hier is alles fixed.
De definities verschillen, maar ik beschrijf alle soorten footers. Afhankelijk van de definities zijn er drie, vier of vijf.
Tim Slootweg op 24/02/2013 12:14:25:
Maar dit is natuurlijk geen sticky footer meer, hier is alles fixed.
De bedoeling is natuurlijk dat hij gewoon vast zit onder op maar als dat niet lukt moet het anders natuurlijk
@Frank Conijn
Ik ga is kijken wat daar staat
Edit:
En toch lukt het niet hij blijft er voor vallen inplaats er onder!
Gewijzigd op 25/02/2013 12:34:13 door ScrapZz nl