fbpx
Перейти к содержимому

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

Как изменить вид материалов на сайте 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 столбика нужно Весь код шаблона поместить внутри тегов

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

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

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

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

HTML

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

Больше статей:   Распознавание букв в имени файла для модуля Каталог файлов сайтов uCoz

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

CSS

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

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

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

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

  1. Скажите, как сделать, чтобы ваш вид материалов адаптировался под мобильные?

Добавить комментарий для Natalie - Step For Top Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *