Выравнивание карточек товаров.

Тема в разделе "Верстка", создана пользователем Teamk, 9 июл 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Teamk

    Teamk

    Регистр.:
    13 ноя 2013
    Сообщения:
    173
    Симпатии:
    64
    Ребята, привет всем. Подскажите, как сдеать карточки товаров ровными?
    [​IMG]
    Используется Joomla.
     
    Последнее редактирование: 9 июл 2014
  2. Denis_Pi

    Denis_Pi Art сreator

    Заблокирован
    Регистр.:
    8 май 2012
    Сообщения:
    398
    Симпатии:
    214
    в @media screen
    Код:
    .latest-view .spacer, .topten-view .spacer, .recent-view .spacer, .featured-view .spacer, .vmproduct.productdetails .spacer, .browse-view .spacer {
    text-align: center;
    padding: 20px;
    height: 310px;
    }
    Код:
    .category-view .row-fluid .category img, .row-fluid .spacer img {
    -webkit-backface-visibility: hidden;
    max-height: 125px;
    }
    Код:
    .pr-img-handler {
    position: relative;
    width: 100%;
    height: 175px;
    }
    ниже всех @media screen ...

    Код:
    .button, button, a.button, dt.tabs.closed:hover, dt.tabs.closed:hover h3 a, .closemenu, .vmproduct.productdetails .spacer:hover .pr-add, .vmproduct.productdetails .spacer:hover .pr-add-bottom, a.product-details:hover, input.addtocart-button, a.ask-a-question, .highlight-button, .vm-button-correct, span.quantity-controls input.quantity-plus, span.quantity-controls input.quantity-minus, .cartpanel span.closecart, .vm-pagination ul li a, #LoginForm .btn-group>.dropdown-menu, #LoginForm .btn-group>.dropdown-menu a, .popout-price, .popout-price .PricesalesPrice {
    color: #fff !important;
    background-color: #e36060 !important;
    margin-top: 15px;
    }
    найди указанные мной стили и посмотри, что у тебя уже есть а что нужно добавить в эти стили.

    на выходе Перейти по ссылке
     
    Teamk нравится это.
  3. Teamk

    Teamk

    Регистр.:
    13 ноя 2013
    Сообщения:
    173
    Симпатии:
    64
    Я понял, что это @media screen, но в CSS шаблона вообще этих строк нет. В каких файлах их искать?
    Наверное проблема в том, что у меня стоит JCH Optimize, поэтому я не могу их найти через браузер.
    Сейчас буду рыть...


    Все получилось на главной, за это спасибо большое, но все поехало на страницах категорий.
    И когда я включаю JCH Optimize, то начинается снова здорова...
     
    Последнее редактирование: 9 июл 2014
  4. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.134
    Симпатии:
    668
    Мой колхоз. Добавляем в стили
    HTML:
    .pr-img-handler a {height:170px;line-height:170px;}
    .pr-img-handler img {max-width:100%;max-height:170px;vertical-align:middle;}
    .popout-price {margin-top:10px;}
    
    Скрин результата во вложении.

    А вообще для таких случаев (когда высота блока с фоткой известна) Сергей Чикуенок помог сделать красиво и модно:
    Перейти по ссылке
     

    Вложения:

    • 1.png
      1.png
      Размер файла:
      113,5 КБ
      Просмотров:
      13
    Teamk нравится это.
  5. ITeshnik

    ITeshnik Постоялец

    Регистр.:
    21 май 2007
    Сообщения:
    105
    Симпатии:
    5
    У меня есть скрипт на джеквери.
    Он определяет максимальную высоту картинки и делает высоту блока по всем товарам.
    яваскрипт решение подойдёт?
     
  6. Teamk

    Teamk

    Регистр.:
    13 ноя 2013
    Сообщения:
    173
    Симпатии:
    64
    Конечно делись. Пригодится!
    mdss - благодарю- твой код сразу исправил все на всех страницах. Рекомендую.
    Вставил в первый попавшийся CSS файл... Может попал, а может разницы нет, но все заработало!
     
    Последнее редактирование: 9 июл 2014
  7. ITeshnik

    ITeshnik Постоялец

    Регистр.:
    21 май 2007
    Сообщения:
    105
    Симпатии:
    5
    Тут фикситься высота товара, заголовка и картинки
    Код:
    // catalog tovar height fix
    tovarHeightFix();
    function tovarHeightFix(){
        var tovar = $(".catalog .tovar");
        var tovarImg = $(".catalog .tovar .img");
        var tovarH2= $(".catalog .tovar h2");
        var maxHeightTov = $(".catalog .tovar").height();
        var maxHeightImg = $(".catalog .tovar .img").height();
        var maxHeightH2 = $(".catalog .tovar h2").height();
        tovarLength = tovar.length;
       
       
        $(window).load(function(){
                                    for (i=0;i<tovarLength;i++){
                                        tovHeightImg = tovarImg[i];
                                        tovHeightImg = $(tovHeightImg).height();
                                        if (maxHeightImg<tovHeightImg){
                                            maxHeightImg=tovHeightImg;
                                        }
                                    }
                                    $(".catalog .tovar .img").height(maxHeightImg);
                                    for (i=0;i<tovarLength;i++){
                                        tovHeightH2 = tovarH2[i];
                                        tovHeightH2 = $(tovHeightH2).height();
                                        if (maxHeightH2<tovHeightH2){
                                            maxHeightH2=tovHeightH2;
                                        }
                                    }
                                    $(".catalog .tovar h2").height(maxHeightH2);
                                   
                                    for (i=0;i<tovarLength;i++){
                                        tovHeight = tovar[i];
                                        tovHeight = $(tovHeight).height();
                                        if (maxHeightTov<tovHeight){
                                            maxHeightTov=tovHeight;
                                        }
                                    }
                                    $(".catalog .tovar").height(maxHeightTov);
                                    //img{vertical-align:middle;}
                                    for (i=0;i<tovarLength;i++){
                                        tovImg = $(".catalog .tovar .img img:not(.catalog .tovar .img .sale img)")[i];
                                        tovImgHeight = $(tovImg).height();
                                        imgMarginTop = maxHeightImg - tovImgHeight;
                                        $(tovarH2[i]).css({paddingTop:imgMarginTop})
                                       
                                    }
                                });
        };