CSS voorbeelden - Footer met plaatje erbovenop
Het plaatje wordt in het element 'footer' geplaatst en krijgt middels een stijlregel in CSS een negatieve waarde voor de marge aan de bovenkant. Hierdoor zal het plaatje als het ware boven de footer komen te staan.
Wel dient er daarbij rekening gehouden te worden met andere elementen op de pagina! Er moet ruimte beschikbaar zijn om het plaatje te tonen, het zou anders boven, over enkele andere elementen kunnen verschijnen.
Omdat in onze footer de tekst gecentreerd staat, gebruiken we ook nog een 'float: left;' om het plaatje links uit te laten lijnen.
Een tweede probleem dat je kunt tegenkomen in Internet Explorer is het 'verdwijnen' van het plaatje. Door het gelaagd bouwen met div's die over elkaar heen vallen, kan het zijn dat het plaatje ineens weg lijkt te zijn. De toevoeging 'position: relative;' kan daarbij uitkomst bieden.
De stijlregel voor het plaatje (ook via bronweergave te bekijken) is nu alsvolgt:
img#footerplaatje { float: left; position: relative; margin: -164px 0 0 10px; border: 1px solid #999; }
