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

Материал из Umicms
Перейти к:навигация, поиск
(Новая страница: «<hr> <h2>Как сделать выдачу каталога в три столбца?</h2> Этим же способом можно выводить товары …»)
 
Строка 1: Строка 1:
−
<hr>
+
Этим же способом можно выводить товары в два, четыре и более столбцов. Меняться будет только процентное соотношение в стилях:
−
<h2>Как сделать выдачу каталога в три столбца?</h2>
 
−
 
 
−
Этим же способом можно выводить товары в два, четыре и более столбцов. Меняться будет только соотношение в стилях:
 
 
<pre>
 
<pre>
 
$FORMS['objects_block'] = <<<END
 
$FORMS['objects_block'] = <<<END
  
 
<h1>Каталог продукции</h1>
 
<h1>Каталог продукции</h1>
−
 
 
<div id="cat">
 
<div id="cat">
−
 
+
%lines%
−
% lines%
 
−
 
 
 
</div>
 
</div>
  
Строка 21: Строка 15:
  
 
<div class="catItem">
 
<div class="catItem">
−
 
+
   <h3><a href="%link%">%name%</a></h3>
−
   <h3><a href="% link%">% name%</a></h3>
+
   <img src="%photo%" height="112" width="150" />
−
 
+
   <p>%descr%</p>
−
   <img src="% photo%" height="112" width="150" />
 
−
 
 
−
   <p>% descr%</p>
 
−
 
 
 
</div>
 
</div>
  
Строка 38: Строка 28:
  
 
     <style type="text/css">
 
     <style type="text/css">
−
 
 
#cat {
 
#cat {
−
 
 
     margin: 0 auto 0 auto;
 
     margin: 0 auto 0 auto;
−
 
 
     width: 100%;
 
     width: 100%;
−
 
 
}
 
}
−
 
 
#cat .catItem {
 
#cat .catItem {
−
 
 
     width: 33%; float: left;
 
     width: 33%; float: left;
−
 
 
     margin: 0 0 10px; 0;
 
     margin: 0 0 10px; 0;
−
 
 
}
 
}
−
 
 
</style>
 
</style>
 
</pre>
 
</pre>
 +
 +
Изменяя значение width: 33% можно добиться вывода в 2, 3, 4 и т.д. столбцов

Версия 15:05, 12 января 2010

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

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

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

END;

 

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

<div class="catItem">
  <h3><a href="%link%">%name%</a></h3>
  <img src="%photo%" height="112" width="150" />
  <p>%descr%</p>
</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 и т.д. столбцов

Источник — «https://wiki.umisoft.ru/index.php?title=Как_сделать_выдачу_каталога_в_три_столбца&oldid=636»