Делаем красивый горизонтальный разделитель (hr)
часто используется
для того, чтобы разделить контент в смысловом значении. Но также часто
он не очень хорошо вписывается в дизайн и структуру сайта. Именно
поэтому в нём уже давно не существует таких атрибутов как size,
color,
noshade,
align
и width.
Все эти атрибуты — deprecated, и вместо них лучше
использовать таблицы стилей CSS.
Сразу начну с проблемы. Все дело в том, что даже самые последние
браузеры по разному воспринимают цвет разделителя hr,
заданный через CSS. Если обратиться к документации на сайте Opera, то
их браузером цвет определяется не свойством color,
а свойством
background.
Но на практике оказалось совсем по другому.
Браузер Opera не окрашивается горизонтальный разделитель ни
через background,
ни через color.
hr {
background
: #CCCCCC;
color
: #CCCCCC;
height
: 1px
}
Из всего из этого Opera правильно распознаёт только атрибут
height
: 1px .
Однако пару дней назад мне всё-так удалось закрасить горизонтальный
разделитесь в нужный мне цвет. Я сделал это через добавления свойства
border-top
:
код:
hr {
height
: 1px
background
: #CCCCCC;
color
: #CCCCCC;
border-top
: 1px solid #CCCCCC;
}
Этот стиль работает правильно в Netscape
Navigator 6+, Internet Explorer 4+, Opera 5.12 и выше. Что
касается Netscape Navigator 4.x, то плевать он хотел на это
стилевое определение hr.
Ну всё, с CSS мы разобрались. Но я всё же решил поэкспериментировать и
закрасить горизонтальный разделитесь только с помощью HTML-разметки.
Приведённые ниже коды работают в очень широком диапазоне браузеров.
Что
хотим сделать:
С помощью одной только HTML-разметки вывести горизонтальный
разделитесь, который растягивался бы на всю ширину окна, был высотой в
один пиксель и имел серый цвет.
Решение первое:
Код:
<table
border=»0″
width=»100%» cellpadding=»0″ cellspacing=»0″>
<tr>
<td
height=»1″ bgcolor=»#CCCCCC»
nowrap=»nowrap»>
<spacer type=»block»
height=»1″
/>
</td>
</tr>
</table>
Решение второе:
Код:
<table
border=»0″ width=»100%» cellspacing=»1″ cellpadding=»0″>
<tr>
<td
bgcolor=»#CCCCCC»>
<table
cellspacing=»0″ cellpadding=»0″
border=»0″>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
Решение третье:
Код:
<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>