]]> ]]>

Уважаемые посетители!
Здесь, я буду писать, статьи-заметки(свои и из инета), показавшиеся, мне интересными. Писать, буду, своими словами и возможно, с использованием неприличной лексики. Приношу извинения тем, кого, это будет коробить..


Как изменить цвет линии hr..

По умолчанию, цвет линии, тега <hr>, при добавлении на web-страницу, отображается серым цветом, да еще и с эффектом объема.

Такой цвет и вид линии, нам не всегда подходит по дизу сайта, поэтому будем, менять его через стили.

Что бы подружить наш <hr>, со всеми браузерами, будем использовать несколько стилевых атрибутов. Мы ж, не дурнее их, правда?!

К примеру, браузер Internet Explorer для цвета линии применяет свойство color, а вот Opera и Firefox — background-color. Но это пол-беды, нужно обязательно указать толщину линии (параметр height) больше нуля и убрать рамочку вокруг линии, задавав значение none у атрибута border.

Собирем все параметры вместе, для селектора hr и получим универсальное решение для популярных браузеров.

Например, так:
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1251">
    <title>Цвет линии</title>
    <style type="text/css">
    HR {
     border: none; /* Убираем границу для браузера Firefox */
     color: red; /* Цвет линии для браузера Internet Explorer */
     background-color: red; /* Цвет линии для браузера Firefox и Opera */
     height: 2px; /* Толщина линии */
    }
    </style>
    </head>
    <body>
    <hr>
    <hr>
    </body>
    </html> 

Вот, что получилось, в видимом варианте(цвет линии задан как красный, а толщина линии равна двум пикселам):

Примерчик

21.04.2008. 17:08

Werdn 26.06.2008. 12:02

А как вообще убрать рамку у


в IE?
я пишу так:

hr {
margin: 2em auto;
width: 400px;
height: 20px;
background: transparent url(images/divider.png) no-repeat scroll center top;
border: none; /*В FireFox, Opera, Konqueror, Safari рамка убирается*/
border-collapse: 0;
outline: none;
}

А. Северский 30.06.2008. 18:17

Если уж линия тебе понадобилась, хоть и не могу понять зачем, если она будет невидима.. То, самый простой вариант, это задать ей тот же цвет, что и фон страницы. :)

KseniA 14.08.2008. 06:47

а еще можно написать:

display: none;

Написать коментарий

* = обязательное поле

:

:

:


9 + 3 =





обо мне · CSS · Как изменить цвет линии hr..

Русификация vBulletin

Как известно, Джелсофт запретил, zCarotу выкладывать свои русификаторы.
Ну а мне нет... По ссылкам ниже, качаем русики, для свежих версий vBulletin и говорим за них, спасибо Морковке.
Русификаторы для vBulletin 3.7.3: cp1251 | utf8
Русификаторы для vBulletin 3.6.11: cp1251 | utf8

Последние заметки

Спецсимволы в html(таблица) (html)
Прячем ссылку в форме (html)
Коментарии к коду - что это? (html)
Как сделать тонкую таблицу (html)
Сравнение WYSIWYG-редакторов 2007 (полезнячок)