jQuery的幻燈片的背景 - 錯誤CSS可能？

我有一個「包裝」的div和它裏面另外兩個要素這個非常簡單的HTML。jQuery的幻燈片的背景 - 錯誤CSS可能？

<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＃包裝之後。所以，我最終的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公司

來源

2010-03-02 Helio S. Junior

先給標識-1的z-index，應該這樣做。

來源

2010-03-02 14:04:40 Lazarus

但是......他希望徽標在照片的前面**。 – Pointy 2010-03-02 14:05:31

沒錯。這是客戶奇怪的要求。但是....我能說的是，現在它工作！非常感謝！ ;-) – 2010-03-02 14:29:15

#photos { z-index: 1; } 
#logo { z-index: 2; }

而且，沒有必要儘可能具體#wrapper #logo - 你可以有隻有一個每頁ID，所以#logo應該足夠了。

來源

2010-03-02 14:10:39

jQuery的幻燈片的背景 - 錯誤CSS可能？

回答

相關問題