Хорошо, так вот мой код того, как я бы изложил это с помощью HTML с небольшим количеством CSS, чтобы попытаться помочь вам встать на путь совершенствования своих навыков HTML.
Я собираюсь начать с вашего фонового изображения. В настоящее время у вас есть это как часть, если ваши изображения, которые вы соединяете вместе в таблице. Если в вашем коде есть синтаксические ошибки, это может привести к смещению, как то, что вы видите. Если вместо этого вы определили его как фоновое изображение тела, это никогда не произойдет.
Далее идет навигация. У вас есть куча вкладок. Эти вкладки включают часть фона, когда они должны быть только самими изображениями. Навигация - это список веб-страниц, поэтому по сути вы должны использовать неупорядоченный список, потому что они не в определенном порядке. дисплей выбора css: встроенный; сообщает элементу списка, что нужно изменить тип отображения, чтобы все изображения плавали рядом друг с другом, а не выводились в списке друг от друга. в классе .nav поле указывает центрировать его, а ширина говорит само за себя.
<head>
<style type="text/css">
body { background-image: url('/images/background-image.png') repeat-y; }
.nav { width: 800px; margin: 0 auto; }
.nav li { display: inline }
</style>
</head>
<body>
<ul class="header-nav nav">
<li><a href="#"><img></a></li>
<li><a href="#"><img></a></li>
<li><a href="#"><img></a></li>
<li><a href="#"><img></a></li>
<li><a href="#"><img></a></li>
<li><a href="#"><img></a></li>
</ul>
<ul class="other-nav nav">
<li><a href="#"><img></a></li>
<li><a href="#"><img></a></li>
<li><a href="#"><img></a></li>
</ul>
</body>
Чтобы исправить вышесказанное, вам нужно удалить все кольспаны из первого ряда. Они бесполезны, тогда у них колспаны во 2-м ряду равны не больше и не меньше, чем в 1-м ряду. После этого проблема заключается в том, что ваши изображения не складываются математически, поэтому это будет неправильно. Вам действительно нужно переписать ваши изображения.