Топ дня: ELEPHANT

Прошу писать только дизайнеров)
Проблема заключается в том, что шкала опыта в игре почему то вылазит за пределы, а точнее - перескакивает на другую строку... Причины найти не могу... Может вы подскажете что нибудь?
Ниже прилагаю код самой полосы...


________
посл. ред. 26.04.2015 в 19:50; всего 1 раз(а); by [Creep_Matis]

width: 100%;

<div class="hbl">Ур.'.$user['level'].'&nbsp;&nbsp;<img src="/style/images/lvly.png" width=100%"'.round($exp_bar).'%" height="8px"/><img src="/style/images/lvln.png" width="68%" height="8px"/><font style="font-size: 11px; padding-left: 5px;">'.round($exp_bar).'%</font></div>


.hbl {
border-top: 1px solid #080808;
color: #fff;
background:#333333;
padding: 4px;
padding-left: 16px;
font-size: 10px;
}
________
посл. ред. 26.04.2015 в 19:42; всего 1 раз(а); by MJack

Вот скриншот)

Кажется, я понял причину...
Синяя шкала находится за чёрной шкалой, и когда синяя шкала увеличивается, то чёрная шкала сдвигается...
А мне нужно, чтобы синяя шкала была на чёрной шкале... Кто подскажет???
P.S. Я не дизайнер, поэтому, без вашей консультации никуда)

[Creep_Matis], паддинг в цсс для чего?)

[Creep_Matis], если чисто для текста то задай его так padding: 0 0 0 4px;

amstafff, Извиняюсь, лишнее скинул... Это селектор блока со шкалой...\
Сейчас уберу)

Походу не лишнее в хтмл ты задаешь только высоту и ширину.. Тебе же нужно пробел между синим и чёрным шкаликами убрать?) вот и пробуй паддинг задать как написал выше.

Как выше написали в html коде нужно в одной из картинок использовать padding