8Dle
Авторизация

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

Новости в 2 (С помощью 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;
}

(Фикс для IE . Дописываем в 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]


Вот и всё.

Жмите на Кнопу ниже, или подписывайтесь!


Читайте также
  1. gia1967
    20 октября 2009 19:57
    Укажите в шопстори ширину 50% и не мучайтесь. Будет вам 2 колонки. Укажите 30% и будет 3 колонки.
  2. FinN73
    25 октября 2009 22:55
    Будет только одна категория!Поэтому я прошел мимо!Блин,когда же уже кто нибудь сделает в две колонки по несколько категорий нормально!
  3. Qiker
    1 апреля 2010 15:19
    Фигня! найти бы что бы все через shortstory.tpl выводилось в 4 колонки
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


Dle это движок который изначально проектировался для создания новостных сайтов, но по мере своего развития движка значительно расширил свою функциональность и стал универсальным средством разработки и сопровождения сайтов и блогов различной направленности и тематики. По сравнению с другими бесплатными (и некоторыми платными) CMS системами движок dle обладает довольно обширными возможности.

Авторизация