The “404 Page Not Found” error page is something we come across everyday. We all stumbled across those pages. I figured it would be nice to create a cool 404 error page to blend in with every website. I already implemented this in my Ajaxilicious project but I think it’s time to share it. It’s a nice technique and really simple. It’s so simple, I was surprised that nobody was using anything similar on the net. Anyway, let’s head on to the description.

From my point of view, a 404 page would be nice to exist as long as it doesn’t interfere with the website. So I thought a transparent message would be great. A message that floats above the main content and does not affect the layout or anything else. So let’s start with the coding:

The CSS:

#PageNotFound {
	cursor: pointer;
	position:absolute;
	left:0px;
	/* Pixels from the top you want your warning message */
	top:150px;
	text-align: center;
	color: #fff;
	font-size: 30pt;
	font-weight: bold;
	/* PNG Image with alpha transparency */
	background: url('/common/images/overlay.png') repeat;
	width:100%;
	/* z-index: Use a really big value so it will always be on top */
	z-index:100;
	margin: 0 auto;
	padding: 5px 0;
}

You also need to edit your .htaccess file. Just add

ErrorDocument 404 /index.php?show404=true

and then in your index add this HTML/PHP code:

< ? if ($show404) { ? >
< div id="PageNotFound" onclick="document.getElementById('PageNotFound').style.display='none';">404 Page Not Found.< br / >Click here to close this < /div >
< ? } ? >

The image used in this example can be found here

This works on Firefox 1.5+ and with a little bit tweaking it can work with MSIE. Since I don’t like MSIE, its ‘filters’ CSS property and its incapability to work with PNGs, I will simply stick to Firefox.

A working example (static HTML) can be found here.

That’s all! Hope you use it wisely!