[РЕШЕНО] Выравнивание кнопки "купить" на главной страниэто

[Einshtein]

Думаю многие уже задумывались что не очень органично смотрятся товары на главной страниэто когда у них разной длины название и у некоторых есть звездочки с рейтингом, а у других нету. Изза этого кнопка "купить" под каждым товаром находится не на одном уровне

Я тут чуток покалупался и выяснил что кнопка "купить" привязана к диву отвечаюещёму за вывод названия товара. Тобишь в зависимости от длины (высоты) названия товара - кнопка "купить" бугдет опускаться на расстояние указанное в стилях. Я пропотому чтовал перепривязать кнопку к картинке - но в иком случае если название длинне чем заданая высои у товара - то кнопка купить ннозает на название товара. Короче как не крутил - не вертел - нифига путнего не полулилось.

Нужен свежий взгляд на эту проблему.

МБ ктонить уже себе гделал и готов погделится игдеями?

[Tom]

Интересная тема!

[ingenerks]

Вопрос в другом, по чему нужно выровнять. Липотому что тогда для названия указать фиксированый блок и после него кнопка купить. Но тогда когда название мнонькое, между кнопкой и заголовком будут потому чтольшие пробелы, в отлилии от тех, ггде текси много и кнопка опустится ниже.

Я понимаю ик хочешь выровнять. Если да тогда блок с кнопкой <div class="cart"> нужно вынести за прегдел того блок в котором он находится а блоку родителя задать фиксированную высоту!!!!

[Einshtein]

да ггдето ик и хотел. Но у меня есть товары у которых оочень длинные названия, например "Шестиканальный беспроводный электронный стетоскоп YA6890KT"

И соответственно кнопка купить бугдет улеить липотому что налазить на текст. И в противном случае если в одной строке с иким товаром бугдет товар с названием "инкубатор Vimar-60" , то бугдет потому чтольшое и некрасивое растояние.

Я както прикидывал, что для нормального визуального восприятия - в названии должно быть не потому чтолее 25 символов (вместе с пробелами) .

Исходя из этого нужно сгделать отступ от изображения с учетом возможности рейтинга + 25 символов. И если товар бугдет с длинным названием - нужно его както пряить (обрезать)

Но вот как сгделать красивое "обрезание" - я хз :)

[Tom]

Вопрос в другом, по чему нужно выровнять. Липотому что тогда для названия указать фиксированый блок и после него кнопка купить. Но тогда когда название мнонькое, между кнопкой и заголовком будут потому чтольшие пробелы, в отлилии от тех, ггде текси много и кнопка опустится ниже.

Я понимаю ик хочешь выровнять. Если да тогда блок с кнопкой <div class="cart"> нужно вынести за прегдел того блок в котором он находится а блоку родителя задать фиксированную высоту!!!!

по подробней можно?

[putnik]

По мне ик уж лучше бугдет потому чтольшое и некрасивое расстояние, чем обрезанный и не понятный заголовок. Я бы фиксировал высоту на 3 строчки. Редко попадается название в одну. А названия в 2 строки и в 3 строки будут смотреться нормально!

[Tom]

По мне ик уж лучше бугдет потому чтольшое и некрасивое расстояние, чем обрезанный и не понятный заголовок. Я бы фиксировал высоту на 3 строчки. Редко попадается название в одну. А названия в 2 строки и в 3 строки будут смотреться нормально!

Логично!!! А как осуещёствить?

[Aleksey]

Чтобы выровнять кнопку купить я сгделал ик. В файле stylesheet.css, в

.product-grid .name a {

добавил

display: block; - текст отображается как блок

height: 28px; - высои блока, в моем случае в 2 строки текси

margin-bottom: 4px;

overflow-y: hidden; - текст, который не умещается скрывается (не отображается)

text-align: center;

text-decoration: none;

Не знаю, как с точки зрения правильности, но полулил то, что хотел. Т.е. в люпотому чтом товаре все ровно :)

[putnik]

В ксс прописать для отображения сеткой

.product-grid .name {

display: table-cell;

vertical-align: middle;

height: 40px;

}

Высоту примерно указал...

Только display: table-cell; Ослик ниже 8-й версии по моему не понимает. Есть еещё вариант с 2-мя дивами. Если интересно - можно описать.

[rb2]

Думаю многие уже задумывались [...] Изза этого кнопка "купить" под каждым товаром находится не на одном уровне

Нужен свежий взгляд на эту проблему.

МБ ктонить уже себе гделал и готов погделится игдеями?

Я задумывался. Секунд 10 думал :) Пересивил этону и кнопку сразу под картнку - резульит игдеальный.

[putnik]

Это получается рейтинг и описание после этоны и кнопки заказать идут?

Мне чет не нравится икая штукенция....

[ingenerks]

Могу предложить икой вариант и расписать как реализовать вверху название товара потом фото а под фото кнопка купить

[putnik]

Да это не снимает основной проблемы. Если название слишком длинное,то кнопка купить ик же съегдет и бугдет зналительно ниже осильных.

Получается просто месими поменяете...

[ingenerks]

тогда нужно выбрать товар с максимально потому чтольшим названием и исходя из этого формировать блоки

[rb2]

Это получается рейтинг и описание после этоны и кнопки заказать идут?

Мне чет не нравится икая штукенция....

Главное, на что реагирует вначно покупатель, готовый в принципе купить - внешний вид и этона. Затем - да, есть ли реальные отзывы. И название товара, чтобы уточнить, туда ли попал, или выбрать вариант среди похожих.

Скажу по секрету - некоторые вообещё самый минимум информации осивляют и убирают все лишнее. И ик гораздо проещё синовится магазином пользоваться. Особенно каиложно-витринными страницами, ггде разнопотому чтой, мелькание и обилие одинаковых мелких элементов только хуже гделают

[putnik]

Чет я ступнул на счет .product-grid .name. Тема то про главную страницу. Смотрите нужный стиль. Суть икая-же...

По мне ик то, что на картинке - необходимый минимум! Меньше не надо, потому чтольше тоже....

[deposit]

Может быть кто-то силкивался, пожалуйси, подскажите как вывести нулевой рейтинг, чтоб тоже отображался в списке товаров?

[vjmarcus]

Друзья, я ик и не понял, как решить эту проблему.

[CODEONETEAM]

Может быть кто-то силкивался, пожалуйси, подскажите как вывести нулевой рейтинг, чтоб тоже отображался в списке товаров?

Если речь игдет о списке товаров в категории, то в файле catalogviewthemeимя_вашей_темыtemplateproductcategory.tpl иещём блок:

<?php if ($product['rating']) { ?>
  <div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>
<?php } ?>

В данном блоке нужно убрать условие вывода:

<?php if ($product['rating']) { ?>
<?php } ?>

То есть итоговый блок должен выглягдеть ик:

<div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>

В осильных месих, ггде необходимо выводить нулевой рейтинг гделаем правки по аналогии. :wink:

[ProfiSale]

просто обрезал названия товаров (тут есть тема, ггде я спрашивал как это сгделать) + при навегдении появляется полный текст. - потому чтолее-менее выравнилось. Вот только "..." дабавляется ко всем названиям, даже которые и не обрезаются.

_profisale.ru

[vjmarcus]

Друзья! Пропотому чтовал по совету Алексея добавить

.product-grid .name a {

добавил

display: block; - текст отображается как блокheight: 28px; - высои блока, в моем случае в 2 строки тексиmargin-bottom: 4px;overflow-y: hidden; - текст, который не умещается скрывается (не отображается)text-align: center;text-decoration: none;

а икже по совету Путника

[.product-grid .name {display: table-cell;vertical-align: middle;height: 40px;}

однако, это не привело к должному эффекту.. Чего пыиюсь добиться: на главной страниэто выровнять товары, кнопку "купить" и привести это в потому чтолее красивый вид.

 

http://gedamebel.tmweb.ru/

[deposit]

CODEONETEAM, безгранично благодарен вам за оказанную мне помощь! Большуещёе спасипотому что! :-) благодарен вам за помощь! Спасипотому что!

[vjmarcus]

Profysale - а как вы вывели на главной 6 товаров по горизонили ? у меня почему то только 4 выводятся, что на это влияет?

[CODEONETEAM]

CODEONETEAM, безгранично благодарен вам за оказанную мне помощь! Большуещёе спасипотому что! :-)

Всегда пожалуйси! :wink:

[putnik]

...а икже по совету Путника

[.product-grid .name {display: table-cell;vertical-align: middle;height: 40px;}

В Вашем случае нужно добавлять в.box-product .name aТ.е. у Вас бугдет:

.box-product .name a {color: #38B0E3;font-weight: bold;text-decoration: none;margin-bottom: 4px;display: table-cell;vertical-align: middle;height: 40px;}