Константин Хмелев

Красиво оформляем списки ul ol li на сайте

Опубликовано: 27.03.2016
Время на чтение: 12 мин
40
1086

Всем привет!

Сегодня будет первая статья из рубрики "Дизайн", в которой покажу, как красиво оформить списки в тегах ul ol li.

Это логично было сделать после статьи про оформление контента, ведь у многих будут проблемы в данном вопросе, так как необходимы навыки в CSS. Я же постараюсь ограничиться лишь необходимым набором действий для уникализации списков.

Предисловие

По умолчанию, в большинстве шаблонов данные списки имеют оформление простых цифр (нумерованный список ol li) и обыкновенных квадратиков и кружков черного цвета (ненумерованный, маркерованный список ul li).

оформление ненумерованного списка

оформление нумерованного списка

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

С обычным сайтом ситуация аналогичная, ведь при использовании хорошо оформленных списков, конверсия посетителя в постоянного читателя и время проведенное на ресурсе увеличивается. Если вы посмотрите на большинство новых ресурсов, которые хорошо оформляют свой контент и достигают больших результатов в кратчайшие сроки, увидите у них красиво оформленные списки с индивидуальными иконками.

На моем блоге также списки оформлены. Ненумерованные имеют вид чек-боксов в рамке с чередованием цветов через один пункт.

оформление ненумерованных списков

И сегодня я еще оформил нумерованный список, который имеет теперь не просто вид цифр, а они оформленные фоном, что значительно проще воспринимается и сразу замечается посетителем.

нестандартное оформление нумерованного списка

Конечно, можно сделать нумерацию более привлекательной, но я остановился на таком варианте. Также можно делать не просто цифры на фоне, а для каждого номера списка назначит свою индивидуальную иконку. Это мы также рассмотрим. Теперь перейдем к практике.

Оформление нумерованного списка ol li

Прежде всего вы должны понимать, что каждый пункт списка заключается в тег li. Все пункты списка заключаются в один общий тег ul или ol, который является общим для таблицы стилей (списка).

Например, если мы берем нумерованный список, то он будет иметь такую структуру с использованием тега ol.

<ol>
<li>первый пункт</li>
<li>второй пункт</li>
<li>третий пункт</li>
</ol>

Ненумерованный же список заключается в общий тег ul.

<ul>
<li>первый пункт</li>
<li>второй пункт</li>
<li>третий пункт</li>
</ul>

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

Также прописаны стили нумерации для каждого пункта списка.

Для маркерованного списка прописывают стиль в виде квадратиков или кружочков.

list-style-type: square; /*квадраты*/
list-style-type: circle; /*кружки*/

Для нумерованного списка применяется значение decimal для вывода стандартных арабских цифр (1, 2, 3...)

list-style-type: decimal; /*арабские цифры*/

Все значения данного тега вы можете найти на [urlspan]сайте-учебнике по HTML[/urlspan].

Также имеется и свойство для назначения изображения к каждому пункту списка, а именно:

list-style-image: url('путь к изображению');

Именно его мы и будем использовать в первом варианте (их будет 2) для оформления ненумерованного списка, а сейчас перейдем к оформлению нумерованного.

Способ 1

Как мы уже выяснили, то нумерованный список создается с помощью тегом ol li. К тегу ol могут быть прописаны любые стили (выравнивание, фон, отступы), а вот с тегом li имеются некоторые сложности, так как при стандартной верстке шаблона, в большинстве случаев не получится просто так сделать фон для цифр или наложить на них иконки. Практически во всех шаблонах со стандартной версткой, номера пунктов никак не выводятся в исходном коде и выводятся с помощью стилей. Это затрудняет задачу, так приходится идти сложным путем.

Если бы каждый номер пункта выводился в исходном коде и был заключен в тег span (например), то можно было бы просто к тегу span в списке пунктов добавить с помощью стилей какое-то изображение или фон.

нумерация списка через тег span

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

отсутствие цифры

На изображении моей верстки для списка вы видите, что номер не выводится. Цифры отображаются в стилях с помощью свойства list-style-type: decimal.

Придется заменить данное свойство на list-style-image. Тогда вместо цифр будут иконки, но вся загвоздка в том, что если мы пропишем данное свойство к общему тегу li, то будет отображаться одна и та же иконка для всех пунктов, а нам же необходимо своя иконка с цифрой на каждый пункт?

Для этого стоит в файл стилей добавить еще некоторые свойства для тега li, чтобы назначить на каждый пункт свою картинку с цифрой. Ниже можете видеть примера такого кода (под ним объясню его концепцию).

/*первый номер*/
ol li:first-child {
list-style-image: url(путь к изображению с цифрой 1);
}

/*второй номер*/
ol li:nth-child(2n) {
list-style-image: url(путь к изображению с цифрой 2);
}

/*третий номер*/
ol li:nth-child(3n) {
list-style-image: url(путь к изображению с цифрой 3);
}

/*четвертый номер*/
ol li:nth-child(4n) {
list-style-image: url(путь к изображению с цифрой 4);
}

/*Далее прописываем точно также только для следующих номеров пунктов*/

В первой строке кода к тегу li добавлен псевдокласс first-child, который обозначает первый номер. Далее к каждому следующему тегу добавлено свойство nth-child(An), где A - номер пункта в списке.

Таким образом нужно добавить в данный код все остальные номера пунктов и к каждому назначить свою уникальную иконку. Если в своих материалах вы иногда использовали 20 нумерованных пунктов в списках, то придется добавить минимум 20 раз псевдокласс nth-child(An). То есть последним псевдоклассом в стилях у вас будет nth-child(20n).

Данный способ действительно мудреный, так как придется много стилей добавить и найти очень много иконок с цифрами для каждого номера в списке. Но метод рабочий. Иконки можно найти в интернете или же самому создать.

Итак, плагин действий для реализации такого способа следующий:

  1. Находите в файле стилей строки, отвечающие за оформление нумерованного списка. Необходимо найти теги ol li;
  2. Дописываете в него псевдокласс first-child, как показано в коде выше. Копируете один раз, изменяете данное свойство на nth-child(An) и копируете то количество раз, скольким номерам необходимо назначить свою иконку. Затем проставляете номера для пунктов;
  3. К каждому номеру прописываете свойство list-style-image (см. выше) со своей уникальной иконкой.

После этого все должно работать, но имеется один момент. Иконки могут располагаться сильно далеко от пунктов или же накладываться. Тогда придется вам поработать с выравниванием и отступами иконок цифр или самого текста пунктов.

Теперь перейдем ко второму способу, который стоит у меня.

Способ 2

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

Будем использовать псевдоэлемент before, который выводит определенное содержимое перед элементом (в нашем случае пункт списка).

псевдоэлемент before в списке

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

Реализация похожа с предыдущей:

  1. Находим стили для общего тега таблицы стилей нумерованного списка (тег ol) и прописываем к нему свойства:
    list-style-type: none; /*отключает вывод стандартных цифр*/
    counter-reset: point; /*задает переменную для счетчика нумерации*/
  2. Для тега каждого пункта внутри общей таблицы стилей (тег ol li) прописываем свойство для размещение нумерации возле самих пунктов - position: relative;
  3. Последним шагом дописываем псевдоэлемент before (смотрите пример ниже) для тега ol li и прописываем к нему следующие стили:
    content: counter(point); /* выводит значение переменной */
    counter-increment: point 1; /* увеличивает счетчик на 1 */
    position: absolute;
    background: #BDC3C7; /* фон для цифр (может быть как простой цветовой фон, так и красивая иконка) */

На практике у вас должен получится примерно следующий код. В ваших стилях будет и другое содержимое (выравнивание, отступы, размер шрифта, цвет и так далее). Я же показал лишь то, что необходимо добавить или изменить в ваших стилях.

ol {
list-style-type: none;
counter-reset: point;
}

ol li {
position: relative;
}

ol li:before {
content: counter(point);
counter-increment: point 1;
position: absolute;
background: #BDC3C7;
}

Также в пример вам дам еще и свою часть стилей, которая прописана у меня для нумерованного списка. Может пригодится вам в том случае, если захотите использовать, просто изменив свои отступы и другие данные.

ol {
padding: 0px 0 0 20px;
margin: 0.5em 0 1.571em 1.9em;
color: #2E2E2E;
list-style-type: none;
font: 15px/17px Verdana, Arial, Helvetica, sans-serif;
z-index: 2;
counter-reset: point;
}

ol li {
margin-bottom: 4px;
line-height: 1.6;
color: #2E2E2E;
position: relative;
}

ol li:before {
margin-bottom: 4px;
counter-increment: point 1;
line-height: 1.6;
height: 24px;
margin-left: -36px;
left: 0px;
width: 24px;
margin-top: 1px;
background: #BDC3C7;
content: counter(point);
text-align: center;
position: absolute;
font-weight: bold;
}

В принципе, эти стили могут подойти, но под себя вы должны отредактировать отступы, цвет шрифта, его размер, жирность, выравнивание и так далее.

Вот эти 2 способа я сам протестировал и все получилось. Если у вас возникнут вопросы, то обращайтесь в комментариях, а сейчас переходим к ненумерованному (маркерованному) списку.

Оформление ненумерованного списка ul li

Долго говорить здесь не буду, так как принцип абсолютно тот же. Ранее рассмотренные способы работают и тут, только стоит прописывать их к тегам ul li, а не ol li.

Вы можете просто назначит свойство list-style-image:url(путь к иконке) вместо стандартных стилей list-style-type. Но тогда проследите, чтобы были прописан внешний левый отступ от краев сайта, так как без него иконки попросту могут не отобразиться, а быть где-то вне зоны области контентной части. Можно для начала взять экспериментальные отступы, которые я даю в пример ниже.

ul li{
list-style-image: url(images/radio.png);
margin-left: 30px;
}

Если хотите к каждой строке назначит чередование иконок, то смотрите в п.2 выше, как реализовать это с помощью свойства nth-child(An). Можно также назначит нижние подчеркивания для каждого пункта в маркерованном списке и так далее.

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

ul {
padding: 11px 0 5px 0;
}

ul li {
padding-left: 32px;
margin-bottom: 10px;
font: normal 15px Verdana, sans-serif;
color: #2E2E2E;
line-height: 1.6;
border-bottom: 1px dashed #ccc;
padding-bottom: 10px;
}

ul li:before {
content: "";
position: absolute;
width: 27px;
height: 24px;
margin-left: -35px;
margin-top: -2px;
background: url('images/sprite.jpg') 0px 2px no-repeat;
list-style-type: circle;
}

ul li:nth-child(2n):before {
content: "";
position: absolute;
width: 27px;
height: 43px;
margin-left: -35px;
margin-top: -2px;
background: url('images/sprite.jpg') 0px -17px no-repeat;
list-style-type: circle;
}

В коде вы можете видеть, что имеется всего лишь один псевдокласс nth-child(2n) со значением 2. Это означает, что к каждому четному пункту у меня другая иконка. Если же изменить значение 2n на 2n+1, то другая иконка будет у нечетных пунктов. Более подробно узнайте о данном псевдоклассе [urlspan]здесь[/urlspan].

Можете и для каждого пункта назначить фон, рамки, иконки и т.д. Все на ваше усмотрение. Но не стоит сильно мудрить. Сделайте все просто. Задача в оформлении списков не выпендриться и убить глаза, а сделать все отлично от других сайтов, чтобы увеличивать качество восприятия контента вашими посетителями.

Переходим к последнему пункту сего материала.

Несколько разно-оформленных списков на одной странице

Бывает, когда требуется не просто оформить списки, а разместить несколько разных по оформлению список на одной странице.

Если мы назначим общие стили, то одно оформление будет назначаться ко всем спискам. Ну, а допустим, что нам нужно разместить 2 списка, но, чтобы у одного были иконки чек-боксов, а у другого иконки в виде полноценных картинок. Как такое реализовать?

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

индвидуальное оформление для списка

Затем в файл стилей прописал отличные стили от общих для всех списков.

ol#sod{
padding: 0px 20px 10px 51px;
margin: 0.5em 0 0em 1em;
color: #2E2E2E;
list-style-type: none;
background: #f1f4f5;
border-left: #BDC3C7 4px solid;
display: inline-block;
}

ol#sod li{}

ol#sod li:before{
font-weight:normal !important
}

Как видим, то просто необходимо скопировать стили для общего оформления списков, затем в скопированном варианте дописать название того ID, который добавили к тегу ul или ol, и изменить стили, чтобы оформление различалось.

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

Таким образом вы можете сделать материалы еще более интересней для чтения. Например, для пунктов, в которых идет перечисления каких-то предметов, сделать одни иконки. А для пунктов с перечислением действий, другие.

Итак, друзья! Данный материал можно заканчивать. Я не пытался вас научить премудростям CSS. Целью было лишь показать варианты индивидуального оформления списков, так как с этим имееются сложности и я сам когда-то помучился.

Кстати, таким способом можно оформлять и пункты в меню, в рубриках и во многих других элементах сайта.

Напоследок хотел бы попросить вас оставить свой комментарий и оценить данный материал с помощью звездочек ниже. Если конечно вам данная статья помогла.

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

Все. Пока.

С уважением, Константин Хмелев!

Плохо
2
Интересно
1
Супер
0
Обсуждение
  • Сплетница
    Опубликовано: 05.07.2015 Ответить на сообщение

    Очень полезная статья, но для меня - молодого и тупенького новичка не до конца понятная. Я хотела бы украсить свои статьи. Но я мало что понимаю в таблице стилей, единственно что могу сделать - это изменить цвет. Вопрос: а эти коды нужно вставлять на место старых или прописывать отдельно? Если их нужно просто добавить отдельно, то в какое место таблицы? Я этого не могу понять.

    • Константин Хмелев
      Опубликовано: 05.07.2015 Ответить на сообщение

      Необходимо найти в вашем файле стилей строки, которые отвечают за оформление списков. Например, ol li (маркерованный список) или ul li (нумерованный). Далее, после этих тегов (ol li или ul li) дописать необходимые свойства (псевдоклассы, как это описано в статье). Например, было ol li, а стало ol li:first-child {тут стили}. Новые стили добавлять не обязательно. Можно отредактировать уже существующие.

      В статье я довольно просто для новичка объяснил, как все сделать. Конечно, это не самое легкое задание, т.к. даже мне пришлось в первый раз разобраться. Но пару раз, сделав некоторые ошибки, все сразу становится на свои места и все понятно. Без практики никуда не уедешь.

  • Сплетница
    Опубликовано: 05.07.2015 Ответить на сообщение

    а что делать если эти элементы в моей таблице стилей встречаются порознь? к примеру, элемент ol встречается у меня 4 раза, но нигде он не стоит рядом с элементом li. Аналогичная ситуация с элементом ul... Я этого не понимаю..........

    • Константин Хмелев
      Опубликовано: 05.07.2015 Ответить на сообщение

      Если во всем файле стилей нет ol li и ul li, тогда добавьте их сами. В конце файла стилей сделайте отступ (1 строку) и пропишите новые свойства. В принципе, вы можете попробовать даже вставить те стили, которые я даю в статье. Но там придется изменить указанные места внутри них (пути к изображениям иконок и т.д.).

  • Сплетница
    Опубликовано: 05.07.2015 Ответить на сообщение

    Значит, можно так делать? Спасибо, попробую провести эксперимент.

    • Константин Хмелев
      Опубликовано: 05.07.2015 Ответить на сообщение

      С файлом стилей можно делать все, что угодно. Удалять текущие стили, изменять их и добавлять новые. В моем файле стилей, как и во многих файлах шаблона, много чего добавлено моего и много чего удалено из стандартного. Все и всегда требует доработки.

  • Сплетница
    Опубликовано: 05.07.2015 Ответить на сообщение

    Константин, я попыталась с помощью Вашего кода изменить нумерованный список, и вот что у меня получилось http://parasluhov.ru/sluxi-o-stile-zhizni/puteshestviya/puteshestvie-dikarem-sposob-sekonomit-ili-najti-priklyucheniya-na.html (извините, что добавляю ссылку). У меня отображаются точки после цифр и я не поняла, как изменить размер самих квадратиков с цифрами? Подскажите, пожалуйста.

    • Константин Хмелев
      Опубликовано: 05.07.2015 Ответить на сообщение

      Height - высота, width - ширина. Точку можете убрать, увеличив размер квадрата. Тогда он наложится на точку и ее не будет видно.

  • Сплетница
    Опубликовано: 05.07.2015 Ответить на сообщение

    Я планировала уменьшить размер квадратиков и цифр, но теперь я не смогу убрать точку. Так получается?

    • Константин Хмелев
      Опубликовано: 05.07.2015 Ответить на сообщение

      На самом деле, в коде, который я предоставляю, прописаны стили, которые отключат стандартный вывод нумерованного списка. Поэтому, никакой точки и посторонних цифр не должно быть. Получается, что в вашем файле стилей прописаны стандартные стили для списков, которые начинают работать совместно со стилями, которые вы разместили. Нужно анализировать ваш файл и изменять стили для списков, которые у вас еще имеются в файле. Больше всего, что все же имеются стандартные стили ul li и ol li и вы их просто не увидели или не нашли. И правила, прописанные в них, конфликтуют. Нужно оставить один вариант, убрав все лишнее.

      • Сплетница
        Опубликовано: 05.07.2015 Ответить на сообщение

        А каким образом найти конфликтующие правила? Видимо, в моей таблице стандартные стили ul li и ol li представлены как-то по-другому. Такое ведь возможно?

        • Константин Хмелев
          Опубликовано: 05.07.2015 Ответить на сообщение

          Возможно, что они прикреплены к какому-то классу или ИД. Например, ваша область контент обернута в блок content. Тогда стили для списка могут быть прописаны так #content ol li и #content ul li. Этих вариантов может быть куча (отдельно для записей и отдельно для страниц). В любом случае, при поиске тегов списка по файлу, вам должно было их найти.

          • Сплетница
            Опубликовано: 05.07.2015 Ответить на сообщение

            Вот что у меня есть в таблице стилей .article ul {
            margin: 1.5em 0 1.571em 1.571em;
            list-style-type: circle;
            }
            .article ol {
            margin: 1em 0 0 1.9em;
            list-style-type: decimal;
            }
            .article li { margin: 0.6em 0 }

          • Константин Хмелев
            Опубликовано: 05.07.2015 Ответить на сообщение

            Удалите list-style-type: decimal;

          • Сплетница
            Опубликовано: 05.07.2015 Ответить на сообщение

            Константин, у меня все получилось так, как я хотела! Спасибо за разъяснения!

  • Сплетница
    Опубликовано: 05.07.2015 Ответить на сообщение

    А еще: как изменить в таблице стилей междустрочный интервал?

    • Константин Хмелев
      Опубликовано: 05.07.2015 Ответить на сообщение

      Что значит "изменить в таблице стилей междустрочный интервал"?

      • Сплетница
        Опубликовано: 05.07.2015 Ответить на сообщение

        У меня в текстах на выходе маленький междустрочный интервал, как-то можно сделать так, чтобы он автоматически был больше?

        • Константин Хмелев
          Опубликовано: 05.07.2015 Ответить на сообщение

          Почему же маленький? Все в самый раз. Пропишите line-height: 26px; в стилях для тега "p", где 26px - величина отступа.

  • Alex_Dnepr
    Опубликовано: 16.09.2015 Ответить на сообщение

    Добрый день, а как решить проблему при обтекании элементов.
    На сайте при обтекании рекламы списком сделанным через list-style-img иконка из за margin-left: -35px; залазит поверх блока рекламы. Никак не могу решить проблему.

    • Константин Хмелев
      Опубликовано: 16.09.2015 Ответить на сообщение

      Здравствуйте. Я не верстальщик и не дизайнер, поэтому сказать, как решить проблему по словам, не могу. Экспериментируйте. Пробуйте задть различные выравнивания для списка. Можете написать мне на почту ссылку на ваш сайт со страницей, где имеется проблема. Как появится время, я постараюсь глянуть.

  • Миха
    Опубликовано: 16.11.2015 Ответить на сообщение

    Доброго дня. Сделал по вашей инструкции и тот и тот вид списков. Получилось классно, только проблема появилась. Верхнее меню тоже получилось с маркерованное иконками и появилось подчеркивание. Подскажите как это убрать?
    Попытался сделать новый класс оформления меню, не получилось.

    • Константин Хмелев
      Опубликовано: 16.11.2015 Ответить на сообщение

      Добрый день. У вас в файле стилей, начиная со строки 456 прописаны стили для тега списка li в меню (#main-menu ul li) Пропишите внутрь него правило, что убрать нижнюю границу (border:none). Ну, а маркеров в списке меню я не увидел. Если они каким-то чудом у вас есть, тогда сюда пропишите соответствующие правила, что убрать изображения.

      • Миха
        Опубликовано: 16.11.2015 Ответить на сообщение

        Благодарю вас Константин. Подчеркивания убрались. А иконки списка у меня получилось убрать самому. Добавил тег запрета показа, не знаю как точнее это выразить.
        Простите за ссылку, но было вот так h_ttp://i76.fastpic.ru/big/2015/1116/7c/81205fc1d918ba4bb94ffcf2c568487c.jpg.
        ps: Письмо с ответом на коммент пришло на английском языке, думаю вам будет интересно доработать его до русского)

  • Елена
    Опубликовано: 30.10.2016 Ответить на сообщение

    Добрый день, Константин. Очень хочу изменить списки в дизайне сайта. Прочла вашу статью уже не один раз, но до конца не совсем понимаю, куда вставлять изменения. Вот мои стили из темы на вордпресс

    /* 019 Списки */
    .metaslider ul li{list-style-type:none}
    .side-blok ul{list-style-type:square; list-style-position:inside}
    .side-blok ul li ul{margin:10px 0 0}
    .side-blok ul li{margin:0; padding:0 0 10px}
    .side-blok ul li ul li{margin:0; padding:0 0 10px 14px}

    .post ul li{ list-style-type:square; list-style-position:inside}
    .post ul li ul{margin:10px 0 0 20px}
    .post ul li{margin:0; padding:0 0 10px}
    .post ul li ul li{margin:0; padding:0 0 10px 14px}

    Пожалуйста, помогите, у меня только получается изменить маркер с закрашенного квадрата на не закрашенный кружок. Куда я должна вставить изменения, то есть стили, которые вы даёте в статье. Буду ждать ответ. С уважением, Елена

    • Константин Хмелев
      Опубликовано: 03.12.2016 Ответить на сообщение

      Здравствуйте. В папке с шаблоном у вас есть файл стилей style.css

      Открываете его редактором notepad и вставляете данный код с новой пусто строки в конце всего содержимого файла.

  • Юлия
    Опубликовано: 04.11.2016 Ответить на сообщение

    Здравствуйте, уважаемый Константин! Прочла вашу статью несколько раз, но, к сожалению, добавить маркерованный список так и не вышло. Пробовала по разному, но в итоге все не так, как хотелось. У меня на сайте и меню, и другие элементы (на главной странице), тоже показываются в виде маркерованных списков (оказывается). Поэтому, при добавлении кода в конец стилей в меню появляется линия подчеркивания....в сайтбаре та же ерунда ....искала #main-menu ul li и подобное у себя, но все попытки прописать border:none заканчивались неудачно(((( Если сможете немножно помочь в этом вопросе - буду крайне признательна!
    Сайт указала - будет время - просмотрите, что мне с этим можно сделать.
    С уважением, Юлия.

    • Константин Хмелев
      Опубликовано: 03.12.2016 Ответить на сообщение

      Здравствуйте. На данный момент я не обладаю тем количеством времени, чтобы помогать по таким делам. Тем более, что от технической части я давно уже отошел и этим почти не занимаюсь. Иногда только для своих целей могу что-то подправить или создать, если знаю, что это будет намного быстрее, чем сделают другие.

  • Taras
    Опубликовано: 04.11.2016 Ответить на сообщение

    Большое спасибо за работающий код и красивый стиль оформления!
    Перелопатил немало сайтов и все не то, а здесь скопировал-вставил и все заработало!
    Дальше уже подправь под себя и готово.
    Еще раз выражаю огромную благодарность вам за ваш труд!
    Всего самого наилучшего!

  • Мария
    Опубликовано: 10.05.2017 Ответить на сообщение

    .entry ol,
    .entry ul {margin: 0 0 25px 10px;}
    .entry ul li {list-style: outside disc; list-style-type: disc; list-style-image: none; list-style-position: outside;}
    .entry ol li {list-style: outside decimal;}
    .entry li {margin: 0 0 5px 10px;}

    Помогите умоляю. Тема Джарида. В админке списки видны а на сайте нет.... Что делать?

    • Константин Хмелев
      Опубликовано: 22.09.2017 Ответить на сообщение

      Значит вы просто вставили стили в файл стилей админки, а на самого сайта. Посмотрите, по логике у вас должен быть еще файле стилей.

  • Николай
    Опубликовано: 15.09.2017 Ответить на сообщение

    Константин, скажите а как путь прописывать к изображению, и какой прмерно размер должен у него быть и формат. У вас например: ul li{
    list-style-image: url(images/radio.png);
    margin-left: 30px;
    }
    Это чтобы поставить картинку её нужно на хостинг загружать? Не могу разобраться тут!

    • Константин Хмелев
      Опубликовано: 22.09.2017 Ответить на сообщение

      Да, картинку нужно загружать на хостинг. В моем случае рядом с файлом стилей лежит папка картиной images и уже внутри нее картинка radio.png. Если путь другой, то его нужно прописать.

  • Николай
    Опубликовано: 16.09.2017 Ответить на сообщение

    И ещё ответьте, если не сложно! В интернете нашёл готовы оформленные списки, они состоят из двух частей html и css
    Я не могу понять, куда эти две части вставлять?
    вот 1 html

    Элемент списка
    Элемент списка
    Элемент списка
    Элемент списка
    Элемент списка

    и 2 css
    list1a {
    margin: 20px 0 0;
    padding:0;
    list-style: none;
    counter-reset: li;
    }
    .list1a li {
    border: 2px solid #337AB7;
    background: #EBF3FA;
    position: relative;
    margin-bottom: 20px;
    padding: 16px 10px;
    }
    .list1a li:hover {
    z-index: 1;
    }
    .list1a li:before {
    border: 2px solid #337AB7;
    position: absolute;
    top: -14px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: bold;
    color: #337AB7;
    background: #F7FAFD;
    counter-increment: li;
    content: counter(li);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    }
    .list1a li:hover:before {
    background: #337AB7;
    color: #FFF;
    -webkit-transform: translate(-12px, 0);
    -ms-transform: translate(-12px, 0);
    -o-transform: translate(-12px, 0);
    transform: translate(-12px, 0);
    }
    .list1a li:after {
    content: "";
    position: absolute;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    -webkit-transition-property: width;
    transition-property: width;
    z-index: -1;
    background: #FFF;
    height: 100%;
    left: 0;
    top: 0;
    width: 0;
    }
    .list1a li:hover:after {
    width: 100%;
    }

    • Константин Хмелев
      Опубликовано: 22.09.2017 Ответить на сообщение

      Не совсем понял, что за 2 части. Если есть ХТМЛ, то это скорее для вставки списков через текстовый ХТМЛ режим. Наша задача сделать так чтобы выбирая список на панели форматирования текста внутри редактора статьи, список на опубликованной странице сразу применял те стили, которые мы задали. А значит, что все это должно быть прописано в файле стилей. Соответственно, все стили (2я часть) копируется в файл стилей шаблона.

  • Николай
    Опубликовано: 22.09.2017 Ответить на сообщение

    Спасибо!

  • Sports
    Опубликовано: 07.10.2017 Ответить на сообщение

    Здравствуйте, вставил вот этот код и получил дубль. Вставляю нумерованный список и у меня на странице двойной список получается.

    ol li:before {
    margin-bottom: 4px;
    counter-increment: point 1;
    line-height: 1.6;
    height: 24px;
    margin-left: -36px;
    left: 0px;
    width: 24px;
    margin-top: 1px;
    background: #BDC3C7;
    content: counter(point);
    text-align: center;
    position: absolute;
    font-weight: bold;
    }"

    • Константин Хмелев
      Опубликовано: 15.10.2017 Ответить на сообщение

      Здравствуйте. К сожалению, на такие вопросы я теорией ответить не могу. Обычно такие проблемы я себе решаю на практике путем экспериментом.

  • олег
    Опубликовано: 14.08.2018 Ответить на сообщение

    Добрый день можно с вами пообщаться по почте хочу показать картинку?

  • Александр
    Опубликовано: 12.12.2018 Ответить на сообщение

    Над дизайну сайта безусловно всегда нужно работать. Чем лучше и удобней сайт, тем больше посетителей на нём будет.

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.