Для начала просто картинка, чтобы было понятно, о чем собственно идет речь:
Надеюсь, вы уже имели удовольствие видеть подобные разделительные линии в дизайне некоторых сайтов. Обычно такую линию рисуют в фотошопе в 2 пикселя толщиной: один пиксель — сама линия, второй — ее тень, или блик, если угодно. А затем ее размещают на странице в виде картинки или фона.
Однако можно вполне обойтись и без картинки. Для этого используем старый добрый тэг <hr />, которому зададим несколько хитрых правил в стилях. Данный тэг добавляет на страницу разделительную линию, оставляя над и под собой по одной пустой строке. По умолчанию эта линия выглядит не слишком кошерно — обычная черная черта слева направо через всю страницу. Приукрасим ее:
hr {
padding-bottom: 1px;
background-color: #9b9b9b;
border-bottom:1px solid #F4F4F4;
}
Цвет линии #9b9b9b — темно-серый. Под ней мы разместили более светлый блик #F4F4F4 в виде нижнего бордера. Но так как у данного тэга весьма своеобразный способ отображения самое себя, то для необходимого эффекта следует добавить нижнее поле padding-bottom в 1 пиксель.
В результате получаем практически тот же результат, как если бы это была нарисованная в фотошопе двухцветная линия толщиной в 2 пикселя:
Можно узнать зачем такие заморочки с HR - только из-за семантики и W3C validation?
Гораздо проще
.hr {
border-top: 1px solid #9b9b9b;
border-bottom:1px solid #F4F4F4;
heigth:0;
}
Ответить
А вообще фиг с ним, пусть остаётся даже просто HR и вот такой стиль к нему прифигачить
hr {
border: 0 transparent; /*это надо для того, чтобы не было серых боковых границ - иначе они выглядят маленькими треугольничками*/
border-top: 1px solid green;
border-bottom: 1px solid yellow;
width: 200px; /*это по желанию*/
height: 0;
}
и с такими свойствами всё понятно и очевидно, а не какие-то бэкграунды, пэддинги… ужас :)
Ответить
Узнать - можно. В моем коде всего три правила. В ваших примерах: в первом класс нужно к чему-то привязывать, значит будет либо пустой див, либо тот же hr но с прицепленным классом; во втором 4 правила (без учета width). Ну и где ж оно проще?
Ответить
Зато понятно с первого взгляда и сразу же… видно ЧТО пытаются сделать - а не почесать яйца носом…
hr кстати без прицепленного класса (про div можете забыть)
с учётом того что css всё-таки в большинстве случаев кэшируется, то я готов потратить две лишние строки чтобы облегчить понимание… (хотя border:0 у меня в reset, так что в сущности 3 ваших строки против 4-х моих в которых смысла на порядок больше)
ну да хозяин-барин - я ж не настаиваю…
знавал я одного программиста который вместо true писал 1==1, а вместо false 1!=1 - долго он с нами не протянул.
Ответить
прощу прощение что не по теме.
но такой вопрос мучает.
существуют ли какие способы ускорить “отрисовку страниц” на WP из-за медленного хостинга.
Ответить
PoliteX, вопрос интересный, и на него у меня как раз заготовлен один из последующих постов. Однако господа-товарищи, давайте так: если вопрос не по теме поста, то вэлкам, пожалуйста, в e-mail, указанный в контактах.
Ответить
По-моему, решение Игоря достаточно понятно. В принципе, каждый делает как ему удобно и понятно. Все не могут мыслить одинаково. Каждое из предложенных решений имеет право существовать.
Ответить
Спасибо, Виктор! Вы правы, каждый находит свое решение и пользует то, что ему удобнее. Верстка - штука достаточно гибкая, и можно для одной и той же задачи придумать несколько решений.
Ответить
Кстати ни ваш ни мой способ (с HR) не работает ни в ИЕ6, ни в ИЕ7. ИЕ8 нормально.
поэтому он никуда не годится.. если ИЕ6 умирает, то ИЕ7 точно ещё долго будет…
поэтому придётся делать так:
<div class=”line2″></div>
и в класс добавить line-height: 0;
Ответить
Кстати.. чтобы работал ваш вариант во всех браузерах надо написать так
hr {
height: 4px;
background-color: #9b9b9b;
border-bottom:2px solid #F4F4F4;
}
тогда будет две однопиксельных полоски :)
Ответить
Здраствуйте:)) Спасибо большое за приведенные примеры. Для меня, как для начинающего-лучше и не придумаешь)).С линией разобралась, и вот возник вопрос: какие способы есть для того, чтобы этой самой линии указать на странице конкретное место?..Буду благодарна, если найдете время на ответ:)
Ответить
surikat, как и любому блочному элементу, данной линии можно задать позиционирование
Ответить
Отличный пример. Вообще считаю, что надо максимально использовать так называемую векторную CSS-графику. Она и легче, и запросы снижает, и без картинок видна. Короче одни плюсы.
Ответить
Спасибо, Mak! Вы правы на все 200
Ответить
Ну данное решение чем хорошо это тем что без головной боли
hr {
padding-bottom: 1px;
background-color: #9b9b9b;
border-top:1px solid #F4F4F4;
border-bottom:1px solid #F4F4F4;
}
получаем 3 линии
Ответить
Спасибо, именно то что сейчас требуется
Ответить