jQuery слайд-шоу в фоновом режиме - возможно, неправильно CSS - PullRequest
Новая
       13

jQuery слайд-шоу в фоновом режиме - возможно, неправильно CSS

2 голосов
/ 02 марта 2010

У меня есть этот очень простой HTML с div "wrapper" и двумя другими элементами внутри него. 

<div id="wrapper">
    <div id="logo">
     <img src="images/myLogo.jpg" />
    </div>
    <ul id="menu">
     <li class="class_link1"><a href="#">Menu item 1</a></li>
     <li class="class_link2"><a href="#">Menu item 2</a></li>
     <li class="class_link3"><a href="#">Menu item 3</a></li>
     <li class="class_link4"><a href="#">Menu item 4</a></li>
     <li class="class_link5"><a href="#">Menu item 5</a></li>
    </ul>
</div>

С помощью CSS я разместил логотип и меню на одной панели в нижней части экрана.

В моем коде jQuery я динамически вставляю другой div (#photos) с XML сразу после div # wrapper Итак, мой окончательный HTML-код выглядит так: 

<div id="wrapper">
    <div id="photos">
        <img src="photo1.jpg" alt="desc 1" />
        <img src="photo2.jpg" alt="desc 2" />
        ....
    </div>
    <div id="logo">
     <img src="images/myLogo.jpg" />
    </div>
   <ul id="menu">
     <li class="class_link1"><a href="#">Menu item 1</a></li>
     <li class="class_link2"><a href="#">Menu item 2</a></li>
     <li class="class_link3"><a href="#">Menu item 3</a></li>
     <li class="class_link4"><a href="#">Menu item 4</a></li>
     <li class="class_link5"><a href="#">Menu item 5</a></li>
    </ul>
</div> <!-- wrapper -->

и вот CSS: 

#wrapper{
 position: relative;
 margin: 0px auto;
 padding: 0px;
 height: 685px;
 width: 1019px;
 z-index: 0;
}

#wrapper ul#menu {
 position: absolute;
 margin: 0px;
 padding: 0px;
 list-style: none;
 clear: both;
 left: 510px;
 top: 525px;
 z-index: 1;
}

#wrapper #logo {
 position: absolute;
 height: 72px;
 width: 510px;
 left: 0px;
 top: 525px;
 z-index: 1;
}

Теперь мне нужно сделать слайд-шоу с фотографиями div # на фоне . Строка меню и логотип должны оставаться сверху. Я использую плагин Cycle, но пока безуспешно. Любая помощь будет принята с благодарностью.

Заранее спасибо,

Helio

Ответы [ 2 ]

1 голос
/ 02 марта 2010 
#photos { z-index: 1; }
#logo { z-index: 2; }

Кроме того, нет необходимости быть таким конкретным, как #wrapper #logo - у вас может быть только один идентификатор на страницу, поэтому достаточно #logo.

1 голос
/ 02 марта 2010

Попробуйте дать логотипу z-индекс -1, который должен это сделать.

...