GetInfo.Ru – Компьютерная библиотека
Последние поступления
Как выбрать систему управления базы данных
Базы данных03/09/14
Этапы загрузки UNIX (в схеме)
Unix27/03/12
Gatewall Antispam: тотальный контроль электронной почты
Спам21/04/11
Мастер-класс: создаем Интернет-магазин (Часть 1)
Обзоры ПО20/04/11
CorelDRAW Graphics Suite X5: Что нового?
Обзоры ПО20/07/10
Добавить статью
Самые читаемые материалы
Создание рамок(16086)
Особенности верстки веб-страниц(12757)
Правила грамотной верстки сайта(9594)
Как оформить таблицу?(9578)
Несколько слов о <META HTTP-EQUIV...>(8694)
Всего статей: 793Всего авторов: 364Подразделов: 47Добавлено за сутки: 0
Статьи  СТАТЬИ Форум  ФОРУМ Рейтинг  РЕЙТИНГ Поиск  ПОИСК Контакты  КОНТАКТЫ
» Главная » HTML » Разделитель HR и его эмуляция

Разделитель HR и его эмуляция


Александр Шуркаев
alshur@narod.ru
http://htmlcoder.visions.ru/

Старый добрый hr (horizontal rule) нередко используется для смыслового разделения контента. Но он зачастую плохо вписывается в дизайн конкретного сайта, поэтому уже давно у него существуют атрибуты noshade, size, align, color (детище Miscrosoft, нет в спецификации HTML 4) и width. Все перечисленные атрибуты являются deprecated, вместо них предпочтительно использовать CSS.

Тут возникают проблемы. Дело в том, что на данный момент даже самые последние браузеры по-разному, скажем, воспринимают задание цвета hr через CSS. Согласно докам на сайте Opera, цвет hr якобы определяется не свойством color (как в Internet Explorer 4+ и Netscape Navigator 6+), а свойством background. Ха, как бы не так! На практике оказалось, что Opera 5.x ни в какую не хочет окрашивать горизонтальный разделитель ни через свойство color, ни через background:

hr {
background : #CCCCCC;
color : #CCCCCC;
height : 1px
}

Из всего вышеприведённого Opera правильно понимает только height : 1px.

Но недавно мне подсказали, как заставить Opera 5.12 и выше окрасить-таки hr в нужный цвет. Делается это добавлением свойства border-top:

hr {
background : #CCCCCC;
border-top : 1px solid #CCCCCC;
color : #CCCCCC;
height : 1px
}

Полученный стиль правильно работает в Internet Explorer 4+, Netscape Navigator 6+, Opera 5.12 и выше. Netscape Navigator 4.x, разумеется, плевать на стилевое определение hr.

Ну ладно, с CSS похоже разобрались. Поскольку же эта заметка помещена в раздел «HTML», то я хочу привести несколько альтернативных вариантов задания разделителей. Работают они в более широком диапазоне браузеров.

Условие задачи: с помощью одного только HTML смастерить горизонтальный разделитель, который бы занимал 100% ширины окна, высота разделителя должна быть 1 пиксель, цвет — серый (#CCCCCC).

1й вариант решения:

<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#CCCCCC" height="1" nowrap="nowrap"><spacer type="block" height="1" /></td></tr></table>

2й вариант решения (в NN6 высота разделителя получается 2 px, а не 1):

<table width="100%" cellspacing="1" cellpadding="0" border="0"><tr><td bgcolor="#CCCCCC"><table cellspacing="0" cellpadding="0" border="0"><tr><td></td></tr></table></td></tr></table>

3й вариант решения:

<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td bgcolor="#CCCCCC"><img src="/img/null.gif" width="1" height="1" alt="" /></td></tr></table>

 
28.01.2003
Версия для печати Версия для печати Запомнить ссылку Запомнить ссылку
Ваша оценка:  1   2   3   4   5     

 О проектеПерепечаткаАвторамПартнерыО нас пишут
Наверх
©2003—2007. GETINFO.RU. ВСЕ ПРАВА ЗАЩИЩЕНЫ.