Помогите сделать вывод товаров не строку а в столбик в интернет-магазине - HTML & Веб-Дизайн | MMGP
Присоединяйтесь к нашему инвестиционному форуму, на котором уже 434,366 пользователей. Чтобы получить доступ ко многим закрытым разделам и начать общение -  .
Вход через:  
Обсуждение веб-дизайна. Здесь можно получить помощь по вопросам HTML/CSS и т.д.
При поддержке
Сеть доставки контента, выбранная космическими агентствами
Важная информация
Есть опыт работы с криптовалютами? Заведи Крипто-Блог и заработай на нём!
Торгуешь криптовалютой? Оставь свой отзыв о бирже!
Разбираешься в криптовалюте? Прими участие в акции Крипторайтер 2.0 (2-10 поинтов за 1000 символов)
Изменения в акции "Оплата за сообщения".
Как на одной публикации заработать $100
Ответить
 
Первый пост Опции темы
Сообщения прочитаны и/или просмотрены Сегодня, 03:07
Старый 08.03.2014, 16:38
#1
Интересующийся
 
Инвестирую в: Форекс
Регистрация: 21.09.2013
Сообщений: 34
Поблагодарили: 1 раз
УГ: 0
КП: 0.000
Помогите сделать вывод товаров не строку а в столбик в интернет-магазине

Помогите сделать вывод товаров не в строку ( simpla.droncs. ru/catalog/polomoechnye-mashiny ) а в столбик (как на фото)
tpl прикрепил
Код:
{* Список товаров *}

<!-- Хлебные крошки /-->
<div id="path">
	<a href="/">Главная</a>
	{if $category}
	{foreach from=$category->path item=cat}
	→ <a href="catalog/{$cat->url}">{$cat->name|escape}</a>
	{/foreach}  
	{if $brand}
	→ <a href="catalog/{$cat->url}/{$brand->url}">{$brand->name|escape}</a>
	{/if}
	{elseif $brand}
	→ <a href="brands/{$brand->url}">{$brand->name|escape}</a>
	{elseif $keyword}
	→ Поиск
	{/if}
</div>
<!-- Хлебные крошки #End /-->


{* Заголовок страницы *}
{if $keyword}
<h1>Поиск {$keyword|escape}</h1>
{elseif $page}
<h1>{$page->name|escape}</h1>
{else}
<h1>{$category->name|escape} {$brand->name|escape} {$keyword|escape}</h1>
{/if}


{* Описание страницы (если задана) *}
{$page->body}

{if $current_page_num==1}
{* Описание категории *}
{$category->description}
{/if}

{* Фильтр по брендам *}
{if $category->brands}
<div id="brands">
	<a href="catalog/{$category->url}" {if !$brand->id}class="selected"{/if}>Все бренды</a>
	{foreach name=brands item=b from=$category->brands}
		{if $b->image}
		<a data-brand="{$b->id}" href="catalog/{$category->url}/{$b->url}"><img src="{$config->brands_images_dir}{$b->image}" alt="{$b->name|escape}"></a>
		{else}
		<a data-brand="{$b->id}" href="catalog/{$category->url}/{$b->url}" {if $b->id == $brand->id}class="selected"{/if}>{$b->name|escape}</a>
		{/if}
	{/foreach}
</div>
{/if}

{* Описание бренда *}
{$brand->description}

{* Фильтр по свойствам *}
{if $features}
<table id="features">
	{foreach $features as $f}
	<tr>
	<td class="feature_name" data-feature="{$f->id}">
		{$f->name}:
	</td>
	<td class="feature_values">
		<a href="{url params=[$f->id=>null, page=>null]}" {if !$smarty.get.$f@key}class="selected"{/if}>Все</a>
		{foreach $f->options as $o}
		<a href="{url params=[$f->id=>$o->value, page=>null]}" {if $smarty.get.$f@key == $o->value}class="selected"{/if}>{$o->value|escape}</a>
		{/foreach}
	</td>
	</tr>
	{/foreach}
</table>
{/if}


<!--Каталог товаров-->
{if $products}

{* Сортировка *}
{if $products|count>0}
<div class="sort">
	Сортировать по 
	<a {if $sort=='position'} class="selected"{/if} href="{url sort=position page=null}">умолчанию</a>
	<a {if $sort=='price'}    class="selected"{/if} href="{url sort=price page=null}">цене</a>
	<a {if $sort=='name'}     class="selected"{/if} href="{url sort=name page=null}">названию</a>
</div>
{/if}


{include file='pagination.tpl'}


<!-- Список товаров-->
<ul class="products">

	{foreach $products as $product}
	<!-- Товар-->
	<li class="product">
		
		<!-- Фото товара -->
		{if $product->image}
		<div class="image">
			<a href="products/{$product->url}"><img src="{$product->image->filename|resize:200:200}" alt="{$product->name|escape}"/></a>
		</div>
		{/if}
		<!-- Фото товара (The End) -->

		<div class="product_info">
		<!-- Название товара -->
		<h3 class="{if $product->featured}featured{/if}"><a data-product="{$product->id}" href="products/{$product->url}">{$product->name|escape}</a></h3>
		<!-- Название товара (The End) -->

		<!-- Описание товара -->
		<div class="annotation">{$product->annotation}</div>
		<!-- Описание товара (The End) -->
		
		{if $product->variants|count > 0}
		<!-- Выбор варианта товара -->
		<form class="variants" action="/cart">
			<table>
			{foreach $product->variants as $v}
			<tr class="variant">
				<td>
					<input id="variants_{$v->id}" name="variant" value="{$v->id}" type="radio" class="variant_radiobutton" {if $v@first}checked{/if} {if $product->variants|count<2}style="display:none;"{/if}/>
				</td>
				<td>
					{if $v->name}<label class="variant_name" for="variants_{$v->id}">{$v->name}</label>{/if}
				</td>
				<td>
					{if $v->compare_price > 0}<span class="compare_price">{$v->compare_price|convert}</span>{/if}
					<span class="price">{$v->price|convert} <span class="currency">{$currency->sign|escape}</span></span>
				</td>
			</tr>
			{/foreach}
			</table>
			<input type="submit" class="button" value="в корзину" data-result-text="добавлено"/>
		</form>
		<!-- Выбор варианта товара (The End) -->
		{else}
			Нет в наличии
		{/if}

		</div>
		
	</li>
	<!-- Товар (The End)-->
	{/foreach}
			
</ul>

{include file='pagination.tpl'}	
<!-- Список товаров (The End)-->

{else}
Товары не найдены
{/if}	
<!--Каталог товаров (The End)-->
Миниатюры
Нажмите на изображение для увеличения
Название: 2.JPG
Просмотров: 549
Размер:	95.1 Кб
ID:	93234  
__________________

Реклама в аватаре и профиле запрещена! (с) Правила форума п.2.14
Аня Дорошкеви вне форума  
Старый 25.04.2014, 23:30
#2
Интересующийся
 
Имя: Олег
Пол: Мужской
Адрес: Харьков
Регистрация: 17.04.2014
Сообщений: 24
Благодарностей: 0
УГ: 0
КП: 0.000
Re: Помогите сделать вывод товаров не строку а в столбик в интернет-магазине

А ссылка на сайт есть? Как на сайте?
olejkatom вне форума  
Старый 03.05.2014, 22:49
#3
Специалист
 
Имя: Михаил
Пол: Мужской
Возраст: 27
Адрес: Россия
Инвестирую в: HYIP
Регистрация: 10.03.2014
Сообщений: 574
Благодарностей: 126
УГ: 0
КП: 0.000
Re: Помогите сделать вывод товаров не строку а в столбик в интернет-магазине

Это делается легко и просто. Берётся блок-обёртка с очисткой обтекания, и внутри помещаем блоки с товаром, которые обтекают друг друга (css параметр flout).

Код html такой:
Код:
<div class="wrapp">
	<div class="product">
		Тут первый товар с картинкой и описанием...
	</div>
	<div class="product">
		Второй товар...
	</div>
	<div class="product">
		Третий товар...
	</div>
	<div class="product">
		Четвёртый товар...
	</div>
	<div class="product">
		Пятый товар...
	</div>
</div>
..и css:
Код:
.wrapp {
	width: 600px;
	clear: both;
	float: none;
}

.wrapp .product {
	width: 300px;
	float: left;
}
enssons вне форума  
Ответить
Войдите, чтобы оставить комментарий.
Сообщения прочитаны и/или просмотрены Сегодня, 03:07
Опции темы

Быстрый переход
Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как безопасно платить в интернет-магазине? mysilver Кредитные и дебетовые карты 74 16.06.2017 16:47
Как избежать отмены заказа в интернет-магазине balorcim Электронная коммерция 8 25.03.2015 19:49
Указывать ли цены в новом интернет-магазине? Моторокер Электронная коммерция 11 19.06.2012 21:06
Как повысить продажи в интернет-магазине emanno Маркетинг: общий форум 0 02.04.2011 12:20


Случайные темы
Аватара нет
LG L60 Dual X135
От Наталия Каминская в разделе «Заработал – Потрать!»
Аватар Анна Чернобай
Российским чиновникам поднимут зарплату на 38%
От Анна Чернобай в разделе «Новости в мире финансов и инвестиций»
Аватар vhyip
Шлем виртуальной реальности в России можно заказать за 3000 рублей
От vhyip в разделе «Новости в мире финансов и инвестиций»
Аватар pilot10
В декабре Дрейпер снова участвует в аукционе
От pilot10 в разделе «Новости криптовалют»
Аватара нет
PayForInstall.ru - заработай $ на своём мобильном
От Cappuccinator в разделе «Список проблемных/неактивных/закрытых программ»
.     
Пользователей
434,366
Тем
503,936
Сообщений
12,650,962

mmgp.telegram