Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы по вёрстке Новости заплывают поверх других новостных блоков

Новости заплывают поверх других новостных блоков


     12.04.2014    Общие вопросы по вёрстке, Стили (CSS), jQuery    1308

вопрос
Решил реализовать (Динамичную сетку новостей) используя "Masonry".
Все как бы хорошо новости группируются но вот не задача новости начинают заплывать друг на друга и это стало проблемой для меня.Я пытался исправить но уже нет сил.Вы скажите чтобы я выставил высоту для блоков...Но мне нужно чтобы блок сам менял высоту по наполнении.Помогите пожалуйста решить проблему может это в самом скрипте.
Сайт для просмотра
Скрипт;
Сам скрипт Masonry может в нем нужно что-то изменить
<script>
$(function() {
$('#wrapper-main').masonry({
  columnWidth: 0,
  itemSelector: '.short-item'
});});
</script>

краткая новость;

<div class="short-item">
  <span class="cat-ico {category-icon}"><img src="{THEME}/img/category-ico/{category-icon}.png" /></span>
  <h2>
   {title limit="20"}
    <i>{date=M d, Y}</i>
  </h2>
   [xfvalue_video]
   [image-1]<img src="{image-1}" class="poster" />[/image-1]
   <p>{short-story limit="350"}</p>
  
     <span class="author-news">
      <img src="{avatar}" alt="{login}"/>
      <span>"{avtor_fullname}"</span>
      <span class="name-nic">{author} <i>(Блогер)</i></span>
     </span>
    <strong>
    <i class="view">{vote-num}</i>
    <i class="comm">{comments-num}</i>
   </strong>
</div>

CSS:
/*Краткая новость=========================================*/
.short-item {
    background:#fff;
    float:left;
    margin:5px 5px 5px 5px;
    width:300px;
    position:relative;
    
    box-shadow: 0 1px 3px rgba(34,25,25,0.4);
    -moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
    -webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
    
    -webkit-transition: top 1s ease, left 1s ease;
    -moz-transition: top 1s ease, left 1s ease;
    -o-transition: top 1s ease, left 1s ease;
    -ms-transition: top 1s ease, left 1s ease;    }
.short-item img.poster {
    width:100%;
    }
.short-item p {
    position:relative;
    padding:25px;
    color:#888;
    font-size:13px;
    border-bottom:1px solid rgba(211,211,211,1.00);
    }
.short-item strong {
    float:right;
    display:block;
    padding:10px;
    }
.short-item strong i {
    margin-left:10px;
    color:#333;
    font-size:12px;
    padding-left:19px;
    width:15px;
    height:15px;
    font-style:normal;
    }
.short-item strong i.comm {
    background:url("../img/icon/comm.png") no-repeat;
    }
.short-item strong i.view {
    background:url("../img/icon/view.png") no-repeat;
    }    
.short-item h2 {
    padding:30px 30px 20px 30px;
    font-size:15px;
    text-transform:uppercase;
    }
.short-item h2 i {
    display:block;
    font-style:normal;
    font-size:11px;
    color:#777;
    }
/*==================*/
.short-item .cat-ico {
    width:40px;
    height:40px;
    position:absolute;
    top:20px;
    right:10px;
    border-radius:100%;
    }
/**/
.short-item .templates {background:rgba(11,127,184,0.8);}
.short-item  .modules {background:rgba(255,162,70,0.8);}
.short-item  .news {background:rgba(21,148,51,0.8);}
.short-item  .music {background:rgba(223,89,91,1.00);}
.short-item  .video {background:rgba(99,3,181,1.00);}

/*==================*/
.short-item .cat-ico img {
    margin:10px 10px;
    }
/**/
.short-item .author-news {float:left;margin:5px 15px 6px;overflow:hidden;width:150px;display:inline-block;}
.short-item .author-news img {float:left;display:inline;width:30px;border-radius:100%;margin-right:10px;}
.short-item .author-news span a {font-size:11px;font-style:normal;font-family: 'PT Serif Caption', serif;color:#1c94d0;}
.short-item .author-news .name-nic {display:block;text-transform:capitalize;}
.short-item .author-news .name-nic i {font-style:normal;color:#999;}
/**/
iframe, video, media {width:100%;height:200px;}    
/*END Краткая новость=========================================*/

Ответа пока нет


Комментарии пользователей (4)

monach
46 | 13

monach - 12 апреля 2014 17:03 - Юзер

Добрый день!Я уже не знаю что делать...Использовал уже несколько приложений (скриптов) чтобы создать динамическую сетку новостей но новости все равно заезжают друг на друга.Я использовал другую разметку но результат одинаковый.Я останавливаюсь на "Masonry".Помогите разобраться.

monach
46 | 13

monach - 13 апреля 2014 01:12 - Юзер

Ребята помогите пожалуйста.Ведь есть кто знает как решить задачу?

monach
46 | 13

monach - 13 апреля 2014 08:25 - Юзер

Я заметил что без картинок блоки отображаются правильно но если добавить картинки (Постер) то новости начинают запрыгивать друг на друга.Что мошна сделать???

monach
46 | 13

monach - 13 апреля 2014 14:55 - Юзер

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

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

Похожие вопросы