Как менять растояние между продуктами ?

[pixotico]

Помогите поменять растояние между прoдуктами

[Fix305]

чет народ совсем обленился =)

в ..catalogviewthemedefaultstylesheetstylesheet.css:

в .list td добавь свойства:

padding-left: 10px;padding-right: 10px;

только со своими значениями

[pixotico]

Спасибка зделал, но не помогает ! раз сто попробовал ! дело в том что у меня между продуктами слишком много места по горизонтали,между каждым продуктом, никак не убрать .. :(вот что у меня .list td { text-align: center; vertical-align: top; padding-bottom: 5px; padding-left: 10px;padding-right: 10px;}пробовал стовить значение 0 ... 1 ..2 все ровно не получаеться

[Fix305]

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

[pixotico]

да, шаблон стандартный только этот карбоновый, черный, я его зделал резиновым поставил #container {

width: 90%;

margin-left: 5%;

margin-right: 5%;

text-align: left;

}

ну и продуктам поставил

.list td {

text-align: center;

vertical-align: top;

padding-bottom: 5px;

padding-left: 1px;

padding-right: 1px;

}

проблему все таки решил ...но частично .. дело было в размере самого продукта, но одно плохо, если открывать в экран по больше то он в ряд покажет стокоже продуктов сколько покажет на 19 монике .. а если открыть с нет бука где ваше моник наверное на 14 .. а вот ка кзделать что продукты в ряд автоматически сортировались по размеру и разрешению экрана не знаю ..

а продовать буду майки и им нужны больште фотки.. чтоб сразу цепляло . но и + шас редко кто на слабом разрешений сидит http://farm5.static.flickr.com/4012/4627505628_43fd9df212_b.jpg

ну вобщем спасибка заранее за помошь ! :(

[Fix305]

а ну тогда понятно) я то думал тебе наоборот места мало между товарами.

тогда делай так:

в файле ..catalogviewthemedefaulttemplateproductcategory.tpl найди:

<table class="list">      <?php for ($i = 0; $i < sizeof($products); $i = $i + 4) { ?>      <tr>        <?php for ($j = $i; $j < ($i + 4); $j++) { ?>        <td width="25%"><?php if (isset($products[$j])) { ?>          <a href="<?php echo $products[$j]['href']; ?>"><img src="<?php echo $products[$j]['thumb']; ?>" title="<?php echo $products[$j]['name']; ?>" alt="<?php echo $products[$j]['name']; ?>" /></a>          <a href="<?php echo $products[$j]['href']; ?>"><?php echo $products[$j]['name']; ?></a>          [color= #999; font-size: 11px;]<?php echo $products[$j]['model']; ?>[/color]          <?php if ($display_price) { ?>          <?php if (!$products[$j]['special']) { ?>          [color= #900; font-weight: bold;]<?php echo $products[$j]['price']; ?>[/color]          <?php } else { ?>          [color= #900; font-weight: bold; text-decoration: line-through;]<?php echo $products[$j]['price']; ?>[/color] [color= #F00;]<?php echo $products[$j]['special']; ?>[/color]          <?php } ?>          <?php } ?>          <?php if ($products[$j]['rating']) { ?>          <img src="catalog/view/theme/default/image/stars_<?php echo $products[$j]['rating'] . '.png'; ?>" alt="<?php echo $products[$j]['stars']; ?>" />          <?php } ?>          <?php } ?></td>        <?php } ?>      </tr>      <?php } ?>    </table>

замени на:

<div class="list">      <?php for ($j = 0; $j < sizeof($products); $j++) { ?>        <div style="float: left;"><?php if (isset($products[$j])) { ?>          <a href="<?php echo $products[$j]['href']; ?>"><img src="<?php echo $products[$j]['thumb']; ?>" title="<?php echo $products[$j]['name']; ?>" alt="<?php echo $products[$j]['name']; ?>" /></a>          <a href="<?php echo $products[$j]['href']; ?>"><?php echo $products[$j]['name']; ?></a>          [color= #999; font-size: 11px;]<?php echo $products[$j]['model']; ?>[/color]          <?php if ($display_price) { ?>          <?php if (!$products[$j]['special']) { ?>          [color= #900; font-weight: bold;]<?php echo $products[$j]['price']; ?>[/color]          <?php } else { ?>          [color= #900; font-weight: bold; text-decoration: line-through;]<?php echo $products[$j]['price']; ?>[/color] [color= #F00;]<?php echo $products[$j]['special']; ?>[/color]          <?php } ?>          <?php } ?>          <?php if ($products[$j]['rating']) { ?>          <img src="catalog/view/theme/default/image/stars_<?php echo $products[$j]['rating'] . '.png'; ?>" alt="<?php echo $products[$j]['stars']; ?>" />          <?php } ?>          <?php } ?></div>      <?php } ?>    </div>

в stylesheet.css добавь:

.list div {	text-align: center;	vertical-align: top;	padding-bottom: 5px;	padding-left: 1px; // расстояние теперь будет маленькое, этими параметрами придется расширятьpadding-right: 1px;;}

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

[pixotico]

СпасибкаТебе огромное :( но всеже чтото не получилось .. вроде все заменил как написал ты .. проверил нифига, если делаешь маленкое окно браузера то продукты выходят за рамки в право..

вот кстати и сам код что изменил

/catalog/view/theme/default/template/product/category.tpl

<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?><div id="content">  <div class="top">    <div class="left"></div>    <div class="right"></div>    <div class="center">      <h1><?php echo $heading_title; ?></h1>    </div>  </div>  <div class="middle">    <?php if ($description) { ?>    <div style="margin-bottom: 15px;"><?php echo $description; ?></div>    <?php } ?>    <?php if ($categories) { ?>    <table class="list">      <?php for ($i = 0; $i < sizeof($categories); $i = $i + 4) { ?>      <tr>        <?php for ($j = $i; $j < ($i + 4); $j++) { ?>        <td width="25%"><?php if (isset($categories[$j])) { ?>          <a href="<?php echo $categories[$j]['href']; ?>"><img src="<?php echo $categories[$j]['thumb']; ?>" title="<?php echo $categories[$j]['name']; ?>" alt="<?php echo $categories[$j]['name']; ?>" style="margin-bottom: 3px;" /></a>          <a href="<?php echo $categories[$j]['href']; ?>"><?php echo $categories[$j]['name']; ?></a>          <?php } ?></td>        <?php } ?>      </tr>      <?php } ?>    </table>    <?php } ?>    <?php if ($products) { ?>    <div class="sort">      <div class="div1">        <select name="sort" onchange="location = this.value">          <?php foreach ($sorts as $sorts) { ?>          <?php if (($sort . '-' . $order) == $sorts['value']) { ?>          <option value="<?php echo $sorts['href']; ?>" selected="selected"><?php echo $sorts['text']; ?></option>          <?php } else { ?>          <option value="<?php echo $sorts['href']; ?>"><?php echo $sorts['text']; ?></option>          <?php } ?>          <?php } ?>        </select>      </div>      <div class="div2"><?php echo $text_sort; ?></div>    </div><div class="list">      <?php for ($j = 0; $j < sizeof($products); $j++) { ?>        <div style="float: left;"><?php if (isset($products[$j])) { ?>          <a href="<?php echo $products[$j]['href']; ?>"><img src="<?php echo $products[$j]['thumb']; ?>" title="<?php echo $products[$j]['name']; ?>" alt="<?php echo $products[$j]['name']; ?>" /></a>          <a href="<?php echo $products[$j]['href']; ?>"><?php echo $products[$j]['name']; ?></a>          [color= #999; font-size: 11px;]<?php echo $products[$j]['model']; ?>[/color]          <?php if ($display_price) { ?>          <?php if (!$products[$j]['special']) { ?>          [color= #900; font-weight: bold;]<?php echo $products[$j]['price']; ?>[/color]          <?php } else { ?>          [color= #900; font-weight: bold; text-decoration: line-through;]<?php echo $products[$j]['price']; ?>[/color] [color= #F00;]<?php echo $products[$j]['special']; ?>[/color]          <?php } ?>          <?php } ?>          <?php if ($products[$j]['rating']) { ?>          <img src="catalog/view/theme/default/image/stars_<?php echo $products[$j]['rating'] . '.png'; ?>" alt="<?php echo $products[$j]['stars']; ?>" />          <?php } ?>          <?php } ?></div>      <?php } ?>    </div>  <div class="bottom">    <div class="left"></div>    <div class="right"></div>    <div class="center"></div>  </div></div><?php echo $footer; ?>

Ну и этот

/catalog/view/theme/cc_carbon_tab/stylesheet/stylesheet.css

пробовал и catalogviewthemedefaulttemplateproductcategory.tpl поменять но так как я использую этот темплэйт то там нихрена не работает ваще :( но всеж попробовал :)

html {	overflow: -moz-scrollbars-vertical;	margin: 0;	padding: 0;}* {	font-family: Arial, Helvetica, sans-serif;}body {	margin: 0px;	padding: 0px;	text-align: center;}body, td, th, input, textarea, select, a {	font-size: 12px;}form {	padding: 0;	margin: 0;	display: inline;}input, textarea, select {	margin: 3px 0px;}a, a:visited {	color: #1B57A3;	text-decoration: underline;	cursor: pointer;}a:hover {	text-decoration: none;}a img {	border: none;}p {	margin-top: 0px;}/* layout */ #container {    width: 80%;    margin-left: 10%;   margin-right: 10%;     text-align: left;}#header .div2 {	float: left;	padding-top: 15px;	padding-left: 15px;}#header .div3 {	float: right;	padding-top: 7px;	height: 38px;}#header .div3 a {	margin-left: 15px;	padding: 1px 0px 2px 20px;	background-repeat: no-repeat;	background-position: left center;}#header .div4 {	width: 510px;	clear: right;	float: right;	height: 32px;	padding-right: 14px;}#header .div4 a {	float: left;	margin-right: 2px;	width: 100px;	height: 18px;	padding-top: 9px;	padding-bottom: 9px;	background: url('../image/tab_1.png') no-repeat;	text-align: center;	color: #333333;	text-decoration: none;	font-size: 14px;	font-weight: bold;	position: relative;	z-index: 1;}#header .div4 a.selected {	background: url('../image/tab_2.png') no-repeat;	color: #FFF;	padding-bottom: 10px;	z-index: 3;}#header .div5 {	clear: both;}#header .div5 .left {	background: url('../image/header_1_left.png') no-repeat;	width: 5px;	height: 40px;	float: left;}#header .div5 .right {	background: url('../image/header_1_right.png') no-repeat;	width: 5px;	height: 40px;	float: right;}#header .div5 .center {	background: url('../image/header_1_center.png') repeat-x;	height: 40px;	margin-left: 5px;	margin-right: 5px;}#header .div6 {	clear: both;	margin-bottom: 10px;}#header .div6 .left {	background: url('../image/header_2_left.png') no-repeat;	width: 5px;	height: 32px;	float: left;}#header .div6 .right {	background: url('../image/header_2_right.png') no-repeat;	width: 5px;	height: 32px;	float: right;}#header .div6 .center {	background: url('../image/header_2_center.png') repeat-x;	height: 32px;	margin-left: 5px;	margin-right: 5px;	padding-left: 5px;	padding-right: 5px;}#header .div7 {	float: right;	padding-top: 2px;}#header .div8 {	float: left; margin-top: 6px;}#header .div9 {	float: left;}#header .div10 {	float: left; 	margin-top: 2px;	}#search {	padding-top: 7px;	padding-left: 5px;	color: #FFF;	font-weight: bold;}#search select {	border: 1px solid #0A5391;	padding: 1px;}#search a {	color: #FFF;}#search input {	border: 1px solid #0A5391;	padding: 2px;}#breadcrumb {	float: left;	padding-top: 7px;	padding-bottom: 11px;	height: 13px;	margin-bottom: 10px;	color: #000000;}.switcher {	float: right;		margin-top: 3px;	margin-left: 10px;}.switcher a {	text-decoration: none;	display: block;}.switcher .selected {	background: #FFFFFF url('../image/switcher.png') repeat-x;}.switcher .selected a {	border: 1px solid #CCCCCC;	background: url('../image/arrow_down.png') 116px center no-repeat;	color: #666666;	padding: 2px 5px 2px 5px;	width: 121px;}.switcher .selected a:hover {	background: #F0F0F0 url('../image/arrow_down.png') 116px center no-repeat;}.switcher .option {		position: absolute;	z-index: 3;	border-left: 1px solid #CCCCCC;	border-right: 1px solid #CCCCCC;	border-bottom: 1px solid #CCCCCC;	background-color: #EEEEEE;	display: none;	width: 131px;}.switcher .option a {	color: #000;	padding: 3px 5px 3px 5px;}.switcher .option a:hover {	background: #FFC;}.switcher img {	position: relative;	top: 1px;}#column_left {	float: left;	width: 180px;	margin-right: 10px;	clear: left;}#column_right {	float: right;	width: 180px;	margin-left: 10px;	clear: right;}#content {	margin-left: 190px;	margin-right: 190px;	margin-bottom: 10px;}#content .top .left {	background: url('../image/content_top_left.png') no-repeat;	width: 5px;	height: 32px;	float: left;}#content .top .right {	background: url('../image/content_top_right.png') no-repeat;	width: 5px;	height: 32px;	float: right;}#content .top .center {	background: url('../image/content_top_center.png') repeat-x;	margin-left: 5px;	margin-right: 5px;}#content .top h1 {	padding: 8px 0px 8px 7px;}#content h1, .heading {	color: #FFFFFF;	font-size: 14px;	font-family: Arial, Helvetica, sans-serif;	font-weight: bold;	text-transform: uppercase;	margin: 0px;}.heading {	border-bottom: 1px solid #333333;	padding-bottom: 3px;	margin-bottom: 10px;}#content .middle {	border-left: 1px solid #333333;	border-right: 1px solid #333333;	background: #FFFFFF;	padding: 10px 10px 1px 10px;	min-height: 380px;}#content .bottom .left {	background: url('../image/content_bottom_left.png') no-repeat;	width: 5px;	height: 5px;	float: left;}#content .bottom .right {	background: url('../image/content_bottom_right.png') no-repeat;	width: 5px;	height: 5px;	float: right;}#content .bottom .center {	background: url('../image/content_bottom_center.png') repeat-x;	height: 5px;	margin-left: 5px;	margin-right: 5px;}.box {	margin-bottom: 10px;	background: url('../image/box_top.png') no-repeat;}.box .top {	padding: 8px 0px 8px 7px;	color: #FFFFFF;	font-size: 14px;	font-family: Arial, Helvetica, sans-serif;	font-weight: bold;	text-transform: uppercase;}.box .top img {	float: left;	margin-right: 5px;}.box .middle {	border-left: 1px solid #333333;	border-right: 1px solid #333333;	background: #FFFFFF;	padding: 10px;}.box .bottom {	height: 5px;	background: url('../image/box_bottom.png') no-repeat;}.success {	padding: 5px 0px;	margin-bottom: 10px;	background: #E4F1C9;	border: 1px solid #A5BD71;	font-size: 11px;	font-family: Verdana, Geneva, sans-serif;	text-align: center;}.warning {	padding: 5px 0px;	margin-bottom: 10px;	background: #FFDFE0;	border: 1px solid #FF9999;	font-size: 11px;	font-family: Verdana, Geneva, sans-serif;	text-align: center;}.wait {	padding: 5px 0px;	margin-bottom: 10px;	background: #FBFAEA;	border: 1px solid #EFEBAA;	font-size: 11px;	font-family: Verdana, Geneva, sans-serif;	text-align: center;}.required {	color: #FF0000;	font-weight: bold;}.error {	color: #FF0000;	display: block;}.help {	cursor: pointer;}.tooltip {	border: 1px solid #FDDA5C;	background: #FBFF95;	padding: 5px;	font-size: 11px;	width: 250px;}.clear { /* generic container (i.e. div) for floating buttons */	overflow: hidden;	width: 100%;}.button {	padding-left: 8px;	display: inline-block;	margin-right: 5px;	background: url('../image/button_left.png') top left no-repeat;	text-decoration: none;	color:#FFF;}.button span {	color: #FFF;	display: block;	padding: 4px 12px 5px 5px;	background: url('../image/button_right.png') top right no-repeat;}.buttons {	background: #F8F8F8;	border: 1px solid #DDDDDD;	padding: 5px;	margin-bottom: 10px;}.buttons input {	padding: 0px;	margin: 0px;}.buttons table {	width: 100%;	border-collapse: collapse;}.buttons table td {	vertical-align: middle;}.content {	background: #F7F7F7;	border: 1px solid #DDDDDD;	padding: 10px;	margin-top: 3px;	margin-bottom: 10px;}.list {	margin-bottom: 10px;        width: 100%;	}.list div {   text-align: center;   vertical-align: top;   padding-bottom: 5px;   padding-left: 1px; padding-right: 1px;}.list td {	        text-align: center;	vertical-align: top;	padding-bottom: 5px;	padding-left: 1px;padding-right: 1px;}.sort {	margin-bottom: 10px;	background: #F8F8F8;	height: 30px;	width: 100%;}.sort .div1 {	float: right;	margin-left: 5px;	padding-top: 6px;	padding-right: 9px;}.sort .div2 {	text-align: right;	padding-top: 9px;}.sort select {	font-size: 11px;	margin: 0;	padding: 0;}.pagination {	display: inline-block;	width: 100%;	background: #F8F8F8;	margin-bottom: 10px;}.pagination .links, .pagination .results {	padding: 7px;}.pagination .links {	float: left;}.pagination .links a {	border: 1px solid #CCCCCC;	padding: 4px 7px;	text-decoration: none;	color: #000000;}.pagination .links b {	border: 1px solid #CCCCCC;	padding: 4px 7px;	text-decoration: none;	color: #000000;	background: #FFFFFF;}.pagination .results {	float: right;}.tabs {	width: 100%;	height: 31px;	margin-bottom: 0px;}.tabs a {	float: left;	display: block;	padding: 6px 15px 7px 15px;	margin-right: 2px;	border-top: 1px solid #DDDDDD;	border-bottom: 1px solid #DDDDDD;	border-left: 1px solid #DDDDDD;	border-right: 1px solid #DDDDDD;	background: #FFFFFF url('../image/tab_3.png') repeat-x;	color: #000000;	font-weight: bold;	font-size: 13px;	text-decoration: none;	z-index: 1;	position: relative;	top: 1px;}.tabs a.selected {	background: #FFFFFF url('../image/tab_3.png') repeat-x;	border-bottom: 0px;	padding-bottom: 8px;	z-index: 3;}.tab_page {	border: 1px solid #DDDDDD;	background: #FFFFFF;	padding: 10px;	display: block;	z-index: 2;	margin-bottom: 10px;}#footer {	width: 100%;	clear: both;	padding-top: 5px;	border-top: 1px solid #DDDDDD;}#footer .div1 {	float: left;	text-align: left;}#footer .div2 {	float: right;	text-align: right;}#category ul {	margin-top: 0px;	margin-bottom: 0px;	margin-left: 8px;	padding-left: 12px;	list-style: url('../image/bullet_1.png');}#information ul {	margin-top: 0px;	margin-bottom: 0px;	margin-left: 8px;	padding-left: 12px;	list-style: url('../image/bullet_2.png');}.cart {	border-collapse: collapse;	width: 100%;	border: 1px solid #EEEEEE;	margin-bottom: 10px;}.cart th {	background: #EEEEEE;	padding: 5px;	font-weight: normal;}.cart td {	padding: 5px;}

[cashfile]

Если я правильно понял проблему , то я лично себе менял расстояние между товарами добавлением :

cellspacing="5">

меняешь цифру "5" подстраиваясь под свои нужды

[Fix305]

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

[pixotico]

А может ну его с этим резиновым шаблоном, :)) думаю только больше гемороя прибавит и везде по разному смотретсья будет, я тут подумал и решил остановитсья на разрешиний 1100 по ширине http://www.plexmall.com, все таки я футболки продовать буду, а контингент у меня подразумеваетсья что будет молодым, значит у них и моники с высоким разрешением, так что я думаю можно попасть в точку .. просто если меньше то не хватает места для 4 продуктов в ряд т еше и менюшкам по сторонам .. может кто позскажет как можно регулировать количество продуктов в ряд, ну чтоб можно было в ручную ставить, 3-4-5 ..

Fix305, Тебе особенное спасибo за терпение выслушать и желание помочь :()

[Xandria]

Подскажите можно ли как то поменять расстояние между продуктами в большую сторону? Уже замучилась мучаться)))) Заранее благодарю!