Задача:
1. Вывод новостей на главной странице в 2 колонки.
2. При переходе в категорию и т.п. в одну колонку.

Средства:
Стандартные средства движка ДЛЕ+CSS+HTML (никаких скриптов и примочек).
Удобные для вас редакторы или редактор.
Прямые руки.

Известные проблемы:
1. Бывают длинные заголовки новостей (на 2 и более строчки).
2. Разное количество символов в теле новости (от 1 до 1000+).
3. Изображения в теле новости (размер ограничен разумными пределами)

Все эти а так же специфические "проблемы" заставляющие новость менять высоту, думаю все известны, и каждый борется с ними по своему.

Постараемся решить их:

1. В main.tpl необходимо "отключить" тег {content} делаем это так:
[not-aviable=main]{content}[/not-aviable]

Спросите а почему его просто нельзя удалить?
Удалите и сами всё увидите

2. В нужном месте в main.tpl необходимо вставить этот код:
{custom category="2" template="half_story" aviable="main" from="0" limit="10" cache="yes"}

Где: category="2" - номер категории,
template="half_story" - наш шаблон (разберёмся с ним пожже)
from="0" limit="10" - ограничение количества отображаемых на странице новостей
cache="yes" - кеширование для уменьшения нагрузки на сайт

3. С этим разобрались? переходим к нашему шаблону.
Открываем half_story.tpl (если вдруг так случилось и у вас в папке с двигом нет шаблона half_story.tpl то возможно нужно переустановить дрова на видеокарту :))) (шутка)
Основное условие нашего шаба - он должен быть резиновым (хотя это не принципиально - всё можно решить.)
Вот допустим такой будет код нашего half_story.tpl:

- Обращаю внимание на первую строку: width: 49%; эту цифру подбераем методом научного тыка (или включаем мозги и считаем padding, margin и тому подобные непонятные цифры ;-D )
- Обращаю внимание на эту строку:

Новость))){short-story}

                         .post-content {
            padding: 10px 10px 8px;
            overflow:hidden;
            color:#000;
        }
        
            .post-content img {
                margin:0 5px;
            }
        
        .post-footer {
            position:relative;
            overflow:hidden;
            padding: 3px;
            border-top: solid 1px  #e8e8e8;
            border-left: solid 5px #99cc00;
        }
        
            .post-footer p {
                font:bold 1em Verdana;
                color:#9d9d9d;
            }
            
                .post-footer p a {
                    color:#9d9d9d;
                }

Ну со стилями вроде как ок, вопросов не должно быть , кроме как к этому:

.tp {position:relative;text-indent:0;}
.tp b {
   border-bottom:#90f 1px dotted;
   color:#90f;
   cursor:help;
   font-weight:normal;
}
.tp b span {display:none;}
/*-- для FF, OPERA, IE7 --*/
.tp b:hover {
   border-bottom:red 1px dotted;
   color:red;
}
.tp b:hover span {
   background:lightcyan;
   border:silver 2px outset;
   color:#000;
   display:block;
   padding:7px;
   position:absolute;
   top:2px;
   left:5px;
   z-index:10;
   text-align:left;
   width:250px;
}
(Фикс для IE . Дописываем в main.tpl либо в отдельный css - файл.)

Это как раз код всплывающей подсказки (отредактируете по своему вкусу))

Вот так мы решили сразу несколько проблем)). Новости выводятся в 2 колонки, заголовок, если он длинный - обрезается, новость показывает во всплывающей подсказке :))

Теперь решим вторую задачу:

Заключаем наш див с float:left; а точнее даже стиль этого элемента в тег [aviable]
[aviable=main]style="float: left;" width="48%"[/aviable]

Вот и всё.

При копировании материалов ссылка на источник http://1uoz.3dn.ru/ обязательна