X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Отображение новостей DLE
JayFunk
JayFunk
Topic Starter сообщение 21.10.2013, 14:53; Ответить: JayFunk
Сообщение #1


Завсегдатай
*****

Группа: Active User
Сообщений: 731
Регистрация: 6.7.2011
Из: Ukraine
Поблагодарили: 201 раз
Репутация:   44  


Каким образом можно реализовать такой вид новостей:



Читал что можно сделать через width:33%;. Получается новости все в одну строку по типу: http://pic.lg.ua/x/17/edfd58/18f2e7d6.jpg и если добавлено только 4-5 новостей (т.е. не формируется 2 полных ряда по 3 колонки) - новости размещаются вообще как-то непонятно.


--------------------
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sitefalev
sitefalev
сообщение 10.11.2013, 23:58; Ответить: sitefalev
Сообщение #2


Новичок
*

Группа: User
Сообщений: 21
Регистрация: 24.9.2013
Из: Ukraine
Поблагодарили: 1 раз
Репутация:   0  


Попробуйте вот так в shortstory
<div class="masonry_box small_pin_box">
    <div class="small_pin_box_info">
        <div>
            <a href="{full-link}" title="{title}">
                <img src="{image-1}" width="192" height="200" alt="{title}" /></a>
        </div>
                <div class="title">{title}</div>
        <div class="stats">{date} | Просмотров: {views} </div>
    </div>
    <div class="small_pin_box_user_info">
        <p class="small_pin_box_user_info_text">{short-story limit="250"}...</p>
        <div class="clrUltimate"></div>
    </div>
</div>

Где css
.masonry_box {
    width: 222px;
    margin-bottom: 10px;
    float: left;
}
.small_pin_box {
    -moz-box-shadow: 0 1px 2px rgba(34,25,25,0.4);
    -webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
    box-shadow: 0 1px 3px rgba(34,25,25,0.4);
    font-size: 11px;
    width: 222px;
    margin-bottom: 10px;
    float: left;
}
.small_pin_box .title {
    padding: 10px 0 5px 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.small_pin_box .title a {
    text-decoration: none;
    font-weight: normal;
}
.small_pin_box .actions {
    position: absolute;
    margin: 4px 0 0 4px;
    width: 214px;
    display: none;
}
.small_pin_box_info {
    background-color: #ffffff;
    padding: 15px 15px 0 15px;
}
.small_pin_box_info .stats {
    padding: 0 0 5px 0;
    color: #8C7E7E;
}
.small_pin_box_info .tags {
    line-height: 22px;
    padding-bottom: 4px;
}
.small_pin_box_info .tag {
    color: #3375AF;
    background-color: #def2fc;
    padding: 2px 4px;
    margin: 2px 0;
    text-decoration: none;
    line-height: 22px;
    font-size: 11px;
    font-weight: normal;
    white-space: nowrap;
}
.small_pin_box_user_info {
    background-color: #F2F0F0;
    padding: 10px 15px;
    margin: 0;
    font-size:12px;
    border-bottom: 1px solid #D9D4D4;
}
.small_pin_box_user_info a {
    color: #AD9C9C;
    font-weight: bold;
    text-decoration: none;
}
.small_pin_box_user_info a:HOVER {
    text-decoration: underline;
}

.small_pin_box_user_info_text {
    float: right;
    width: 157px;
    color: #333333;
    
}

Только надо указывать высоту картинки вручную. Что бы она была всегда разной и будит похоже.

Сообщение отредактировал sitefalev - 10.11.2013, 23:59
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Адаптивная вёрстка и натяжка на Wordpress, DLE, Joomla и др. Создание мобильных версий.
Хороший код с оптимизацией по скорости. Сайты и лендинги "под ключ
11 Nell 1077 11.12.2017, 15:21
автор: Nell
Открытая тема (нет новых ответов) Нужен рерайтер новостей на постоянную работу
3 FUTP 370 10.12.2017, 0:29
автор: contentos
Горячая тема (нет новых ответов) Регистрация Вашего сайта (профиля,DLE сайты,подписи на форумах,постинг Тиц 10> , ПР 1>)
277 kaartes 102524 7.12.2017, 9:55
автор: Tootkin
Горячая тема (нет новых ответов) Услуги по CMS Wordpress, DLE, Joomla!. Правки, ремонт, настройка.
Редактирование и правки. Низкие цены.
142 contex1 65046 5.12.2017, 12:13
автор: contex1
Открытая тема (нет новых ответов) Требуется так сказать оптимизация шаблона DLE
5 Deadman_n 401 2.12.2017, 13:24
автор: Deadman_n


 



RSS Текстовая версия Сейчас: 13.12.2017, 2:25
Дизайн