<i>Тег <hr> (горизонтальная линия) является отличным средством для семантического разделения или прерывания контента на странице. Можно заменить его на изображение, которое будет гармонировать с общей стилистикой страницы.</i>
По умолчанию тег <hr> формирует простую и довольно уродливую линию или монструозную 3D обводку.
С помощью свойства CSS background можно задать использование изображения, обратив внимание на высоту элемента, чтобы использовать только одну копию картинки, и на отсутствие обводки:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->hr {
background:url(spiral-shape.png) no-repeat top center;
height:42px;
border:none !important;
}<!--c2--></div><!--ec2-->
Как обычно, всю простоту нарушает Internet Explorer (версии 7 и меньше), для которого потребуется использовать специфический код CSS (конечно, если вы собираетесь поддерживать IE).
Можно сделать отдельный файл CSS для IE и подключить его к странице с помощью условного комментария, например, так:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1--><!--[if lte IE 7]>
<link rel='stylesheet' href='ie.css' type='text/css' media='screen' />
<![endif]--><!--c2--></div><!--ec2-->
А для корректного вывода изображения вместо горизонтальной линии использовать следующий код для IE (в файле ie.css):
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->hr {
display:list-item;
list-style:url(spiral-shape.png) inside;
filter:alpha(opacity=0);/* избавляемся от горизонтальной линии */
width:0; /* предотвращаем копирование изображения */
margin-top:-10px;
}<!--c2--></div><!--ec2-->
По умолчанию тег <hr> формирует простую и довольно уродливую линию или монструозную 3D обводку.
С помощью свойства CSS background можно задать использование изображения, обратив внимание на высоту элемента, чтобы использовать только одну копию картинки, и на отсутствие обводки:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->hr {
background:url(spiral-shape.png) no-repeat top center;
height:42px;
border:none !important;
}<!--c2--></div><!--ec2-->
Как обычно, всю простоту нарушает Internet Explorer (версии 7 и меньше), для которого потребуется использовать специфический код CSS (конечно, если вы собираетесь поддерживать IE).
Можно сделать отдельный файл CSS для IE и подключить его к странице с помощью условного комментария, например, так:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1--><!--[if lte IE 7]>
<link rel='stylesheet' href='ie.css' type='text/css' media='screen' />
<![endif]--><!--c2--></div><!--ec2-->
А для корректного вывода изображения вместо горизонтальной линии использовать следующий код для IE (в файле ie.css):
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->hr {
display:list-item;
list-style:url(spiral-shape.png) inside;
filter:alpha(opacity=0);/* избавляемся от горизонтальной линии */
width:0; /* предотвращаем копирование изображения */
margin-top:-10px;
}<!--c2--></div><!--ec2-->