Изображение выходит за пределы, включается прокрутка страницы

[makcau]

Здравствуйте.

Только недавно начал заниматься вёрсткой, столкнулся со следующей проблемой:

Имеется сайт, дизайн центрированный (фиксированный), в футере изображён паркетный пол.

По задумке, при маленьком разрешении экрана пользователя, слева и справа пол должен быть обрезан (по красной лини на приложенном изображении), а при большом, соответственно, должен быть виден весь пол. Вроде, задача несложная =/ Однако, слева у меня всё нормально, а правое изображение отображается полностью и в связи с этим включается горизонтальная прокрутка страницы.

У меня div'ы отдельные для шапки, меню, контента и футера. В блоке футера вложены ещё div'ы с изображениями-кусками пола и им присвоены абсолютное позиционирование и координаты от левого и правого края, соответственно (например, "left: -315px;") Видимо, такой подход неверен. Но, я с CSS раньше дела не имел вообще, а в поисковике мне решение не отыскать (даже не представляю, по каким ключевым словам искать решение) =(

Заранее спасибо за помощь!

[bob_24]

вставьте картинку как фоновое изображение подвала и background-position: top center;

[USF]

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

[makcau]

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

Если делать не изображением, а фоном, то ширина блока становится 0 пикселей, так как блок пуст (даже если я выставлю ширину). Я понимаю, что делать нужно таким образом, но не знаю как "заполнить блок, не заполняя его" =)

Edited October 26, 2012 by makcau

[USF]

min-height: 100%

width: 100%

ну и для всех родителей тоже не будь

[makcau]

Не подходит. Смотрите: у меня следующая структура блоков:

-container (width: 1047px; margin: 0 auto)

--header

--menu

--content

--footer

А в футере блок с куском пола. Стоит в позиции left: 100%. Если ставлю ширину 100%, то он берёт ширину родителя, то есть футера всего. А если ставить блок с куском пола в блок container, то не сделать так, чтоб он стоял там, где должен =(

Edited October 26, 2012 by makcau

[USF]

я не совсем понимаю

а пиксельные размеры поставить нельзя?

[makcau]

я не совсем понимаю

а пиксельные размеры поставить нельзя?

Проблема в том, что блок container центрируется. Соответственно, нельзя определить, где он заканчивается. Ширина у него фиксированная, а margin автоматический, чтоб всё было посередине.

[StormMan]

makcau, как вариант:

body {
   background: url(path) center bottom no-repeat;
}

или, если у body уже есть фон, можно ещё поизвращаться:

html {
   background: url(path) center bottom no-repeat;
}

где path - путь к картинке, которая у вас в футере.

up: если я правильно понял то, что на картинке, то в вашем случае нужно тот фон, который в клеточку на всю страницу, переставить из body в html, a для body назначить фон подвала, как я указал выше.

Edited October 27, 2012 by StormMan

[USF]

он же писал, что ему такой вариант не канает, если не ошибаюсь

[makcau]

Всем спасибо за ответы, хотя ничего мне не подошло. В итоге, вернулся к старой доброй табличной вёрстке и теперь всё в полном порядке =)

[tini.kRyptoNite]

примерно такая же проблема.

[StormMan]

он же писал, что ему такой вариант не канает, если не ошибаюсь

ему предлагали вот это:

вставьте картинку как фоновое изображение подвала и background-position: top center;

Если ширина подвала фиксированная, то этот способ не сработает. В этом отличие варианта bob_24 от того, что предложил топикстартеру я, когда мы делаем изображение фоном не подвала, а body. И, если честно, я знаю не так много причин, по которым способ может не подойти или тем более не сработать.

В итоге, вернулся к старой доброй табличной вёрстке и теперь всё в полном порядке =)

Edited October 28, 2012 by StormMan