Продолжаем мини-сериал посвященный псевдоклассу :focus. В первой части рассмотрен частный случай - вывод графики во всплывающем слое при клике на преьюшку.

Воспользуемся описанным там приемом.

html

Вариант для выделенного слова или фразы:

<div class="cliktxt">
Текст...
  <span tabindex="1" title="">слово</span>
Много текста...
  <dl>
    <dt></dt>
    <dd>
      <img src="ХХХ.xxx">
      <p>Поясняющий текст</p>
    </dd>
  </dl>
</div>

Вариант для сноски:

<div class="cliktxt">
Текст...
  <sup tabindex="1" title="">[1]</sup>
Много текста...
  <dl>
    <dt></dt>
    <dd>
      <img src="ХХХ.xxx">
      <p>Поясняющий текст</p>
    </dd>
  </dl>
</div>

Основной блок с классом "cliktxt" заменяет стандартный параграф, ему назначены такие же поля и отступы, чтобы указанный контейнер ничем не выделялся от остального текста.

Как видно из html-кода, отсутствует практически всегда полагающийся в таких случаях тег <a>, что наклыдывает определенные ораничения и ведет к усложнению html-конструкции, а также не работоспособности в браузерах IE6(7), но в этом и заключается главный смысл данного извращения :)

Одной из причин исключение тега <a> из html, является помощь поисковикам, которые любят добиться во все ссылки, даже с пустым url, находящиеся на web-странице, мы же не даем им ни единого шанса куда-то там уйти и возможно уже никогда не вернуться. Не стоит забывать и о странностях "Хитрых контор" :)

css

.cliktxt {margin:15px 25px 15px 20px;padding:0px 0;}
.cliktxt span,.cliktxt sup {color:#a00;cursor:pointer;outline:0;}
.cliktxt span:hover,.cliktxt sup:hover {color:#00a;}
.cliktxt dl {margin:0;padding:0;display:none;}
.cliktxt dl dd {
  background:#ddd;border:#000 1px solid;
  margin:0;padding:7px 4px;width:300px;
  position:fixed;top:1%;left:18%;z-index:100;
}
.cliktxt dl img {
  border:#000 1px solid;float:left;
  margin:7px 8px 0;width:140px;height:auto;
}
.cliktxt dt {
  background:#ccc;border:#000 1px solid;
  opacity:0.2;filter:alpha(opacity=20);z-index:100;
  position:fixed;top:0;right:17%;bottom:0;left:17%;
}
.cliktxt :focus + dl {display:block;}
.cliktxt dd p {font:11px/1.2 arial;margin:0 10px;padding:4px 0;}

В стилях нет ничего особенного, все легко настраивается, плюс полная независимость предлагаемого от любых движков, простейшая интеграция в любой текст, любой web-страницы. Стили загоняются в основной файл css, html хранится под рукой и по мере необходимости выбранный вариант вставляется в тело поста, далее по образцу и подобию в соответствующие места добавляется текст, прописывается путь к графике, если она будет использована, в противном случае удаляется тег <img> и все.

Пример использования со словом находится в третьем абзаце.

Тест страница.

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

Автор сего блога ни разу не программист и ему проще сваять нечто подобное на чистом html и css.

Рассматриваем частную задачу, а именно - есть картинка, клик по ней не отправляет посетителя на новую страницу, он открывает туже картинку (может быть иной) в этом же окне без перезагрузки браузера, клик по любой точке открывшегося слоя все возвращает в исходное состояние.

html

<div class="clicimg">
  <img tabindex="1" src="XXX.xxx">
  <dl>
    <dt></dt>
    <dd><img src="XXX.xxx"></dd>
  </dl>
</div>

css

.clicimg {margin:10px 25px 0 20px;}
.clicimg img {
  border:none;cursor:pointer;
  display:block;outline:0;width:200px;height:auto;
}
.clicimg dl {display:none;}
.clicimg dl dd {
  background:#ccc;cursor:pointer;position:fixed;
  top:5%;bottom:5%;left:20%;right:20%;z-index:100;
  vertical-align:middle;width:600px;text-align:center;
}
.clicimg dl img {
  border:#ccc 1px solid;margin:4px auto;width:470px;height:auto;
}
.clicimg dt {
  background:#000;opacity:0.4;filter:alpha(opacity=40);
  position:fixed;top:0;left:0;z-index:1;width:100%;height:100%;
}
.clicimg :focus + dl,
.clicimg :active + dl {display:block;}
.clicimg dl:hover {display:block\0/;}

Какой-то текст

Много текста...

Пояснений ни к html-коду, ни к стилям не предусмотрено, все достаточно очевидно и прозрачно. Настройки параметров, как в исходном состоянии, так и во всплывающем слое достаточно просты и обладают соответствующей гибкостью для любой разметки web-страницы.

Есть проблема центрирования картинки по вертикали во всплывающем слое, но предложенное решение лишь только демонстрация возможностей "Каскадных таблиц стилей", позволяющих не использовать JavaScript без необходимости и может пригодиться всем тем, кто далек от программирования или владеет им на уровне метода "научного тыка" :)

Все работоспособно в современных браузерах.

В IE8 после клика на любую точку всплывающего слоя, необходимо вынести курсор мыши за пределы рабочей области окна браузера.

IE6(7) отдыхают :)

Демо-пример

К плюсам можно отнести отвязку от движка CMS.

Может быть актуальным для Gold Shop Lasto при оформлении лотов магазина насыщенных графикой. Простое копирование html-конструкции в тело лота и размещение стилей в оснофном файле стилей во многом упростит работу web-мастера по предоставлению более детальной информации о товаре.

При просмотре html-кода того или иного ресурса, всегда обращаю внимание на форматирование текста контентной части web-страницы. Что удивительно, в большинстве случаев, многие совершенно не используют возможности «Каскадных таблиц стилей».

Об этом и хочется поговорить.

Что очень часто приходится лицезреть?

Картинка до смешного проста - текст разбит тегами:

<p>Текст...</p>
<p>Много текста...</p>
<p>И снова текст...</p>

И вся эта радость вместо того, чтобы задать для тега <p> в таблице стилей соответствующие поля и отступы:

p {margin:XXpx XXpx;padding:XXpx XXpx;}

приобретает лишенного всякого смысла вид:

<p>Текст...</p><br>
<p>Много текста...</p><br>
<p>И снова текст...</p><br>

Кстати тег <br> может находиться и внутри тега <p> перед его закрывашкой, что в общем-то все равно. Казалось бы ну и что в том особенного, как известно на вкус и цвет...

Но меня заинтересовал другой вопрос, а сколько, же в пикселях на самом деле высота тега <br>?

Эксперимент был проведен тут же, и выяснилось, что высота тега <br> приблизительно составляет 18px.

Осталось решить, как оформить запись для тега <p> в таблице стилей. На самом деле тут есть нюанс, связанный с margin, лучшим оказался такой вариант:

p {margin:0 XXpx;padding:9px 0;}

Попутно было установлено, что один неразрывный пробел, энным количеством которого создают красную строку в параграфе, имеет ширину в 3px.

Оптимальное задание стилей для параграфа может быть таким:

p {margin:0 XXpx;padding:9px 0;text-indent:24px;}

На вопрос, как быть, если на ресурсе есть не один десяток постов и удалять тег <br> после включения в файл стилей предлагаемой записи для <p> в ручную лениво, могу посоветовать попробовать такой трюк:

br {display:none;}

или

p br {display:none;}

Имеет право на жизнь, но надо смотреть, что из этого выйдет :)