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

[LADYX 91]

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

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

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

[PapaKitson 25]

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

[LADYX 91]

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

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

[LADYX 91]

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

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 не обойтись?

[Lomot 134]

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

1 6 2 7 3 8 4 9 5 10

Не обойтись

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

[LADYX 91]

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

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

[inokentik 45]

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

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

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

<tr>

<td>

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

</td>

</tr>

</table>

</div>

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

[LADYX 91]

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

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

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

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

[WWW.ZEOS.IN 1 161]

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

Изменено 7 апреля 2012 пользователем WWW.ZEOS.IN

[inokentik 45]

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

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

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

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

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

[LADYX 91]

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

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

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

Вот о чем речь

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

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

[WWW.ZEOS.IN 1 161]

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

Мне, не понятно в чём у вас проблема. Попробуйте перечитать: http://htmlbook.ru/

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

[LADYX 91]

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

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

[Lomot 134]

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

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

1 | 2

3 | 4

5 | 6

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

1 | 4

2 | 5

3 | 6

[WWW.ZEOS.IN 1 161]

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

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

$(function(){

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

});

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

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

[LADYX 91]

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

1 | 2

3 | 4

5 | 6

или такой:

1 | 4

2 | 5

3 | 6

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

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

этого

скрипта.

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

[Lomot 134]

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

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

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

Да