Хаки и Скрипты Next Generation CMS

Делаем вывод новостей в 3 колонки

irbees2008 irbees2008 Опубликовано - 5 - апреля Верстка
3561 - 0
  • Автор: --------------
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Итак начнем,все очень просто:
1.В news.short вставляем

Код:
<div style="width:33%;float:left;">
<div class="short-story">
<div class="img-size">{short-story}</div>
<div class="clr"> </div>
<div id="catitle">[full-link]{title}[/full-link]</div>
</div>
</div>
2. поясняю
  1. div style="width:33%;float:left" - задает относительную ширину новости по отношению к колонке контента и выравнивает новости по левому краю
  2. div class="short-story" - блок короткой новости
  3. div class="img-size" - класс для задания стиля картинкам
  4. div class="clr" - убираем наложение картинок на текст
  5. div id="catitle" - класс для оформления стиля заголовка
3.задаем стили нашему блоку т.е. в css добавляем или заменяем старые стили если классы совпадают
Код:
.short-story {
border: solid 1px #353535;
border-radius: 8px;
margin: 15px 15px 10px 10px;
height: 290px;
overflow: hidden;
background: #353535;
box-shadow: 2px 2px 2px #888;
}
  1. border: solid 1px #353535; - бордер для новости
  2. border-radius: 8px; - радиус углов бордера
  3. margin: 15px 15px 10px 10px; - отступы новостей, зависит от ширины колонки
  4. height: 290px; - высота блока новостей. нужна в том случае, если мы хотим использовать длинный заголовок в несколько строк. В обратном случае если не прописать железно высоту, то блоки новостей в нижних рядах не будут выводиться ровно в столбик а как попало из-за разницы высоты блоков.
  5. overflow: hidden; - обрезаем содержимое новостей если оно вылазит за заданные границы
  6. background: #353535; - задаем темный фон для новостей
  7. box-shadow: 2px 2px 2px #888; - добавляем тень
А для желающих изменить стиль есть онлайн генераторы стилей
4.Задаём фиксированную высоту картинками
Код:
.img-size img {
height: 250px;
}
5.Добавляем оформление для заголовков :
Код:
#catitle {
font-weight: bold;
font-size: 13px;
text-align: center;
padding: 10px 0;
margin: 2px 0 0 0;
}

#catitle a {
color: #ffd40b;
text-shadow: 0 1px 1px #949494;
}
6.Вот и все пользуемся

Можешь почитать и вот эту статейку "Как добавить ssl на поддомен через Cloudflare"

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4704 дня
  • Новостей: 580
  • Комменты: 257
  • Зарегистрированно : 692
  • Онлайн всего: [77]
  • Гости: [76]
  • Поисковики: [1] Google
  • Были сегодня : [1] Google
  • SQL запросов: 30
  • Генерация страницы: 0.308сек
  • Потребление памяти: 5.165 Mb 
  •   Яндекс.Метрика