Вид материалов на сайте uCoz в несколько столбиков

Как изменить вид материалов на сайте uCoz? В стандартных шаблонах сайтов uCoz Вид материалов в модуле Каталог статей всегда расположен последовательно в один столбик. Но как поступить, если есть необходимость расположить материалы в два и более столбика?

Решение оказалось достаточно простым.
Панель управления – Дизайн – Управление дизайном (шаблоны) – Каталог статей – Вид материалов

Предполагается, что сам шаблон Вид материалов уже отредактирован Вами по Вашему усмотрению. И вот теперь тот самый секрет, который даст возможность показывать Ваши материалы в несколько столбиков.
Это сочетание стилей CSS: float и width.
float: left; width: 50% (100:2 – это для двух столбиков)
float: left; width: 33% (100:3 – это для 3-х столбиков)
float: left; width: 25% (100:4 – для 4-х столбиков).

Итак, для того, чтобы Вид материалов модуля Каталог статей выводился в 2 столбика нужно Весь код шаблона поместить внутри тегов

со следующими стилями:

<div style="float:left; width:50%> 

Ваш код шаблона вида материалов 

</div> 

А далее по аналогии, если Вам нужно еще больше столбиков. Рассмотрим это на конкретном примере.

Пример Вида материалов для Интернет-магазина

Для примера я взяла шаблон Вида материалов для моего интернет магазина, который я сделала из Модуля Каталог статей. Именно этот скриншот Вы видите в начале страницы.

HTML

HTML код самого шаблона приделано прост:

<div class="shop"> 
  <center> 
  <a href="$ENTRY_URL$"><div><b>$TITLE$</b></div><img src="$IMG_URL1$" height="150"> 
  

  <div><b>Цена: $AUTHOR_NAME$</b></div></a></center> 
  </div>  

А вот набора стилей тут гораздо больше, поэтому я выделила их в отдельный класс и поместила в файл css стилей “shop”.

CSS

Панель управления – Дизайн – Управление дизайном (CSS стили)

В самый конец всех стилей нужно вставить следующие:

.shop { 
width: 40%; 
float: left; 
margin: 20px; 
border: 2px solid #f5d9dd; 
} 
.shop a { 
display:block; 
background: #faf1f2; 
  color: #491d27; 
  font-weight: bold; 
  font-size: 12pt; 
text-decoration: none; 
   
} 
.shop a:hover { 
  display:block; 
background: #491d27; 
  color: #faf1f2; 
text-decoration: none; 
} 

В результате у Вас получится простой, но очень приятный Вид материалов в два столбца.