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

[Ch0oJoy 9]

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

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

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

 

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

Спасибо!

[hoolygan 84]

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

[Ch0oJoy 9]

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

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

 

 

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

:-D

[Ch0oJoy 9]

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

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

[Tom 2 327]

http://htmlbook.ru/css/nth-child

[Ch0oJoy 9]

http://htmlbook.ru/css/nth-child

Спасибо, попробую разобраться.

[Ch0oJoy 9]

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

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

[Tom 2 327]

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

[Ch0oJoy 9]

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

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

 

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

 клац

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

Изменено 11 февраля, 2016 пользователем Ch0oJoy

[edifier 24]

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

[edifier 24]

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

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

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

[Ch0oJoy 9]

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

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

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

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