Positioneren van een footer

[Verwijderd]

Voor ik mijn uitleg doe wil ik even zeggen dat ik een newbie ben op vlak van xhtml en css.
Ik heb wat probleempjes met het positioneren van een footer.

Ik wil dat de footer ten alle tijden op 10px van de onderkant van mijn webpagina geplaats is.

Als ik volgende css-code gebruik dan komt de footer na de laatste div.
Ik heb voor de duidelijkheid voor alle divs stippellijntjes gebruikt en de footer in het rood gezet.

code:

#footer{ 
position: relative;
bottom: 10px;
width:600px;
font-size: 70%;
text-align:center;
background-color: red;
padding: 3px;
border: 1px dashed;
margin:10px auto;
}

Vb.1


Nu wil ik dus dat de footer onderaan de pagina komt

code:

#footer{ 
position: absolute;
bottom: 10px;
width:600px;
font-size: 70%;
text-align:center;
background-color: red;
padding: 3px;
border: 1px dashed;
margin:10px auto;
}

Vb.2


De div staat plots niet meer gecentreerd terwijl de rechter en de linkmargin op auto staan en de div in de code nog steeds in de wrapperdiv (grootste kader) zit. Dat even terzijde..

Als ik nu een lap tekst in in mijn pagina zet dan overlapt die mijn footer. En staat dus niet meer onderaan mijn pagina.

Vb.3


De footer is dus absoluut gepositioneerd. Maar wat ik zou willen is dat de footer netjes mee naar onder opschuift net zoals het zou gebeuren moest de footer relatief gepositioneerd zijn.

Vb.4



Wat ik wil is Vb.2 (maar dan gecentreerd) en Vb.4 tesamen. Maar ik krijg dit maar niet voor mekaar omdat de ene keer de footer relatief gepositioneerd moet zijn en de andere keer absoluut.

Iemand enige suggesties?

[Grijze Vos]

klik

[akaIDIOT]

Je content een bottom-margin meegeven waar je footer inpast, de footer absoluut positioneren en margin: auto meegeven zal denk ik werken... Maar zoals grijze vos al aangeeft: dit is geen nieuw probleem

[xces]

Inderdaad, dit is eerder vraag 1000 over hetzelfde probleem, misschien volgende keer de search gebruiken?

[trixx]

Offtopic.... het idee van een Lorem Ipsum tekst is bedoeld om de klant/gebruiker niet af te leiden van het design. Je tekst die er nu staat is leesbaar en kan afleiden. Je kunt het beste volgende keer een generator gebruiken.

http://www.lipsum.com/

[BtM909]

trixx schreef op vrijdag 02 november 2007 @ 10:32:
Offtopic.... het idee van een Lorem Ipsum tekst is bedoeld om de klant/gebruiker niet af te leiden van het design. Je tekst die er nu staat is leesbaar en kan afleiden. Je kunt het beste volgende keer een generator gebruiken.

http://www.lipsum.com/

Hetgeen wat je zegt staat letterlijk in de tekst van de voorbeelden

[Mei]

akaIDIOT schreef op donderdag 01 november 2007 @ 20:34:
Je content een bottom-margin meegeven waar je footer inpast, de footer absoluut positioneren en margin: auto meegeven zal denk ik werken... Maar zoals grijze vos al aangeeft: dit is geen nieuw probleem

Het kan makkelijker: Één grote container met margin:auto;, zodat alles netjes gecentreerd is. Hier gooi je gewoon alles achter elkaar in, header, content, footer, maakt niet uit. Vervolgens geef je deze container een margin-bottom van 10px. Op deze manier maak je gebruik van 'normale' eigenschappen en gebruik je niks wat nog wel eens buggy geïmplementeerd kan zijn door browsers (float/position)