Jump to content
Sign in to follow this  
Ch0oJoy

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

Recommended Posts

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

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

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

 

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

Спасибо!

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

 

 

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

:-D

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

 

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

 клац

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

Edited by Ch0oJoy

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.