Reinventing the 404 Error Page

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!

This entry was posted on Thursday, January 18th, 2007 at 12:53 am and is filed under mariostziortzis. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

2 Responses to “Reinventing the 404 Error Page”

  1. 1 Iacovos Constantinou said:

    Nicely done Marios! But I strongly believe that in some cases 404 error pages should provide more information to the eventual user. Consider a misspelled/wrong permalink: useful information could be a list of the posts published on the same date and/or posts with similar title.

    That’s a kind of reminder for me, since I haven’t implement it yet in my blog! Irony, huh? :)

    January 18th, 2007 at 4:25 pm
  2. 2 Marios Tziortzis said:

    Heh, you are so right. A 404 page would also be nice to provide some related links in case the user followed a bad link. Maybe I’ll implement that in here. Thanks

    January 27th, 2007 at 10:01 pm

Leave a Reply