ПафНутиЙ-Блог » Статьи » Новости в две, три, четыре и т.д. колонки (развитие мысли)

Новости в две, три, четыре и т.д. колонки (развитие мысли)

24.03

42 644

новости в 2 колонки jQuery вёрстка оформление новостей

Новости в две, три, четыре и т.д. колонки (развитие мысли)

Эта статья - логическое продолжение поста про новости в две колонки (jQuery Edition).

В комментариях был задан вопрос о невозможности вывести новости в 3, 4 и т.д колонки. Я не стал приводить код в комментариях, а решил немного описать решение и сразу показать его демонстрацию.

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

Не буду лить лишнюю воду, покажу сразу пример реализации, здесь я немного модифицировал скрипт, для наглядности, но суть не меняется. Кстати комплексная поисковая оптимизация сайтов - не так у и дорого.
Разбирать же будем вариант с тремя колонками новостей.

Реализация

1. Код в shortstory.tpl должени иметь примерно такой вид:

<div class="news">
 содержание shortstory и всякие теги, 
главное тут - "обёртка" всего содержимого shortstory.tpl
</div>

2. Обязательные стили в CSS:

.news.float {
    float: left;
    width: 30%; //значение зависит от желаемого количества колонок (например для 5ти колонок нужно указать 18-20%) 
    }
.clr {
    clear: both;
    height: 0;
    overflow: hidden;
    }

3. Ну и самое главное - jQuery-код:

<script type="text/javascript">
jQuery(function($) {
    $(".news").addClass("float").filter(":nth-child(3n)").after('<div class="clr"></div>');
});
</script>

Как видно из строки кода - всё совершенно просто - сначала дописываем всем блокам с классом news дополнительный класс, а потом дописываем после каждого третьего блока пустой div с слассом clr - это для того, чтобы новости имели ровное горизонтальное положение, а не плавали так, как им захочется.

Как настроить?

Легко!
Всё что нужно - это заменить цифру три в строке :nth-child(3n) на желаемую, и в CSS заменить width: 30%; на нужное значение (как правило методом подбора).

Ну и как обычно - включаем фантазию и делаем красиво smile

Похожие материалы

Есть ещё один небольшой вопросик: к примеру, сделал я вывод новостей в 4 колонки. Новости вмещаются по ширине "впритык" (ширина сайта фиксированная). Как можно задать не 25% для каждой новости, а 100% для всех четырёх? Да бы уместить на одну строку одну новость с длинным заголовком и три с коротким.
Желаемый эффект получается если вообще убрать параметр width: 30% . Но тогда справа остаётся ещё немного свободного места, что не очень красиво.

ПафНутиЙ 24 марта 2011 17:54

#640

Это уже методом тыка, но я бы не стал так делать - не красиво будет смотреться когда все новости разной ширины. Лучше с заголовками пошаманить немного, что бы всегда была одна строчка :)
Например задаём фиксированную высоту заголовка и overflow: hidden; smile

А можно ещё и jquery подключить к этому делу, что бы показывался title (по умолчанию в DLE не показывается title у заголовков новостей), тогда даже обрезанный заголовок будет удобочитаемым.

Mek 24 марта 2011 19:19

#642

но я бы не стал так делать - не красиво будет смотреться когда все новости разной ширины.

Согласен, но в моём случаи это наиболее подходящий вариант. Методом тыка не получается. Если ставить ширину в процентах, то ширина каждого блока получается одинаковая, и тоже самое если задать ширину в пикселях. Каким образом мне задать общую ширину всех четырёх блоков в процентах или пикселях?

ПафНутиЙ 24 марта 2011 19:41

#644

в вашем случаи лучше указывать ширину в пикселях

Mek 24 марта 2011 20:18

#646

ПафНутиЙ , Вы наверное не верно меня поняли smile

Если указывать ширину каждого блока в пикселях, то получатся все блоки одинаковой ширины. Мне же надо чтоб общая ширина всех блоков была ровна, к примеру, 1000 пикселям, но где это прописать я не знаю.

ПафНутиЙ 24 марта 2011 20:55

#647

По умолчанию DIV имеет ширину 100%, так что то, что вы хотите - не получится реализовать, ширину нужно указывать всегда, если оне отличается от 100%.

Mek 29 марта 2011 22:41

#652

ПафНутиЙ, не планируете ли Вы выпустить хак, который будет обрезать заголовок короткой новости до определённого символа? smile

При размещении новостей в 3-4 колонки он будет просто необходим smile

ПафНутиЙ 30 марта 2011 09:56

#654

Оно и не нужно, ведь можно обрезать заголовок средствами CSS
Делается это элементарно:

h3 {
font: 16px/20px Verdana, sans-serif;
height: 20px;
overflow: hidden;
}

bratoz 19 апреля 2011 15:24

#750

Вопросик у меня.
Вот у меня на online.videotuts.ru есть проблемка с картинками.
Как сделать что бы для тех у кого монитор маленький, картинки не ложились друг на друга, а просто уменьшались в размере.

ПафНутиЙ 19 апреля 2011 15:49

#751

насколько маленький? 800*600?
можно просто в css добавить стиль:

body {min-width: 1000px;}

bratoz 20 апреля 2011 10:31

#754

Цитата: ПафНутиЙ

body {min-width: 1000px;}

С этим разберусь потом, сейчас ещё одна не больша проблемка.
Sidebar в полной новосте мне нужен, а вот в main нет.
Я sidebar.tpl взял в [not-aviable=main] {include file="sidebar.tpl"} [/not-aviable]
Всё как бы гуд, но как сделать что бы и в категориях его тоже не было?
Вот например тут??
http://online.videotuts.ru/cinema4d-online-tutorials/

Т.е. что бы был вывод такой же как на главной

ПафНутиЙ 21 апреля 2011 09:22

#758

Пусть это прозвучит банально, но читайте документацию от начала и до конца, зачастую в середине тоже пишут интересное smile

Namename 29 июля 2011 13:07

#882

Не получается у меня что-то =(

Получается так, что фон новости отдельно от самой новости. Смещенно всё вообщем. Да и еще столбики не появились. Сделал всё по инструкции, много раз перепроверил!

Namename 29 июля 2011 13:29

#883

Вот сейчас все переделал по новой - вообще ничего не изменилось. Как было по стандарту, так и осталось.

ПафНутиЙ 29 июля 2011 15:09

#885

На демо наглядно всё показано, всё работает.
у вас проблемы с вёрсткой сайта, либо что-то не то делаете.

Namename 29 июля 2011 15:13

#886

хм, можно в аське вас выловить?)

Namename 29 июля 2011 17:30

#887

Прошу, я всё проверил! Не работает!

Залил в templates такой же шаблон, для того, что бы новости отображались в 4 колонки только для нужных категорий.

В этот свежезалитый шаблон приминяю следующие изменения:
открываю shortstory.tpl, вношу туда код:
<div class="news">
код который был внутри shortstory.tpl
</div>
Далее, в каскадные стили шаблона style.css, в самый конец вношу код.

Затем, во внутрь <head></head> вношу jQuery скрипт.

Либо вообще ничего не меняется, либо в 4 колонки не встаёт, а текст появляется не там, где нужно.

Dle 9.3! Помогите пожалуйста!

ПафНутиЙ 29 июля 2011 18:37

#888

Ссылку на сайт дайте.

Namename 30 июля 2011 16:51

#892

Давайте на icq ?я добавил вас

Namename 30 июля 2011 18:48

#894

Хм, а на официальном шаблоне - работает! Отличия папок корня шаблона от обычного тем, что папка со стилями называется "css" а не "styles'. хм..

Namename 30 июля 2011 18:52

#895

Такс, всё дело в shortstory, оно не стандартное. Вот, посмотрите пожалуйста.

_http://don-light.net.ua/uploads/files/shortstory.tpl.rar

Namename 30 июля 2011 22:13

#896

Всё спасибо, сделал всё сам в ручную. Сам придумал, написал - получилось.

ПафНутиЙ 31 июля 2011 22:50

#898

Ну вот видите как хорошо, и я 2 дня на даче отдохнул, и вы смогли самомстоятельно дойти до решения :-)

Namename 2 августа 2011 17:53

#914

:D
я просто не подключал ксс, я прямо там <div style> сделал)

Добавить комментарий

Комментировать могут только зарегистрированные пользователи

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Новости в две, три, четыре и т.д. колонки (развитие мысли)

Похожие материалы

Комментарии

Добавить комментарий