Форум Сайтостроение Веб-строительство

верстка: как сделать нумерованный список с фоном

S
На сайте с 09.10.2007
Offline
186
simka
823

нужно сделать фон под нумерованным списком (под цифрой так, чтобы цифра была в кружочке).

цвет цифры должен отличаться от цвета текста.

строчек в li может быть 1-2-3, картинка с цифрой должна центрироваться

уже минут 40 играюсь никак не получается :(

пример на картинке.

png sample.png
Удобная панель для доменных имен (http://panel.started.ru/) с массовыми операциями. Индивидуальные цены по запросу.
maldivec
На сайте с 04.11.2008
Offline
160
maldivec
#1

Ну вставьте в начало каждого пункта <span>1</span> и стили задайте с абсолютным позиционированием. Не катит?

S
На сайте с 09.10.2007
Offline
186
simka
#2
maldivec:
Ну вставьте в начало каждого пункта <span>1</span> и стили задайте с абсолютным позиционированием. Не катит?

так и сделал, но вот отцентрировать нормально не выходит.

на момент это так:

ul.ol { list-style-type:none; }

ul.ol li { background:url(/i/li-ol.png) 0px center no-repeat; position: relative; padding-left:25px; vertical-align:middle; height:30px; }

ul.ol li span { color:#fff; position: absolute; top:20%; left:7px; }

но выглядит криво

maldivec
На сайте с 04.11.2008
Offline
160
maldivec
#3

Вот, накидал примерно - http://codepen.io/anon/pen/nKwlu

---------- Добавлено 17.05.2014 в 19:09 ----------

Выравнивайте через top: 50% и margin-top: -10px (половина высоты маркера)

S
На сайте с 09.10.2007
Offline
186
simka
#4

Спасибо. Получилось

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий