Форум программистов «Весельчак У»
  *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

  • Рекомендуем проверить настройки временной зоны в вашем профиле (страница "Внешний вид форума", пункт "Часовой пояс:").
  • У нас больше нет рассылок. Если вам приходят письма от наших бывших рассылок mail.ru и subscribe.ru, то знайте, что это не мы рассылаем.
   Начало  
Наши сайты
Помощь Поиск Календарь Почта Войти Регистрация  
 
Страниц: [1]   Вниз
  Печать  
Автор Тема: Вопрос про вёрстку и расположение фонового изображения.  (Прочитано 5859 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Chuda
Гость
« : 26-07-2007 11:37 » 

есть у меня страница с примерно такой структурой:
Код:
<html><body>
<div id="all"></div>
<div id="footer"></div>
</body></html>
К ней полагается следующий css:
Код:
html, body {
height: 100%;
}
#all {
min-height: 100%;
}
* html #all {
height: 100%;
}
#footer {
clear: both;
height: 136px;
margin-top: -136px;
}
Такая схема применена для того, чтобы подвал всегда был снизу, даже если контента на странице мало.

Теперь встала задача разместить на странице три фоновых изображения. Одно равномерное текстурное по всей странице, ещё одно - специфичная текстура для верхнего края документа, и ещё одно - декоративный элемент в нижнем левом углу.
Сразу напрашивается решение - разместить картинки фоном для html, body и #all.
Но дело в том, что высота всех этих трёх элементов высчитывается из высоты окна браузера, и соответственно фоновый рисунок, который должен быть в нижнем левом углу страницы, размещается в нижнем левом углу окна вне зависимости от того, продолжается ли текст далее.
Кстати, наблюдаем тот самый редкий случай, когда оригинальное видение css в браузерах MSIE (5.0, 5.5, 6, 7 в этом плане оказались одинаковы) пошло на пользу - в IE фоновое изображение на нужном месте.
Результаты моих изысканий находятся здесь: http://fvsr.ru/highway/
Вот каким бы образом разместить фон в нижнем левом углу для всех браузеров?
Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #1 : 27-07-2007 06:29 » 

попробуй разместить фоном в #footer

это так мысли вслух
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Chuda
Гость
« Ответ #2 : 01-08-2007 21:07 » 

Спасибо, Sla, это мысль кое в чём правильная. Но дело в том, что высота картинки больше высоты #footer.
Делать большой отрицательный маргин, чтобы #footer разместился под #all, не получается.
Проблема решилась так:
body > #all {
    overflow: hidden;
}
таким образом #all, которому для всех браузеров, кроме IE6 (этот глюкодром не понимает дочерних селекторов), указана только минимальная высота, а полная высота не указана, растягивается, чтобы вместить содержимое. IE6 же имеет целую серию багов, которые в совокупности дают как раз нужный эффект.
Записан
Страниц: [1]   Вверх
  Печать  
 

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines