CSS footer laat zich niet bedwingen - is bedwongen!

Ik heb een opzet gemaakt in CSS, gebaseerd op het idee van de [url=http://www.alistapart.com/articles/fauxcolumns/]Faux column[/url] waarbij een achtergrondplaatje dienst doet als kolom.

Ik wil alleen dat dat plaatje als de pagina ophoudt ook stopt en afsluit met een footer. En wat ik ook probeer, het wil me niet lukken.

Mijn html en de CSS

De oplossing zou zijn om een aparte div te maken voor de achtergrond, maar dan komt het plaatje niet in beeld.

En zo [url=http://www.noxbox.nl/CSS/fauxwrap.html]met aparte div[/url] en de [url=http://www.noxbox.nl/CSS/fauxwrap.css]CSS[/url]

[edit]Inmiddels aangepast…[/edit]

Ik heb de twee pagina's bekeken en zie nauwelijks verschil, dus snap ik nog niet wat je probleem precies is.

Maar twee gedachten:

  1. Als je een footer hebt en die staat altijd onderaan de pagina, dan kan je de footer toch een eigen background geven die over de achtergrond van de body valt? Dat zou goed gaan zolang de pagina [b:f9d0b596f5]langer[/b:f9d0b596f5] is dan 1 venster.

  2. als je dit doet:

[code:1:f9d0b596f5]<div id="content">
{ blah blah blah }
</div>
<div id="footer">
{ footertext}
</div>[/code:1:f9d0b596f5]

en je hangt de achtergrond aan #content, dan heb je toch wat je zou willen?

Ik had al bijna de hoop opgegeven. Kom je toch nog een langs :D In de eerste heb ik het achtergrondplaatje in de body gezet, in de tweede in de #wrap. In die versie krijg ik dus geen achtergrond meer te zien. Waarom? Ik weet het niet te vinden...

Nadeel van de body-versie is dat het plaatje altijd helemaal doorloopt en niet stopt bij de footer (en dat is wat ik wil) Door het plaatje aan een aparte #div te hangen dacht ik het tijdig te kunnen stoppen en daar de footer onder te hangen. En dat is dus wat me niet lukt.

Ik zie het al, je hebt een float gezet op je #content en #footer, waardoor #wrap niet meer de hele pagina omvat, maar alleen de header.

Probeer eens om in plaats van de float op je #footer deze helemaal los te zetten door een ‘clear : both’ te zetten op #footer, dan komt de footer onder #content en omvat #wrap weer alles.

TIP : trucje om te zien waar iets niet lekker gaat: zet tijdelijk een border om div’s waarvan je niet weet of het precies doet wat je wilt in een felle kleur; dan zie je met enig proberen waar het fout gaat.

Super!

Blij als een kind. :stuck_out_tongue: :lol: :smiley: :kiss:
Ergens in mijn genen zit de eigenschap weggepropt dat ik het niet kan hebben als iets wel kan en het me niet lukt. Ik heb aan dit rotgeintje meer tijd besteed dan aan de rest van de website die er op komt te hangen.

Dit was dus het verlossende woord: clear: all; en de footer-float overboord zetten.

http://www.noxbox.nl/CSS/fauxwrap.html