Перейти к содержимому


Подскажите


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 39

#1 Cannab

Cannab

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 52 сообщений

Отправлено 24 Ноябрь 2013 - 19:03

Как выровнять кнопки быстрый заказ в одну линию?

Прикрепленные изображения

  • выровнять.jpg


#2 sengun

sengun

    Активный участник

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 24 Ноябрь 2013 - 19:47

Просмотр сообщенияCannab (24 Ноябрь 2013 - 19:03) писал:

Как выровнять кнопки быстрый заказ в одну линию?
Здравствуйте.
Чтобы выстроить эти кнопки в одно линию, как вы понимаете, надо задать одинаковую высоту карточкам товаров в каталоге и прикрепить кнопки к низу.
В шаблоне style.css найдите
.autumnshowcase_block li{position:relative;width:210px;height:auto;margin:0;padding:0 30px 0 0;text-align:center}
замените на
.autumnshowcase_block li{position:relative;width:210px;height:400px;margin:0;padding:0 30px 0 0;text-align:center}
Далее найдите
.goodsListItemCatalogueAddToCartButton {padding-bottom: 5px;}
замените на
.goodsListItemCatalogueAddToCartButton {padding-bottom: 5px; position: absolute; bottom: 0px; width: inherit;}

Это для товаров на главной.
Для каталога найдите
#category_view_type.grid_view #product_list li{display: inline-block; display: -moz-inline-stack; *display: inline;position:relative;width:200px;min-height: 250px;margin:0 15px;padding:0;border:0; vertical-align: top;text-align:center;z-index: 100;}
замените на
#category_view_type.grid_view #product_list li{display: inline-block; display: -moz-inline-stack; *display: inline;position:relative;width:200px;height: 400px;margin:0 15px;padding:0;border:0; vertical-align: top;text-align:center;z-index: 100;}
Далее этот код
#category_view_type.grid_view #product_list .product_list_add_to_cart{text-align:center;margin-top:10px;margin-bottom:5px;position:relative;z-index:3;height:35px;line-height:35px}
замените на этот
#category_view_type.grid_view #product_list .product_list_add_to_cart{text-align:center;margin-top:10px;margin-bottom:5px;position: absolute;z-index:3;width: 100%;bottom: 20px;height:35px;line-height:35px}

И, наконец, добавьте в конец style.css этот код
#category_view_type.grid_view #product_list li .add-to-links {
position: absolute;
bottom: 0px;
width: 100%;
}


#3 Cannab

Cannab

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 52 сообщений

Отправлено 24 Ноябрь 2013 - 19:59

Просмотр сообщенияsengun (24 Ноябрь 2013 - 19:47) писал:

Здравствуйте.
Чтобы выстроить эти кнопки в одно линию, как вы понимаете, надо задать одинаковую высоту карточкам товаров в каталоге и прикрепить кнопки к низу.
В шаблоне style.css найдите
.autumnshowcase_block li{position:relative;width:210px;height:auto;margin:0;padding:0 30px 0 0;text-align:center}
замените на
.autumnshowcase_block li{position:relative;width:210px;height:400px;margin:0;padding:0 30px 0 0;text-align:center}
Далее найдите
.goodsListItemCatalogueAddToCartButton {padding-bottom: 5px;}
замените на
.goodsListItemCatalogueAddToCartButton {padding-bottom: 5px; position: absolute; bottom: 0px; width: inherit;}

Это для товаров на главной.
Для каталога найдите
#category_view_type.grid_view #product_list li{display: inline-block; display: -moz-inline-stack; *display: inline;position:relative;width:200px;min-height: 250px;margin:0 15px;padding:0;border:0; vertical-align: top;text-align:center;z-index: 100;}
замените на
#category_view_type.grid_view #product_list li{display: inline-block; display: -moz-inline-stack; *display: inline;position:relative;width:200px;height: 400px;margin:0 15px;padding:0;border:0; vertical-align: top;text-align:center;z-index: 100;}
Далее этот код
#category_view_type.grid_view #product_list .product_list_add_to_cart{text-align:center;margin-top:10px;margin-bottom:5px;position:relative;z-index:3;height:35px;line-height:35px}
замените на этот
#category_view_type.grid_view #product_list .product_list_add_to_cart{text-align:center;margin-top:10px;margin-bottom:5px;position: absolute;z-index:3;width: 100%;bottom: 20px;height:35px;line-height:35px}

И, наконец, добавьте в конец style.css этот код
#category_view_type.grid_view #product_list li .add-to-links {
position: absolute;
bottom: 0px;
width: 100%;
}
Спасибо за помощь, а вот высота карточек с товаром всеравно разная, как исправить?

#4 sengun

sengun

    Активный участник

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 24 Ноябрь 2013 - 20:11

Просмотр сообщенияCannab (24 Ноябрь 2013 - 19:59) писал:

Спасибо за помощь, а вот высота карточек с товаром всеравно разная, как исправить?
В приведенной инструкции карточки с товарами приобретают одинаковое значение высоты.
Вот такое отображение у вас сейчас24-11-2013 21-09-22.png
Все карточки одной высоты.
Или вы что-то иное подразумеваете?

#5 Cannab

Cannab

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 52 сообщений

Отправлено 24 Ноябрь 2013 - 20:17

Просмотр сообщенияsengun (24 Ноябрь 2013 - 20:11) писал:

В приведенной инструкции карточки с товарами приобретают одинаковое значение высоты.
Вот такое отображение у вас сейчасПрикрепленный файл 24-11-2013 21-09-22.png
Все карточки одной высоты.
Или вы что-то иное подразумеваете?
тут они и изначально одинаковой высоты были, а вот на главной новинки высота разная

Просмотр сообщенияCannab (24 Ноябрь 2013 - 20:15) писал:

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

#6 Cannab

Cannab

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 52 сообщений

Отправлено 24 Ноябрь 2013 - 20:26

И вот такая беда еще возникает

Прикрепленные изображения

  • 12.jpg


#7 sengun

sengun

    Активный участник

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 24 Ноябрь 2013 - 22:40

Просмотр сообщенияCannab (24 Ноябрь 2013 - 20:26) писал:

И вот такая беда еще возникает
На главной новинки отображаются вот так24-11-2013 22-44-28.png
Чтобы кнопку "Оставить отзыв" прикрепить над кнопкой "Быстрый заказ", в style.css
.rating{clear:both;display:block;margin:1em 1em;cursor:pointer;text-align: center;}
замените на
.rating{clear:both;display:block;cursor:pointer;text-align: center;position: absolute;width: 100%;bottom: 75px;}
.autumnshowcase_carousel .rating{clear:both;display:block;cursor:pointer;text-align: center;position: absolute;width: inherit;bottom: 45px;}

Причина того, что возникает у вас в категории "Все игры" - разные размеры картинок товаров, разная длина их наименования (занимает разное количество строк). Как раз под такие случаи и заточен шаблон "Осень", обеспечивая эффективное использование пространства страницы. Но, кнопки получаются в разнобой.
Есть 2 варианта: подогнать картинки товаров так, чтобы они были примерно одинакового размера, либо увеличивать высоту карточки товара (свойство ;height: 400px;) в коде
#category_view_type.grid_view #product_list li{display: inline-block; display: -moz-inline-stack; *display: inline;position:relative;width:200px;height: 400px;margin:0 15px;padding:0;border:0; vertical-align: top;text-align:center;z-index: 100;}
но в этом случае там, где картинки по высоте занимают меньше места, образуется много пустого пространства.


И еще замените
.goodsListItemCatalogueAddToCartButton {padding-bottom: 5px; position: absolute; bottom: 0px; width: inherit;}
на это
.goodsListItemCatalogueAddToCartButton {padding-bottom: 5px;}
.autumnshowcase_carousel .goodsListItemCatalogueAddToCartButton {
padding-bottom: 5px;
position: absolute;
bottom: 0px;
width: inherit;
}
а то при просмотре списком кнопка "Быстрый заказ" слетела и перекрывает цену.

#8 Cannab

Cannab

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 52 сообщений

Отправлено 25 Ноябрь 2013 - 19:28

Просмотр сообщенияsengun (24 Ноябрь 2013 - 22:40) писал:

На главной новинки отображаются вот такПрикрепленный файл 24-11-2013 22-44-28.png
Чтобы кнопку "Оставить отзыв" прикрепить над кнопкой "Быстрый заказ", в style.css
.rating{clear:both;display:block;margin:1em 1em;cursor:pointer;text-align: center;}
замените на
.rating{clear:both;display:block;cursor:pointer;text-align: center;position: absolute;width: 100%;bottom: 75px;}
.autumnshowcase_carousel .rating{clear:both;display:block;cursor:pointer;text-align: center;position: absolute;width: inherit;bottom: 45px;}

Причина того, что возникает у вас в категории "Все игры" - разные размеры картинок товаров, разная длина их наименования (занимает разное количество строк). Как раз под такие случаи и заточен шаблон "Осень", обеспечивая эффективное использование пространства страницы. Но, кнопки получаются в разнобой.
Есть 2 варианта: подогнать картинки товаров так, чтобы они были примерно одинакового размера, либо увеличивать высоту карточки товара (свойство ;height: 400px;) в коде
#category_view_type.grid_view #product_list li{display: inline-block; display: -moz-inline-stack; *display: inline;position:relative;width:200px;height: 400px;margin:0 15px;padding:0;border:0; vertical-align: top;text-align:center;z-index: 100;}
но в этом случае там, где картинки по высоте занимают меньше места, образуется много пустого пространства.


И еще замените
.goodsListItemCatalogueAddToCartButton {padding-bottom: 5px; position: absolute; bottom: 0px; width: inherit;}
на это
.goodsListItemCatalogueAddToCartButton {padding-bottom: 5px;}
.autumnshowcase_carousel .goodsListItemCatalogueAddToCartButton {
padding-bottom: 5px;
position: absolute;
bottom: 0px;
width: inherit;
}
а то при просмотре списком кнопка "Быстрый заказ" слетела и перекрывает цену.
проделал предложенные вами изменения, все осталось как есть

#9 Castiel

Castiel

    Активный участник

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 26 Ноябрь 2013 - 20:34

Просмотр сообщенияCannab (25 Ноябрь 2013 - 19:28) писал:

проделал предложенные вами изменения, все осталось как есть
Редактируем style.css

Находим
#category_view_type.grid_view #product_list .product_list_add_to_cart {
text-align: center;
margin-top: 10px;
margin-bottom: 5px;
position: absolute;
z-index: 3;
width: 100%;
bottom: 20px;
height: 35px;
line-height: 35px;
}

Заменяем
#category_view_type.grid_view #product_list .product_list_add_to_cart {
text-align: center;
margin-top: 10px;
margin-bottom: 5px;
position: absolute;
z-index: 3;
width: 100%;
height: 35px;
line-height: 35px;
}


#10 Cannab

Cannab

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 52 сообщений

Отправлено 30 Ноябрь 2013 - 19:43

Просмотр сообщенияCastiel (26 Ноябрь 2013 - 20:34) писал:

Редактируем style.css

Находим
#category_view_type.grid_view #product_list .product_list_add_to_cart {
text-align: center;
margin-top: 10px;
margin-bottom: 5px;
position: absolute;
z-index: 3;
width: 100%;
bottom: 20px;
height: 35px;
line-height: 35px;
}

Заменяем
#category_view_type.grid_view #product_list .product_list_add_to_cart {
text-align: center;
margin-top: 10px;
margin-bottom: 5px;
position: absolute;
z-index: 3;
width: 100%;
height: 35px;
line-height: 35px;
}
не нашел такого аккаунт SL-185561

#11 Stasya

Stasya

    Активный участник

  • Модератоpы
  • 4 007 сообщений

Отправлено 01 Декабрь 2013 - 19:28

401 строка Вашего файла style.css

#12 dieselcat

dieselcat

    Пользователь

  • Пользователи
  • PipPip
  • 17 сообщений

Отправлено 02 Декабрь 2013 - 07:39

Добрый день! Подскажите как сократить расстояние между категориями в каталоге и в товарах.

Прикрепленные изображения

  • 1.jpg


#13 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 02 Декабрь 2013 - 08:06

Просмотр сообщенияdieselcat (02 Декабрь 2013 - 07:39) писал:

Добрый день! Подскажите как сократить расстояние между категориями в каталоге и в товарах.

Найдите код в style.css -
#category_view_type.grid_view #product_list li {
display: inline-block;
display: -moz-inline-stack;
position: relative;
width: 200px;
height: 400px;
margin: 0 15px;
padding: 0;
border: 0;
vertical-align: top;
text-align: center;
z-index: 100;
}
и измените параметр длины height: 400px; на height: 334 px;

#14 dieselcat

dieselcat

    Пользователь

  • Пользователи
  • PipPip
  • 17 сообщений

Отправлено 02 Декабрь 2013 - 08:27

Просмотр сообщенияmiyako (02 Декабрь 2013 - 08:06) писал:

Найдите код в style.css -
#category_view_type.grid_view #product_list li {
display: inline-block;
display: -moz-inline-stack;
position: relative;
width: 200px;
height: 400px;
margin: 0 15px;
padding: 0;
border: 0;
vertical-align: top;
text-align: center;
z-index: 100;
}
и измените параметр длины height: 400px; на height: 334 px;
Изменил, ничего не поменялось.

#15 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 02 Декабрь 2013 - 08:42

Просмотр сообщенияdieselcat (02 Декабрь 2013 - 08:27) писал:

Изменил, ничего не поменялось.

Очистите кэш пожалуйста. Сейчас у Вас расстояние стало меньше. Для того, чтобы отображались категории ровно необходимо подобрать одинаковых размеров изображения категорий. Иначе у Вас неровно будут отображаться элементы в блоках категорий.

#16 dieselcat

dieselcat

    Пользователь

  • Пользователи
  • PipPip
  • 17 сообщений

Отправлено 02 Декабрь 2013 - 09:06

Изображения категорий абсолютно одинакового размера, а расстояние в каталоге все таки великовато.

#17 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 02 Декабрь 2013 - 09:09

Просмотр сообщенияdieselcat (02 Декабрь 2013 - 09:06) писал:

Изображения категорий абсолютно одинакового размера, а расстояние в каталоге все таки великовато.

Посмотрите пожалуйста на скриншот

Прикрепленные изображения

  • размеры категорий.png


#18 dieselcat

dieselcat

    Пользователь

  • Пользователи
  • PipPip
  • 17 сообщений

Отправлено 02 Декабрь 2013 - 09:14

Просмотр сообщенияmiyako (02 Декабрь 2013 - 09:09) писал:

Посмотрите пожалуйста на скриншот
Здесь я размеры исправлю, я имел в виду расстояние в каталоге или оно отдельно не редактируется?

#19 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 02 Декабрь 2013 - 09:51

Просмотр сообщенияdieselcat (02 Декабрь 2013 - 09:14) писал:

Здесь я размеры исправлю, я имел в виду расстояние в каталоге или оно отдельно не редактируется?

Можно отменить одну и ту же длину, и немного переверстать, но тогда у Вас не будут ровно отображаться категории. Например, кнопка Быстрого заказа будет на разной длине, или где-то будет пустое пространство.
Отдельно эти элементы не редактируются.

#20 dieselcat

dieselcat

    Пользователь

  • Пользователи
  • PipPip
  • 17 сообщений

Отправлено 02 Декабрь 2013 - 09:52

Ув.miyako ! Помогите пожалуйста поправить сайт.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных