[Помощь] Количество колонок в витрине

[Shaman2]

В случае резинового дизайна можно как-то переключать количество колонок в зависимости от размера окна броузера?
Например по умолчанию две колонки, но если броузер ужать до 1100 пикселей, то витрину с двух колонок надо переключить на 1

Добавлено через 2 минуты
я попробовал перевести root_categories.html с табличной на div верстку

<div width="100%" border="0">
{foreach from=$root_categories item=_cat name=_fr}
<!-- {if $smarty.foreach._fr.index%$columnCount ==0}{/if} -->
{if $smarty.foreach._fr.index%$columnCount ==0}<div class="cat_na">{/if}

{assign var=_cat_url value="?categoryID=`$_cat.categoryID`&category_slug=`$_cat.slug`"|set_query_html}
{if $_cat.picture ne "" && $PAGE_VIEW ne 'mobile'}
<div width="1%" align="center" class="cat_image">
<a href='{$_cat_url}'>
<img border="0" src="{$smarty.const.URL_PRODUCTS_PICTURES}/{$_cat.picture|escape:'url'}" alt="{$_cat.name|escape:'html'}">
</a>
</div>
{else}
<div width="1%" align="center" class="cat_image">
<a href='{$_cat_url}' class="home_page_category_logo">

</a>
</div>
{/if}

<div class="cat_name">
<a href='{$_cat_url}' class="rcat_root_category">{$_cat.name|escape:'html'|default:'(no name)'}</a> <span class="rcat_products_num">[{$_cat.products_count}]</span>
<div class="rcat_child_categories">
{* show sub categories *}
{foreach name=sub_cat_list from=$root_categories_subs[$_cat.categoryID] item=_subcat}
{if $subcategories_numberlimit&&(!$smarty.foreach.sub_cat_list.first)&&($smarty.foreach.sub_cat_list.iteration==$subcategories_numberlimit)}
&nbsp;...
{elseif !$subcategories_numberlimit||$subcategories_numberlimit&&($smarty.foreach.sub_cat_list.iteration<$subcategories_numberlimit)}
{if !$smarty.foreach.sub_cat_list.first}{$subcategories_delimiter|escape:'html'}{/if}
<a href='{"?categoryID=`$_subcat.categoryID`&category_slug=`$_subcat.slug`"|set_query_html}'>{$_subcat.name|escape:'html'}</a>
{/if}
{/foreach}
</div>
</div>

<!-- {if ($smarty.foreach._fr.index+1)%$columnCount ==0}{/if} -->
{if ($smarty.foreach._fr.index+1)%$columnCount ==0}</div>{/if}
{/foreach}
</div>

и

#container_main_content .cpt_root_categories .cat_na {float:left; heigth: 175px;}
#container_main_content .cpt_root_categories .cat_image {width:175px; heigth: 175px; float: left;}
#container_main_content .cpt_root_categories .cat_name {margin-left:175px; heigth: 175px;}

но все что смог добится это отображения данных на главной странице в одну колонку. Устраивает если монитор 1024 на 800 например, а как всетаки изменить этот код чобы на широкоформатном мониторе резиновый сайт начал выводить две колонки? Может как-то задать max-width при определенном условии или я вообще неправильно делаю?

 

[gora4o]

Аналогично интересует данная опция. Я дошел до того, что это можно реализовать 3 методами:

1. Табличная верстка, с подключением JavaScript при предзагрузкой страницы, который вычисляет размер окна браузера и выводит разное число столбцов, например 3 или 4.

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

3. Метод основан на подключении Джекваери, но так как я не очень силен в нем, то пока не могу вообще понять что к чему.

Если говорить конкретней, то не один из методов не смог у меня нормально работать, поскольку 1 движек не может обработать при предзагрузке. Точнее можно это сделать, но я не знаю как это сделать.

А второй метод я сколько не пробовал, то ничего нормального не выходит, в ИЕ товары разъезжаются не пойми как.

 

[Shaman2]

Н-да... и разрабы молчат тоже. Видать немозвожно такое

 

[gora4o]

Это возможно. Как пример натянуть блочную верстку и прописать стили. Только как я уже понял нужно писать условия для браузеров вроде ИЕ, поскольку они некорректно понимают списки. Если по делу,то вот пример как это будет выглядеть: giftus.ru смотрите на главной при различных разрешениях.

 

[Sammerset]

Если хотите, можете пхп активировать в своей связке, кто не знает smarty, и по исходящим данным шаблон строить (стандартные исполнения резиновых шаблонов - дивами). Редактировать надобно файл витрины (под себя подстраивать). А размеры экрана можно из стандартных запросов на сервер вытянуть.

 

[Shaman2]

Это возможно. Как пример натянуть блочную верстку и прописать стили. Только как я уже понял нужно писать условия для браузеров вроде ИЕ, поскольку они некорректно понимают списки. Если по делу,то вот пример как это будет выглядеть: giftus.ru смотрите на главной при различных разрешениях.

Вот то что нужно. Но я не сильно спец что же там надо переделать в моем примере выше?

 

[gora4o]

получилось реализовать резиновость на главной странице, посмотреть можешь на моей главной: kupisuvenir.com.ua

Это сделал вот так, для строки просто задал ее ширину:

.cpt_last_products li {padding-right:14px;float:left; list-style:none; padding-bottom:2%;padding-right:2%;height:275px;max-width:33%; //width:expression(document.body.clientWidth < 950? "950px" : document.body.clientWidth > 1920? "1920px" : "auto");}