jQuery Roundabout CSS Position Troubles в Wordpress

Question

У меня [Roundabout] [1] загружен в Wordpress install. Цель состоит в том, чтобы сделать так, чтобы я мог перелистывать сообщения как карусель. Функционально все идет хорошо. Однако я столкнулся с некоторыми проблемами с позиционированием.

Похоже, что Roundabout применяет положение: абсолютное к дочерним элементам, чтобы облегчить их позиционирование в карусели. Это все хорошо и хорошо, за исключением того, что у меня есть классическая проблема с абсолютным позиционированием, вытягивающим элементы из потока страницы, и заканчивая тем, что высота моего основного тела коротка, и элементы, плавающие выше и снаружи.

Я попытался установить несколько слоев вверх по родительской цепочке в положение: относительно безрезультатно. Я честно из идей.

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

Спасибо всем

Мой Roundabout Код:

$(document).ready(function() { 
       $('#main').roundabout({ 
        childSelector:".post", 
        enableDrag: true, 
        autoplay: false, 
        duration: 1000, 
        clickToFocus: true, 
        shape: "square", 
        debug: false 
       }); 
      }); 

Моя основная структура HTML:

<div id="content"> 
    <div id="inner-content"> 
     <div id="main"> 
      <article class="post"> 
       Wordpress Content 
      </article> 
      <article class="post"> 
       Wordpress Content 
      </article> 
      <article class="post"> 
       Wordpress Content 
      </article> 
     </div> 
    </div> 
</div> 

Соответствующие CSS:

#content { 
    margin-top: 1.5em; 
} 
#content #inner-content { 
    background-color: #FFFFFF; 
    padding: 0 20px; 
    position: relative; 
} 
#content #inner-content #main { 
    margin: 25px auto; 
    width: 85%; 
} 
#content #inner-content #main .roundabout-holder { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    height: 5em; 
    width: 100%; 
} 
#content #inner-content #main .roundabout-moveable-item { 
    height: 4em; 
    width: 85%; 
    cursor: pointer; 
    background-color: #ccc; 
    border: 1px solid #999; 
    margin: 20px 0; 
} 
#content #inner-content #main .roundabout-in-focus { 
    cursor: auto; 
} 

А почему бы не выстрел экран хорошая мера?

Answer 1

У вас есть размер #content #inner-content #main установлен на 5em; Установите его с использованием минимальной высоты и сделайте значение минимальным, необходимым для показа карусели в рамке кузова. Содержание должно заставить его расти оттуда.

Некоторые из каруселей также требуют некоторого смещения для размещения для управления вперед, назад и кадрами. Проверьте документацию внимательно что-нибудь подобное

#content #inner-content #main { 
    min-height: 500px; /* or whatever value is required */ 
} 

EDIT 3/3/13:

Я добавляю ссылку для вас в standard implementation объездной. Взгляните на HTML и то, что вы делаете. Его плагин приводится в список <li>, и это то, что вы должны использовать. Вам, вероятно, придется немного подкорректировать свой CSS, но там не так много. Просто помните, если вы используете чей-то плагин, который нужно настроить, как примеры, которые они предоставляют вам. Если у вас есть проблемы с этого момента, тогда будет гораздо проще обратиться.

<ul> 
    <li> 
     <article class="post"> 
     Wordpress Content 
     </article> 
    </li> 
    <li> 
     <article class="post"> 
     Wordpress Content 
     </article> 
    </li> 
    <li> 
     <article class="post"> 
     Wordpress Content 
     </article> 
    </li> 
</ul>