Помощь Как сделать вывод новостей в 2 колонки на DLE 8.2

Тема в разделе "DLE", создана пользователем TrAxeX92, 31 окт 2009.

Информация :
Актуальная версия DataLife Engine 11.2
( Final Release v.11.2 | Скачать DataLife Engine | Скачать 11.2 demo )
Нужно ли обновляться | Как обновиться | Изменения в шаблонах
> Нет русских символов <
[Приватная тема DLE (Все подробности в ЛС к модератору раздела)]

Версии 11.1 и ниже - уязвимы!

Локализации | F.A.Q. | Внешний вид
Правила раздела | Правила форума
Обсуждение хайда карается баном!
В каждом сообщении указывайте версию DLE, которого они касаются!
Статус темы:
Закрыта.
Модераторы: killoff
  1. TrAxeX92

    TrAxeX92 Создатель

    Регистр.:
    3 апр 2009
    Сообщения:
    26
    Симпатии:
    0
    Здравствуйте. Недавно поставил задачу вывести новости в 2 колонки, методом CSS + HTML. Но ничего не вышло, верней вышло, но если в одной новости например больше символов то высота таблицы, больше другой, получается все сьезжает, с названиями такая же проблема, если title переходит на вторую строку, то идет смещение опять. Как же сделать одну таблицу для двух новостей? (тоесть чтобы таблицы (shortstory.tpl) были одного размера по высоте).

    По проще:
    Нужно сделать вывод в 2 колонки (по средствам DLE 8.2), чтобы колонки по высоте были одинакового размера (если в одной текст, больше, то в другой на этом месте должны быть пробелы).
     
  2. Rem

    Rem

    Регистр.:
    22 сен 2006
    Сообщения:
    474
    Симпатии:
    41
    Попробуй как то так

    Код:
    <div style="padding: 5px; float:left; width: 48%; height: 80px; overflow:hidden;">
    Тут твои колонки
    </div>
     
  3. scriptik

    scriptik Прохожие

    shotstory.tpl
    все взять в <div style="width:30%;float:left;">
     
  4. basct

    basct Постоялец

    Регистр.:
    13 июн 2008
    Сообщения:
    101
    Симпатии:
    46
    Ваш совет, приведет к разбивке в 3 колонки. +Не избежать проблем что описал ТС в первом посте.
    TrAxeX92, одним html'ом не обойтись (я имею виду нормальный результат) копайте в сторону модов: CaTIndex 1.9 & CSSY 1.8
     
  5. ildarkamaev

    ildarkamaev Постоялец

    Регистр.:
    4 апр 2009
    Сообщения:
    96
    Симпатии:
    15
    Можно попробовать воспользоваться хаком:
    http://dlepro.ru/index.php?newsid=830
     
  6. igoryk

    igoryk Постоялец

    Регистр.:
    9 сен 2006
    Сообщения:
    67
    Симпатии:
    68
    Здесь подробно описанно

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

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

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

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

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

    1. Для начала открываем блокнот (я использую notepad++) и создаём 2 пустых документа, сохраняем их как half_story.tpl - это будет шаблон для вывода коротких новостей на главную и on_cat_story.tpl это будет шаблон вывода коротких новостей во всех остальных местах.

    2. Открываем шаблон shortstory.tpl и удаляем всё его содержимое, вместо него пишем:
    Код:
    [not-category=XX]{include file="half_story.tpl"}[/not-category]
    [category=XX]{include file="on_cat_story.tpl"}[/category]

    Из кода видно что этими строками мы подключаем в шаблон shortstory.tpl 2 других шаблона,
    где XX - номера ВСЕХ категорий через запятую, к которым будет применён вывод в 2 колонки.
    теги [category=XX] и [not-category=XX] я использовал вместо [aviable=main] и [not-aviable=main] т.к. при использовании [aviable], при переходе например в каталог, новости будут отображаться в 2 колонки как на главной странице а нам требуется только в одну.

    3. Переходим к half_story.tpl.
    вот HTML-код этого шаблона:

    Код:
    <div style="width: 50%; float: left;">
    <div class="tl"></div><div class="tr"></div>
    <div class="inside">
        <div style="overflow: hidden; height: 38px;"><h1>[full-link]{title}[/full-link]</h1> {approve}</div>
             <div class="news_author">{link-category}<br />Добавил: {author} - {date}<br /> Просмотров: <b>{views}</b> [edit]Редактировать[/edit]</div>
             <p class="tp"><b>Содержание новости<cite>{short-story}</cite></b></p>
             <div>{rating} &nbsp;  [com-link]Комментарии ({comments-num})[/com-link]</div>
    
             </div>
    <div class="bl"></div><div class="br"></div>
    </div>

    - Для вывода в 2 колонки заключаем содержимое шаблона в <div style="width: 50%; float: left;">.......</div>
    - Для предотвращения изменения высоты новости используем фиксированную высоту для заголовка и overflow: hidden;
    - Для тега {short-story} используем всплывающую подсказку на CSS:

    Код:
    .tp {position:relative;text-indent:0;}
    .tp b {
        font: bold 13px cursive;
        text-align: center;
        text-decoration: none;
    }
    .tp b cite {display:none; font: normal 13px cursive; margin-bottom: 10px;}
    
    .tp b:hover cite {
       background:#fff;
       border:solid 1px #ccc;
       color:#000;
       display:block;
       padding:7px;
       position: absolute;
       top:0px;
       left:-11px;
       z-index:10;
       text-align:left;
       width:100%;
       text-decoration: none;
       font: normal 13px cursive;
       opacity: 0.9;
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90) progid:DXImageTransform.Microsoft.Shadow(color=#cacaca, direction=135, strength=3)";
       filter: alpha(opacity=90, enabled=1) progid:DXImageTransform.Microsoft.Shadow(color=#cacaca, direction=135, strength=3);
    }

    Используем всплывающую подсказку на CSS т.к. нет более простого и эффективного решения всплывающей подсказки, все поиски не увенчались успехом в деле отображения в хинте картинок и форматированного текста, когда при написании новости используются html-теги.

    4. CSS-код для вывода новостей общий и для half_story.tpl и для on_cat_story.tpl:

    Код:
    .tl, .tr, .bl, .br { 
        background-image: url("../images/news-corner.gif"); 
        height: 10px;
        font-size: 2px;
        }
    .tl, .bl { 
        margin-right: 10px;
        }
    .tr, .br { 
        margin-left: 10px;
        margin-top: -10px;
        margin-right: 10px;
        }
    .tr {
        background-position: 100% 0;
        }
    .bl { 
        background-position: 0 -10px;
        }
    .br { 
        background-position: 100% -10px;
        margin-bottom: 10px;
        }
    .inside {
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        background: #fff;
        padding-left: 10px;
        padding-right:10px;
        margin: 0 10px 0 0;
        }
    .inside h1 {
        font: bold 16px tahoma;    
        text-decoration: none
    }
    .inside h1 a{
        font: bold 16px tahoma;    
        margin: 0px;
        padding: 0px;
        text-decoration: none;
    }
    
    .inside h1 a:hover {
        text-decoration: underline;
    }

    5. Переходим к on_cat_story.tpl.

    HTML-код не сильно отличается от half-story.tpl поэтому не буду на нём подробно останавливаться:

    Код:
    <div class="tl"></div><div class="tr"></div>
    <div class="inside">      
             <div class="news_title">{link-category} - [full-link]{title}[/full-link] {approve}</div>
             <div class="news_author">Добавил: {author} - {date} | Просмотров: <b>{views}</b> [edit]Редактировать[/edit]</div>
             <div class="news_content">{short-story} <br /><br />[full-link]<b>Подробне...</b>[/full-link]<br /><br /></div>
             <div class="news_fut">{rating} &nbsp;  [com-link]Комментарии ({comments-num})[/com-link]
          </div>
    </div>
    <div class="bl"></div><div class="br"></div>

    Как видно убраны все "ограничения" размеров новости.

    Вот собственно и всё.
     
    ~Lexx~ и Bobrov нравится это.
  7. dizzzel

    dizzzel Создатель

    Регистр.:
    11 июл 2008
    Сообщения:
    12
    Симпатии:
    0
    пишет ошибку!
     
  8. Fakir1

    Fakir1 Писатель

    Регистр.:
    29 сен 2009
    Сообщения:
    7
    Симпатии:
    0
    Всё конечно хорошо, но картинка появляется только когда я курсором навожу на новость, это не есть гуд. И если у новости есть рейтинг, то отображается и пустой рейтинг и тот что выставили.
     
  9. ssllav

    ssllav Создатель

    Регистр.:
    19 фев 2009
    Сообщения:
    40
    Симпатии:
    6
    igoryk скопипастил у пафнутия? или это он у тебя? :D
    По идее это должно быть отдельным модулем или хаком.
    и должно быть авторазмер картинки и кроп по длине.
    У большинства существующих отдельных решений есть минус
    они не обрабатывают главную.а если и обрабатывают то не обрезают.
    Хотя по идее надо просто авторесайз до указанного размера, по X и Y, и кроп по длине названия новости, количество символов текста. тогда остальное оформление свободно решится цсс и хтмлом.
     
  10. sergeyich

    sergeyich

    Регистр.:
    20 ноя 2008
    Сообщения:
    200
    Симпатии:
    19
    А если сделать как здесь написано, поможет? Вроде бы не много то и надо
     
Статус темы:
Закрыта.