GoodBytes Blog
Inspiratie en tips voor webdesigners & webontwikkelaars
Volg artikels via de RSS feed
CSS footer onderaan scherm laten ‘kleven’
Geschreven door goodbytes op 23 juni 2008 16 reacties
Regelmatig onderschatten webdesigners de kracht van een footer onderaan een webpagina. Een footer is meestal het laatste waar bezoekers naar kijken en dus ook het laatste waar veel webdesigners aan denken. Een footer kan echter de kers op de taart zijn voor een creatief en goed ontwerp. Bovendien kan je vaak waardevolle informatie onder in de footer plaatsen, zoals contactgegevens, de klassieke copyright mededelingen of zelfs een compleet contactformulier.
Hoe zorg je er nu voor dat een footer altijd netjes onderaan het scherm blijft kleven ondanks de inhoud die op de pagina gebruikt wordt?
Plaats volgende code in een aparte stylesheet, bijvoorbeeld “screen.css”.
(Dit was één van de allereerste blogposts op GoodBytes en diende destijds vooral als referentie voor eigen gebruik. De CSS code is niet door ons bedacht, maar kan teruggevonden worden op deze link.)
CSS
*
{
margin: 0;
}
html, body
{
height: 100%;
}
#contentwrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px;
}
#footer, .push
{
height: 200px;
clear: both;
}
Bovenstaande CSS-code zorgt ervoor dat een footer van 200 pixels hoog (dit kan je natuurlijk wijzigen in je CSS) altijd onderaan het scherm zal hangen, ongeacht de inhoud die binnen de #contentwrapper staat.
xHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="screen.css" />
</head>
<body>
<div id="contentwrapper">
<p>Hier komt de content.</p>
<div class="push"></div>
</div>
<div id="footer">
<p>Footer content - copyright - contact details</p>
</div>
</body>
</html>
Bovenstaande xHTML-code zorgt ervoor dat de footer netjes onder de “contentwrapper” geplaatst wordt en dat de footer netjes op zijn plaats valt.
Enkele voorbeelden van footers die we onlangs gebruikt hebben:
Smashing magazine heeft bovendien een uitstekend artikel online staan met meer voorbeelden van creatieve footers. Enjoy en laat gerust een reactie achter met jullie eigen footerontwerpen.
Bron artikel
Over Joris Hens
Dit blog wordt onderhouden door Joris Hens, freelance webontwikkelaar en docent webtechnologie aan de Katholieke Hogeschool Mechelen. Met dit blog wil hij inspiratie en informatie delen over all-things web design. Volg Joris en GoodBytes op Twitter en op Facebook.
16 commentaren geserveerd
Hey Adriaan, dit artikel was 1 van onze allereerste posts op dit blog en diende destijds vooral als persoonlijke referentie. De code werd niet door ons bedacht. De link werd toegevoegd aan het artikel, thanks!