Что будет если объединить две проблемы, связанные с версткой?
Все мы в глубине души надеемся, что проблемы, возникающие при решении этих проблем сложатся. Однако, практика показывает, что они перемножаются.
Если Вам интересно, как используя только дивы и валидные CSSки сделать страницу, которая «отбрасывает тень» (слева и справа) и при этом занимает не меньше экрана по высоте, добро пожаловать под кат!
Для начала вспомним о том, как обычно делают тени. Есть такой старый проверенный метод «луковой шелухи». Нам же не хочется, чтобы наши тени можно было выделять мышкой? Поэтому они должны быть в качетсве фона, а так как нельзя отдельно задавать фоновые картинки для левого края и для правого, приходится вкладывать несколько div'ов друг в друга.
Теперь о высоте. Чтобы сделать слой высотой в экран нужно, чтобы у него и у всех элементов, в которые он вложен (начиная с body или даже html) была прописана height:100%. Но это нам не совсем подходит, т.к. нам нужно, чтобы 100% была минимальная высота. Для этого есть такой хак min-height: 100%; height: auto !important; height: 100%;". Но когда мы объединяем «луковую шелуху» с этим хаком, получается фигня, потому что у нас одна тень растягивается на высоту окна браузера, а другая — на высоту контента.
Вместе с товарищем raceoffer мы просидели над этим целую ночь, но, как говорится, утро вечера мудренее. Хотя, когда уже рассвело (но еще до того, как поспать) мы думали, что нашли решение. Сделали эти фоновые картинки статичным фоном. И все было хорошо, пока не появилась горизонтальная прокрутка!
Ну а теперь, собственно, решение, которое мы нашли.
Чтобы Вам было понятнее, как это выглядит в действии, я сделал два примера: с растяжение по высоте контента и с растяжением по высоте экрана
А теперь немного о том, как это работает. Сначала мы создаем контейнеры с высотой 100% окна и помещаем туда одну узкую колонку со стилем «float:right; margin-right:-5px». После нее мы размещаем контейнер, содержащий весь контент. Таким образом мы получили тень, которая выглядит так, как надо. Теперь маленький финт, чтобы футер располагался там, где нужно, ставим перед ним (иначе в IE все поедет).
Проверена работа данного метода в Firefox 2,3 Opera 9.27, 9.5, IE 6,7, Safari for Win
Все мы в глубине души надеемся, что проблемы, возникающие при решении этих проблем сложатся. Однако, практика показывает, что они перемножаются.
Если Вам интересно, как используя только дивы и валидные CSSки сделать страницу, которая «отбрасывает тень» (слева и справа) и при этом занимает не меньше экрана по высоте, добро пожаловать под кат!
Для начала вспомним о том, как обычно делают тени. Есть такой старый проверенный метод «луковой шелухи». Нам же не хочется, чтобы наши тени можно было выделять мышкой? Поэтому они должны быть в качетсве фона, а так как нельзя отдельно задавать фоновые картинки для левого края и для правого, приходится вкладывать несколько div'ов друг в друга.
Теперь о высоте. Чтобы сделать слой высотой в экран нужно, чтобы у него и у всех элементов, в которые он вложен (начиная с body или даже html) была прописана height:100%. Но это нам не совсем подходит, т.к. нам нужно, чтобы 100% была минимальная высота. Для этого есть такой хак min-height: 100%; height: auto !important; height: 100%;". Но когда мы объединяем «луковую шелуху» с этим хаком, получается фигня, потому что у нас одна тень растягивается на высоту окна браузера, а другая — на высоту контента.
Вместе с товарищем raceoffer мы просидели над этим целую ночь, но, как говорится, утро вечера мудренее. Хотя, когда уже рассвело (но еще до того, как поспать) мы думали, что нашли решение. Сделали эти фоновые картинки статичным фоном. И все было хорошо, пока не появилась горизонтальная прокрутка!
Ну а теперь, собственно, решение, которое мы нашли.
Чтобы Вам было понятнее, как это выглядит в действии, я сделал два примера: с растяжение по высоте контента и с растяжением по высоте экрана
А теперь немного о том, как это работает. Сначала мы создаем контейнеры с высотой 100% окна и помещаем туда одну узкую колонку со стилем «float:right; margin-right:-5px». После нее мы размещаем контейнер, содержащий весь контент. Таким образом мы получили тень, которая выглядит так, как надо. Теперь маленький финт, чтобы футер располагался там, где нужно, ставим перед ним (иначе в IE все поедет).
Проверена работа данного метода в Firefox 2,3 Opera 9.27, 9.5, IE 6,7, Safari for Win
