[Помогите] Пропуски товаров в категории

Тема в разделе "OpenCart", создана пользователем webmasterz, 15 апр 2014.

  1. webmasterz

    webmasterz

    Регистрация:
    21 янв 2014
    Сообщения:
    45
    Симпатии:
    0
    Добрый день!
    Есть магазин на ocstorе (http://storewatch.ru), установлена тема leisure, при переходе в категорию некоторые товары переносятся на следующую строку, образуя пробелы (см картинку). Не знаете ли с чем это связано и как это исправить?

    [​IMG]
     
  2. nikfakel

    nikfakel

    Регистрация:
    24 июл 2013
    Сообщения:
    150
    Симпатии:
    33
    Это связано с тем, что у блока каждого товара указан float:left, а высота блока зависит от контента. Поэтому у вас некоторые блоки "цепляются" за верхние. Надо выровнять все блоки по высоте.
     
  3. boxerrr

    boxerrr

    Регистрация:
    8 авг 2013
    Сообщения:
    105
    Симпатии:
    36
    такая же проблема была выровнял размер по самому большому блоку и все норм стало а у тебя так же можно краткое описание убрать из категорий !!!
     
  4. nikfakel

    nikfakel

    Регистрация:
    24 июл 2013
    Сообщения:
    150
    Симпатии:
    33
    все верно, из за разного размера описания генерируется разная высота блоков. Как вариант, можно еще задать для LI display:table-cell и убрать float:left - тогда все блоки будут по высоте автоматически одинаковыми. Минус в том, что тогда будет только фиксированное кол-во блоков в строке.
     
  5. and1

    and1

    Регистрация:
    1 фев 2013
    Сообщения:
    26
    Симпатии:
    50
    Можно еще добавить min-height добавить и привести все к единой высоте, тогда тоже все будет красиво!
     
  6. nikfakel

    nikfakel

    Регистрация:
    24 июл 2013
    Сообщения:
    150
    Симпатии:
    33
    Если контент будет больше, чем значение min-height, то блок все равно вытянется, и другие будут цеплятся за него.
     
  7. and1

    and1

    Регистрация:
    1 фев 2013
    Сообщения:
    26
    Симпатии:
    50
    В таком случае делать фиксированный height только так
     
  8. web2us

    web2us

    Регистрация:
    10 мар 2013
    Сообщения:
    0
    Симпатии:
    0
    в файле стилей http://storewatch.ru/catalog/view/theme/leisure/css/base.css,
    в классе .products_grid li изменить ширину, или задать ее правильно, с учетом разрешения и картинок
    .products_grid li {
    width: 121px;
    margin-left: 31px;
    float: left;
    padding-bottom: 15px;
    }
     
  9. nikfakel

    nikfakel

    Регистрация:
    24 июл 2013
    Сообщения:
    150
    Симпатии:
    33
    а причем здесь ширина? ширина верно стоит. блоки с флоат идут друг за другом, и если могут, то встают как можно выше, поэтому дело в высоте
     
  10. web2us

    web2us

    Регистрация:
    10 мар 2013
    Сообщения:
    0
    Симпатии:
    0
    потому что ширина блока не позволяет уместить 4ре и переносит на другую строку
     
  11. nikfakel

    nikfakel

    Регистрация:
    24 июл 2013
    Сообщения:
    150
    Симпатии:
    33
    У него <ul><li> список, у которых float:left; Было бы места больше, он бы и по 4, и по 5 вмещал - но из-за разной высоты дивов, те, которые перемещаются на строку ниже будут "цеплятся". тут например, 2 блока справа одинаковой высоты, а первый выше - поэтому "цепляется" за первый.
     
  12. web2us

    web2us

    Регистрация:
    10 мар 2013
    Сообщения:
    0
    Симпатии:
    0
    не будут, все будут выстраиваться в линеечку по верхнему краю
     
  13. webmasterz

    webmasterz

    Регистрация:
    21 янв 2014
    Сообщения:
    45
    Симпатии:
    0
    спасибо большое за помощь, сейчас попробую и отпишусь
    --- Добавлено, 18 апр 2014 ---
    Я сменил ширину на 121, приведя строку к такому виду:

    .products_grid li{width:121px; margin-left:31px; float:left; padding-bottom:15px;}

    и вот что получилось: [​IMG]


    Вот весь код:

    Код:
    /*PRODUCTS List - Grid*/
    .products_grid{ margin-bottom:17px; display:inline-block; width:100%;border-bottom:solid 2px #e9e9e9;}
    .products_grid li{width:121px; margin-left:31px; float:left; padding-bottom:15px;}
    .products_grid li:first-child{ margin-left:0px;}
    .search li:nth-child(4n+1) {margin-left:0px;}
    .products_grid a.product_image{display:block;}
    .products_grid a.product_image img{ border:solid 2px #fff;}
    .products_grid li:hover img{-moz-transition:all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out;}
    .products_grid .product_info{ margin-bottom:10px; padding-bottom:12px; border-bottom:solid 1px;}
    .products_grid .product_info h3{ font-size:14px; font-weight:normal; padding:12px 0px;}
    .products_grid .product_info h3 a{color:#000000; text-decoration:none;}
    .products_grid .product_info small{ color:#a2a2a2; font-size:12px; line-height:16px;}
    .products_grid .price_info button{ float:right; background:none;border:0px; padding:0px; height:32px; line-height:100%; overflow:hidden; cursor:pointer;}
    .products_grid .price_info button .pr_price{ background:#544f4b;  padding:10px; color:#fff; font-size:14px; font-weight:bold; float:left; clear:both; width:83%; text-transform:uppercase;}
    .products_grid .price_info button .pr_add{ padding:10px; color:#fff; font-size:11px; font-weight:bold; text-transform:uppercase;  float:left; clear:both; width:83%; margin-top:0px;}
    .products_grid li:hover .pr_add{ margin-top:-32px;-moz-transition:all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out;}
    .products_grid .price_info a{cursor: pointer; color:#a2a2a2; text-decoration:none; font-size:11px; display:inline-block; padding-top:10px;}
    #column-left .products_grid .price_info a{display: none;}
    #column-left .products_grid button {float: left!important;width:200px!important;}


    Сейчас еще попробую
     
    Последнее редактирование: 18 апр 2014
  14. web2us

    web2us

    Регистрация:
    10 мар 2013
    Сообщения:
    0
    Симпатии:
    0
    размер картинок уменьши
    width:121px я для примера написал и выделил, подразумевая, что тут поменяв можно отстроить
     
  15. rusalka_tany

    rusalka_tany

    Регистрация:
    27 мар 2014
    Сообщения:
    71
    Симпатии:
    28
    Попробуйте изменить размер изображения товаров, не залазия в код, т.е.
    Админка-система-настройки-изменить-изображения
    Меняем *Размер изображения в списке товаров:
     
  16. nikfakel

    nikfakel

    Регистрация:
    24 июл 2013
    Сообщения:
    150
    Симпатии:
    33
    Да просто верните все обратно и поставьте
    .products_grid li {height: ???px; }

    ??? - любое значение в пикселях