Странная проблема размещения CSS с фейдером на быстродействующем сайте

Question

Я разрабатываю прототип отзывчивой версии темы для WordPress моей домашней страницы. У меня проблемы с фейдером на главной странице.

http://dev.epicwebdesign.ca/epicblog/

Когда изображение переключается, он использует позицию: абсолютная для наложения изображения, а затем возвращается в положение: родственник.

Мне нужно сделать абсолютное относительно левого нижнего угла меню вместо левого верхнего угла #wrap, чтобы он не перекрывался.

Я попытался положить его в контейнер div следующим образом: http://wiki.orbeon.com/forms/doc/contributor-guide/browser#TOC-Absolutely-positioned-box-inside-a-box-with-overflow:-auto-or-hidden, но это не работает.

Любые идеи?

В IE есть проблемы с совместимостью с CSS, попробуйте в Chrome. Он должен выглядеть примерно так: http://epicwebdesign.ca. Когда окно браузера сокращается горизонтально, вся тема компенсирует.

Answer 1

Ваш основной контент плавает вверх, поэтому, чтобы исправить эту проблему, я бы увеличил как навигацию, так и контент до 100% и оставил их влево, чтобы они не перекрывались.

Для вашего элемента с id-навигацией добавьте стиль float: left.

Затем для вашего элемента с идентификатором «обертка» добавьте стиль float: left и width: 100%.

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

Answer 2

Оказывается, я идиот и устанавливаю позицию: относительная по неправильному элементу через самую раздражающую опечатку. (.rslider вместо .rslides)