2012-08-04 94 views
1

我使用Nivo Slider創建了一個幻燈片放映網站。出於某種原因,在我的nivo滑塊div後,儘管我的所有DIV似乎都正確地分層(並正確關閉),但我的容器DIV在Nivo Slider之後意外停止。Container Div意外停止

這裏是網站:http://cbchaverhill.onedirectionconnection.com

這裏是我的DIV如何設置:

<div id="container" class="shadow"> 

<div id="title"> 
<div id="titleleft">Calvary Baptist Church</div> 
<div id="cbcstuff"> 
Calvary Baptist Church<br> 
13 Ashland Street<br> 
PO Box 781<br> 
Haverhill, MA 01830 
</div> 
</div> 

<div id="navi"> 

<?php wp_nav_menu(array('sort_column' => 'menu_order', 'container_class' => 'access', 'menu_class' => 'access')); ?> 

</div> 

<div id="header"> 

<div id="slide"> 

<div id="slider" class="nivoSlider"> 
      <img src="/wp-content/themes/cbc/001.png" alt="" /> 
      <img src="/wp-content/themes/cbc/002.png" alt="" /> 
      <img src="/wp-content/themes/cbc/003.png" alt="" /> 
     </div> 
<script type="text/javascript" src="/nivo-slider/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="/nivo-slider/jquery.nivo.slider.js"></script> 
<script type="text/javascript"> 
$(window).load(function() { 
$('#slider').nivoSlider({ 
    effect: 'fade', 
    animSpeed: 500, 
    pauseTime: 4000, 
    startSlide: 0, 
    directionNav: false, 
    directionNavHide: true, 
    controlNav: false, 
    controlNavThumbs: false, 
    pauseOnHover: true, 
    manualAdvance: false, 
    randomStart: false, 
}); 
}); 
</script> 

</div> 


<div id="sidebarr"> 

Blah blah blah Blah blah blah Blah blah blah Blah blah blah. 
Blah blah blah Blah blah blah Blah blah blah Blah blah blah. 

</div> 

<div id="content"> 

正如你所看到的,容器DIV的幻燈片後立即停止,由於某種原因,我似乎無法弄清楚,即使沒有內容,頁面也會延伸超過4000個像素。

如果任何人有任何意見,將不勝感激。如果您需要更多信息,請告訴我。

+0

你沒有關閉帶有''或'html'的'body',從我看到[你的網站](http://cbchaverhill.onedirectionconnection.com/)上的頁面源代碼看到。它也出現[W3C驗證器服務]無效(http://validator.w3.org/check?uri=http%3A%2F%2Fcbchaverhill.onedirectionconnection.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 ),那可能是一個很好的開始。 Regards – Killrawr 2012-08-04 12:07:43

回答

0

Interstingly,它不會在IE中發生,因爲你觸發怪癖模式(刪除<!DOCTYPE>之前的評論來解決這個問題)。

問題是由漂浮物引起的。要修復,只需將overflow:hidden添加到Container div。

+0

謝謝!這解決了問題! – nellygrl 2012-08-04 12:22:05

+0

但我不確定之前的意見是什麼意思。我不認爲我在那裏發表評論!大聲笑。 – nellygrl 2012-08-04 12:22:30

+0

我的意思是'<! - THIS INCLUDES HEADER.PHP - >'註釋。 – 2012-08-04 12:24:48

0

關閉標籤</html> and </body>缺失, 和

如果你正在處理floatoverflow屬性添加到您的父母股利或浮動的div後添加clear:both