Приветствую Вас Прохожий | RSS Вторник, 06.12.2016, 13:14
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 19
Гостей: 17
Пользователей: 2
MaDaRa, LESIYI



Главная » Файлы » Скрипты для uCoz » Скрипты Разное

Линия div отреза

Линия div отреза Линия, div, отреза
В идеале, линия должна формироваться единственным тегом <div>, а всё остальное возлагается на стили, включая вывод рисунка и надпись.

Для начала в HTML вставим основу линии.

Code
<div class="line"></div>

Поскольку ножницы выводятся под линией, то воспользуемся свойством border-top. Если бы рисунок выводится над линией, соответственно потребуется border-bottom. Сам рисунок ножниц имеет высоту 37 пикселов, отнимем один пиксел на толщину линии, разделим полученное значение пополам и получим 18 пикселов видимой части. Это число будет высотой блока и значением для сдвига фона вверх.

Code
.line {
  border-top: 1px dashed #000; /* Параметры линии */
  height: 18px; /* Высота блока */
  background: url(images/scissors.png) no-repeat 10px -18px; /* Параметры фона */
}

В свойстве background указывается путь к рисунку, отменяется повторение фона и задаётся сдвиг вправо на 10px и вверх на 18px. Сдвиг по вертикали нужен, потому что у нас на картинке целые ножницы, а не их половинка (рис. 2).

Рис. 2. Изображение ножниц для линии

Осталось добавить текст под линией. Воспользуемся псевдоэлементом :after, в сочетании со свойством content он позволяет выводить текст после элемента. Добавляем :after к классу line.

Code
.line:after {  
  content: "Линия отреза";
}

Окончательно выравниваем текст по центру линии через свойство text-align и настраиваем вид текста (пример 1).

Пример 1. Линия

Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Линия отреза</title>
  <style type="text/css">
  .line {
  text-align: center; /* Выравниваем текст по центру */
  border-top: 1px dashed #000; /* Параметры линии */
  height: 18px; /* Высота блока */
  background: url(images/scissors.png) no-repeat 10px -18px; /* Параметры фона */
  }
  .line:after {  
  content: "Линия отреза";  
  font-family: Arial, sans-serif; /* Рубленый шрифт для надписи */
  font-size: 12px; /* Размер шрифта */
  vertical-align: top; /* Выравнивание по верхнему краю */
  }
  </style>
  </head>
  <body>
  <p>Текст до</p>
  <div class="line"></div>
  <p>Текст после</p>
  </body>
</html>

Браузер IE7 не поддерживает псевдоэлемент :after, поэтому текст под линией в нём выводиться не будет.

На примере простого декоративного элемента вроде линии показано соблюдение принципа разделения оформления и содержания. Стиль линии, включая текст, который в действительности не является частью страницы, а относится к линии, формируется через CSS. В коде HTML остаётся только пустой <div> с классом line. В итоге мы можем легко модифицировать нашу линию, вообще не затрагивая HTML-код. К примеру, заменить рисунок ножниц или вывести текст сверху, а не снизу линии.

Автор\Источник: не указан или не известен!

Для того что бы скачать архив необходимо зайти на сайт как пользователь.

Дополнительные скрины:
Линия div отреза

Просмотров: 2283 | Рейтинг: 4.5/2 | |Категория: Скрипты Разное | Добавил: мир | Дата: 23.02.2011 | Скачали: 0 | Теги: отреза, линия
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Файловик. Уникальные те...

0

2 Куплю сайты в индексе Я...

1

3 Куплю сайты с ТИЦ/PR (п...

9

4 Предлагаю услуги для ан...

0

5 Предлагаю услуги по про...

0

6 Комплексный прогон сайт...

51

7 Сайт онлайн фильмов на ...

1

8 Проблема с таблицей

9

9 Отредактировать фото

2

10 Уже все перепробовал )

1


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru