Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

[Решено] Как уменьшить колличество товаров в строке каталога


Sergeevich

Recommended Posts

Сделал чтоб товар отображался сеткой, все норм, но отображается по 5 товаров в ряду, подскажите как уменьшить до 4 шт или 3 шт., для того чтобы сделать побольше изображения товара. Если в таком режиме как сейчас увеличиваю размер картинки то отображается по половине. :ugeek:

Надіслати
Поділитися на інших сайтах


редактируйте файл стилей, у меня например (http://extreme-motors.su/) это строки

.product-grid > div

.product-grid > div:hover

.product-grid .image img

ширина width: 240px; + отступами поигрался

размер изображения 200*200

Если я правильно понял, то Вы мне подсказываете про размеры? их я могу из админки менять, а вопрос в том чтоб товаров было не 5 в строке а 3 как у Вас. А если я неправильно понял то скажите пожалуйста подробней в каком файле и что именно поменять. тема дефолтная. Заранее спасибо.

Надіслати
Поділитися на інших сайтах


хм...вообще то я вам не размеры давал))) а указывал строки в stylesheet.css в которых нужно подправить параметры ))) а размеры лишь как пример относительно моего сайта)))

.product-grid > div

.product-grid > div:hover (этого стиля у вас может не быть!!!!)

.product-grid .image img

это стили классов в css изменить через админку вы их не сможете)))

ну это ж вроде как размеры и отступы....

post-25163-0-24704400-1363647458_thumb.jpg

post-25163-0-59045200-1363647458_thumb.jpg

Надіслати
Поділитися на інших сайтах


так вам и нужно изменить размер div*a и увеличить отступы

как с вариантом, что показывал:

.product-grid {
width: 100%;
}
.product-grid > div {
width: 240px;
border: 1px solid #fff;
display: inline-block;
vertical-align: top;
margin-right: 12px;
margin-bottom: 15px;
}
.product-grid > div:hover {
cursor:pointer;
border: 1px solid #ddd;
box-shadow: 0px 0px 30px 0px #ddd ;
width: 240px;
padding: -3px;

}
#column-left + #column-right + #content .product-grid > div {
width: 125px;
}
.product-grid .image {
display: block;
margin-bottom: 0px;
}
.product-grid .image img {
width: 240px;
padding: 0px;
border: 0px solid #fff;
}

естественно, если вам рамка с тенью при наведении не нужна удалите :

.product-grid > div:hover {
	cursor:pointer;
	border: 1px solid #ddd;
	box-shadow: 0px 0px 30px 0px #ddd ;
	width: 240px;
	padding: -3px;
}

Бомба :eek: , спасибо большое и рамка классная, а не подскажете как сделать у этой рамки углы круглые? и отступ текста (название товара) от рамки, а то он как-то прилип к левому краю рамки :-)

Надіслати
Поділитися на інших сайтах


в стили того объекта, который вы хотите так украсить

советую погуглить css

Да я просто скопировал и себе вставил то что добрый человек Pascha подсказал., так нужно в эти ж строки вписать? только в какие?

Надіслати
Поділитися на інших сайтах


С позволения доброго человека Pascha, я еще исправлю его стили для совместимости со всеми браузерами, поддерживающими эти значения, ну и кроме того у box-shadow всего 3 параметра по смещениям и размытию, а не 4:

.product-grid > div:hover {
cursor:pointer;
border: 1px solid #ddd;
box-shadow: 0px 0px 30px #ddd;
-webkit-box-shadow: 0px 0px 30px #ddd;
-moz-box-shadow: 0px 0px 30px #ddd;
width: 240px;
padding: -3px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
margin: 3px;
}

Надіслати
Поділитися на інших сайтах

С позволения доброго человека Pascha, я еще исправлю его стили для совместимости со всеми браузерами, поддерживающими эти значения, ну и кроме того у box-shadow всего 3 параметра по смещениям и размытию, а не 4:

.product-grid > div:hover {
cursor:pointer;
border: 1px solid #ddd;
box-shadow: 0px 0px 30px #ddd;
-webkit-box-shadow: 0px 0px 30px #ddd;
-moz-box-shadow: 0px 0px 30px #ddd;
width: 240px;
padding: -3px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
margin: 3px;
}

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

Надіслати
Поділитися на інших сайтах


Естественно станут подпрыгивать, вы ведь не глядя копируете что я тут ошибочно пишу :-)

свойство margin не в .product-grid > div:hover нужно, а в .product-grid > div

Увеличьте border-radius и увидите сглаживание прямоугольной рамки

Надіслати
Поділитися на інших сайтах

  • 2 months later...

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.