Как правило, вы не найдете на большинстве сайтов отдельных стилей для оформления посещенных ссылок, так называемого :visited псевдокласса. По правде сказать, это и не всегда надо. Но если структура сайта достаточно грамоздка, или вы часто используете списки (например, перечень статей), то будет не лишним предусмотреть вывод отдельного стиля для уже посещенных ссылок.
jQuery определенно набирает обороты и думаю, что уже скоро мы сможем в большей степени отказаться от столь некогда популярного флэша (ну хотя бы в таких примитивных вещах, как динамическое меню, смена картинок или текста).
Ничего сложного в данном уроке нет и займет он в среднем минут 10 (при чем у меня большая часть времени ушла на подготовку фона для примера - пришлось выверять с картой где какие города находят). Чтобы понять о чем речь - смотрим пример.
Отсутствующие изображения на вашем сайте могут показать вас или то, что вы предлагаете не с лучшей стороны. Со временем изображения по тем или иным причинам могут быть удалены без вашего ведома. В этом случае браузеры предлагают посетителю альтернативный контент. К несчастью у каждого браузера своё видение того, как этот контент представить и не всегда это выглядит лучшим образом.
В качестве альтернативного решения можно использовать jQuery и специально подготовленное изображение, которое будет отображаться вместо отсутствующих картинок.
Создайте изображение, подключите фреймворк и добавьте следующий код:
$(document).ready(function() {
$('img').error(function() {
$(this).attr({
src: 'missing.png',
style:'border:3px solid #999;width:144px;height:144px;'
});
});
});
Автор статьи - Alex Ilin
Проблема не то, чтобы достаточно распространенная. Но когда на нее натыкаешься, сначала приходится поломать голову, поискать в сети.. и можно не найти решения проблемы.
Суть в том, что если у Вас на сайте есть флэш, а рядом/над ним есть выпадающее меню или, например, какой-либо эффект на JavaScript, то flash будете перекрывать его, находиться поверх.
Чтобы сразу не кидаться в крайности и отказываться от флэш, идеи с меню или скрипта, предлагаю решению проблемы. Для flash добавляем следующие параметры
<param name="wmode" value="transparent">
А в embed добавляем
wmode="transparent"
Пример.
1 .Код до решения проблемы
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="125" height="125">
<param name="movie" value="images/filename.swf" />
<param name="quality" value="high" />
<embed src="images/filename.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="125" height="125">
</embed>
</object>
2. Код после решения проблемы
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="125" height="125">
<param name="movie" value="images/filename.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent">
<embed src="images/filename.swf" wmode="transparent"
quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="125" height="125">
</embed>
</object>
Больше ничего не потребуется.
Думаю все уже выучили, что семантически правильно представлять меню на сайте в виде списка. Собственно поэтому мы и продолжаем дальше практиковаться в его оформления (первая статья на эту тему была про древовидный список).
Меню на подобие книжного оглавления удобно, если вам требуется разнести по разным сторонам название раздела и, например, количество подразделов (на сайтах недвижимости эту может быть тип недвижимости и число объектов, в блогах - название раздела и количество тем в нем).
Не скажу, что мне каждый раз приходиться устанавливать вид курсора. Нет, за последние полгода данная техника пригодилась только два раза. Один раз - при работе с jQuery галереей, вторая раз - при работе уже со второй галереей (опять на jQuery), но это было больше для красоты.
Привожу подборку стилей по определению вида курсора. Вдруг кому понадобится.
В первой колонке дан код для css, во второй - вид курсора при данном стиле, в остальных трех - каким браузером поддерживается.
| CSS | Пример | IE6 | Moz | Firefox |
|---|---|---|---|---|
| cursor: auto | · | X | X | X |
| cursor: default | · | X | X | X |
| cursor: hand | · | X | ||
| cursor: pointer | · | X | X | X |
| cursor: crosshair | · | X | X | X |
| cursor: move | · | X | X | X |
| cursor: text | · | X | X | X |
| cursor: vertical-text | · | X | X | |
| cursor: wait | · | X | X | X |
| cursor: progress | · | X | X | |
| cursor: help | · | X | X | X |
| cursor: n-resize | · | X | X | X |
| cursor: s-resize | · | X | X | X |
| cursor: e-resize | · | X | X | X |
| cursor: w-resize | · | X | X | X |
| cursor: ne-resize | · | X | X | X |
| cursor: sw-resize | · | X | X | X |
| cursor: se-resize | · | X | X | X |
| cursor: nw-resize | · | X | X | X |
| cursor: all-scroll | · | X | ||
| cursor: col-resize | · | X | X | |
| cursor: row-resize | · | X | X | |
| cursor: no-drop | · | X | ||
| cursor: not-allowed | · | X | X | |
| cursor: url() | X |
Ошибка 404 означает, что браузер не может найти на сервере запрашиваемый файл или страницу.
Наиболее распространенные причины пребывания посетителей на странице 404:
Старайтесь избегать ошибки 404, она отпугивает посетителей . Наличие неработающих ссылок не лучшим образом скажется на репутации вашего ресурса. И уж коли посещение началось вовсе не оттуда, где человек хотел оказаться - постарайтесь смягчить первое неудачное впечатление.
Примеры и этапы создания страницы ошибок
Очень часто на порталах техподдержки, бизнес-консультирования и прочего онлайн-саппорта, можно видеть ссылки на ICQ или Skype для живого общения с консультантом.
Недавно и мне понадобилось проставить такие ссылки в одном из проектов. Чтобы решить, казалось бы, такую простую задачу, пришлось поискать ответы в google и отсортировать кучу ненужной информации. Найти сразу все ответы в одном месте не получилось, поэтому восполню этот информационный пробел в своём блоге.
Как поставить ссылку на скайп и аську
Для того, чтобы поменять фоновый цвет при выделении текста со стандартного на желаемый, будем использовать псевдо-элемент ::selection (с псевдо-классом :last-child мы уже сталкивались ранее, когда создавали древовидный список).
К сожалению, ::selection используется только в CSS3 и поддерживается далеко не всеми браузерами, на данный момент - FireFox, Safari и Opera 9.5
Плюс этого приема в том, что можно логически выделять на страницах нужные блоки. Вот есть у вас сайт с автомобильной тематикой, продвигаете вы внутреннюю страницу (или даже рекламируете ее с помощью контекста), чтобы компенсировать потраченные деньги, нужно, чтобы посетители конвертировались в покупателей. Для этого мы берем какой-то логически законченный блок текста, пусть он будет о плюсах покупки автомобилей в Мурманске. Чтобы привлечь к нему внимание, надо его аккуратно выделить и стилизовать. Вот в этом случае на и поможет фоновая заливка. дело в том, что люди при чтении текста имеют привычку выделять текст по мере чтения. Просто так удобней воспринимать. А вот теперь представьте, что помимо просто фоновой заливки, клиенты заметят при выделении не стандартный синий с белым, а фон, стилизованное под общую цветовую гамму сайта.
1. Как сделать, чтобы текст ссылки был одного цвета, а подчеркивание другого?
<html>
<head>
<style type="text/css">
a {color:red;}
a span {color: blue;}
</style>
</head>
<body>
<a href="#"><span>Текст ссылки</span></a>
</body>
</html>