Проблема Помогите выравнить кнопку добавить в корзину в Virtuemart 3

Discussion in 'Внешний вид, шаблоны, графика' started by dimka92, Apr 15, 2016.

  1. Offline

    dimka92 Недавно здесь

    Joined:
    Apr 15, 2016
    Messages:
    14
    Likes Received:
    0
    Gender:
    Male
    Здравствуйте.
    Помогите пожалуйста решить проблему. Я совсем не опытен в создании сайта и у меня не получается сделать так, чтобы кнопки добавить в корзину были на одном уровне. Получается чем длинее название товара тем ниже она опускается и получается не красиво.

    И еще надпись на главной странице "наше меню" могу поменять размер и цвет, но не получается сделать по центру.

    Joomla 3.5.1
    Virtuemart 3
    Сайт sushi-bar.com.ua

    Заранее спасибо за помощь.
     
    dimka92, Apr 15, 2016
    #1

  2. Ads Master

     
  3. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    CSS -> min-height в помощь
     
    OlegK, Apr 15, 2016
    #2
  4. Offline

    dimka92 Недавно здесь

    Joined:
    Apr 15, 2016
    Messages:
    14
    Likes Received:
    0
    Gender:
    Male
    если можно поподробнее, буду очень благодарен
     
    dimka92, Apr 15, 2016
    #3
  5. CB9T
    Offline

    CB9T Преподаватель по J! Staff Member ⇒ Профи ⇐

    Joined:
    May 21, 2010
    Messages:
    2,604
    Likes Received:
    322
    Gender:
    Male
    Код (css):
    1. .vm3pr-1 .product-price {
    2.     min-height: 46px;
    3. }
     
    CB9T, Apr 17, 2016
    #4
  6. Offline

    dimka92 Недавно здесь

    Joined:
    Apr 15, 2016
    Messages:
    14
    Likes Received:
    0
    Gender:
    Male
    поменял, но оно не выравнивается, а просто все криво опускаются.
     
    dimka92, Apr 17, 2016
    #5
  7. CB9T
    Offline

    CB9T Преподаватель по J! Staff Member ⇒ Профи ⇐

    Joined:
    May 21, 2010
    Messages:
    2,604
    Likes Received:
    322
    Gender:
    Male
    Если все карточки должны быть ровень - Вам надо ко всем величинам задавать высоту:
    0_a416b_5db8a4f3_orig.png
     
    CB9T, Apr 17, 2016
    #6
  8. Offline

    dimka92 Недавно здесь

    Joined:
    Apr 15, 2016
    Messages:
    14
    Likes Received:
    0
    Gender:
    Male
    оно все равно вместе опускается и поднимается. Подскажите может можно как-то сделать так чтобы кнопка опускалась относительно картинки, а не относительно названии товара, чтобы длина названия не влияла на отступ
     
    dimka92, Apr 17, 2016
    #7
  9. CB9T
    Offline

    CB9T Преподаватель по J! Staff Member ⇒ Профи ⇐

    Joined:
    May 21, 2010
    Messages:
    2,604
    Likes Received:
    322
    Gender:
    Male
    position: absolute
     
    CB9T, Apr 17, 2016
    #8
  10. Offline

    dimka92 Недавно здесь

    Joined:
    Apr 15, 2016
    Messages:
    14
    Likes Received:
    0
    Gender:
    Male
    извините за наглость, но куда это надо вставлять?
     
    dimka92, Apr 17, 2016
    #9
  11. CB9T
    Offline

    CB9T Преподаватель по J! Staff Member ⇒ Профи ⇐

    Joined:
    May 21, 2010
    Messages:
    2,604
    Likes Received:
    322
    Gender:
    Male
    в css .

    Но это не готовое решение - надо потом отступы вычислять и т.д.
     
    CB9T, Apr 17, 2016
    #10
  12. Offline

    dimka92 Недавно здесь

    Joined:
    Apr 15, 2016
    Messages:
    14
    Likes Received:
    0
    Gender:
    Male
    Я повставлял этот код но оно все равно по названию выравнивает.

    я прикрепил файл, может сможете мне помочь, если Вас не затруднит.
     

    Attached Files:

    dimka92, Apr 17, 2016
    #11
  13. AKopytenko
    Offline

    AKopytenko Russian Joomla! Team Staff Member

    Joined:
    Sep 1, 2011
    Messages:
    1,963
    Likes Received:
    168
    Gender:
    Male
    Всем привет.

    @dimka92, если у тебя в строке всегда одинаковое кол-во товаров - лучше всего решить вопрос с высотой блоков с помощью JavaScript:
    Код (javascript):
    1. function equalCols(rowsGroup) {
    2.    rowsGroup.each(function() {
    3.      var currItem   = $(this).find('.product');
    4.      var tallestItem   = 0;
    5.      currItem.each(function() {
    6.        var thisHeight = $(this).height();
    7.        if(thisHeight > tallest) {
    8.     tallest = thisHeight;
    9.     }
    10.     currItem.height(tallest);
    11.      });
    12.    });
    13. }

    где group - набор объектов (блоки с товарами в строке).

    Вызываем функцию при загрузке страницы и при изменении пользователем размеров окна браузера.:
    Код (javascript):
    1. $(document).ready(function() {
    2.    var productRows = $('.browse-view > .row');
    3.    equalCols(rowsGroup);
    4. });
    5.  
    6. $(window).resize(function() {
    7.    var productRows = $('.browse-view > .row');
    8.    equalCols(rowsGroup);
    9. });


    Принцип такой: при загрузке страницы считается высота всех блоков в строке, затем всем блокам устанавливается наибольшее значение высоты.
    При этом для кнопки "Добавить в корзину" устанавливаем:
    Код (css):
    1. {
    2.     ...
    3.     position: absolute;
    4.     left: 0;
    5.     bottom: 10px;
    6.     height: 30px;
    7.     ...
    8. }

    Для блока, внутри которого лежит кнопка "Добавить в корзину" устанавливаем:
    Код (css):
    1. {
    2.     ...
    3.     position: relative;
    4.     padding-bottom: 50px; /* высота кнопки 30px + отступ 10px сверху и снизу */
    5.     ...
    6. }

    Я при решении такой проблемы, как правило, использую комбинированный вариант: устанавливаю фиксированную высоту блоков внутри блока с товаром (высота блока с заголовком, высота блока с картинкой) + использую функцию, указанную выше. Это позволяет привести страницу к максимально красивому виду.

    Файлы для редактирования (в твоём случае), в которые нужно вписать всё вышеперечисленное:
    • CSS: /templates/doshi8/css/template.css
    • JavaScript: /templates/doshi8/script.js
     
    AKopytenko, Apr 18, 2016
    #12
  14. Offline

    dimka92 Недавно здесь

    Joined:
    Apr 15, 2016
    Messages:
    14
    Likes Received:
    0
    Gender:
    Male
    Спасибо за ответ, я попытался сделать как Вы написали, но так как я слабо понимаю куда вставлять, у меня получалось все что угодно, но они все равно не выравнивались.
    --- добавлено: Apr 18, 2016, первое сообщение размещено: Apr 18, 2016 ---
    если Вас не затруднит, вставьте пожалуйста эти коды куда нужно. Вы бы меня выручили. я прикрепил файлы которые Вы указали.
     

    Attached Files:

    dimka92, Apr 18, 2016
    #13
  15. AKopytenko
    Offline

    AKopytenko Russian Joomla! Team Staff Member

    Joined:
    Sep 1, 2011
    Messages:
    1,963
    Likes Received:
    168
    Gender:
    Male
    Это же не богодельня :)
    Наш форум направлен, в основном, на обучение молодых специалистов и поддержку пользователей.
    Если ты простой пользователь - тебя вообще не должны волновать коды вообще. Работай через админку и не заморачивайся над вёрсткой/программингом.
    Если начинающий специалист - нужно учиться делать самому! Инфы кругом куча, здесь мы можем сориентировать куда и как вносить изменения ;)
     
    AKopytenko, Apr 29, 2016
    #14
< Помогите с мобильной версией сайта | Медленная скорость загрузки шаблона на iphone/ipad >

Share This Page

Loading...