igorfelix

Выровнять дополнительные изображения товара в одну строку

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

igorfelix    15

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

post-23316-0-36690000-1370626696_thumb.png

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


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

Количество доп изображений в любом случае может быть больше чем влезет в одну строку.Прицепите карусельку и проблема исчезнет.

 

https://opencartforum.com/topic/11477-karusel-dopolnitelnykh-fotografii/

 

 

https://opencartforum.com/topic/19527-prokrutka-dop-izobrazhenii-na-stranitce-tovara-how-to/

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


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

стиль для этого блока: 

 

.product-info .image-additional {
width: 260px;<------- ТУТ МЕНЯТЬ
.....
}
 
но не переусердствуйте (может появиться скролл), тогда играйтесь еще размерами изображений доп. картинок через админку, либо слегка подправить верстку. (этот блок находится в диве с классом left и что бы разместить много картинок нужно их вынести за пределы этого дива, так как именно он ограничит скроллом ширину блока картинок

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


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

стиль для этого блока: 

 

.product-info .image-additional {
width: 260px;<------- ТУТ МЕНЯТЬ
.....
}
 
но не переусердствуйте (может появиться скролл), тогда играйтесь еще размерами изображений доп. картинок через админку, либо слегка подправить верстку. (этот блок находится в диве с классом left и что бы разместить много картинок нужно их вынести за пределы этого дива, так как именно он ограничит скроллом ширину блока картинок

 

там блок

.product-info .image-additional a {

    float: left;

    display: block;

    margin-left: 10px;

    margin-bottom: 10px;

  

добавил width: 260px; , попробовал разные значения, все равно столбиком . если делать 10px , друг на друга залазиют. = (

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


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

Количество доп изображений в любом случае может быть больше чем влезет в одну строку.Прицепите карусельку и проблема исчезнет.

 

https://opencartforum.com/topic/11477-karusel-dopolnitelnykh-fotografii/

 

 

https://opencartforum.com/topic/19527-prokrutka-dop-izobrazhenii-na-stranitce-tovara-how-to/

спасибо, смотрел тему.. так и хотелось сделать это без модуля прокрутки,

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


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

Скопировано полностью с дефолта

 


.product-info .image-additional {
width: 260px; <---- ВОТ ЭТОТ ПАРАМЕТР И МЕНЯТЬ!!!!!!!
margin-left: (минус*)10px;
clear: both;
overflow: hidden;
}
.product-info .image-additional img {
border: 1px solid #E7E7E7;
}
.product-info .image-additional a {
float: left;
display: block;
margin-left: 10px;
margin-bottom: 10px;
}
 

 

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


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

Скопировано полностью с дефолта

 


.product-info .image-additional {
width: 260px; <---- ВОТ ЭТОТ ПАРАМЕТР И МЕНЯТЬ!!!!!!!
margin-left: (минус*)10px;
clear: both;
overflow: hidden;
}
.product-info .image-additional img {
border: 1px solid #E7E7E7;
}
.product-info .image-additional a {
float: left;
display: block;
margin-left: 10px;
margin-bottom: 10px;
}
 

 

Спасибо ) помогло ) ставим вместо 260 , 360px и 4 картинки в одну строчку . Держите плюсик )

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


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

 

Скопировано полностью с дефолта


.product-info .image-additional {
width: 260px; <---- ВОТ ЭТОТ ПАРАМЕТР И МЕНЯТЬ!!!!!!!
margin-left: (минус*)10px;
clear: both;
overflow: hidden;
}
.product-info .image-additional img {
border: 1px solid #E7E7E7;
}
.product-info .image-additional a {
float: left;
display: block;
margin-left: 10px;
margin-bottom: 10px;
}
 

 

 

А у меня с изменением значения ничего не происходит((((

 

HELP

post-683394-0-55320900-1401070165_thumb.jpg

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


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

Найдено!

 

В стилях мешалась разметка - Её тоже надо править:

 

}
.product-info > .left + .right {
    margin-left: 550px; :-) <-------------------------------------------Тут с какого места начинается краткое описание товара (Должно быть не меньше параметра, который меняем=смотри ниже=)
}
.product-info .image {
    border: 1px solid #E7E7E7;
    float: left;
    margin-bottom: 20px;
    padding: 10px;
    text-align: center;
}
.product-info .image-additional {
    width: 550px; :wink: <-------------------------------Тут прописываем ширину для расположения баннеров
    ;
    clear: both;
    overflow: hidden;

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


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

А вообще в ПРОДУКТЕ я все дополнительные картинки вывел за ПОДЕЛИТЬСЯ - теперь Умещается 5 шт. размером 150х120 пикс

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


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

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

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

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

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

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

Войти

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

Войти


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

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