Nivo Slider問題，滑出原來的位置

Question

所以我不是CSS嚮導或Nivo滑塊大師..我得到了這個工作在我的一頁，沒有任何與它開始..但是當我試圖得到它與我的prostores頁面一起工作，圖像出現，但滑動然後向上移動並離開，併爲每個幻燈片做。我認爲必須有一些CSS，我需要改變..或東西..但因爲我不知道很多關於CSS我不知道什麼改變。我剛剛離開的默認設置在這裏..

這裏我在那裏測試

http://www.securemycargo.com/servlet/the-template/testnivo/Page

任何指針讚賞

確定這裏是默認CSS`

.theme-default .nivoSlider { 
    position:relative; 
    background:#fff url(loading.gif) no-repeat 50% 50%; 
    margin-bottom:10px; 
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a; 
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a; 
    box-shadow: 0px 1px 5px 0px #4a4a4a; 
} 
.theme-default .nivoSlider img { 
    position:absolute; 
    top:0px; 
    left:0px; 
    display:none; 
} 
.theme-default .nivoSlider a { 
    border:0; 
    display:block; 
} 

.theme-default .nivo-controlNav { 
    text-align: center; 
    padding: 20px 0; 
} 
.theme-default .nivo-controlNav a { 
    display:inline-block; 
    width:22px; 
    height:22px; 
    background:url(bullets.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
    margin: 0 2px; 
} 
.theme-default .nivo-controlNav a.active { 
    background-position:0 -22px; 
} 

.theme-default .nivo-directionNav a { 
    display:block; 
    width:30px; 
    height:30px; 
    background:url(arrows.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
    opacity: 0; 
    -webkit-transition: all 200ms ease-in-out; 
    -moz-transition: all 200ms ease-in-out; 
    -o-transition: all 200ms ease-in-out; 
    transition: all 200ms ease-in-out; 
} 
.theme-default:hover .nivo-directionNav a { opacity: 1; } 
.theme-default a.nivo-nextNav { 
    background-position:-30px 0; 
    right:15px; 
} 
.theme-default a.nivo-prevNav { 
    left:15px; 
} 

.theme-default .nivo-caption { 
    font-family: Helvetica, Arial, sans-serif; 
} 
.theme-default .nivo-caption a { 
    color:#fff; 
    border-bottom:1px dotted #fff; 
} 
.theme-default .nivo-caption a:hover { 
    color:#fff; 
} 

.theme-default .nivo-controlNav.nivo-thumbs-enabled { 
    width: 100%; 
} 
.theme-default .nivo-controlNav.nivo-thumbs-enabled a { 
    width: auto; 
    height: auto; 
    background: none; 
    margin-bottom: 5px; 
} 
.theme-default .nivo-controlNav.nivo-thumbs-enabled img { 
    display: block; 
    width: 120px; 
    height: auto; 
}` 

和我拿出表格條目..做同樣的事情..我想我需要這些 CSS條目之一被修改？

Answer 1

UPDATE：佈局問題不談，我覺得這是你的首要問題：

GET http://www.securemycargo.com/.../nivo-slider.css 404 (Not Found) 

CSS是這樣的工具的重要組成部分。沒有它，溢出不受控制和圖像大小不正確。我通過開發工具將文件放置在您的頁面上http://dq3f8u841c3z3.cloudfront.net/wp-content/plugins/nivo-slider/scripts/nivo-slider/nivo-slider.css，它解決了您的問題。

---

問題的，至少部分是，您使用的是佈局表，該表是不夠寬。圖像不會在加載時顯示，所以瀏覽器會使它太窄。至少，該表的寬度設置爲100％，以讓它使用整個主柱：

<table width="100%"> 
    <tr>... 

注意，width屬性已棄用。但是，如果您使用表格進行佈局，則可能不太在意。如果您碰巧在意，請使用CSS代替：

<table class="main-col"> 
    <tr>... 

<style> 
.main-col {width: 100%;} 
</style> 

更好：完全刪除該表。表格是用於數據的，而這個表格只有一個單元格。