Как разместить div так, чтобы он был видимым, но не учитывался в документе width
Сегодня я столкнулся с очень неприятной проблемой: мне нужно сделать внешний вид веб-сайта, и на странице есть определенный элемент дизайна, который озадачил (даже) меня.
Я не совсем знаком с html, CSS-позиционированием, созданием макетов и т.д., поэтому , пожалуйста, не делайте «догадок» о том, как я могу решить эту проблему. Хочу рабочий пример.
Вот jsfiddle с моим кодом и проблемой:
http://jsfiddle.net/sg3s/A9vzA/ http://jsfiddle.net/sg3s/A9vzA/15/
Что происходит в настоящее время;
#container имеет минимальную высоту 100% (красный фон), ширину 970 пикселей. Это минимальная ширина страницы. Div #top (светло-коричневый фон) не имеет отношения к проблеме, но является частью дизайна.
Проблема заключается в #header (фиолетовый фон), который в настоящее время имеет ширину 1022 пикселей (слишком широкую для разрешения 1024 пикселей + полоса прокрутки, даже при развернутом окне) и отрицательное левое поле, чтобы сохранить его. по центру контейнера, что и должно произойти.Когда ширина экрана становится меньше 1022 пикселей, появляется горизонтальная полоса прокрутки, поскольку самый тонкий элемент на странице имеет ширину 1022 пикселей. (его поведение такое же, как с абсолютным положением и отрицательным смещением влево)
Я хочу, чтобы произошло:
Я хочу «переполнение» #header над #container , чтобы исчезнуть по бокам и получить полосу прокрутки только при уменьшении ширины области просмотра до 970 пикселей. (Если кто-то может перефразировать это)
Позвольте мне пояснить это:
- Макет со 100% высотой должен оставаться совместимым с IE7 +
- Заголовок должен быть центрирован над контейнером, это это причина, по которой он находится внутри него в моем примере, но будьте моим гостем, чтобы вынуть его, если это решит проблему.
- Мой пример выглядит и действует правильно, пока область просмотра достаточно велика, чтобы соответствовать заголовку .
- Уловка состоит в том, чтобы заставить его выглядеть и действовать одинаково, пока стороны заголовка перетекают в стороны области просмотра, когда область просмотра слишком тонкая, чтобы поместиться в этот заголовок.
- Обновлен пример, чтобы сделать изменение / центрирование более очевидным.
Если возможно, я хочу, чтобы макет поддерживал вплоть до IE6, хотя IE7 + подойдет. На последней странице все равно будет предложено установить Chrome Frame. И конечно не забываем про Chrome, FF 3.5+ .. (Opera?). Использование JS будет неприемлемо, если вы не убедите меня, что другого выхода нет, но jQuery будет присутствовать на странице.
Спасибо, что хотя бы попробовали! (Испытайте себя!: D)