Многие публикации содержат помимо текста - картинки, графики всевозможные, выполненные виде превьюшек. Для более детального ознакомления с графикой придумано много способов и основном для этих целей юзается 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;}

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

Что такое псевдокласс :target с радостью расскажет любой поисковик, автора trifler.ru больше интересует практическая сторона вопроса.

:target позволяет довольно простыми средствами создать меню с вложениями, в данном случае с одним, только на html и css.

К сожалению поддержка :target в браузерах IE6(7,8) отсутствует, для них написан Java Script, автор – SelenIT.

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

• Вариант меню без скрипта
• Со скриптом

Минимальная поддержка в IE6(7,8) имеется.

Правда, нет подсветки заголовка отрытого раздела.

Также при отключенном скрипте, меню свернуто, что не айс, но пользователь должен осознавать, что в этом случае он всегда многое теряет, так как сложно сегодня представить web-станицу без Java Script.

Одним из достоинств предложенного решения, является отсутствие фиксированной высоты вложения, что встречается сплошь и рядом у многих меню или закладок сделанных с использованием псевдокласса :target

*******

P.S. Ветка на форуме. Обновленный пример меню, автор скрипта - mishka