Перейти к содержанию
Ch0oJoy

Не получается решить проблему со стикерами

Рекомендуемые сообщения

Здравствуйте! помогите с решением.

На скрине показаны 2 стикера "Хит продаж" и "Популярный"..

Проблема в том что когда нету стикера "Хит продаж", стикер "Популярный" остается на своем месте, но как сделать, чтоб при отсутствии стикера 1, 2-й становился на его место.

 

Пробовал через Css решить, но не получается.

Спасибо!

post-705002-0-15624100-1455138214_thumb.png

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


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

Либо ссылочку, либо продолжать играться дальше с css. Тут могут только фотошопом помочь.

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


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

Либо ссылочку, либо продолжать играться дальше с css. Тут могут только фотошопом помочь.

Отправил Вам.

 

 

Тут могут только фотошопом помочь.

:-D

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


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

Вот код стикеров:

.box-product .image .stiker-popular-module {
	display: block;
	position: absolute;
	background: url('../image/popular.png') no-repeat;
	z-index: 6;
	width: 80px;
	height: 80px;
	top: 125px;
	right: -5px;
	-webkit-transition: all 0.3s ease-in 0s;
    -moz-transition: all 0.3s ease-in 0s;
	transition: all 0.3s ease-in 0s;
}
.box-product .image .stiker-bestseller-module {
	display: block;
	position: absolute;
	background: url('../image/bestseller.png') no-repeat;
	z-index: 6;
	width: 80px;
	height: 80px;
	bottom: -58px;
	right: -5px;
	-webkit-transition: all 0.3s ease-in 0s;
    -moz-transition: all 0.3s ease-in 0s;
	transition: all 0.3s ease-in 0s;
}
.box-product > div:hover .stiker-special-module, .box-product > div:hover .stiker-new-module, .box-product > div:hover .stiker-popular-module, .box-product > div:hover .stiker-bestseller-module {
	opacity: 0;

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


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

Не получается, пробовал с переменными nth-child odd even, но ничего. :mellow:  Смотрел примеры в гугле, но там только работа с таблицами и применение к строкам и столбцам.

Подскажите пожалуйста подробнее, а то уж очень далек от таких задач.

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


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

Писать стили основываясь на воображении не моё.Как в анекдоте , нет ножек(ссылки) нет мультиков.

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


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

Писать стили основываясь на воображении не моё.Как в анекдоте , нет ножек(ссылки) нет мультиков.

Написал Вам в Лс, но выложу еще сюда. 

 

Стили есть в 4 сообщении, но если еще что-то нужно, вот ссылка:

 клац

как опустить стикер популярный вниз, на место Хит продаж, если 2й не используется?

Изменено пользователем Ch0oJoy

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


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

Если расположение стикеров поменять (сверху "хит продаж", снизу "популярный") тогда легко с помощью цсс решается ваша задача (когда отображается только один любой стикер, он всегда будет снизу)

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


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

Примерно так:

.product-grid .image .stiker-popular {
    background: rgba(0, 0, 0, 0) url("../image/popular.png") no-repeat scroll 0 0;
    bottom: -52px;
    display: block;
    height: 80px;
    position: absolute;
    right: -5px;
    transition: all 0.3s ease-in 0s;
    width: 80px;
    z-index: 6;
}
.product-grid .image .stiker-bestseller {
    background: rgba(0, 0, 0, 0) url("../image/bestseller.png") no-repeat scroll 0 0;
    bottom: -52px;
    display: block;
    height: 80px;
    position: absolute;
    right: -5px;
    transition: all 0.3s ease-in 0s;
    width: 80px;
    z-index: 6;
}
.product-grid .image .stiker-popular + .stiker-bestseller {
    bottom: -22px;
}

Почему имена классов приведенных вами выше и те, что на сайте (ссылку которого вы тут указали) отличаются?

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


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

Примерно так:

.product-grid .image .stiker-popular {
    background: rgba(0, 0, 0, 0) url("../image/popular.png") no-repeat scroll 0 0;
    bottom: -52px;
    display: block;
    height: 80px;
    position: absolute;
    right: -5px;
    transition: all 0.3s ease-in 0s;
    width: 80px;
    z-index: 6;
}
.product-grid .image .stiker-bestseller {
    background: rgba(0, 0, 0, 0) url("../image/bestseller.png") no-repeat scroll 0 0;
    bottom: -52px;
    display: block;
    height: 80px;
    position: absolute;
    right: -5px;
    transition: all 0.3s ease-in 0s;
    width: 80px;
    z-index: 6;
}
.product-grid .image .stiker-popular + .stiker-bestseller {
    bottom: -22px;
}

Почему имена классов приведенных вами выше и те, что на сайте (ссылку которого вы тут указали) отличаются?

Спасибо большое, все получилось!  :-)

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


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

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

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

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

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

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

Войти

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

Войти

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

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

×

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

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