Централизация содержимого модуля

EUROPDA · 29 червня 2012

Всем привет.

Подскажите пожалуйста как сделать так, чтобы содержимое модулей которые стоят слева или справа было поцентру, а то оно у меня получается немного влево смещино и смотрится не очень красиво((((

addToCompare · 29 червня 2012

Попробуйте вместо

.box-product > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
}

вставить

.box-product > div {
width: 130px;
margin-left: auto;
vertical-align: top;
margin-right: auto;
margin-bottom: 20px;
}

если у Вас другой .box-product > div

то покажите его

EUROPDA · 29 червня 2012

.box-product > div {

width: 142px;

display: inline-block;

vertical-align: top;

margin-bottom: 3px;

padding:5px 3px 5px 3px;

-webkit-border-radius: 7px 7px 7px 7px;

-moz-border-radius: 7px 7px 7px 7px;

-khtml-border-radius: 7px 7px 7px 7px;

border-radius: 7px 7px 7px 7px;

border: 1px solid #d0d0d0;

addToCompare · 29 червня 2012

.box-product > div {

width: 142px;

margin-right: auto;

margin-left: auto;

vertical-align: top;

margin-bottom: 3px;

padding:5px 3px 5px 3px;

-webkit-border-radius: 7px 7px 7px 7px;

-moz-border-radius: 7px 7px 7px 7px;

-khtml-border-radius: 7px 7px 7px 7px;

border-radius: 7px 7px 7px 7px;

border: 1px solid #d0d0d0;

}

Попробуйте вот так

EUROPDA · 29 червня 2012

в маленьких модулях нормально стало а в больших получился один столбец(((( http://europda.ru/

addToCompare · 29 червня 2012

Скопируйте все стили, которые начинаются с .box-product , замените все .box-product (в скопированных стилях)на .box-productfeat и в файле templeate/module/feature.tpl

замените <div class="box-product"> на <div class="box-productfeat">

EUROPDA · 29 червня 2012

как-то не очень получилось ещё кривей стало(((

addToCompare · 29 червня 2012

Вы скопировали .box-product и внесли изменения в копированные стили, или просто заменили все .box-product?

EUROPDA · 29 червня 2012

я просто заменил в css все .box-product на .box-productfeat, всмысле скопировать стили .box-product и внести в них изменения? я прост навичек в этом деле и не до конца всё понимаю(((

addToCompare · 29 червня 2012

Нужно найти все стили, которые начинаются с .box-product, стандартно, они выглядят так

/* box products */
.box-product {
width: 100%;
overflow: auto;
}
.box-product > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
}
#column-left + #column-right + #content .box-product > div {
width: 119px;
}
.box-product .image {
display: block;
margin-bottom: 0px;
}
.box-product .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}
.box-product .name a {
color: #38B0E3;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
}
.box-product .price {
display: block;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.box-product .price-old {
color: #F00;
text-decoration: line-through;
}
.box-product .price-new {
font-weight: bold;
}
.box-product .rating {
display: block;
margin-bottom: 4px;
}

Далее скопировать их и заменить, после этого получится вот такое

/* box products */
.box-product {
width: 100%;
overflow: auto;
}
.box-product > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
}
#column-left + #column-right + #content .box-product > div {
width: 119px;
}
.box-product .image {
display: block;
margin-bottom: 0px;
}
.box-product .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}
.box-product .name a {
color: #38B0E3;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
}
.box-product .price {
display: block;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.box-product .price-old {
color: #F00;
text-decoration: line-through;
}
.box-product .price-new {
font-weight: bold;
}
.box-product .rating {
display: block;
margin-bottom: 4px;
}
/* box products */
.box-productfeat {
width: 100%;
overflow: auto;
}
.box-productfeat > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
}
#column-left + #column-right + #content .box-productfeat > div {
width: 119px;
}
.box-productfeat .image {
display: block;
margin-bottom: 0px;
}
.box-productfeat .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}
.box-productfeat .name a {
color: #38B0E3;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
}
.box-productfeat .price {
display: block;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.box-productfeat .price-old {
color: #F00;
text-decoration: line-through;
}
.box-productfeat .price-new {
font-weight: bold;
}
.box-productfeat .rating {
display: block;
margin-bottom: 4px;
}

Сделайте у себя по аналогии

EUROPDA · 29 червня 2012

К сожалению опять получилось, что в больших модулях 1 столбец по середине :(

EUROPDA · 29 червня 2012

/* box products */

.box-product {

width: 100%;

overflow: auto;

}

.box-product > div {

width: 142px;

margin-right: auto;

margin-left: auto;

vertical-align: top;

margin-bottom: 3px;

padding:5px 3px 5px 3px;

-webkit-border-radius: 7px 7px 7px 7px;

-moz-border-radius: 7px 7px 7px 7px;

-khtml-border-radius: 7px 7px 7px 7px;

border-radius: 7px 7px 7px 7px;

border: 1px solid #d0d0d0;

}

#column-left + #column-right + #content .box-product > div {

width: 145px;

}

.box-product .image {

display: block;

margin-bottom: 0px;

}

.box-product .image img {

padding: 0px;

}

.box-product .name a {

color: #000000;

height:33px;

text-decoration: none;

display: block;

text-align: center;

}

.box-product .price {

display: block;

font-weight: bold;

color: #000000;

border-bottom: 1px solid #d0d0d0;

padding-bottom: 5px;

margin-bottom: 6px;

text-align: center;

}

.box-product .price-old {

color: #900;

font-size: 10px;

text-decoration: line-through;

text-align: center;

}

.box-product .price-new {

font-weight: bold;

text-align: center;

}

.box-product .cart {

text-align: center;

}

/* box products */

.box-productfeat {

width: 100%;

overflow: auto;

}

.box-productfeat > div {

width: 142px;

margin-right: auto;

margin-left: auto;

vertical-align: top;

margin-bottom: 3px;

padding:5px 3px 5px 3px;

-webkit-border-radius: 7px 7px 7px 7px;

-moz-border-radius: 7px 7px 7px 7px;

-khtml-border-radius: 7px 7px 7px 7px;

border-radius: 7px 7px 7px 7px;

border: 1px solid #d0d0d0;

}

#column-left + #column-right + #content .box-productfeat > div {

width: 145px;

}

.box-productfeat .image {

display: block;

margin-bottom: 0px;

}

.box-productfeat .image img {

padding: 0px;

}

.box-productfeat .name a {

color: #000000;

height:33px;

text-decoration: none;

display: block;

text-align: center;

}

.box-productfeat .price {

display: block;

font-weight: bold;

color: #000000;

border-bottom: 1px solid #d0d0d0;

padding-bottom: 5px;

margin-bottom: 6px;

text-align: center;

}

.box-productfeat .price-old {

color: #900;

font-size: 10px;

text-decoration: line-through;

text-align: center;

}

.box-productfeat .price-new {

font-weight: bold;

text-align: center;

}

.box-productfeat .cart {

text-align: center;

}

addToCompare · 29 червня 2012

Попробуйте вот так

/* box products */
.box-product {
width: 100%;
overflow: auto;
}
.box-product > div {
width: 142px;
display:inline-block;
vertical-align: top;
margin-bottom: 3px;
padding:5px 3px 5px 3px;
-webkit-border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-khtml-border-radius: 7px 7px 7px 7px;
border-radius: 7px 7px 7px 7px;
border: 1px solid #d0d0d0;
}
}
#column-left + #column-right + #content .box-product > div {
width: 145px;
}
.box-product .image {
display: block;
margin-bottom: 0px;
}
.box-product .image img {
padding: 0px;
}
.box-product .name a {
color: #000000;
height:33px;
text-decoration: none;
display: block;
text-align: center;
}
.box-product .price {
display: block;
font-weight: bold;
color: #000000;
border-bottom: 1px solid #d0d0d0;
padding-bottom: 5px;
margin-bottom: 6px;
text-align: center;
}
.box-product .price-old {
color: #900;
font-size: 10px;
text-decoration: line-through;
text-align: center;
}
.box-product .price-new {
font-weight: bold;
text-align: center;
}
.box-product .cart {
text-align: center;
}
/* box products */
.box-productfeat {
width: 100%;
overflow: auto;
}
.box-productfeat > div {
width: 142px;
margin-right: auto;
margin-left: auto;
vertical-align: top;
margin-bottom: 3px;
padding:5px 3px 5px 3px;
-webkit-border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-khtml-border-radius: 7px 7px 7px 7px;
border-radius: 7px 7px 7px 7px;
border: 1px solid #d0d0d0;
}
}
#column-left + #column-right + #content .box-productfeat > div {
width: 145px;
}
.box-productfeat .image {
display: block;
margin-bottom: 0px;
}
.box-productfeat .image img {
padding: 0px;
}
.box-productfeat .name a {
color: #000000;
height:33px;
text-decoration: none;
display: block;
text-align: center;
}
.box-productfeat .price {
display: block;
font-weight: bold;
color: #000000;
border-bottom: 1px solid #d0d0d0;
padding-bottom: 5px;
margin-bottom: 6px;
text-align: center;
}
.box-productfeat .price-old {
color: #900;
font-size: 10px;
text-decoration: line-through;
text-align: center;
}
.box-productfeat .price-new {
font-weight: bold;
text-align: center;
}
.box-productfeat .cart {
text-align: center;
}

EUROPDA · 29 червня 2012

Блин как то тоже не особо помогло зайдите на сайт посмотрите что получилось :(

addToCompare · 29 червня 2012

Кстати, если хотите ставить модуль "Рекомендуемые" и в горизонтальном положении, тогда ван нужно установить его клон https://opencartforum.com/files/file/282-%D0%BA%D0%BB%D0%BE%D0%BD-%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D1%8F-%D1%80%D0%B5%D0%BA%D0%BE%D0%BC%D0%B5%D0%BD%D0%B4%D1%83%D0%B5%D0%BC/

EUROPDA · 29 червня 2012

да нет дело не в модуле рекомендуемое посмотрите я там поставил слева модуль последние и его содержимое тоже немного смещено в лево. Может быть будет проще расширить сам сайт и увеличить ячейки с товаром мош тогда всё это дело будет ровнее выглядеть

addToCompare · 29 червня 2012

Считайте, что Вы задали стиль для модуля, который стоит слева. Скажите, у Вас на одних страницах модуль, например "Последние" будет стоять слева, а на некоторых внизу страницы?

addToCompare · 29 червня 2012

Расширить или уменьшить ячейки не вариант, поскольку тогда содержимое горизонтального модуля поплывет

addToCompare · 29 червня 2012

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

EUROPDA · 29 червня 2012

Зайдите на сайт пожалуйста. Я изменил немного ширину сайта на 30 пикселей и ширину ячеек стоваром. И вроде получилось норм. Как по вашему?

addToCompare · 29 червня 2012

Неплохо, но, чтобы не менять ширину сайта, можно просто увеличить ширину ячеек, и еще момент, нужно на это все посмотреть, когда будет активна и правая колонка

EUROPDA · 29 червня 2012

дак я просто сайт хотел делать бес правой колонки, и при увеличении ширины ячеек они не умещаются по 5 штучек в больших модулях и получается большой пустой отступ спарава. А как на этом сайте повысить репутацию?

addToCompare · 29 червня 2012

Ну тогда, если Вам не критично уменьшение величины сайта, то неплохо смотрится, если критично, то можете поэкспериментировать с padding-left в.box .box-content П.с. По поводу репутации - это зеленая стрелочка под сообщением

EUROPDA · 29 червня 2012

Большое Вам спасибо за помощь))) эксперементировать с этими ячейками наверное больше не буду пусть так остаются, буду с чем нить другим эксперементировать там многое ещё нужно поменять :-)

Ещё раз спасибо Вам и досвидания :-D

Вхід

Централизация содержимого модуля

Recommended Posts

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

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

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

Вхід

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

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information