Кто как делает полоску между пунктами в горизонтальном меню?

Question

[Meliborn]

Полоска обычно меньше высоты блока. На stackoverflow, например, полоска сделана как отдельный символ "|". Признаться, я тоже так делал, но всегда думал что это не правильно и есть более рациональные способы. Сейчас склоняюсь к background-image.

Comments

[anaboy]

возможно такой вариант ( я в теме не так уж и давно )

<div class="menu_box">
                    <a href="#" class="menu_box_link">lorem</a>
                </div>
                
                <b><div class="bd"></div></b>

                <div class="menu_box">
                    <a href="#" class="menu_box_link">lorem</a>
                </div>

.bd {
    margin: 0 5px;
    border-left: 1px solid #888888;
}

Answer 1

[no1]

если задача поставить вертикальную черту, то зачем подгружать лишние изображения?
ul li + li:before{content:"|"}

Если принципиально с изображением, то:
ul li + li:before{content:url("line.png")}

Answer 2

[Assorium]

Все гораздо проще.
ul {
padding:5px;
}
li {
display:inline;
border-left:1px solid #bbb;
padding:0 2px 0 4px;
}
li:first-child {
border:none;
}


пример

Answer 3

[Анатолий]

Я делаю бордером, а если нужна полоска меньше высоты блока, то можно вложенные блоки сделать меньше чем внешний.

Comments

[Meliborn]

Увеличение числа DOM элементов не есть хорошо.

[Сергей Протько]

А с чего это числу меняться то? ul > li > a — бордер задаю для li, размеры можно менять у li и a соответственно.

[Meliborn]

Не так понял.

[Хуршед Нурматов]

Аналогично, левая или правая граница элемента закрашивается как нужно. Но нужно отработать отсутствие этой границы для первого или последнего элемента — обычно введением класса .first с переопределенной в 0px none границей. Плюсы по сравнению с background — не грузится картинка — а это оптимизация обращений к серверу.

[Meliborn]

А почему не :first-child?

[Sekira]

Можно не первый или последний, а между: ul > li + li { border-left…

Answer 4

[wise_gopher]

Да, именно с помощью bg-image:

ul.topNav li {
display: inline;
width: 10em;
height: 36px;
float: right;
padding-top:9px; margin:0px;
background-image: url(../images/header_divider.gif);
background-repeat:no-repeat;
background-position: top left;
}

Answer 5

[ShpuntiK]

Не нужны никакие background, лишний трафик, просто как уже сказано border прописать, для большей живости можно делать их разными оттенками, тогда будет эффект «впадины».