Новое
Новое для uCoz	Новое на форуме
+ Новый переключатель страниц для ucoz + Прикольные флэш часы для сайта + Красивый поиск по сайту + Блок - Помоги сайту + Очень красивый мини профиль + Скрипт WebMoney для uCoz	+ Мини-профиль + Темный мини-чат для uCoz + Новый отличный поск по сайту + Красивое меню для сайта Ucoz + Информер популярных материалов + Плеер для проигрывания мп3 на сайте
Новое для Photoshop	Новые Программы
+ Свадебное поздравление - Наказ жениху 1 + Шаблон для фотомонтажа - парень с машиной + Летняя детская рамка для фотошопа – Как то летом на лужку + Кисти для фотошопа в виде разделителей + Мужской шаблон для фотошопа - Байкер + Мужской шаблон для фото - бизнесмен	+ ProgDVB 6.23.2 (x32x64) Rus + Fort Boyard + ICQ чат + NEW! Генераторы Gold ключей для файлообменников v 2.0 + Daemon Tools Lite 4.35.5 + Рекламный Фильтр - "it is not advertising".

Интересное

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

Добавлено: 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'>");
});