Nivo Slider issue, сползающий с исходной позиции

Question

, так что я не мастер CSS или мастер слайдера Nivo. У меня это работало на моей странице, у которой ничего не было для начала, но когда я пытаюсь ее получить работая с моей страницей простейших, изображения появляются, но скользящее затем движется вверх и влево и делает это для каждого слайда. Я предполагаю, что должен быть какой-то 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 на вашей странице с помощью инструментов dev, и он решает вашу проблему.

---

По крайней мере, часть проблемы заключается в том, что вы используете таблицы для макета, а таблица недостаточно широкая. Изображения не отображаются при загрузке, поэтому браузер делает его слишком узким. Как минимум, установить ширину таблицы на 100%, чтобы позволить ей использовать весь основной столбец:

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

Обратите внимание, что атрибут ширины является устаревшим. Однако, если вы используете таблицы для макета, вы, вероятно, не особо заботитесь. Если вам неинтересно, используйте вместо этого CSS:

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

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

Лучше: удалите этот стол в целом. Таблицы предназначены для данных, и в любом случае у этого есть только одна ячейка.