[CSS] Footer met position relative - Softwareontwikkeling

woensdag 9 augustus 2006 22:22

Acties:

Matthijs1982

Topicstarter

Ik wil een footer onderaan de website plaatsen. Deze footer moet meescrollen en altijd onderaan de content staan en altijd onderaan tegen de browser window aan. Deze vraag is al vaker in het forum voorbij gekomen, maar de oplossingen die ik zag waren altijd met position: absolute.

Wanneer ik de position op absolute zet, werkt het goed, maar als ik dan het venster van de browser kleiner schuif blijft de div footer in beeld terwijl deze met de content uit beeld moet scrollen. De footer komt dus zeg maar over de content te liggen.

Ik heb de footer nu op position relative staan. Nu houd ik altijd een kleine ruimte over onder de DIV footer en het browser window. Dit heb ik in IE en in Firefox.
Weet iemand hoe ik dit kan oplossen?

Ik heb deze HTML:
<div id="footer"></div>

Ik heb deze CSS:

Cascading Stylesheet:

#footer {
width: 475px; 
height: 23px;
bottom: 0; 
position: relative;
left: 294px; 
background-attachment:scroll;
background-image:url("../afbeeldingen/bg_footer.gif");
background-repeat:no-repeat;
}

woensdag 9 augustus 2006 22:24

Acties:

BtM909

Watch out Guys...

Je kan je code tussen [code=css][/code] zetten

Heb je geen standaard margin en padding op je HTML en / of Body element staan?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 9 augustus 2006 22:32

Acties:

Matthijs1982

Topicstarter

Ik heb dit als html en body

Cascading Stylesheet:

html {
height: 100%;
}

body { 
height: 100%;
background-color:#2d4492; 
background-attachment:scroll;
background-image:url("../afbeeldingen/bg_boven.jpg");
background-position:top;
background-repeat:repeat-x;
font-family: Verdana, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #494949;
margin: 0px;
}

woensdag 9 augustus 2006 23:02

Acties:

Rowanov

Kop eens wat anders...

Dat is een vrij standaard layout als ik je uitleg goed begrijp; kijk eens hier

woensdag 9 augustus 2006 23:07

Acties:

Matthijs1982

Topicstarter

Dat klopt, allen wil ik de footer onderaan de pagina. Als ik het voorbeeld gebruik komt deze onderaan de content. Dat is op zich goed, maar als de content minder tekst bevat, moet de footer ook onderaan het browservenster staan.

Dit krijg ik niet voor elkaar. Alleen als ik de position op absolute zet en dan valt de footer over de content heen als ik het scherm kleiner maak.

donderdag 10 augustus 2006 08:59

Acties:

Verwijderd

Wat je ook zou kunnen proberen is je hoogtes als percentages zetten.

Stel je hebt 3 delen een top, een middle, en een bottom (je footer). Als je nou je top 20% zet je middle 70% en je bottom op 10%. Nu zal je bottom altijd onderaankomen. Het nadeel is wel als je je browser verkleint zullen de grotes ook mee veranderen, maar misschien dat het in jou geval niet uitmaakt.

Mocht dit de zaak niet oplossen, zul je denk ik wat meer info moeten geven over de layout van je site...

vrijdag 11 augustus 2006 01:51

Acties:

Fuzzillogic

Cool

Cascading Stylesheet:

1 2	html, body { min-height: 100%; } #footer { position absolute; bottom: 0; left: 0; }

code:

<body>
<div>content</div>
<div id="footer">voetgeblaat</div>
</body>

IE6 snapt geen min-height, maar je kunt met een conditional comment de body en html een height van 100% geven. Zelfde effect, in IE.

Althans.. Ik denk dat dit ongeveer zal werken

Eventueel de content-div nog een padding aan de onderkant geven om ruimte te houden voor de footer.

vrijdag 11 augustus 2006 13:14

Acties:

Rowanov

Kop eens wat anders...

Matthijs1982 schreef op woensdag 09 augustus 2006 @ 23:07:
Dat klopt, allen wil ik de footer onderaan de pagina. Als ik het voorbeeld gebruik komt deze onderaan de content. Dat is op zich goed, maar als de content minder tekst bevat, moet de footer ook onderaan het browservenster staan.

Dit krijg ik niet voor elkaar. Alleen als ik de position op absolute zet en dan valt de footer over de content heen als ik het scherm kleiner maak.

Als je even had geklikt op short version, had je gezien dat dit ook het geval is