Новое
Новое для uCoz	Новое на форуме
+ Скрипт анонимного чата (ajax) + The Room Two + Wild Blood + Botanicula / Ботаникула + Король Математики (2013) + Кнопка рейтинга + и -	+ отбросы смотреть онлайн + Marlinnkalmes + проститутки иркутска + споры страховыми компаниями + купить водку ельцин - Белая Церковь-Полтава-Харьков + FedorTuh
Новое для Photoshop	Новые Программы
+ Календарь на 2016 год - Прикольная обезьянка с фруктом + Фото шаблон - В синем платье у Порше 918 + Шаблон для фото - Интервью актера + PSD шаблон для мужчин - Магнат у себя дома + Photoshop шаблон - В гламурной шляпе с цветами + Фотошаблон для фото - С новым годом от снегурки	+ 7-Zip 4.65 + Ресурс для продаж + Сервис Google Data Highlighter стал доступным на русском языке + Internet Business Promoter 11.6 Business Edition + Baghdad Central: Desert Gunner–convoy + Orbit Downloader 4.0.11 менеджер загрузок

Интересное

Скачать Делаем текстовые блоков над изображениями

Добавлено: 11.02.2010 | Источник: http://vsebudetok.net

Схема

Посмотреть ДЕМО

HTML

Code

<div class="image">
<img src="images/3754004820_91a5c238a0.jpg" alt="" />
<h2>ВсеБудетОк:<br />а может и нет</h2>
</div>

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

CSS

Code

.image {
  position: relative;
  width: 100%; /* for IE 6 */
  }
h2 {
  position: absolute;

  top: 200px;
  left: 0;
  width: 100%;
  }

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

Давайте добавим еще один (span) слой в тег h2:

Code

<h2><span>ВсеБудетОк:<br />а может и нет</span></h2>

Теперь давайте используем этот (span) слой для стилизации текста и фона:

Code

h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}

Проблема

Когда к инлайновому элементу мы добавляем перенос строки, он сразу же переносится на другую строку без отступа. Padding в таком случае не помогает.

Для решения этого мы добавим несколько span с обоих сторон элемента <br /> для добавления отступа.

Code

<h2><span>ВсеБудетОк:<span class='spacer'></span><br /><span class='spacer'></span>а может и нет</span></h2>

В стилях пропишем отступ:

Code

h2 span.spacer {
padding:0 5px;
}

Исправляем семантику

На данном этапе дизайн готов, но при этом было использовано много дополнительных HTML элементов. А именно много теговspan. jQuery может нам помочь с этим. Убираем все span из разметки и динамически их добавляем вот так:

Code

$(function() {
  $("h2")
  .wrapInner("<span>")
  $("h2 br")
  .before("<span class='spacer'>")
  .after("<span class='spacer'>");
});