[XHTML en CSS] Div altijd onderaan pagina, ook bij scrollen

[Urk]

Ik ben bezig met [url="linkverwijderd"]deze website[/url].
Hoe krijg ik de 3e balk op de achtergrond (de donker blauwe) altijd onderaan de pagina, nu staat deze altijd onderaan de viewport maar indien de tekst lang is dient deze onderaan de pagina te staan.
Ik heb al van alles geprobeerd maar krijg het niet voor elkaar.

Bij een korte content tekst (link verwijderd) gaat het wel goed.
Bij een lange content tekst (link verwijderd) gaat het nog niet goed. Ook de fades aan de zijkant lopen dan niet door tot aan het einde van de pagina.

De code is valid XHTML 1.0 en valid CSS.

Dit is de bijbehorende CSS is:

Cascading Stylesheet:

html {height: 100%; margin: 0; padding: 0; overflow: auto;}
body {height: 100%; margin: 0; padding: 0; background: #6d7985; font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 12px; line-height: 16px; cursor: default; text-align: center;}
img {border: 0;}
form {margin: 0;}
p {padding: 0; margin: 0 0 15px 0;}
h1 {font-size: 14px; font-weight: bold; padding: 0; margin: 0 0 15px 0;}
#header_line {position: absolute; top: 0; left: 0; height: 30px; width: 100%; background: #c5c8cc; z-index: 1;}
#menu_line {position: absolute; top: 183px; left: 0; height: 30px; width: 100%; background: #994743; z-index: 1;}
#footer_line {position: absolute; bottom: 0; left: 0; height: 24px; width: 100%; background: #516272; z-index: 1;}
#page_container {position: relative; padding: 0 11px 0 11px; min-height: 100%; width: 900px; margin: 0 auto; text-align: left; z-index: 2;}
#page_subcontainer {position: absolute; min-height: 100%; width: 900px; background: #eaeaea;}
#page_leftfader {position: absolute; left: 0; height: 100%; width: 11px; background: url('/images/page_leftfader.png') repeat-y;}
#page_rightfader {position: absolute; right: 0; height: 100%; width: 11px; background: url('/images/page_rightfader.png') repeat-y;}
#header_container {height: 215px; background: url('/images/header_background.jpg') no-repeat 0px 30px; text-align: right; line-height: 28px;}
#header_container span {margin-right: 10px;}
#header_container #menu {margin-top: 155px; height: 30px; background: #c51602;}
#content_container {min-height: 250px; padding: 15px 28px 24px 28px;}
#footer_container {position: absolute; bottom: 0; width: 900px; height: 24px; background: #6d7985; font-family: Trebuchet MS, Arial, Helvetica, Verdana, sans-serif; font-size: 11px; text-align: right; color: #fff; line-height: 24px;}
#footer_container span {margin-right: 10px;}
#footer_container a {color: #fff; font-weight: bold; text-decoration: none;}
#footer_container a:hover {color: #dadada;}

[ Voor 4% gewijzigd door Urk op 14-12-2007 03:45 ]

[Verwijderd]

Ik kan je website vanaf hier niet bekijken maar ik gok dat je de div van je footer embedded hebt staan in de div van je content.

[Urk]

Verwijderd schreef op donderdag 13 december 2007 @ 14:28:
Ik kan je website vanaf hier niet bekijken maar ik gok dat je de div van je footer embedded hebt staan in de div van je content.

Nee, de DIV waar het om gaat staat direct in de body, dus op het hoogste niveau. Dat bedoel je neem ik aan?

[Verwijderd]

Ja, dat bedoelde ik.
Sluit je alle andere divs wel netjes af ?

[Cartman!]

Waarom gooi hem hem niet relatief als laatste element van je document ipv. absoluut op bottom:0 halverwege je pagina...?

[MueR]

Position absolute ben ik geen groot fan van. Op www.annonamarth.eu gebruik ik zelf een position: fixed;. kijk maar eens naar de styling daar.

[Urk]

MueR schreef op donderdag 13 december 2007 @ 15:27:
Position absolute ben ik geen groot fan van. Op www.annonamarth.eu gebruik ik zelf een position: fixed;. kijk maar eens naar de styling daar.

Ja, maar hij mag niet fixed staan, omdat hij altijd onderaan de pagina op de achtergrond moet komen, dus ook niet onder alle andere elementen, op de versie met de korte tekst kun je zien hoe het moet blijven. Bij fixed staat hij vast onderaan de viewport en dat is niet de bedoeling....

[Urk]

Cartman! schreef op donderdag 13 december 2007 @ 14:51:
Waarom gooi hem hem niet relatief als laatste element van je document ipv. absoluut op bottom:0 halverwege je pagina...?

Dat kan toch ook niet, dan komt het altijd als laatste element? Hij moet op de achtergrond op gelijke hoogte met de balk waarin het copyright bericht staat...

[TeeDee]

Staan hier nog tips tussen?

[Cartman!]

Urk schreef op donderdag 13 december 2007 @ 17:21:
[...]

Dat kan toch ook niet, dan komt het altijd als laatste element? Hij moet op de achtergrond op gelijke hoogte met de balk waarin het copyright bericht staat...

Waarom mag ie niet als laatste element komen dan? Hij staat onderaan qua layout dan is t handigste om dat in je code ook zo te doen. Waarom zou je de copyright statement daar niet in plaatsen?

Beetje moeite doen hoor...

[Urk]

Cartman! schreef op donderdag 13 december 2007 @ 19:35:
[...]

Waarom mag ie niet als laatste element komen dan? Hij staat onderaan qua layout dan is t handigste om dat in je code ook zo te doen. Waarom zou je de copyright statement daar niet in plaatsen?

Beetje moeite doen hoor...

Denk dat je het niet geheel begrijpt, de laatste lijn loopt nu achterlangs de andere footer, die gaat prima en daar staat dus ook de copyright tekst in.
Ook het plaatsen van die balk als een laatste element voor </body> helpt niet. Dit komt omdat wanneer ik een border op de BODY zet deze ook maar 100% hoog van de viewport is en niet hoger als de pagina langer is....

[Gommers]

z-index... daar kon je volgens mij mee instellen dat hij vooraan komt. voorbeeldje

code:

#container {
    z-index: 90;
    position: fixed;
    bottom: 0;

}

[TeeDee]

Gommers schreef op donderdag 13 december 2007 @ 21:39:
z-index... daar kon je volgens mij mee instellen dat hij vooraan komt. voorbeeldje

code:

#container {
    z-index: 90;
    position: fixed;
    bottom: 0;

}

Totdat je ga scrollen.

[Urk]

TeeDee schreef op donderdag 13 december 2007 @ 21:53:
[...]

Totdat je ga scrollen.

Inderdaad, Fixed positioneren is dus geen optie! Dat hebben we al besproken en de balk onderaan is valt al via z-index op de achtergrond....

[Cartman!]

Je begrijpt gewoon echt niet wat ik bedoel hoor. Als je nu eindigt met een relatieve div die 100% breed is en buiten je container valt en daarin een div weer in het midden positioneert zoals je andere pagina. Op de 100% brede div zet je de achtergrond en in het middelste stuk je copyright info. Wat je wilt is totaal niet moeilijk maar als je verkeerd blijft denken krijg je het niet opgelost en heb ik geen zin meer je te helpen.

edit: slim om t voorbeeld weg te halen

[ Voor 4% gewijzigd door Cartman! op 14-12-2007 09:51 ]