css footer + menu uitlijnen..
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Toevoeging: Ook deze heeft hier specifiek scripts voor:
http://pmob.co.uk/temp/3colfixedtest_4.htm
Gewijzigd op 01/01/1970 01:00:00 door A Leeuwenburgh
Weer met het footerprobleem. Ik krijg het niet voor elkaar om een sticky footer in elke browser werkend te krijgen.
Ik heb al verschillende dingen erover gelezen op internet, maar het wil maar niet lukken. Ik heb vooral problemen met Safari & Chrome. Als het juist word weergegeven in IE en Firefox heb ik bij Chrome en Safari nog een flinke witruimte hier tussen.
Ik heb het nu zo gedaan:
CSS:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
.clearfooter{
height: 72px;
}
#footer{
position: relative;
left: 87px;
height: 72px;
background: url(images/footer.png) no-repeat;
}
height: 72px;
}
#footer{
position: relative;
left: 87px;
height: 72px;
background: url(images/footer.png) no-repeat;
}
En dan de class clearfooter boven in de content gezet. En de footer eronder. Dit doet hij netjes in IE en FF, maar dus niet in Safari en Chrome. Doordat hun browser veel compacter is, heb ik veel meer ruimte voor de website. En daardoor sluit hij niet onderaan?
Wie kan me ermee helpen, want ik kom er echt helemaal niet meer uit.
voor een footer moet je nooit left en position gebruiken.
de footer moet je buiten je container plaatsen (eronder dus).
de footer dezelfde breedte geven als je container, zoiets bv (als de container 980px breed is):
Code (php)
1
2
3
4
5
6
2
3
4
5
6
#footer
{
width: 980px;
margin: 0 auto;
clear: both;
}
{
width: 980px;
margin: 0 auto;
clear: both;
}
heb je een voorbeeld online staan? want het is nu niet duidelijk WAT er precies fout gaat.... zo kan ik ook geen passend antwoord geven ;)
Ik probeer nu iets anders, maar dat wil ook niet werken. Ik heb nu een div all aangemaakt.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
html, body {
height: 100%; /* hl belangrijk */
}
#all{
border: 1px dotted yellow; /* voor de duidelijkheid */
position: relative;
min-height: 100%;
height:auto !important; /* voor moderne browsers */
height:100%; /* voor IE */
}
height: 100%; /* hl belangrijk */
}
#all{
border: 1px dotted yellow; /* voor de duidelijkheid */
position: relative;
min-height: 100%;
height:auto !important; /* voor moderne browsers */
height:100%; /* voor IE */
}
En dan zal je zeggen de footer op absolute zetten en bottom: 0px;
Maar zodra de footer absolute is, is hij niet meer zichtbaar.
En als ik de footer uit de container plaats, dan zou ik moeten werken met min-height en height? Daarmee kloppen de afmetingen niet in verschillende browsers, dus dat is ook geen oplossing. Lijkt me..
heb je mijn code überhaupt al geprobeerd?
Alleen nu zit IE 6.0 te kutten, en heb ook nog problemen in 1024x768.. Werken hier nog veel mensen op?
Tamara schreef op 26.08.2009 11:05:
ja, zeker met die resolutie!
Wat lopen sommige mensen nog achter.. Maarja, je hebt wel gelijk. Moest het sowieso fixen voor die resolute.. Het is me inmiddels helemaal gelukt, enkel nog problemen in IE6.0 De rest doet het nu :)