Как не допустить, чтобы изображение, выходящее за пределы окна браузера, задавало ширину страницы?

Question

У меня есть длинное изображение, которое в настоящее время служит навигационной системой для сайта в разработке. Вы можете увидеть это здесь. Эта навигационная система в конечном итоге будет разбита на более мелкие секции, но я думаю, что я вполне могу увидеть те же проблемы, что и сейчас.

Изображение имеет ширину 1920px, и идея заключается в том, что как бы широко ни было окно браузера пользователя (до 1920px), навигационное изображение (ветвь) всегда будет выходить за пределы экрана. Листья в центре навигационной системы всегда должны быть центрированы на странице, чтобы соответствовать логотипу выше.

В настоящее время навигационный DIV имеет следующий CSS:

#nav {
    position: absolute;
    top: 210px;
    left: 50%;
    margin-left: -960px;
}

Тело имеет минимальную ширину 900 пикселей.

У меня есть две проблемы с этой настройкой:

1. Как вы увидите при посещении страницы, ширина страницы браузера устанавливается по правому краю длинного изображения для навигационной системы, когда я хотел бы, чтобы она была установлена ​​на 100% при ширине окна браузера. больше 900px и до 900px (с горизонтальными полосами прокрутки), если ширина окна браузера меньше 900px.

2. Навигационная система не учитывает минимальную ширину тела, то есть она продолжает двигаться влево, даже если ширина окна браузера меньше 900 пикселей, тогда как остальная часть содержимого страницы этого не делает.

Может ли кто-нибудь помочь с этими вопросами?

Спасибо,

Ник

Answer 1

Что бы я сделал, это

1. Вырежьте среднюю часть изображения (ту, которая содержит реальное содержание).

2. Выньте кусочек из фона линии, который можно повторять бесконечно. Вот так:

3. Поместите среднюю часть изображения в div это 100% в ширину и имеет

   background-image: url(/path/to/slice.png);
   background-repeat: repeat-x;
   

это даст вам бесконечно изменяемый размер области навигации без ненужного расширения страницы.