Вёрстка разделителей списков

[Wak]

Здравствуйте!

Столкнулся с проблемой. Не знаю как написать CSS для списка вида:

Элемент1 | Элемент2 | Элемент3

Скрипт выводит html код вида:

<ul>
    <li>Элемент1</li>
    <li>Элемент2</li>
    <li>Элемент3</li>
</ul>

Проблема в том, что элементов может быть любое количество, но если через CSS привязать разделитель (в данном случае - символ "|"), то он будет применяться и для последнего элемента списка (что совсем не нужно).

Посоветуйте, как быть в данной ситуации?

[Catherine]

А если разделитель повесить бэграундом с левой стороны элемента, а первому элементу с помощью :first-child прописать background: none?

[sammasati]

Я вот так делаю:

li+li {
  border-left: 1px solid black;
}

[SelenIT]

В каменном веке для этой цели для ul ставили overflow:hidden и смещали крайний пункт за его границу (margin-left: -1px для первого или ...-right: -1px для последнего, по ситуации). Сейчас вполне можно юзать любой из способов, предложенных выше. Если разделитель цепляется через псевдоэлемент, то :first-child уж точно работать будет (а если для IE8 допустима деградация, то можно и к :last-child обратиться).

[Wak]

Благодарю! Представленные здесь методы меня вполне устраивают. Думал о них, да не додумал

[DjTarik]

Что плохого в таком методе:

<ul>
    <li>Пункт</li>
    <li>|</li>
    <li>Пункт</li>
    <li>|</li>
    <li>Пункт</li>
</ul>

Какие минусы?

Edited January 15, 2012 by DjTarik

[Wak]

Что плохого в таком методе:

<ul>
    <li>Пункт</li>
    <li>|</li>
    <li>Пункт</li>
    <li>|</li>
    <li>Пункт</li>
</ul>

Какие минусы?

Читайте внимательнее первый пост. Там указано, что html код выводит скрипт. Изменять скрипт, чтобы он выводил разделители - глупо.

[Gaspode]

Какие минусы?

Он бессмысленный. Зачем вообще тогда список использовать?

[Wak]

Какие минусы?

Он бессмысленный. Зачем вообще тогда список использовать?

А я, кстати, видел в какой-то CMS-ке (Joostina, вроде) такое решение

[Svatov]

Вот и меня интересует, какие минусы последнего метода, кроме как лишней разметки. Видел, что в templateworld поголовно используют этот метод.

[Gaspode]

Зачем использовать список, если мы в качестве элементов списка используем то, что не является элементами списка? Или вы считаете, что "|" — это сущность того же порядка, что и пункт меню?

Видел, что в templateworld поголовно используют этот метод.

Я тоже много... всякого видел. Это не повод.

[Catherine]

Вот и меня интересует, какие минусы последнего метода, кроме как лишней разметки. Видел, что в templateworld поголовно используют этот метод.

Я так понимаю, что основной минус метода-то, что семантика(элементы списка) и оформление(разделители) не разделены логически. По структуре документа выходит, что

<li>|</li>

такой же полноценный элемент списка, как

<li>Пункт1</li>

, а это не семантично. О преимуществах семантической разметки говорить здесь не буду, но очевидно, если вдруг заказчик вместо "|" захочет видеть "какой-то там другой разделитель", то придется вносить изменения и html-страницу, и в файл стилей.

Edited January 15, 2012 by Catherine

[DjTarik]

Читайте внимательнее первый пост. Там указано, что html код выводит скрипт. Изменять скрипт, чтобы он выводил разделители - глупо.

Ага... Сорри, не заметил...

Вот и меня интересует, какие минусы последнего метода, кроме как лишней разметки. Видел, что в templateworld поголовно используют этот метод.

Плюс в том, что можно использовать "специальные символы" и это будет работать в IE6 =))) (хотя уже не актуально)

Минус - лишняя и не семантическая разметка.

Но такой метод ооочень часто вижу. Никто не парится)

[SelenIT]

А что, нормальный такой код для троллинга спискофагов . Хотя я согласен с Gaspode — если возникла такая мысль, то нужно смело писать

<div>Пункт | Пункт | Пункт</div>

и не париться). Это очевидный показатель, что список там не нужен.

[Svatov]

Хорошо, давайте тогда разберем как правильно нужно верстать подобный разделитель в меню?

<li><a href="#"></a> | </li> 

Тоже считаю не самый хороший вариант...анонимные блоки не есть хорошо.

<li><a href="#"></a></li>
<li> | </li>

Здесь хоть и не семантичная, да и вообще, кто сказал что списки даже семантичны для пункттов меню, это так утопия в голове веб-разрабов, просто исходят из того что есть и что максимально удобно. В этом варианте упрощается верстка под ие7...про ие6 уже не говорим, да и поменять можно без особого труда на другой "символ".

<li><a href="#"></a></li>
ul li {
border-right:1px solid #000;
}

Тут вообще можно регулировать ширину разделителя, но а если разделитель в два раза меньше пункта меню, то тут возникает уже проблема...с ие7. Выравнивая обрезается основной текст меню.

ul li:after
ul li:before

Вот Softlink еще про псевдоэлементы напомнил.

Edited January 16, 2012 by Svatov

[Softlink]

Вообще не понимаю, зачем для этого заводить несколько лишних элементов в разметке. Есть бордеры, есть псевдоэлементы, которыми можно рулить через псевдоклассы, ну или просто классами.

Меньше кода > меньше ошибок.

[Svatov]

Вообще не понимаю, зачем для этого заводить несколько лишних элементов в разметке. Есть бордеры, есть псевдоэлементы, которыми можно рулить через псевдоклассы, ну или просто классами.

Меньше кода > меньше ошибок.

Когда-то меня научили в самом начале, что нужно как можно меньше элементов в разметке...все было отлично до тех пор пока я не знал о существовании ие6, ие7...потом открывал свою верстку в них ...и до меня наконецто тогда дошло, что означает экстра разметка

Если верстать для современных браузеров, то проблем вообще нет.

п.с

Меньше кода > меньше ошибок

фраза с символом сломала мозг

Edited January 16, 2012 by Svatov

[Softlink]

Если верстать для современных браузеров, то проблем вообще нет.

Всем элементам задать правый бордер, а на последний навесить класс без него и будет работать в старых ИЕ. Не вижу никаких оснований вводить дополнительные элементы в разметку.

[Svatov]

У меня для ие7 такое не получилось через бордер

[Softlink]

В смысле бордеры размером меньше чем текст? Это надо смотреть, как делалось это все.

[Svatov]

сек, если сохранил первый вариант..то найду

<ul class="footer-nav">
  <li><a href="#">Home Page</a></li>
  <li><a href="#">About Joomla</a></li>
  <li><a href="#">Online Store</a></li>
  <li><a href="#">Wrapper</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact us</a></li>
</ul>

.footer-nav {
float:right;
margin:20px 0 0 0;
}

.footer-nav li {
float:left;
height:8px;
padding:0 17px 0 14px;
border-right:1px solid #535151;
line-height:6px;
}

.footer-nav li:last-child {
border:none;
padding-right:0;
} 

.footer-nav li a {
color:#535151;
}

На last-child не обращайте внимание Тут вопрос в другом

Edited January 16, 2012 by Svatov

[Softlink]

Svatov, маленькая высота+line-height дают такой результат. Бордеры не только в ИЕ7 маленькие, но и в Хроме, например.

http://jsfiddle.net/Softlink/NFsvf/

[Svatov]

Не уловил

[Softlink]

Не уловил

Вот реальная высота вашего меню. Именно по ней тянется бордер. А вы, чтобы исправить ситуацию, пытались подтянуть его выше через line-height. В общем, не правильный подход

Edited January 16, 2012 by Softlink

[Svatov]

Я это понимаю, но это было сделано сознательно, чтобы уменьшить бордер блока li до нужных размеров, а линки внутри распирают сами по себе, везде хорошо работает, кроме ие7

Я же не добавлял к меню специально overflow:hidden;

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

Предложите правильный (именно через бордер)

П.с мы уже вроде с тобой на "ты" переходили

Edited January 16, 2012 by Svatov

[Softlink]

Я это понимаю, но это было сделано сознательно, чтобы уменьшить бордер блока li до нужных размеров, а линки внутри распирают сами по себе, везде хорошо работает, кроме ие7

Я же не добавлял к меню специально overflow:hidden;

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

Предложите правильный (именно через бордер)

А, т.е. наоборот, сделать бордеры меньше, чем высота текста? Блин, у меня нет ИЕ7 и даже ИЕ8, так что посмотреть не могу как там и что подправить можно.

Но я не верю, что нельзя это сделать через бордер

П.с мы уже вроде с тобой на "ты" переходили

Привычка