Jump to content
Sign in to follow this  
Sergeevich

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

Если в таком режиме как сейчас увеличиваю размер картинки то отображается по половине. :ugeek:

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

.product-grid > div

.product-grid > div:hover

.product-grid .image img

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

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

Share this post


Link to post
Share on other sites

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

.product-grid > div

.product-grid > div:hover

.product-grid .image img

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

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

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

Share this post


Link to post
Share on other sites

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

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

.product-grid > div

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

.product-grid .image img

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

Share this post


Link to post
Share on other sites

хм...вообще то я вам не размеры давал))) а указывал строки в 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

Share this post


Link to post
Share on other sites
.product-grid > div {
width: 130px; /* однозначно менять */
...
}

Share this post


Link to post
Share on other sites

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

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

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

Если в таком режиме как сейчас увеличиваю размер картинки то отображается по половине. :ugeek:

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

.product-grid > div

.product-grid > div:hover

.product-grid .image img

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

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

.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;
}

  • +1 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

border-radius

margin

Share this post


Link to post
Share on other sites

border-radius

margin

border-radius: 2px;

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.