Hallo allemaal,

Ik ben bezig met het bouwen van mijn nieuwe website in Wordpress in combinatie met Bootstrap, het lukt prima alleen krijg ik mijn footer niet goed.

Ik zal het probleem hieronder even zo duidelijk mogelijk proberen te omschrijven, omdat ik hem lokaal aan het vormgeven ben, en hij dus nog niet online staat.

De footer die ik wil gaan gebruiken moet helemaal onderaan de pagina komen (Dus onder de content), en daar moet die altijd blijven staan. Het is me nu alleen gelukt met position: fixed, maar dat is niet wat ik bedoel, want dan gaat die als het ware over de content heen. (De content scrollt dan als het ware, en de footer blijft staan). Ik wil hem helemaal onderaan de pagina laten staan. (Als voorbeeld wat Postnl met de grijze footer heeft, dat bedoel ik dus).

Op internet lees ik eigenlijk alleen maar dat je position: absolute; moet gebruiken, maar als ik die gebruik dan komt die halverwege de pagina te staan, en over de content heen te staan, dus dat is ook niet goed. CSS die ik nu gebruik voor de footer is als volgt:

Code:

.footer {    height: 50px;    background-color: black;    position: absolute;    left: 0;    right: 0;    width: 100%;    bottom: 0;    margin: 0 auto;    clear:both; }

En mijn footer.php ziet er op het moment als volgt uit:

Code:

     <footer class="footer">        <p>© Company 2012</p>     
   <!-- /container -->
    <?php wp_footer(); ?>
  </body></html></footer>

Wat doe ik verkeerd qua codering, en hoe is het op te lossen?

Je hebt de footer verkeerd afgesloten!

Die moet je afsluiten voor <?php wp_footer(); ?> en niet na je body/html...

En als je positions absolute relative en fixed niet goed beheerst zou ik me dus eerst daar mee bezig gaan houden tot dat je het snapt en desnoods met meerdere lagen en elementen.

Je hoeft niet persé met positions te werken om dat voor elkaar te krijgen. Het is makkelijker als je even een screenshot stuurt van wat je tot nu toe hebt staan.

Je doet 2 dingen verkeerd: 1) je eindigt in je HTML de footer als laatste. Dat wil je niet, die eindigt voordat je je body sluit. 2) je definieert de class 'footer' wat je niet wilt gezien deze in bootstrap zelf wordt / moet worden gedefinieerd. Zie voorbeeld: http://getbootstrap.com/examples/sticky-footer/