Jump to content
  • 0

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


Wak
 Share

Question

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

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

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

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

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

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

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

Link to comment
Share on other sites

Recommended Posts

  • 0

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

Link to comment
Share on other sites

  • 0

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


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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

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

<li>|</li>

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

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

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

Edited by Catherine
Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

<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 by Svatov
Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

п.с

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

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

Edited by Svatov
Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

<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 by Svatov
Link to comment
Share on other sites

  • 0

Не уловил :unsure:

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

Edited by Softlink
Link to comment
Share on other sites

  • 0

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

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

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

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

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

Edited by Svatov
Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

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

Привычка :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy