Верстаю дизайн, столкнулся с такой проблемой.

http://inviz.personart.ru/artem - URL верстки в данный момент.

Нужно, чтобы в шапке, если ширина браузера меньше x пикселей - правая часть обрезалась, т.е. не показывалась.

Я бы сделал это так: Всю верхнюю картинку дал бы как background-image для body.

НО! Есть и другое условие. Если ширина браузера больше x пикселей, то часьт посередине повторялась, что и делается сейчас.

Как совместить оба условия в одно?

Inviz
Я бы сделал так: убрал бы из шапкиной картинки градиент. Далее, порезал бы картинки на 2 части: 1-я -- с логи, 2-я -- продолжение скругления. Далее, там, где нынешняя шапка идёт горизонтально, просто положил бы цветом насквозь через обе колонки. По крайней мере, при отключённых картинках фон будет другой, отличающийся от основного. Чего, кстати, сейчас не наблюдается.
Вопрос-уточнение: что значит

Цитата:

НО! Есть и другое условие. Если ширина браузера больше x пикселей, то часьт посередине повторялась, что и делается сейчас.

Больше чего должна быть ширина окна? Ведь больше fuul-screen не может быть да? Что за часть посередине? Я наблюдаю 3 части -- средняя, это звершение скругления, переходяшее в горизонтальную полосу.

x = ширина правой части + левой.
а градиент убирать не могу, такова доля верстальщика)))

Значит, шапку из двух частей: фиксированную картинку с лого -- в бэкграунд, вторую -- с скруглением, переходящим в горизонталь -- позиционировать лево-врех, а горизонтальную полосу -- в бэкграунд. Нет?

товарищ, вы плохо поняли, наверное )

Левая часть с логотипом - фиксированная. Далее идет горизонтальный бэкграунд (для увеличения), а в правом углу часть, которая будет частично скрываться, когда ширина браузера будет меньше суммы левой и правой части. немного запутанно))

Наверное, действительно, не понял, раз так запутано всё объяснено

Я вот предлагаю так: http://aoa.ru/files/temp/maket.gif
1 -- фиксированная кртика и сам див;
2, 3 в правом диве, но 3 бэкграунд, а 2 картинка, позиционированная лево-верх. м?

Жутко извиняюсь, это все дело в том, что все сползлось нахер. у меня 1152, я перешел на 1024 и увидел в чем проблема.
Вот именно поэтому сижу и мучаюсь с этой шапкой, щас немного поправлю, чтобы не так криво было

Поправил.

Inviz писал(а):

Поправил.

Извиняюсь. на переговорах тут был, и уже надо домой бежать... есть задумка вот так писалось под ие (соответственно, для фокас/оперы(?) отступ там надо сделать не -96%, а -100%). Вот примерно так... может, это направление с шапкой развить?
А, да... http://aoa.ru/files/temp/maket.html
При уменьшении размеров окна правая часть обрезается...

http://inviz.personart.ru/artem/index2.htm
Это почти готовая резина, но есть вопрос:
Как сделать, чтобы правая часть отрубалась правильно?
Т.е. не заезжала под левую, а обрубалась с правой стороны?

Inviz писал(а):

http://inviz.personart.ru/artem/index2.htm Это почти готовая резина, но есть вопрос: Как сделать, чтобы правая часть отрубалась правильно? Т.е. не заезжала под левую, а обрубалась с правой стороны?

Дыкъ, я посмотрел general.css, там хидер из трёх частей -- так вариант, практически, как я описал выше в моём примере. Не, не подходит? Такая же картинка слева, справа и основная в середине, которая и закрывается. Тут, мне кажется, дело в позиционировании. В абсолютно позиционировании дивов с картинками друг в дружке.

Inviz, чтобы правая часть шапки не подъезжала под левую, а обрезалась, для Оперы и ФФ достаточно сделать так: #header{min-width: 1000px;}. Правда, в этом случае минимальную ширину лучше установить и для блока #footer (смотрится логичнее) и поработать с фоном обрезающейся части.

А в остальном все вроде бы получается так, как вы хотели.

Е1ena,
Таким образом, он фиксируется на 1000 пикселях
т.е. резина только после 1000пикселей - расширяется центр.
А хотелось бы еще обрубание правой.

До 1000 пикселей, в общем-то, центр остается резиновым, а фиксированные размеры только у указанных блоков, которые скрываются за пределами окна. А вот как их полностью обрезать, а не спрятать, как в предложенном варианте, я пока не придумала.

было бы нормально, если бы не прокрутка )

Inviz ну вот, вот как вариант решения для MSIE: http://aoa.ru/files/temp/maket2/maket.html
левая часть в фон дива, среднюю прямую часть в фон body, а правую часть как плавающую картинку в диве. При этом её ширина равняется собственно ширине скругления правой картинке + ширина загруглённой левой картинки, 884 пиксела (собственно, гиф с прозрачной частью). Соответственно, если свернуть окно до ширины 884, то правый край будет уползать влево, если меньше, то обрезаться. Еще раз -- это для Эксплорера (наверное через if -- endif), потому как, если оставить так в css для всех, то в фоксе картинка ползёт влево до упора

Тентойз, мне очень приятна ваше внимание, но тем не менее, создается прокрутка горизонтальная, что не нужно. во всяком случае на IE 6.0 Win...

Inviz писал(а):

Тентойз, мне очень приятна ваше внимание, но тем не менее, создается прокрутка горизонтальная, что не нужно. во всяком случае на IE 6.0 Win...

Ха! А посмотрите мой пример и для #A1 добавьте
overflow: hidden;

tentoys,

Отличная идея, благодарю!

но получается, что эти здвиги всё равно оатсёются ? и от них никак не изьавиться?
получается вот такую вот резину дивами не сделать? http://www.sanita-samara.ru/ - ничего не сьезжает и как надо растягивается
тогда скажите мне, почему ДИВЫ?

какие сдвиги?

Inviz,
посмотрите свой пример: http://inviz.personart.ru/artem/
когда уменшаеш окно то тексты безобразно уходят вниз

зачем такое счастье если можно всё сделать табоицами и ничего скакать не будет
хочется услышать что нибудь положительное в адрес дивов

min-width для нормальных браузеров, и распорка для ие. вот и все.

Inviz писал(а):

min-width для нормальных браузеров, и распорка для ие.

Ну, да, хотя, насчёт ИЕ -- можно сделать гиф, наполовину прозрачный. Хотя... та же распорка получается. Вот чего мне пока не удалось (может, потому, что на работе ещё и работой занимаюсь), так это в фоксе убратьгоризонтальный скролл, как удалось в ИЕ -- тут hidden не играет. Есть идеи?

два дня парюсь с этой версткой так, что уеж никаких идей не осталось. Она вроде бы простая, но хочу же сделать качественно, вот и хрень такая получается, когда на 30 раз переделываю элемент один. нестандартное расположение объектов просто бесит.

goa писал(а):

когда уменшаеш окно то тексты безобразно уходят вниз

Не понятно, а должно-то быть? Ведь при уменьшении горизонтального размера окна, при резиновых дивах, текст продолжает распределяться внутри граница дива... по-моему, всё правильно.

Inviz писал(а):

два дня парюсь с этой версткой

А мне, так последний вариант показался вполне рабочим, олько действительно min-width ему выставить надо, и правую картинку шапки почистить, а то огрызки белого на карте выскакивают при изменении размера окна

Кстати, не знаете никакого хака, чтобы css Только для firefox дать? А то трюк с картинкой, вами предложенный работает в опере и ие, а в фаерфоксе придется Min-width ставить

Кстати, там, где в МСИЕ надо убрать горизонтальный скролл, надо добавить ещё строчку для Мозиллы:
overflow: -moz-scrollbars-vertical;
по идее, и в фоксе не должен показываться. Соответственно, overflow: hidden (или overflow-x:hidden) для MSIE тоже оставляем, ведь эксплорер не поймёт строчку мозилловскую.
Соответственно, для Оперы создаём отдельный див с id="wrapper", в который запихиваем ВЕСЬ контент (к сожалению, применив overflow ко всему body, мы напрочь избавиммся от скролла, а этого не надо). В css пишем следующее:
#wrapper {
width: 100%;
height: auto;
overflow: hidden;
}

Насчёт определения Фокса, то нет в памяти, как определить (через -moz может быть? Кстати, может и нет, если разработчиками этот префикс убран). Либо писать if ! IE (или что-то в этом роде), либо через скрипты..., типа

isDOM=document.getElementById //DOM1 browser (MSIE 5+, Netscape 6, Opera 5+)
isMSIE=document.all && document.all.item //Microsoft Internet Explorer 4+
isNetscape4=document.layers //Netscape 4.*
isOpera=window.opera //Opera
isOpera5=isOpera && isDOM //Opera 5+
isMSIE5=isDOM && isMSIE //MSIE 5+
isMozilla=isNetscape6=isDOM && !isMSIE && !isOpera //Mozilla или Netscape 6.*

к сожалению, overflow: -moz-scrollbars-vertical; делает вертикальный скроллбар и никак не отменяет съезжание.

Опера 8 покорно следует трюку с прозрачной частью изображения, но пришлось для кроссбраузерности все-таки выставить min-width. Таким образом резина правильна в ИЕ, в ОПЕРЕ, но для ФФ стоит min-width. Результат можете посмотреть по тому же адресу: http://inviz.personart.ru/artem & http://inviz.personart.ru/artem/index2.htm

Фух, наконец то добил верстку, правда пришлось все таки таблицами пару моментов сверстать для верности.

Inviz писал(а):

Фух, наконец то добил верстку, правда пришлось все таки таблицами пару моментов сверстать для верности.

Кстати, на 1024*768 через lcd-монитор градиент сильно заметен, слоями идёт. И -- в меню пункты 1.1 и 1.2 обрублены, что-то их закрывает... в МСИЕ (смотрю сейчас 1600*1200)

Спасибо, пункты меню исправлены теперь.
А насчет градиента - хрен с ним, все равно переделают еще графику, потому что эта - низкокачественная.