Перейти к содержанию
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;
}
Изменено пользователем AlexFisher
CODE

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

position:absolute;

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

Как-то так.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

position:absolute;

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

Как-то так.

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

.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;
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.