Sergeevich

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

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

Sergeevich    5

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

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


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

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

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

.product-grid > div

.product-grid > div:hover

.product-grid .image img

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

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

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


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

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

.product-grid > div

.product-grid > div:hover

.product-grid .image img

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

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

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

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


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

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

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

.product-grid > div

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

.product-grid .image img

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

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


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

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

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


Ссылка на сообщение
Поделиться на другие сайты
afwollis    1 097
.product-grid > div {
width: 130px; /* однозначно менять */
...
}

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


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

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

так вам и нужно изменить размер 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;
}

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


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

так вам и нужно изменить размер 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    1 010

border-radius

margin

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


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

border-radius

margin

border-radius: 2px;

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

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


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

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

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

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


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

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

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

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

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


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

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

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

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

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

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

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


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

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

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


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

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

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

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

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

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

Войти

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

Войти


  • Последние посетители   0 пользователей онлайн

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