Поскажите пожалуйста как уменьшить размер блока и убрать границы выделения блока (рамку она не нужна)
И как переместить цены выше где идет названия товара и поднять вкладку "ПОДРОБНЕЕ" выше и правее
1
Как Уменьшить Размер Блока?Перемещение Цены ?
Автор dido, 01 апр. 2011 12:09
В теме одно сообщение
#1
Отправлено 01 Апрель 2011 - 12:09
#2
Отправлено 01 Апрель 2011 - 20:50
Код списка сетки товаров выдаётся кодом:
и стилями:
Соответственно для изменения размеров можно поменять "width:195px;" и "height:300px;" на необходимые Вам. Рамка выдаётся стилем "withBorder" для того чтобы её убрать будет достаточно удалить этот класс из блока товара, заменив код с:
Список товаров выводится этим кодом:
Правда я бы не советовал этого делать, потому что при использовании длинных названий текст будет заезжать на цену, и я увидев свою еду не смог бы понять сколько она стоит:
<!-- Список товаров. Таблица --> <table> {% FOR goods %} <td class="goodsListItem"> <div class="goodsListItemBlock withBorder cornerAll"> <table class="goodsListItemImage"> <tr> <td> <a href="{goods.URL}"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" /></a> </td> </tr> </table> <h3 class="goodsListItemName"><a href="{goods.URL}">{goods.NAME}</a></h3> <div class="goodsListItemPriceNew"> <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a> </div> <div class="goodsListItemPriceOld"> {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %} <a href="{goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a> {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a> {% ENDIF %} </div> </div> </td> {goods.index | is_divided("3","</tr><tr>","")} {% ENDFOR goods %} </table> <!-- /Список товаров. Таблица -->
и стилями:
/* Список товаров в виде таблицы. Ячейки с товаром */ .goodsListItem {text-align:center;vertical-align:top;width:195px;overflow:hidden;padding:0px;} /* Размер в 200 пикселей сделан, чтобы и 2 и 5 товаров нормально смотрелись и была возможность увеличить разрешение до 1220 пикселей*/ .goodsListItemBlock {height:300px;width:210px;margin:5px;overflow:hidden;} .goodsListItemBlock a {} .goodsListItemImage {height:185px;width:100%;margin-top:1em;border-collapse: collapse;border-spacing: 0;} .goodsListItemImage td {text-align:center;vertical-align:middle;} .goodsListItemName {line-height:1.2em;padding:0px 2px 0px 2px;margin:0px;max-height:3.6em;overflow:hidden;} .goodsListItemName a {font-size:15px;line-height:1.2em;padding:0px;margin:0px;}
Соответственно для изменения размеров можно поменять "width:195px;" и "height:300px;" на необходимые Вам. Рамка выдаётся стилем "withBorder" для того чтобы её убрать будет достаточно удалить этот класс из блока товара, заменив код с:
<div class="goodsListItemBlock withBorder cornerAll">на
<div class="goodsListItemBlock cornerAll">
dido (01 Апрель 2011 - 12:09) писал:
И как переместить цены выше где идет названия товара и поднять вкладку "ПОДРОБНЕЕ" выше и правее
Список товаров выводится этим кодом:
<!-- Список товаров. Список --> {% FOR goods %} <div class="listing"> <div class="imagem"><a href="{goods.URL}"><img {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" /></a></div> <div class="contm"> <h3><a href="{goods.URL}">{goods.NAME}</a></h3> <p> {goods.DESCRIPTION_SHORT} </p> <p> Цена сейчас: <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a><br /> {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %} Цена без учёта скидки: <a href="{goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a> {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} Старая цена: <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a> {% ENDIF %} </p> <p> <a class="readmore" title="{goods.NAME}" href="{goods.URL}">Подробнее</a> </p> </div> <div class="clr"></div> </div> {% ENDFOR goods %} <!-- /Список товаров. Список -->Для того чтобы разместить цену сверху возле названия достаточно указать у блока товара position:relative а положение цены по абсолюту - сверху справа. Можно изменить этот код на:
<!-- Список товаров. Список --> {% FOR goods %} <div class="listing" style="position:relative;"> <div class="imagem"><a href="{goods.URL}"><img {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" /></a></div> <div class="contm"> <h3><a href="{goods.URL}">{goods.NAME}</a></h3> <p> {goods.DESCRIPTION_SHORT} </p> <p style="position:absolute;top:-10px;right:10px;"> Цена сейчас: <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a><br /> {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %} Цена без учёта скидки: <a href="{goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a> {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} Старая цена: <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a> {% ENDIF %} </p> <p> <a class="readmore" title="{goods.NAME}" href="{goods.URL}">Подробнее</a> </p> </div> <div class="clr"></div> </div> {% ENDFOR goods %} <!-- /Список товаров. Список -->
Правда я бы не советовал этого делать, потому что при использовании длинных названий текст будет заезжать на цену, и я увидев свою еду не смог бы понять сколько она стоит:
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных