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

[Sergeevich]

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

[Sergeevich]

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

.product-grid > div

.product-grid > div:hover

.product-grid .image img

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

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

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

[Sergeevich]

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

.product-grid > div

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

.product-grid .image img

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

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

[afwollis]

.product-grid > div {
width: 130px; /* однозначно менять */
...
}

[Sergeevich]

так вам и нужно изменить размер 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: , спасибо большое и рамка классная, а не подскажете как сделать у этой рамки углы круглые? и отступ текста (название товара) от рамки, а то он как-то прилип к левому краю рамки :-)

[RGB]

border-radius

margin

[Sergeevich]

border-radius

margin

border-radius: 2px;

margin: 3px; - так оно правильно пишется??? и куда именно вписать?

[RGB]

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

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

[Sergeevich]

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

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

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

[RGB]

С позволения доброго человека 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;
}

[Sergeevich]

С позволения доброго человека 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;
}

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

[RGB]

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

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

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

[Sergeevich]

Здравствуйте, может кто еще подскажет что еще прописать чтоб картинка как-бы приподымалась при наведении курсора?