Ditto и вывод в несколько колонок

239 Posts

Bredova Reply #1, 18 years, 2 months ago

Столкнулась с необходимостью вывести анонсы-картинки статей с помощью Ditto в несколько колонок.
Попыталась решить это с помощью CSS:

Вызов

[!Ditto? &display=`all` &startID=`8` &tpl=`icons_portf_site` &sortDir=`DESC`!]

Чанк

<div class="portf">
<a href="[(base_url)][~[+id+]~]">[+icons_site+]<br>[+longtitle+]</a>
</div>

CSS

DIV.portf{
  width: 400px;
  column-count: 4;
  column-width: 100px;
  column-gap: 10px
  column-rule: none; 
}

Но эта конструкция не работает undecided

Проверяла в Firefox 3.0.1 и Safari 3.1.2

В чем ошибка?

Портфолио - http://wowstudio.pro

259 Posts

ikarushka Reply #2, 18 years, 2 months ago

Правильно думаете - такие вещи надо решать с помощью CSS.
Посмотрите рабочий пример вот здесь http://ditto.modxcms.com/examples/columns.html.
Главное ограничит ширину блока - это вы сделали width: 400px; (но по мне так это слишком много), теперь нужно добавить стиль float: left; и будет вам щастье
А что за стили:
column-count: 4;
column-width: 100px;
column-gap: 10px
column-rule: none;
huh

Поделитесь, пожалуйста, я таких стилей не знаю и ИМХО для данной задачи они не нужны.

BUKI:)DUKI - портфель

2,113 Posts

AKots Reply #3, 18 years, 2 months ago

Quote from: ikarushka at Aug 19, 2008, 11:46 PM

Поделитесь, пожалуйста, я таких стилей не знаю и ИМХО для данной задачи они не нужны.

Это стили CSS3 для многоколоночной верстки, но, насколько я понимаю, они не всеми браузерами поддерживаются (для поддержки добавляют программы на JavaScript).
Кстати, после column-gap: 10px забыта точка с запятой, может проблема и из-за этого. Полезно проверять CSS на правильлность (проводить валидацию), чтобы избежать таких ошибок.

Создание сайтов на MODx, поддержка сайтов, поисковая оптимизация, программирование, копирайтинг
Статьи о MODx, регулярно новые публикации

259 Posts

ikarushka Reply #4, 18 years, 2 months ago

AKots - благодарствую за пояснения - не знал

BUKI:)DUKI - портфель

239 Posts

Bredova Reply #5, 18 years, 2 months ago

Ура-ура-ура! grin

Заработало!
Фон правда не подкладывается под эту всю конструкцию, но это вручную разрешимо

ikarushka, спасибо большое!

Портфолио - http://wowstudio.pro