Логотип и навигация по вращающемуся баннеру - PullRequest
Новая
       16

Логотип и навигация по вращающемуся баннеру

0 голосов
/ 16 ноября 2011

Я пытался создать элемент навигации и логотипа, который расположен над вращающимся баннером.У меня проблемы с CSS.

Например: 

<div class="logo-div">

<div class="logo">
<img src="image/logo.jpg">
</div>

<div class="nav">
<ul><li>nav-button</li></ul>
</div>

</div><!--logo div -->

<div class="rotator">
</div>

Я попытался использовать отрицательное верхнее поле, чтобы перетащить ротатор вверх в div nav-logo, но это только подняло navа не логотип.Я также попытался переключить порядок nav-logo и ротатора, но это тоже не сработало.

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

Большое спасибо.

Вот пример сайта с этой функцией: веб-сайт

1 Ответ

0 голосов
/ 07 февраля 2012

Хорошо, если ваша примерная ссылка является верным указателем того, что вы хотите ... ключевым вопросом будет то, какой метод вы собираетесь использовать для поворота баннера? Javascript, конечно (если вы хотите кросс-браузерную совместимость), но ... какой метод? Парень по указанной вами ссылке использует элемент <ul> с несколькими <li> внутри, каждый из которых имеет один из разных фонов ...

используя transitions (расширенный эффект css3), absolute positioning и left, он в основном прокручивает их по горизонтали, изменяя значение left

В любом случае вам понадобится что-то вроде: 

.wrapper {display:block; position:relative;}
.logo-div {position:absolute; top:0; left:0; z-index:9999;}
.logo {}
.nav {}
.rotator {position:absolute; top:0; left:0; z-index:1;}

и HTML должен выглядеть примерно так: 

<div class="wrapper">

  <div class="rotator">
      insert your magic slides of different content or backgrounds here, be in in ul+li format or just divs or whichever method you prefer
  </div><!-- .rotator -->

  <div class="logo-div">

    <div class="logo">
      <img src="image/logo.jpg">
    </div>

    <div class="nav">
     <ul>
       <li>nav-button</li>
     </ul>
    </div><!-- .nav -->

  </div><!--logo div -->

</div><!-- .wrapper -->

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

Элементам .wrapper или родительским элементам требуется позиция: относительная; Содержимое этой обертки, в этом случае .logo-div и .rotator, будет нуждаться в позиции: относительной Div .rotator, который идет за навигационной панелью и логотипом и всем, что требует z-index: 1; плюс верх: 0; и слева: 0; В качестве примера .Logo-div, который идет выше .rotator div, нуждается в z-index: 2 или 9999; плюс верх: 0; и слева: 0; как пример

Так что теперь все остается на своих местах, и содержимое .rotator может перемещаться, не мешая остальной части страницы.

Выберите метод для циклического перемещения / перемещения фонового содержимого / изображений, и я дам вам более конкретный ответ.

Надеюсь, это поможет

...