Страница ошибки 404

Привет всем.  Давненько не доходили руки опубликовать пару интересных статей. Вел работу над блогом, очень много ковырял код, так как нашел много недочетов.

Да и видимо еще есть недочеты. Остановился пока на странице ошибки 404, о которой собственно и пойдет речь. Многие из вас часто наверно встречали сайты, на которых встречается такая непонятная ошибка с кодом 404.

А может вы перешли по статье, потому что у вас тоже такая ошибка на блоге и вы решили узнать, что такое ошибка 404. На самом деле это не такая страшная погрешность.

Возникает ошибка 404 вследствие удаления или изменения адреса, какой либо страницы на сайте. Или, например если в адресной строке вы вручную прописали адрес сайта и страницы и допустили ошибку, то высветиться ошибка с надписью 404.

Как оформить страницу ошибки 404 при помощи CSS

Оформление страницы ошибки 404 играет большую роль, так как пользователь перенаправляется на нее если он не нашел нужной страницы на сайте либо ссылка оказалась битой и т.д. Красивое оформление страницы ошибки 404 несет скорей эстетический характер, что бы люди запомнили, что вот на таком то сайте прикольная страница ошибки 404.

А вот информативное оформление желательно должно быть. Кстати если вы используете какой либо свой логотип, то можете его запатентовать. Об этом можно прочитать подробно на этом сайте http://patent-ok.ru/patent-na-logotip/

Так как с этой страницы мы можем перенаправить пользователя на другие внутренние страницы, а верней предложить ему, что у нас есть. Это может быть вывод ТОП-10 статей или вывод меню навигации и так далее. К тому же, красивая, информативно полезно оформленная страница ошибки 404 не отталкивает посетителя, что на нам на руку.

Я выбрал вариант с использованием навигационного меню и изображения, которое сообщает, что это страница ошибки 404. По умолчания страница имеет стиль стандартного шаблона, но мы можем изменить ее так, как нам вздумается. Даже если вы не владеете знаниями в CSS и HTML, то в интернете есть множество готовых меню и т.д., которые позволят создать простую страницу, уведомляющую об ошибке 404. Как это сделал я.

Для редактирования страницы, на хостинге найдите соответствующий файл. Он может находиться в папке с темой и называть как 404.php. Откройте этот файл при помощи  notepad ++ и удалите все, что там написано. Так же создайте пустой файл 404.css.

Это будет файл стилей для нашей страницы. Желательно, что бы оба файла лежали в одной директории. У нас есть два пустых файла. В первый файл мы будем вставлять нужную нам информацию, которая будет выводится на странице. В моем случае это верхняя строка меню и изображение с Гомером. Вот, что написано в файле 404.php

 
</pre>
<div class="navbar-inner">
<ul class="nav">
 	<li class="first"><a href="/">Главная</a>
<div class="rightBorder"></div></li>
 	<li><a href="/karta-bloga">Все публикации</a>
<div class="leftBorder"></div>
<div class="rightBorder"></div></li>
 	<li><a href="/moi-uslugi">Услуги</a>
<div class="leftBorder"></div>
<div class="rightBorder"></div></li>
 	<li><a href="/kak-nachat-delat-blog">Новичкам</a>
<div class="leftBorder"></div>
<div class="rightBorder"></div></li>
 	<li><a href="/kontatkty">Контакты</a>
<div class="leftBorder"></div>
<div class="rightBorder"></div></li>
 	<li class="active"><a href="#">Почему я вижу эту страницу?</a>
<div class="leftBorder"></div>
<div class="rightBorder"></div></li>
</ul>
<div class="soc-icons"></div>
</div>
<pre>

 
 Oops! Страница не найдена.
</pre>
<center><img class="alignnone size-full wp-image-2386" style="padding-top: 20px;" title="Страница не найдена." src="http://wpget.ru/wp-content/uploads/2013/01/page_4041.jpg" alt="" width="597" height="574" /></center>
<pre>

 


Как вы видите все просто. В <div> блоках находятся элементы меню навигации с ссылками, еще в одном  <div> блоке вывожу три кнопки социальных сетей. У каждого <div> блока есть свой класс, который нужен для того, что бы файл css, который мы подключили выше в строчке

знал, какой стиль приписывается какому <div> блоку. Так же простые теги типа title, в которых мы указываем заголовок страницы и изображение с паникующим Гомером в body страницы.

Далее нам нужно задать стиль для этой страницы. Для этого в файл 404.css нужно эти стили описать. В моем случае там написано следующее:


* {
 padding: 0px;
 margin: 0px;
 font-family: 'Tahoma';
 text-decoration: none;
}
body {
 width: 1000px;
 margin: 0 auto;
}

.navbar-inner {
 position: relative;
 min-height: 42px;
 background-image: url('../img/nav_bg.png');
 background-repeat: repeat-x;
 border: 1px solid #d4d4d4;
 border-top: none;
 border-left: none;

 -webkit-border-bottom-right-radius: 5px;
 -webkit-border-bottom-left-radius: 5px;
 -moz-border-radius-bottomright: 5px;
 -moz-border-radius-bottomleft: 5px;
 border-bottom-right-radius: 5px;
 border-bottom-left-radius: 5px;

 text-transform: uppercase;
 font-size: 12px;
 font-weight: bold;
}

.nav {
 float: left;
}
.nav > li {
 list-style: none;
 float: left;
 height: 42px;
 position: relative;
 border-right: 1px solid #c9c9c9;
}
.nav > li > a {
 padding: 14px 25px 14px;
 color: black;
 display: block;
}
.nav > .active > a,
.nav > .active > a:hover,
.nav > .active > a:focus,
.nav > li > a:hover {
 background-color: #cae285;
 background-image: -moz-linear-gradient(top, #cae285, #9fcb56);
 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#cae285), to(#9fcb56));
 background-image: -webkit-linear-gradient(top, #cae285, #9fcb56);
 background-image: -o-linear-gradient(top, #cae285, #9fcb56);
 background-image: linear-gradient(to bottom, #cae285, #9fcb56);

 border: 1px solid #9fcb56;
 border-left: none;
 border-right: none;
 border-color: #aec671 #9fbb62 #87ac4a;

 -moz-box-shadow: inset 0px 1px #d7e9a4;
 -webkit-box-shadow: inset 0px 1px #d7e9a4;
 box-shadow: inset 0px 1px #d7e9a4;

 padding: 13px 25px 14px;
}
.leftBorder, .rightBorder {
 display: none;
 position: absolute;
 width: 1px;
 height: 43px;
 background-color: #9fbb62;
 top: 0px;
 z-index: 1000;
}

.leftBorder {
 left: -1px;
}
.rightBorder {
 right: -1px;
}

.active .leftBorder,
.active .rightBorder,
.nav > li:hover > .leftBorder,
.nav > li:hover > .rightBorder {
 display: block;
}
.first, .first a {
 -webkit-border-bottom-left-radius: 5px; /* уголок снизу-слева */
 -moz-border-radius-bottomleft: 5px;
 border-bottom-left-radius: 5px;
}
.first a {
 border-left: 1px solid #d4d4d4;
}
.first.active, .first a:hover {
 border-left: 1px solid #9fbb62!important;
}
.first.active a:hover {
 border-left: 0px solid #9fbb62!important;
}
/*соц кнопки*/
.soc-icons {
 float: right;
 padding: 9px 7px 0 10px;
}
.soc-icon {
 float: right;
 margin-left: 4px;
 width: 24px;
 height: 24px;
 background-repeat: no-repeat;
}
.google {
 background-image: url('http://wpget.ru/wp-content/themes/mystique2/images/google.png');
}
.vkontakte {
 background-image: url('http://wpget.ru/wp-content/themes/mystique2/images/vkontakte.png');
}
.twitter {
 background-image: url('http://wpget.ru/wp-content/themes/mystique2/images/twitter.png');
}

После этого сохраняем файлы и загружаем на хостинг и наблюдаем изменения. Повторюсь, что внешний вид, а именно строка меню была найдена в интернете со всеми стилями, поэтому вы можете поменять ее на любой другой стиль. Можете на основе этого придумать свой стиль.  На мой взгляд, страница ошибки на моем блоге выглядит гораздо лучше, чем была. Кстати вы можете подойти к процессу креативно и написать что нибудь этакое 🙂