Регистрация    Войти
Авторизация

Как сделать новости в две колонки на uCoz?

Как сделать новости в две колонки на uCoz?Как сделать новости в две колонки на uCoz?

В этой заметке мы узнаем как разместить новости uCoz в две колонки и отобразить их в чётном и нечётном порядке.

Всем привет, сегодня я хочу раскрыть несколько секретов связанные с новостями сайта на uCoz. Данную заметку я планировал написать ещё год тому назад в блоге C-DM.

И так в этой заметке мы узнаем:

Как сделать новости на uCoz в две колонки?
Как отобразить с правой стороны чётные новости, а с левой не чётные?

Представьте, у нас имеется вот такой каркас сайта:
karkas_site_ucoz_1karkas_site_ucoz_1


1.Основной каркас сайта - content
2.Правая сторона сайта - right-bar
3.Ячейка с контентом - content-left
4.Новости сайта - cell-news
теперь давайте взглянем на HTML код каркаса:
<!-- Основной каркас сайта -->  
<div class="content "> 

  <!-- Ячейка с контентом -->  
  <div class="content-left">  
  <div class="cell-news">Новость 4</div> 
  <div class="cell-news">Новость 3</div> 
  <div class="cell-news">Новость 2</div> 
  <div class="cell-news">Новость 1</div>  
  </div> 
  <!-- /Ячейка с контентом --> 

  <!-- Правая сторона сайта -->  
  <div class="right-bar"> 
  Правая ячейка сайта 
  </div> 
  <!-- /Правая сторона сайта --> 

   
</div> 
<!-- /Основной каркас сайта -->


и не забываем про CSS стили:
.content { 
  width:900px; 
  overflow:hidden;  
  background:#FFDD00; 
  margin: 100px auto 100px auto; 
} 

.content-left { 
  float:left; 
  width:625px;  
  background:#29B6FF; 
} 

.right-bar { 
  float:right; 
  width:250px;  
  background:#FF8357; 
} 

.cell-news { 
  float:left; 
  width:100%; 
  background:#7FE471; 
  margin: 0% 0% 3% 0%; 
}


И так первый шаг:
И так для начала нам следует прижать ячейку основного контента content-left (синяя ячейка) вплотную к правой ячейки сайта right-bar (оранжевая ячейка).

в данном случае я заменю в CSS стилях ячейки content-left значение width:625px; на width:650px;
.content-left { 
  float:left; 
  width:650px;  
  background:#29B6FF; 
}

karkas_site_ucoz_2karkas_site_ucoz_2


Шаг два:
Теперь нам следует выставить ячейки новости в две колонки, для этого заменяем следующие CSS стили:
.cell-news { 
  float:left; 
  width:100%; 
  background:#7FE471; 
  margin: 0% 0% 3% 0%; 
}

на
.cell-news { 
  float:left; 
  width:45%; 
  background:#7FE471; 
  margin: 0% 5% 3% 0%; 
}


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


Как отобразить с правой стороны чётные новости, а с левой не чётные?
Для решение данной задачи за основу нам потребуется системная переменная $ID$, которую мы поместим в условный оператор в шаблон Вид материалов:
<?if($ID$ % 2 = 1)?>нечетное<?else?>четное<?endif?>


Благодаря данному оператору мы пропишем чётной ячейки класс news-r, а не чётной news-l, уверен, что я вас запутал, поэтому давайте посмотрим на конечный код:
<div class="cell-news <?if($ID$ % 2 = 1)?>news-r<?else?>news-l<?endif?>"> 
тут HTML код новостей 
</div>


не забываем и про CSS стили:
.cell-news { 
  width:45%; 
  margin: 0% 5% 3% 0%; 
} 

.news-l {float:left; background:#ff0;} 
.news-r {float:right; background:#FF00AE;}


У данного решения имеется не приятный нюанс, мы за основу взяли $ID$ материала, а это значит, что каждая новость имеет свой уникальный идентификатор и он не изменяется на другой, если мы удалим предыдущий материал на сайте.

Это значит если удалить ту или иную новость и вместо 1.2.3.4 будет идти 1.2.4 мы увидим следующий вид новостей:
karkas_site_ucoz_4karkas_site_ucoz_4


Также существует второй вариант решение данной задачи на JS и CSS.

Поэтому на страницах сайта заменяем $BODY$ или $CONTENT$ для новостей сайта на главной страницы, на следующий код:
<div class="shell-news">$BODY$</div>


И в конце страницы сайта прописываем следующий JS код:
<script language="javascript"> 
  $(document).ready(function() { 
  $('.shell-news .cell-news:odd').addClass('news-r'); 
  $('.shell-news .cell-news:even').addClass('news-l');  
  });  
</script>


и CSS стили которые останутся прежними:
.cell-news { 
  width:45%; 
  margin: 0% 5% 3% 0%; 
} 

.news-l {float:left; background:#ff0;} 
.news-r {float:right; background:#FF00AE;}


Как вы видите все новости будут делиться на две ячейки, чётные и нечётные, единственный минус в данном JS решении заключается в том, что новости с нечётными идентификаторами будут отображаться как в чётном столбике так и в нечётном, и наоборот.
karkas_site_ucoz_5karkas_site_ucoz_5


И для тех кто не любил JS, предоставляю CSS решение:
.cell-news { 
  width:45%; 
  margin: 0% 5% 3% 0%; 
} 

.cell-news:nth-child(even) {float:left; background:#ff0;} 
.cell-news:nth-child(odd) {float:right; background:#FF00AE;}


На этом всё, спасибо за внимание!

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  20-12-2014, 15:38   Просмотров: 3623   
новости в две колонки на uCoz, новости в две колонки, две колонки, две колонки ucoz, Как сделать новости, новости, новости ucoz
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.


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