Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
YouTube 150 Подписчики
Telegram 241 Подписчики
VK 0 Подписчиков
Маркетер
Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • HTML

«Резиновая» рамка с фигурными углами

  • 27.07.2005

Автор статьи:

Оформление блока информации на сайте в созвучные вашему вкусу рамки средствами HTML и GIF.

Нам понадобится табличка размером 3 на 3. В серых ячейках будут хитрости так называемой верстки, а в белой — содержание.
>

1 2 3
4 5 6
7 8 9


Теперь позаботимся об эстетике. Для рамки понадобятся четыре угла и четыре стороны. Вот они в 10-кратном увеличении:





Попробуем скрестить картинки с таблицей. Делать это нужно осторожно. Углы ставить картинками, а стороны — фоновыми рисунками. Фоновые рисунки называются «background», но для экономии места пусть будут просто «bg». Неплохо также указать одной из средних ячеек ширину 100%, чтобы подпереть крайние столбики.

img bg img
bg Содержание bg
img bg img


Убираем img, bg и «строительные леса» (границу таблицы). Получаем готовую рамку.

Да, оно самое


В Netscape выглядит не очень (если у вас Netscape, смотрите предыдущий пример). Измена! Измена! Netscape унес зайчат! Как ни бьешься, сделать столбики шириной скажем 1 пиксель или 3 не получается. Ширину крайних столбцов в Netscape можно охарактеризовать как 1%. Для передачи всего ужаса, предстающего глазам пользователя, в примере ниже в столбики всунуты распорки.

Контент, прости Господи!


А делать что-то надо. Потому как ждать пока Netscape вымрет времени нет. расширяем фоновые рисунки в крайних столбиках (ячейки 4 и 6), чтобы не размножались так активно в появляющихся пустотах. Кстати, как их не расширяй, найдется разрешение, при котором вертикальная линия повторится. Выбирайте такую ширину, чтобы этот досадный глюк не проявился при жизни (сайта, конечно). В левом крайнем столбике сверху и снизу (ячейки 1 и 7) ставим фоновые рисунки, чтобы не обрывались горизонтальные линии.

img + bg  bg img
bg Содержание bg
img + bg  bg img


Получаем рамку, которая хорошо выглядит в Explorer:

информация


…и не так плохо выглядит в Netscape — становится чуть уже 100%. Где-то на тот неубиенный 1%. Если считать такой результат приемлимым, то красная армия победила!

Добавим для нашей рамки функцию суперзагрузки. Оговорюсь, что не для каждой рамки это подойдет и неизвестно, насколько суперзагрузка понравится поклонникам Netscape. Но если есть желание поразить пользователя рамкой, появляющейся одновременно со своим содержанием, то стоит попробовать.

Раскрасим ячейки 2, 4, 6 и 8 цветом рамки с помощью «скоростного» атрибута bgcolor.

1 2 3
4 Шум 6
7 8 9


Как бы и все. Теперь надо найти самое медленное подключение и пообновлять страницу. Смотрите, как замечательно проявляется рамка:

Неважно что


И напоследок два слова об интуиции. Чувствую, что, возможно, надо делать фоновые картинки границ подлиннее. Места занимать они слишком много не будут. Но не исключено, что браузер станет меньше тормозить, прорисовывая фон. Если верите в такое, то поправьте фоновые изображения для сторон рамки, насколько позволяет совесть.





Теперь у вас есть такая, как вам нравится, рамка. Ширину ей можно при необходимости регулировать с помощью атрибута width таблицы. Пожалуй все. Хотя нет. Если в таблице убрать верхний и нижний ряды, то получится решение для вертикальных разделителей. Нужная вещь для страниц с колонками. Живьем можно посмотреть рамку, использованную в качестве примера, на сайте www.soford.com.


Спасибо за внимание.

alexvolkov

Предыдущий материал
  • Управление и организация бизнеса

Гимн открытому коду.

  • 27.07.2005
  • Алексей Волков
Read More
Следующий материал
  • Кодирование

Красивые поля ввода

  • 28.07.2005
  • Алексей Волков
Read More
Вас также может заинтересовать
Read More
  • HTML

Оптимизация. Важность тега TITLE

  • Алексей Волков
  • 30.11.2009
Read More
  • HTML

Советы начинающему верстальщику HTML

  • Алексей Волков
  • 25.11.2009
Read More
  • HTML

HTML — Долой тег hr из html разметки

  • Алексей Волков
  • 14.11.2009
Read More
  • HTML

Создай свою Web-страницу за пять минут!

  • Алексей Волков
  • 31.03.2005
Read More
  • HTML

Блокнотик с подсветкой

  • Алексей Волков
  • 31.03.2005
Read More
  • HTML

HTML-редактор? Вот и редактируй!

  • Алексей Волков
  • 21.08.2003
Read More
  • HTML

Выбираем HTML-редактор

  • Алексей Волков
  • 14.08.2003
Read More
  • HTML

HTML в студию

  • Алексей Волков
  • 05.05.2003

Добавить комментарий

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

Свежие посты
  • Дайджест постов Сергея Людкевича
    • 12.09.24
  • Как юристы тормозят бизнес
    • 30.08.24
  • Продвижение оптовых кампаний в Яндекс Директ
    • 06.03.24
  • Cарафанное радио
    • 13.01.24
  • 5-55: История компании
    • 01.03.23
Маркетер
  • О проекте
  • Информационное спонсорство
  • Рекламным агентствам
  • Ссылки
(с) ООО "Маркетер". Официальный сайт. Маркетер: Статьи про рекламу, маркетинг, public relations, интернет

Введите ключевые слова для поиска и нажмите Enter