Новости в 2 колонки стандартными средствами DLE, CSS, html

Итак, начну с того что эта статья всего лишь пример реализации вывода новостей в несколько колонок (в данном случаи две).
Статья предназначена в первую очередь для чайников, т.к. опытные пользователи давно уже нашли способ :)

Задача:
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:

<div class="post" style="float: left; width: 49%;">
    <div class="title">
    {title}
        <p>автор: {author} | {date} | Просмотров: {views} [edit] Редактировать [/edit] </p>
    </div>
    <div class="post-content">

Всякая информация, одинаковая для каждой из новости.

<p class="tp" style="z-index:6;"><b>Новость)))<span>{short-story}</span></b></p>
    <br><b>[full-link]Подробнее...[/full-link]</b>
    </div>
    <div class="post-footer">
        <span>[com-link]Комментарии({comments-num})[/com-link]</span><span class="rating">{rating}</span> 
    </div>
</div>

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

<p class="tp" style="z-index:6;"><b>Новость)))<span>{short-story}</span></b></p>

это всплывающая подсказка на CSS (учень кстати удобная)
Это стили:

.post {
        background:#FFFFFF;
        margin-bottom:20px;
        border: 1px solid #9d9d9d;
    }
    
        .title {
            height: 36px;
            background:#99cc00;
            font: bold 1.2em Verdana; 
            color:#FFFFFF;
            border-bottom: 1px solid #9d9d9d;
            padding-left: 5px;
            overflow: hidden;
        }
        
            .title p {
                font: 0.9em Verdana;
                color:#ccff99;
                padding-top: 3px;
            }
            
                .title a {
                    color:#ccff99;
                }

                         .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;
}

(это дописываем в main.tpl либо в отдельный css - файл.)

<!--[if IE 6]>
<style type="text/css">
.tp b {behavior:url(hover.htc);}
.tp .hover {
   border-bottom:red 1px dotted;
   color:red;
}
.tp .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;
}
</style>
<![endif]-->

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

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


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

Заключаем нащ див с float:left; а точнее даже стиль этого элемента в тег [aviable]

[aviable=main]style="float: left;" width="48%"[/aviable]

Вот и всё :) .

P.S. Решение пригодится для сайтов с программами, фильмами и т.п., в общем с более-менее однообразным контентом. Напомню что статья - это лишь пример найденного решения.

Автор: ПафНутиЙ
Стоимость: Бесплатно