Ontwerp een 404 pagina met CSS

Een 404 pagina zou je normaal gezien nooit mogen tegenkomen. Als je toch op zo’n pagina terecht komt, is het natuurlijk leuker als je een mooie en duidelijke pagina ziet, dan een lelijke standaard 404 pagina. In dit artikel zal ik jullie tonen hoe je met CSS een mooie 404 pagina kan maken. Hier zie je het voorbeeld van wat wij zullen maken.

<h1>404 - Pagina niet gevonden</h1>
 
<p>De pagina die u probeerde te bezoeken bestaat niet of heeft nooit bestaan. Waarschijnlijk hebt u de URL verkeerd ingevoerd of u hebt op een dode link geklikt. U kan nu gewoon terug gaan naar de <a href="http://csslabs.be">home pagina</a>.</p>
 
<p class="bg">404</p>

In het voorbeeld kan je zien dat de css niet in een apart bestand staat, maar gewoon tussen de head tags. Dit doen we omdat we zeker willen zijn dat die 404 pagina wel voor de volle 100% werkt. De HTML van de pagina zit heel eenvoudig in elkaar, daarom bespreken we alleen de CSS code.

* {
margin:0;
padding:0;
}
body {
padding:40px;
}
h1 {
font:normal 17px Arial, Helvetica, sans-serif;
color:#bf1b05;
padding-bottom:3px;
}
p {
font:12px/20px Arial, Helvetica, sans-serif;
color:#424242;
width:340px;
}
a {
color:#2273b2;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}

Deze blok code hierboven is eigenlijk heel eenvoudig. Hij zorgt er gewoon voor dat alles netjes op zijn plaats staat en er goed uitziet. Hieronder begint het echte werk.

p.bg {
font:400px Georgia, "Times New Roman", Times, serif;
color:#f4f4f4;
position:absolute;
z-index:-5;
top:0;
left:0;
margin-top:-140px;
}

De eerste twee regels zorgen gewoon voor de opmaak. Position absolute zorgt er voor dat we de tekst gemakkelijk kunnen positioneren. Z-index geven we een negatieve waarde zodat de tekst onder alles staat. Met top nul en left nul zorgen we ervoor dat de tekst links boven komt te staan. Ten slotte gebruiken we margin-top om er voor te zorgen dat de tekst staat zoals we willen. Dit is gewoon even zoeken. Je moet enkele waarden proberen tot het goed staat.