Sticky footer
Met z-index kan je toch bepalen of iets bovenop de ander moet liggen, wil je dit niet dan haal je die z-index weg?
Ik heb al enkele mogelijkheden in dit topic genoemd die hier gewon werken in de recente FF, in Chrome zit overigens weinig verschil tussen de werking van z-index'en vergeleken met Firefox.
Gewijzigd op 25/02/2013 12:42:44 door - Ariën -
ScrapZz nl op 25/02/2013 12:16:25:
@Frank Conijn
Ik ga is kijken wat daar staat
Edit:
En toch lukt het niet hij blijft er voor vallen inplaats er onder!
Ik ga is kijken wat daar staat
Edit:
En toch lukt het niet hij blijft er voor vallen inplaats er onder!
Om 12.14 uur ga je kijken wat er staat. Het is een lange tutorial omdat er meerdere technieken in beschreven staan, maar toch concludeer je om 12.34 uur al dat het niet lukt. Dan heb je de boel niet herschreven, dat is duidelijk.
Ik wil best kijken, maar dan moet je de boel online zetten. Dan kan ik pielen met Firebug. Of je moet je huidige code in een JS Fiddle zetten, dan op Run klikken, dan Save, en dan de link hier posten.
Frank Conijn op 25/02/2013 13:37:32:
Om 12.14 uur ga je kijken wat er staat. Het is een lange tutorial omdat er meerdere technieken in beschreven staan, maar toch concludeer je om 12.34 uur al dat het niet lukt. Dan heb je de boel niet herschreven, dat is duidelijk.
Ik wil best kijken, maar dan moet je de boel online zetten. Dan kan ik pielen met Firebug. Of je moet je huidige code in een JS Fiddle zetten, dan op Run klikken, dan Save, en dan de link hier posten.
ScrapZz nl op 25/02/2013 12:16:25:
@Frank Conijn
Ik ga is kijken wat daar staat
Edit:
En toch lukt het niet hij blijft er voor vallen inplaats er onder!
Ik ga is kijken wat daar staat
Edit:
En toch lukt het niet hij blijft er voor vallen inplaats er onder!
Om 12.14 uur ga je kijken wat er staat. Het is een lange tutorial omdat er meerdere technieken in beschreven staan, maar toch concludeer je om 12.34 uur al dat het niet lukt. Dan heb je de boel niet herschreven, dat is duidelijk.
Ik wil best kijken, maar dan moet je de boel online zetten. Dan kan ik pielen met Firebug. Of je moet je huidige code in een JS Fiddle zetten, dan op Run klikken, dan Save, en dan de link hier posten.
Heb de huidige scipt aangepast niet herschreven nee
en de pagina is hier te vinden:
http://sjatje.scrapzz.nl
Kijk, hier een simpel systeem met een sticky footer.
Het php-gedeelte is puur om dummy tekst te genereren.
Verder ... haal de footer buiten elke parent. Waarom niet rechtstreeks onder <body>.
En de rest regel je puur met body en html.
Je laat de rest van de pagina volledig buiten het verhaal.
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
<?php
$content="";
for ($i=0; $i < 100; $i++) {
$content .= 'bla ' . $i . '<br>';
}
$footer = 'Hello Footer';
echo '<!doctype html>
<html>
<head>
<style>
html, body {
padding: 0;
margin: 0;
}
body {
position: relative;
height: 100%;
width: 100%;
}
#footer {
position: fixed;
bottom: 0;
z-index: 10;
height: 50px;
width: 100%;
background-color: #995599;
}
</style>
</head>
<body>
<div id="footer">' . $footer . '</div>
<div id="page">' . $content . '</div>
</body>
</html>';
?>
$content="";
for ($i=0; $i < 100; $i++) {
$content .= 'bla ' . $i . '<br>';
}
$footer = 'Hello Footer';
echo '<!doctype html>
<html>
<head>
<style>
html, body {
padding: 0;
margin: 0;
}
body {
position: relative;
height: 100%;
width: 100%;
}
#footer {
position: fixed;
bottom: 0;
z-index: 10;
height: 50px;
width: 100%;
background-color: #995599;
}
</style>
</head>
<body>
<div id="footer">' . $footer . '</div>
<div id="page">' . $content . '</div>
</body>
</html>';
?>
Gewijzigd op 25/02/2013 14:18:36 door Kris Peeters
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
div.ads {
background-image: url("http://scrapzz.nl/sjatje/image/bodyback.png");
border: 3px solid #000000;
bottom: 400px;
float: left;
height: 90%;
left: 40px;
min-height: 600px;
padding: 10px;
position: fixed;
top: 40px;
width: 250px;
}
background-image: url("http://scrapzz.nl/sjatje/image/bodyback.png");
border: 3px solid #000000;
bottom: 400px;
float: left;
height: 90%;
left: 40px;
min-height: 600px;
padding: 10px;
position: fixed;
top: 40px;
width: 250px;
}
Een hoogte van 90% en een position:fixed + top:40px + bottom:400px, dat bijt elkaar. En dan ook nog die min-height erbij... Verder bijten een float:left en een position:fixed elkaar ook, c.q. heffen elkaar op.
Je hele code zal dus herschreven moeten worden, en dat doe ik niet (voor nop). Ik kan je wel gratis advies geven, en dat is eerst eens een behoorlijke cursus te doen. Voor de zekerheid zou ik eerst de CSS-cursus op W3 Schools (nog weer eens) doornemen, om daarna je bekwaamheid op het vereiste niveau te krijgen middels nrs. 2 en 5 van deze tutorials.
Dat lijkt een omweg, maar geloof mij: dat is het juist niet. Zonder de vereiste bekwaamheid een commerciële site proberen te maken, dát is pas tijdrovend. En vaak frustrerend.
Gewijzigd op 25/02/2013 14:56:13 door Frank Conijn