Footer внизу. Вопросы и ответы

Trifler Blog

Footer внизу. Вопросы и ответы

   Уходит молодость моя, 
   Через июньские поля,
   А в небе столько глубины,
   Что звезды дальние видны.
   И среди них осколком льда...

"Уходит молодость моя" Ю.Антонов


Под затянувшееся празднование юбилея, благо, что дата круглая, а проставится, сам бог велел и грех не поднять не слабый фужер коньяка или чего попроще, но с тем же результатом. Алкоголь весьма приятная штука, особенно когда не надо завтра идти на работу или заниматься мало приятными, явно не соответствующими духу и смыслу происходящего, вещами. Главное не сильно увлекаться и вовремя остановиться. Но как говориться, опыт имеется, не страшно :)

К счастью, жизнь не стоит на месте, что в не всякого сомнения радует.

Со дня публикации предыдущего поста, а времени прошло, замечу совсем чуть-чуть, в личной переписке накопилось заметное количество вопросов.

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

Вот основные проблемные позиции:

  1. убить вертикальную прокрутку при минимуме контента и информации в колонках навигации (до сих пор не пойму, зачем это надо, не уже ли не хватает слов на великом и могучем?)
  2. трудности в реализации двух колоночной разметки

Начнем по порядку.

Убиение вертикальной прокрутки.

Проблема вертикальной прокрутки заключается в том, что footer вынесен из общего контейнера и имеет фиксированную высоту. А его размещение в нем ведет к другим трудно разрешимым последствиям. Причем, существенную роль для IE6 играет и тот факт, что заданная высота по дефолту для блока #center принимается им за чистую монету.

В других браузерах это проявляется иначе и там есть свои нюансы.

Для решения воспользуемся известным приемом, который очень часто является действенным в отношении ширины. Суть его в следующем – задаем border-top необходимой ширины/высоты для #header и с помощью отрицательного margin-top для #wrap, подбирая данные значения, в общем случае они равны друг другу, но могут незначительно различаться, добиваемся исчезновения вертикальной прокрутки, контролируя процесс в IE7, FF, OPERA.

Для IE6, кроме выше сказанного, нужно указать свою высоту для #center в процентном выражении. Будет меньше чем 100%.

Отказываемся от указания фиксированной высоты для #footer, обходимся вертикальным padding-ом.

Естественно, в зависимости от наполнения нашего footer-а, при минимуме информации в колонках все, что описано чуть выше придется корректировать в плюс или в минус.

Высота header влияет в определенной степени на общую высоту макета, но надеюсь, что ваша шапка не является самым главным элементом страницы.

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

В общем, и целом все сводится к настройке разметки под определенную вами высоту footer-а, методика данного процесса достаточно подробно описана, задавать подобные вопросы в будущем совершенно излишне, останутся без ответа.

Двух колоночная разметка.

Идем и смотрим. Три варианта разметки с учтенным ответом по поводу вертикальной прокрутки.

Комментарии к этой заметке больше не принимаются.


Рейтинг популярности - на эти заметки чаще всего ссылаются:

banner counters.php

leftcounters
width:160px;
height:160px;

banner counters.php

centercounters
width:160px;
height:160px;

banner counters.php

rightcounters
width:160px;
height:160px;

Горизонтальный banner counters.php - width:494px;

июнь, 2008
пн вт ср чт пт сб вс
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            
free  counters