Как зафиксировать положение картинки?

[ProfiSale]

Помогите, уже несколько часов мучаюсь.

Не могу зафиксировать положение кружка с ценой:

http://profisale.ru/...udovanie/modemy

Если текст справа убирается в блок, то все норм, а если нет, то кружок уходит вниз, в след за ним. Т.е. почему то положение этого кружка фиксируется по нижней границе текста.

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

Смотрел стили и структуру файла category.tpl. В tpl файле менял местами коды текста и кружка - не помогло.

В стилях кружок и текст заданы так:

положение рисунка:

.list-product .price {
background: url('../image/price-bg.png') no-repeat;
display: block;
position: absolute;
bottom: -55px;
height: 70px;
width: 70px;
padding: 26px 0;
margin-top: -70px;
margin-left: 110px;
font-weight: bold;
text-shadow: 0px 1px 0px #fff;
z-index: 1;
line-height: 15px;
}

вывод текста:

/* text attribute */
.attribute-text {
display: block;
font-family: Verdana;
text-align: left;
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
}
.attribute-name {
font-family: Verdana;
font-weight: bold;
}

Змінено 6 грудня 2012 користувачем AlexFisher
CODE

[AlexFisher]

в .list-product .name добавьте

position:absolute;

и относительно этого двигайте. top:...; right:...; там по размерам своего кружочка.

Как-то так.

[ProfiSale]

в .list-product .name добавьте

position:absolute;

и относительно этого двигайте. top:...; right:...; там по размерам своего кружочка.

Как-то так.

не правильно указал код в сообщение выше - исправил. Там уже такое добавлено.

Как оказалось, если в /* text attribute */ убрать display: block;, то кружок фиксируется как надо, но тогда теги отображаются сплошным текстом.

В модуле атрибутов можно указать разделитель "<br/>", но тогда кружок опять привязывается к нижней границе тегов.

[ProfiSale]

Нужно было просто изменить код вот так:

.list-product .price {
background: url('../image/price-bg.png') no-repeat;
display: block;
position: relative;
bottom: -237px;
height: 70px;
width: 70px;
padding: 26px 0;
margin-top: -122px;
margin-left: 110px;
font-weight: bold;
text-shadow: 0px 1px 0px #fff;
z-index: 1;
line-height: 15px;
}