Как сделать выдачу каталога в три столбца — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
 
(не показано 5 промежуточных версий 2 участников)
Строка 1: Строка 1:
 
Этим же способом можно выводить товары в два, четыре и более столбцов. Меняться будет только процентное соотношение в стилях:
 
Этим же способом можно выводить товары в два, четыре и более столбцов. Меняться будет только процентное соотношение в стилях:
<pre>
+
<source lang="php">
 
$FORMS['objects_block'] = <<<END
 
$FORMS['objects_block'] = <<<END
  
Строка 14: Строка 14:
 
$FORMS['objects_block_line'] = <<<END
 
$FORMS['objects_block_line'] = <<<END
  
<div class="catItem">
+
<div   style="width: 33%; float: left; margin: 0/0/10px/0;">
   <h3><a href="%link%">%name%</a></h3>
+
   <p><a href="%link%">%text%</a></p>
 
   <img src="%photo%" height="112" width="150" />
 
   <img src="%photo%" height="112" width="150" />
  <p>%descr%</p>
 
 
</div>
 
</div>
  
 
END;
 
END;
</pre>
+
</source>
  
  
 
В шаблоне дизайна нужно будет подключить CSS примерно следующего вида:
 
В шаблоне дизайна нужно будет подключить CSS примерно следующего вида:
<pre>
+
<source lang="php">
  
 
     <style type="text/css">
 
     <style type="text/css">
Строка 37: Строка 36:
 
}
 
}
 
</style>
 
</style>
</pre>
+
</source>
  
 
Изменяя значение width: 33% можно добиться вывода в 2, 3, 4 и т.д. столбцов
 
Изменяя значение width: 33% можно добиться вывода в 2, 3, 4 и т.д. столбцов
 +
[[Категория:Модуль Каталог]]

Текущая версия на 13:39, 7 августа 2013

Этим же способом можно выводить товары в два, четыре и более столбцов. Меняться будет только процентное соотношение в стилях:

$FORMS['objects_block'] = <<<END

<h1>Каталог продукции</h1>
<div id="cat">
%lines%
</div>

END;

 

$FORMS['objects_block_line'] = <<<END

<div   style="width: 33%; float: left; margin: 0/0/10px/0;">
  <p><a href="%link%">%text%</a></p>
  <img src="%photo%" height="112" width="150" />
</div>

END;


В шаблоне дизайна нужно будет подключить CSS примерно следующего вида:

    <style type="text/css">
#cat {
    margin: 0 auto 0 auto;
    width: 100%;
}
#cat .catItem {
    width: 33%; float: left;
    margin: 0 0 10px; 0;
}
</style>

Изменяя значение width: 33% можно добиться вывода в 2, 3, 4 и т.д. столбцов