Вёрстка на div.

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

широкое окно - здесь всё понятно: видно обёртки и сами хеадер и содержимое




узкое окно - здесь содержимое не влазиет в окно, а обёртки оказываются полностью перекрыты тем, что они оборачивают;
при скролле окна вправо видно непоместившееся содержимое в нормальном оформлении - т. е. с хеадером и контентом



на деле же я получаю вот это - при скролле вправо видно только контент, а само оформление пропадает



Пример http://jsfiddle.net/WxaB3/9/ .

Проблема похожа на ту, что есть в редакторе формы на этом форуме . Только там это, похоже, из-за фиксированной ширины хеадера, а у меня из-за причуд компоновки.

Хочу заметить, что стоит только в стилях у идентификаторов header и page заменить min-width и max-width на просто width, как поведение становится таким, какое я хочу. Однако, я хочу же ещё и чтобы страница была "резиновой" в определённых пределах.

Малыхин СергейБраузеры не разрывают слова для переноса на новую строку
Или же вопрос в другом?
Вопрос в том, чтобы заставить прорисовываться header и page за скроллом в вышеописанной ситуации. Перенос слов мне не тут нужен.

user7320Перенос слов мне не тут нужен.
Я имел ввиду, что о переносе слов я тут не говорю.

krvsauser7320Однако, я хочу же ещё и чтобы страница была "резиновой" в определённых пределах.
Тогда и ограничивай весь контент сразу, а не отдельные его элементы...
Не могли бы вы пояснить, что вы имеете ввиду? Если вы про обёртки, то их ограничить я не могу, т. к. они содержат декоративные элементы, типа фона, заливок, границ, которые должны быть растянуты по всей длине страницы, какой бы ширины окно браузера ни было. А вот их содержимое должно быть при большой ширине окна браузера достаточно компактным (не растягиваться на весь FullHD монитор), а при недостаточной - иметь аккуратную прокрутку, как у страниц с фиксированной шириной. Вобщем, так задумано дизайном.

Приведите, пожалуйста, пример вашего совета в коде, на который я дал ссылку (jsfiddle). А то я не могу понять, что вы имеете ввиду. Если надо ввести дополнительные обёртки, элементы там (или наоборот - убрать старые), но чтобы описанное мной поведение страниц сохранялось - ради бога, только скажите, как.

krvsauser7320Однако, я хочу же ещё и чтобы страница была "резиновой" в определённых пределах.
Тогда и ограничивай весь контент сразу, а не отдельные его элементы...
Грубо говоря, хеадер у меня - это полоска фона. Как на картинках. А содержимое хеадера - с прозрачным фоном, т. е. на фоне это полоски. И вот при растягивании окна полоска должна быть от края и до края, а содержимое - компактное и посередине. При сжатии же окна фон хеадера всё равно остаётся (т. к. фон содержимого прозрачен), а содержимое, которое не помещается, должно показываться через прокрутку. Но при этом после прокрутки и фон хеадера должен отрисоваться. У меня же не отрисовываются ни фон хеадера, ни фон содержимого хеадера. А такая задумка с дизайном, что я поисал, по-моему, достаточно привлекательна.

Понимаете, то, что я поисал, в каком-нибудь WPF делается элементарно. В HTML же мало того, что многих поведений без обёрток не добиться (элементам не хватает свойств, поэтому приходится их оборачивать, "добавляя" свойства), так ещё и реализовано всё как-то через задницу, извините за выражение - то через костыли, типа использования всяких свойств, характерных только для webkit или только для Мозиллы, то через ещё бОльшие костыли, типа задания всяких жёстких отступов, перекрытий и прочего. Из-за этого настоящий "резиновый" дизайн в HTML очень трудно поддерживать и непонятно, как он себя поведёт при перемене.

krvsauser7320Не могли бы вы пояснить, что вы имеете ввиду?
Я х/з, что у тебя будет реально...
Но, как вариант с полосками - сделай широкие полоски отдельно, а внутренний контент отдельно.
Широкие полоски - это обёртки? У меня они и так отдельно от контента. Посмотрите http://jsfiddle.net/WxaB3/9/ .

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

krvsauser7320Грубо говоря, хеадер у меня - это полоска фона. Как на картинках. А содержимое хеадера - с прозрачным фоном, т. е. на фоне это полоски.
Уже лучше!
Тот фон (полосками) можно даже дать боди, а контент разместить т.с. "поверх" тех полосок.
Останется только "совместить" высоту всех "участников".
Это я тоже попробую, но в последнюю очередь, т. к. костыльнй костыль - при изменении не всё само собой подтянется, а придётся перерисовывать фон боди и прочие подгонки делать. Не "резиновый сайт", "а сайт на соплях" получится.

bodpaduser7329, я бы очен хотел Вам помочь, но боюсь некорректно понял вопрос.
Вам нужно,чтобы при уменьшении окна горизонтально, текст синего полупрозрачного слоя понимал и соответствующе реагировал т.е. переносил содержимое вниз а не прятал его за пределы окна?
Нет. Мне надо, чтобы пряталось за пределы окна. Появление полосы прокрутки - это нормально. Но мне также надо, чтобы после прокрутки фон хеадера (да и фон страницы тоже) также отрисовывался. Вместо этого они принимают свои значения min-width и дальше нивкакую.

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

...Хмм, похоже, кто говорил, что надо сделать контент страницы, помещающийся в min-width, прав. А я вас неправильно понял. Вобщем, как я понял, нужно, чтобы максимальный размер блочного элемента в контенте страницы был меньше либо равен min-width.

krvsauser7320пропущено...

У меня внутренний контент помещается нормально. В том смысле, что min-width достаточна, чтобы внутренний контект поместился.
Это не так.


Не достаточно для контента.
Для покрытия "всех букв" нужно


Да, я уже понял - я выше написал.

Так как исправить эту проблему?
Я так понял, надо подбирать min-width, равной максимальной ширине блочных элементов в контенте страницы?

Ещё вот какая штука.
Если сделать, чтобы min-width сам растягивался, чтобы поместить контент, то это плохо.
На многих форумах (типа этого, например) это используется хулиганами, чтобы делать очень широкие страницы.
Вот, например:

аааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааа

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

bodpadНу а может скинете ваш хтмл или дайте ссылку на эту испорченную верстку, так нам действительно будет легче понять
http://jsfiddle.net/WxaB3/9/

krvsauser7320Так как исправить эту проблему?
Я про такой вариант писал...


Х/з на сколько он тебе подойдет...

Я сравнил - с моим вариантом принципиальных различий нет. Разве что вы и хеадер и контект с меню поместили в один контейнер, для которого задали те же параметры, что я задал для двух отдельных элементов. Ну, а поскольку принципиальных различий нет, то и ошибки ваш вариант содержит те же, и поведение такое же, как и у моего. Хотя, поведение как раз правильное - если блочный контент больше min-width, то он выходит за края родительского контейнера, и тут игры с перекрытиями не помогут - надо либо следить за размерами контента, либо растягивать родителя под контент потомка, либо делать контент инлайновым. Если контент принципиально не инлайнится, то остаётся только следить за его размерами.

Zoriaрешение уже найдено?
Решение - то, что я в этом сообщении выше написал. Разметка работает правильно, а неправильно - допускание такого контента, который не вписывается в эту разметку. Или же надо подгонять разметку под контент.

Тут проблема в дизайне. И она скорее философского плана. Т. е. нельзя безапеляционно сказать, плоха эта моя разметка или нет - всё зависит, какие цели она преследует. Если делать адаптивную разметку (в частности, не задавать рамки для width, а сделать их вычисляемыми по контенту), то возникает вопрос модерирования контента, чтобы исключить непредсказуемое поведение разметки. Если сделать фиксированную разметку, то возникает... снова возникает вопрос модерирования контента.