Перейти к содержимому


Как Уменьшить Размер Блока?Перемещение Цены ?


  • Авторизуйтесь для ответа в теме
В теме одно сообщение

#1 dido

dido

    Пользователь

  • Пользователи
  • PipPip
  • 43 сообщений

Отправлено 01 Апрель 2011 - 12:09

Поскажите пожалуйста как уменьшить размер блока и убрать границы выделения блока (рамку она не нужна)
1111.JPG
И как переместить цены выше где идет названия товара и поднять вкладку "ПОДРОБНЕЕ" выше и правее
2222.JPG

#2 support

support

    Активный участник

  • Модераторы
  • 3 686 сообщений
  • ГородМосква

Отправлено 01 Апрель 2011 - 20:50

Код списка сетки товаров выдаётся кодом:
<!-- Список товаров. Таблица -->
<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 %}
<!-- /Список товаров. Список -->

Правда я бы не советовал этого делать, потому что при использовании длинных названий текст будет заезжать на цену, и я увидев свою еду не смог бы понять сколько она стоит:
doshirak.png




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных