Подскажите
#1
Отправлено 24 Ноябрь 2013 - 19:03
#2
Отправлено 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
Отправлено 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
Отправлено 24 Ноябрь 2013 - 20:11
Cannab (24 Ноябрь 2013 - 19:59) писал:
Вот такое отображение у вас сейчас
Все карточки одной высоты.
Или вы что-то иное подразумеваете?
#5
Отправлено 24 Ноябрь 2013 - 20:17
sengun (24 Ноябрь 2013 - 20:11) писал:
Вот такое отображение у вас сейчас 24-11-2013 21-09-22.png
Все карточки одной высоты.
Или вы что-то иное подразумеваете?
Cannab (24 Ноябрь 2013 - 20:15) писал:
#7
Отправлено 24 Ноябрь 2013 - 22:40
Cannab (24 Ноябрь 2013 - 20:26) писал:
Чтобы кнопку "Оставить отзыв" прикрепить над кнопкой "Быстрый заказ", в 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
Отправлено 25 Ноябрь 2013 - 19:28
sengun (24 Ноябрь 2013 - 22:40) писал:
Чтобы кнопку "Оставить отзыв" прикрепить над кнопкой "Быстрый заказ", в 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
Отправлено 26 Ноябрь 2013 - 20:34
Cannab (25 Ноябрь 2013 - 19:28) писал:
Находим
#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
Отправлено 30 Ноябрь 2013 - 19:43
Castiel (26 Ноябрь 2013 - 20:34) писал:
Находим
#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; }
#11
Отправлено 01 Декабрь 2013 - 19:28
#13
Отправлено 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
Отправлено 02 Декабрь 2013 - 08:27
miyako (02 Декабрь 2013 - 08:06) писал:
#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
Отправлено 02 Декабрь 2013 - 08:42
dieselcat (02 Декабрь 2013 - 08:27) писал:
Очистите кэш пожалуйста. Сейчас у Вас расстояние стало меньше. Для того, чтобы отображались категории ровно необходимо подобрать одинаковых размеров изображения категорий. Иначе у Вас неровно будут отображаться элементы в блоках категорий.
#16
Отправлено 02 Декабрь 2013 - 09:06
#19
Отправлено 02 Декабрь 2013 - 09:51
dieselcat (02 Декабрь 2013 - 09:14) писал:
Можно отменить одну и ту же длину, и немного переверстать, но тогда у Вас не будут ровно отображаться категории. Например, кнопка Быстрого заказа будет на разной длине, или где-то будет пустое пространство.
Отдельно эти элементы не редактируются.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных