BeTep2

Помощь с CSS

Рекомендуемые сообщения

BeTep2    0
Добрый день!

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

 

Как выглядит код:



.box-product2 {
 
    background: #FFFFFF;
    border-left: 1px solid #A87B4F;
    border-right: 0px solid #A87B4F;
    border-bottom: 1px solid #A87B4F;
    width: xx%;
    overflow: auto
}
.box-product2 > div {
    width: 210px;
    display: inline-block;
    vertical-align: middle;  
    border-left: 1px solid #A87B4F;
    border-right: 1px solid #A87B4F;
    border-top: 1px solid #A87B4F;
    margin-right: -1px;
    ;
    margin-bottom: 0px;
    margin-top: 0px;
}
#column-left + #column-right + #content .box-product2 > div {
    width: 279px;
    text-align: center;
}
.box-product2 .image {
    display: block;
    margin-bottom: 5px;
        margin-top: 5px;
    text-align: center;
}
.box-product2 .image img {
    padding: 0px;
    border: 0px solid #E7E7E7;
}
.box-product2 .name a {
    color: #A87B4F;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    display: block;
    margin-bottom: 9px;
    margin-left: 5px;
    text-align: center;
}
.box-product2 .short{
    font-weight: normal;
    color: #472d16;
    margin-bottom: 10px;
    margin-left: 15px;
    text-align: left;
    }
 
.box-product2 .price {
    font-size: 14px;
    font-weight: bold;
    color: #472d16;
    padding-top: 3px;
    margin-bottom: 5px;
    margin-left: 15px;
 
    text-align: center;
}
.box-product2 .price-old {
    color: #F00;
    text-decoration: line-through;
}
.box-product2 .price-new {
    font-weight: bold;
}
.box-product2 .rating {
    display: block;
    margin-bottom: 4px;
}
.box-product2 .cart {
float: right;
margin-right: 17px;
margin-bottom: 10px;
}


 

Вот как визуально косяк выглядит:

6bea6e2b6fb5f4da5dbec12dfc4cdfb5.png 


Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Tom    2 175

Картинки и код хорош в том случае,если реального ответа ты не ждёшь и выложил это сюда, как крик души.Во всех остальных случаях помогает ссылка на проблему.Как то так!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Pascha    704


.box-product2 .name {

   height: 50px;

   text-align: center;

   margin: 2px 10px 3px 10px;

}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
BeTep2    0

Благодарю! То что надо!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Похожий контент

    • От schtirlitz
      Добрый день,
      Подскажите, пожалуйста, как реализовать дополнительные сопутствующие товары. Например, есть светильник. У него есть связанные товары из других категорий (бра, торшер) или такой же, но больше ламп. Эти товары добавляются в карточке товаров в поле Рекомендуемые товары (Сопутствующие товары). Хочется добавить еще поле сопутствующих товаров - например варианты лампочек для этого светильника, выключатель...
       
      Спасибо!
    • От Extazy
      Здравствуйте.
      Мне под заказ ставили Opencart 2.1 - на месте похожих товаров выводится блок товаров того же производителя и блок товаров из этой же категории.
       
      Помогите, пожалуйста, как вывести блок с похожими по названию товарами?
      Можете, пожалуйста, скинуть основу кода для view/product.php и для controller/product.php ?
    • От zubovd




      Название: Рекомендуемые товары в категории
      Добавил: zubovd
      Добавлен: 20 апр. 2016
      Категория: Модули
      Работает на OpenCart: 1.5.xРаботает на ocStore: 1.5.x
      Метод активации: Без активации
      Сайт разработчика: https://opencart-module.com
      Ioncube Loader: Нет


      Данный модуль предоставляет возможность привязывать рекомендуемые товары к любой категории и выводить их непосредственно в категории в виде обычного модуля товаров.
      Плюшки модуля:
      привязка неограниченного кол-ва товаров к каждой категории
      мультиязычный кастомный заголовок модуля с возможностью подстановки имени категории
      размер изображений товаров
      четыре стандартных расположения модуля (вверх/низ/слева/справа)
      вкл./выкл. отображения модуля
      порядок сортировки
      лимит отображаемых товаров
      тип сортировки товаров: По умолчанию
      Наименование (А -> Я)
      Наименование (Я -> А)
      Модель (А -> Я)
      Модель(Я -> А)
      Количество (по возрастанию)
      Количество (по убыванию)
      Цена (по возрастанию)
      Цена (по убыванию)
      Рейтинг (по возрастанию)
      Рейтинг (по убыванию)
      Дата добавления (по возрастанию)
      Дата добавления (по убыванию)
      Кол-во просмотров (по возрастанию)
      Кол-во просмотров (по убыванию)
      Случайная

      [*]использование карусели
      [*]использование кеширования выборки товаров
      [*]мультимагазин


      В модуле две локали - русская и английская.
      Демо модуля
      Демо настроек модуля

      Логин: crproducts_demo
      Прароль: demo
      Быть может Вас могут заинтересовать:
      Модуль "Сопутствующие товары"
      Модуль "Похожие товары (vqmod)"
      Модуль "Похожие товары"
      Модуль "Рекомендуемые товары"
      Клон модуля "Рекомендуемые товары"
      Клон клона модуля "Рекомендуемые товары"
      Модуль оплаты Z-Payment для версий 1.5.x
      Микроданные Schema.org
      Микроданные Schema.org + Яндекс Острова для категорий
      Микроданные Schema.org + Яндекс Острова для производителей


      Нажмите здесь, чтобы скачать файл
    • От zubovd
      Данный модуль предоставляет возможность привязывать рекомендуемые товары к любой категории и выводить их непосредственно в категории в виде обычного модуля товаров.
      Плюшки модуля:
      привязка неограниченного кол-ва товаров к каждой категории
      мультиязычный кастомный заголовок модуля с возможностью подстановки имени категории
      размер изображений товаров
      четыре стандартных расположения модуля (вверх/низ/слева/справа)
      вкл./выкл. отображения модуля
      порядок сортировки
      лимит отображаемых товаров
      тип сортировки товаров: По умолчанию
      Наименование (А -> Я)
      Наименование (Я -> А)
      Модель (А -> Я)
      Модель(Я -> А)
      Количество (по возрастанию)
      Количество (по убыванию)
      Цена (по возрастанию)
      Цена (по убыванию)
      Рейтинг (по возрастанию)
      Рейтинг (по убыванию)
      Дата добавления (по возрастанию)
      Дата добавления (по убыванию)
      Кол-во просмотров (по возрастанию)
      Кол-во просмотров (по убыванию)
      Случайная

      [*]использование карусели
      [*]использование кеширования выборки товаров
      [*]мультимагазин


      В модуле две локали - русская и английская.
      Демо модуля
      Демо настроек модуля

      Логин: crproducts_demo
      Прароль: demo
      Быть может Вас могут заинтересовать:
      Модуль "Сопутствующие товары"
      Модуль "Похожие товары (vqmod)"
      Модуль "Похожие товары"
      Модуль "Рекомендуемые товары"
      Клон модуля "Рекомендуемые товары"
      Клон клона модуля "Рекомендуемые товары"
      Модуль оплаты Z-Payment для версий 1.5.x
      Микроданные Schema.org
      Микроданные Schema.org + Яндекс Острова для категорий
      Микроданные Schema.org + Яндекс Острова для производителей

    • От bnku




      Название: Related Products Plus
      Добавил: bnku
      Добавлен: 31 окт. 2014
      Категория: Модули

      Related Products Plus
      Добавление сопутствующих товаров целой категории товаров.
      Модификация дает возможность добавлять сопутствующие товары сразу для целой категории товаров.
      --------------------------------------------------------------------------------------------------------
      Модуль добавляет сопутствующие товары в одностороннем порядке, без перелинковки* (см. скриншот) и никак не вмешивается в работу фронт-энда!
      --------------------------------------------------------------------------------------------------------
      * (Чтобы включить двустороннюю перелинковку, раскоментируйте все закоментированные строки в файле.)
      После установки модификации, в административной панели на странице редактирования товара на вкладке "Связи" появится чекбокс "Применить к категории" и поле выбора категории.
      Если выбрать галочку рядом с "Применить к категории", то все товары, которые находятся в списке, будут добавлены ко всем товарам выбранной категории.
      По умолчанию выбрана главная категория редактируемого товара, если она установлена. Можно выбрать категорию выше по иерархии, тогда сопутствующие товары добавятся всем товарам всех категорий, находящихся ниже ее по иерархии и товарам выбранной категории.
      При этом, если к какому-то товару из выбранной категории уже добавлены сопутствующие, то они перезапишутся (удалятся и добавятся только те, которые были выбраны в форме).
      Если галочка стоит, но при этом не выбрано ни одного сопутствующего товара, ВСЕ уже добавленные сопутствующие товары у ВСЕХ товаров выбранной категории УДАЛЯТСЯ!
      Если галочку не выбирать, то изменения будут применены, как и раньше, только к текущему товару.
      Начиная работать над какой-то конкретной категорией товаров, рекомендуется такой алгоритм:
      сначала добавить общие сопутствующие товары для всей категории (галочка выбрана);
      потом, если требуется, добавить другие сопутствующие товары определенным товарам (уже без галочки).

      Для работы модификации требуется установленный VQMOD
      Тестировалось на версии ocStore 1.5.5.1.2
      Должно работать на всей ветке 1.5.*

      Нажмите здесь, чтобы скачать файл
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу