Популярные статьи:
Архив статей:
Реклама:
Беременность, педиатрия для мам, беременность статьи, все для молодых мам.
Разделитель HR и его эмуляция
Старый добрый 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>
Автор статьи: http://htmlcoder.visions.ru/
Тут возникают проблемы. Дело в том, что на данный момент даже самые последние браузеры по-разному, скажем, воспринимают задание цвета hr через CSS. Согласно докам на сайте Opera, цвет hr якобы определяется не свойством color (как в Internet Explorer 4+ и Netscape Navigator 6+), а свойством background. Ха, как бы не так! На практике оказалось, что Opera 5.x ни в какую не хочет окрашивать горизонтальный разделитель ни через свойство color, ни через background:
Код CSS:
hr {
background:#CCCCCC;
color:#CCCCCC;
height:1px
}
Из всего вышеприведённого Opera правильно понимает только height:1px.
Но недавно мне подсказали, как заставить Opera 5.12 и выше окрасить-таки hr в нужный цвет. Делается это добавлением свойства border-top:
Код CSS:
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й вариант решения:
Код HTML:
<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):
Код HTML:
<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й вариант решения:
Код HTML:
<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>
Автор статьи: http://htmlcoder.visions.ru/