Перейти к публикации

Вывод похожих новостей в 2 колонки без правки кода


Рекомендованные сообщения

Всем добрый день!

Собственно название темы и есть сам вопрос. В инете где только не смотрел, все друг у друга как один скопировали этот хак, в котором большой минус - это обязательная правка оригинальных файлов движка.

Ну и сам вопрос: возможно ли выполнить вывод похожих новостей в 2 колонки без правки кода?

Ссылка на сообщение
Поделиться на других сайтах

Готовое решение не подскажу, но вот статья, где описан принцип многоколоночности. Чистый CSS и ничего более.

Ссылка на сообщение
Поделиться на других сайтах

Да-да, вот как раз об этом варианте где-то уже упоминалось, но вот конкретики так и не нашел.

Благодарю! Будем пробовать)

Ссылка на сообщение
Поделиться на других сайтах

В таком случае расположения новостей получается конечно же так:

1 2

3 4

5 6

7 8

9 10

И если титл новости длинный и переходит на новую строку, то в другой колонке уже получается расстояние, и выглядит это не очень красиво:

1 новость ******* 2 новость *************

**********************

3 новость ******* 4 новость *************

5 новость ******* 6 новость *************

*******************

*******************

7 новость ******* 8 новость **************

**************************

**************************

9 новость ******* 10 новость *************

Интересно, возможен ли вывод новостей следующим образом:

1 6

2 7

3 8

4 9

5 10

То есть в левой колонке идет список по количеству <li>, например, строго до пяти по нумерации, а начиная с шестого уже переход списка в правую колонку.

Возможен ли подобный вывод средствами css? Или здесь без js не обойтись?

Ссылка на сообщение
Поделиться на других сайтах

Возможен ли подобный вывод средствами css? Или здесь без js не обойтись?

1 6 2 7 3 8 4 9 5 10

Не обойтись

Вот этот я думаю то что нужно. Конечно есть примеры.

Ссылка на сообщение
Поделиться на других сайтах

В чем проблемы? Все просто! Заключаете содержание короткой новости в див и табличку по образцу:

<div style="width:50%; float:left">

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td>

ТУТ КОРОТКАЯ НОВОТЬ СОДЕРЖАНИЕ

</td>

</tr>

</table>

</div>

И будет у вас на главной просто в два столбика... Делать можно хоть в 10 таким образом, просто меняйте проценты и все...

Ссылка на сообщение
Поделиться на других сайтах

В чем проблемы? Все просто! Заключаете содержание короткой новости в див и табличку по образцу:

ТУТ КОРОТКАЯ НОВОТЬ СОДЕРЖАНИЕ

И будет у вас на главной просто в два столбика... Делать можно хоть в 10 таким образом, просто меняйте проценты и все...

Речь идет о выводе похожих новостей {related-news}

Ссылка на сообщение
Поделиться на других сайтах

LADYX, что именно у Вас не получается?


<style type="text/css">

  #topnews { width: 200px; background-color: red; overflow: hidden; list-style: none; padding: 0; margin: 0; }

  #topnews li { width: 100px; height: 50px; float: left; overflow: hidden; }

</style>


<ul id="topnews">

  <li>01</li>

  <li>02</li>

  <li>Очень очень длинный заголовок</li>

  <li>04</li>

  <li>05</li>

  <li>06</li>

  <li>07</li>

  <li>08</li>

  <li>09</li>

  <li>10</li>

  <li>11</li>

  <li>12</li>

  <li>13</li>

  <li>14</li>

</ul>

Элементарный пример, как это делается :)

Тут демо: http://a.zeos.in/temp/123.html

Изменено пользователем WWW.ZEOS.IN
Ссылка на сообщение
Поделиться на других сайтах

В чем проблемы? Все просто! Заключаете содержание короткой новости в див и табличку по образцу:

ТУТ КОРОТКАЯ НОВОТЬ СОДЕРЖАНИЕ

И будет у вас на главной просто в два столбика... Делать можно хоть в 10 таким образом, просто меняйте проценты и все...

Речь идет о выводе похожих новостей {related-news}

в версии 9.5 уже релатед ньюс имеют собственный шаблон, кто мешает по такому же принципу записать то, что я указал в файл шаблона для похожих новостей?!

Ссылка на сообщение
Поделиться на других сайтах

Элементарный пример, как это делается Тут демо: http://a.zeos.in/temp/123.html

Да, этот вариант верный, и мы его уже использовали. Однако в таком варианте получаются пробелы, расстояния между строками, они становятся зависимыми по горизонтали, о которых я написал в 4-ом посте.

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

Вот о чем речь :)

в версии 9.5 уже релатед ньюс имеют собственный шаблон, кто мешает по такому же принципу записать то, что я указал в файл шаблона для похожих новостей?!

А при чем здесь шаблон? Он выдает маркированный список, и всего лишь. Ну хорошо, сможете привести пример на исключительно css, который решит проблему, которая описана в посте #4? :)

Ссылка на сообщение
Поделиться на других сайтах

Однако в таком варианте получаются пробелы, расстояния между строками, они становятся зависимыми по горизонтали, о которых я написал в 4-ом посте.
Мне, не понятно в чём у вас проблема. Попробуйте перечитать: http://htmlbook.ru/

Написал еще один пример: http://a.zeos.in/temp/222.html

Ссылка на сообщение
Поделиться на других сайтах

Мне, не понятно в чём у вас проблема. Попробуйте перечитать: http://htmlbook.ru/ Написал еще один пример: http://a.zeos.in/temp/222.html

Ну почему же, проблема прекрасно решена с помощью js. Не все можно сделать только с помощью http://htmlbook.ru/

Ссылка на сообщение
Поделиться на других сайтах

Написал еще один пример: http://a.zeos.in/temp/222.html

В примере имеем два тега ul, а шаблон related-news не позволяет разбить похожие новости на две части, хотя может я чего то не знаю. Вот поэтому список новостей надо делить скриптом. Наверно зря я привел пример именно этого скрипта, можно конечно обойтись несколькими строчками на jquery. Но вот как справится с этим средствами css я честно говоря не знаю. У меня получилось сделать только так:

1 | 2

3 | 4

5 | 6

А хотелось вот так:

1 | 4

2 | 5

3 | 6

Ссылка на сообщение
Поделиться на других сайтах

В примере имеем два тега ul, а шаблон related-news не позволяет разбить похожие новости на две части, хотя может я чего то не знаю.

Я думал, что получится сделать вот так:


$(function(){

   $("ul li:eq(4)").after("</ul><ul>");

});

Но оно почему-то вставляет его наоборот: <ul></ul> 040.gif

Ну раз так, то можно подправить php файлы

Ссылка на сообщение
Поделиться на других сайтах

Lomot, по идее нет разницы, какой будет вывод, такой:

1 | 2

3 | 4

5 | 6

или такой:

1 | 4

2 | 5

3 | 6

верно? Вопрос то в другом: чтобы небыло зависимости в колонках.

Поэтому скорее всего это возможно непосредственно только с помощью

этого

скрипта.

Ну а лишь средствами css.... трудно сказать, наверное это не возможно.

Ссылка на сообщение
Поделиться на других сайтах

Но оно почему-то вставляет его наоборот:

Вот это и странно, у меня так и получилось. Буду продолжать эксперименты, если что получится выложу здесь.

Lomot, по идее нет разницы, какой будет вывод, верно? Вопрос то в другом: чтобы небыло зависимости в колонках.

Да

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

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

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...