Список заказов - Фоновое изображение, чтобы включить десятичный стиль в виде списка

Question

Я работаю над упорядоченным списком. С фоновым изображением на нем. То, что я хотел бы сделать, это иметь число «1», «2» и т. Д. Сидя поверх фонового изображения. С подходящим дополнением между изображением и элементами списка.

Пример моей работы Here

Спасибо на этом.

Приветствия

Answer 1

напишите list-style: decimal inside; в вашем css & отрегулируйте свою прокладку. Проверьте это:

http://jsfiddle.net/KnMhS/2/

Answer 2

Это я написал может быть полезным для вас http://csswizardry.com/2010/11/mark-up-a-semantic-accessible-progressively-enhanced-mobile-optimised-progress-bar-bonus-style-the-numbers-in-an-ordered-list/#section-numbers

H

Answer 3

Просто поместите list-style-position: inside; на CSS элемент ul.what_list

показано здесь ->http://jsfiddle.net/KnMhS/1/

Чтобы изменить цвет пули. Вы не можете просто сделать пулю. Это то, что вы можете сделать, это стиль цвета li для белого. Затем создайте span с классом разрешений: color и цвет этого элемента черный. см. здесь ->http://jsfiddle.net/KnMhS/4/

Answer 4

Вот немного скрипку, используя некоторые CSS счетчик и: прежде, чем магии: http://jsfiddle.net/KnMhS/7/

ol.what_list { 
    margin-left: 0; 
    padding-left: 0; 
    margin-top: 80px; 
    list-style: none; 
    counter-reset:item; 
} 

ol.what_list li { 
    padding-left: 0px; 
    margin-left:30px; 
    min-height: 35px; 
    counter-increment:item 
} 

ol.what_list li:before { 
    content: counter(item); 
    display: inline-block; 
    background: url(http://i44.tinypic.com/9ihj4m.png) no-repeat center center; 
    width: 30px; 
    height: 31px; 
    margin-left: -30px; 

    text-align: center; 
    line-height: 31px; 
    color: white; 
}