Position: absolute;
Продолжая ставшим кажется уже бесконечным сериал о фиксированных блоках (колонках) на web-странице, предлагаю вашему вниманию еще одну из возможных реализаций.
Наверняка найдутся воинствующие критиканы и противники, сомнений тут у меня нет никаких, вот только не надо пальцы "веером", все аргументы "за" и "против" должны нести позитив с конкретными примерами на подобный функционал, ибо рассматриваемое сегодня по мимо неизбежных минусов имеет и ряд неоспоримых достоинств.
Останавливаться на тех и других, нет смысла, цикл посвященный фиксированным блокам (колонкам) остается в планах автора и возможно, будет выделен в отдельный ресурс, в связи с огромным количеством материала, о чем сообщу дополнительно.
Хочется выразить признательность Вадиму Ласто, благодаря которому и появилась вариация на тему.
Одной из главных проблем в предлагаемом мной методе разметки каркаса web-страницы с фиксированными элементами, является вполне закономерное желание простыми средствами получить возможность центрирования макета относительно вертикальных границ окна браузера при различных размерах диагонали и разрешениях экрана монитора с помощью привычной всем связки - margin:0 auto; и min/max-width с эмуляцией оного для IE6, без изменения остальных размеров.
Рассмотрим базовую разметку:
<body>
<div class="wrap">
<div class="header">Header</div>
<div class="middle">Middle</div>
<div class="footer">Footer</div>
</div>
<div class="fixed">Fixed</div>
</body>
Чтобы зафиксировать колонку, запретив ее прокручивание по вертикали, выполняем стандартную процедуру, прописав в стилях:
html {overflow-y:hidden;}
html,body,.wrap {height:100%;}
body,.wrap {position:relative;}
.wrap {overflow-y:auto;}
.fixed {
position:absolute;top:XXpx;
right:XXpx;bottom:XXpx;width:XXpx;
}
Теперь вертикальный скролл принадлежит контейнеру с классом wrap, и вот тут-то начинаются разночтения, блоки header, middle, footer позиционируются относительно границ .wrap, а блок .fixed относительно границ body.
Если задать margin:0 auto; и min/max-width для .wrap наша фиксированная колонка при уменьшении размеров окна браузера будет наезжать или прятаться под него, здесь рулит z-index.
Этого можно избежать передав стили: margin:0 auto; и min/max-width - body, но вертикальная прокрутка принадлежащая контейнеру wrap будет оторвана от правой границы окна браузера, что по визуалу смотрится совершенно не к месту и нарушает целостную картинку.
Идея Мастера Lasto заключается в следующем - надо тем или иным способом попытаться скрыть вертикальный скролл. И ему удалось, мягко, но настойчиво побороть мои сомнения, относительно того, что для пользователя подобного рода изыск, может показаться ущербным и ввести его в ступор :)
А ведь одним из минусов метода, является отсутствие возможности прокручивать страницу по вертикали, если курсор мыши находится над фиксированным блоком (колонкой), к этому теперь добавляется свободное пространство между самой страницей и вертикальными границами окна браузера.
Но стоит ли этого бояться?
Нечто подобное предлагалось пару лет назад - оригинал, перевод, но, посмотрев пример к статье и увидев дополнительные прокрутки, что абсолютно не украшают, кто бы, что не говорил, и не под каким "соусом" делать этого я бы не стал, а также отсутствие возможности простыми средствами прикрутить min/max-width, в голову, так или иначе, придет мысль, что прием, озвученный в данной публикации - путь в никуда.
В общем, предложение Вадима прошло проверку в боевых условиях, даю линк на реально работающий ресурс, побродите по ссылкам меню, там есть несколько вариантов разметки, ставший полигоном для эксперимента, за что еще раз говорю большое спасибо Мастеру, не убоявшегося отдать свое детище в руки маньяка, которому дай только волю, а для этого дела времени и не жаль вовсе...
Поиздеваться над стилями и html - ох, как люблю :)
Стоит заметить, там разметка выполнена несколько по иному принципу и с использованием процентов, что при уменьшение размеров окна браузера, переходе с одного разрешения на другое, приводит к небольшим погрешностям - расстояние между областью контента и фиксированной колонкой, меняется.
В статьях автора, посвященным вопросам глобальной разметке, в большинстве примеров, почти всегда, все блоки имеют border, что довольно наглядно показывает взаимное расположение их относительно друг друга, а также позволяет четко отследить возможные не состыковки в реальных условиях.
Вообще, абсолютное позиционирование, на мой взгляд, предполагает в качестве единиц измерения абсолютные значения, тогда практически все, можно вывести с точностью до пикселя.
Вернемся к вертикальному скроллу.
Так, как мы используем абсолютное позиционирование, проблем нет никаких.
Собственно в базовой разметке это решается сдвигом фиксированного блока в право, что приводит к накрыванию прокрутки.
Но лучше и проще всего, завести еще одну фиксированную колонку соответствующего размера по высоте и ширине, с фоновой заливкой цвета body, позиционируя ее на вертикальную прокрутку и задав необходимый отступ слева контейнеру с классом wrap на туже ширину, что имеет дополнительная фиксированная колонка, получая строго отцентрированный каркас страницы при любых размерах диагонали и разрешениях экрана монитора.
Это наиболее универсальное решение и оно пригодится для иных макетов, производных от базовой разметки, не все, но возможные варианты.
Тогда наш html-код примет следующий вид:
<body>
<div class="wrap">
<div class="header">Header</div>
<div class="middle">Middle</div>
<div class="footer">Footer</div>
</div>
<div class="fixed">Fixed</div>
<div class="fixed_scroll"></div>
</body>
При отсутствии вертикальной прокрутки, страница вглядит несколько не обычно, нет опознавательных знаков для пользователя, чтобы хотя бы приблизительно определиться на каком участке оной он находится, но меню расположенное в фиксированной колонке, которое всегда доступно, с лихвой окупает это маленькое досадное недоразумение :)
Проверено и работоспособно в IE6(7,8), FireFox 3.08, Google Chrome, SafariWin.
OPERA, у меня стоит версия 9.64, в мадших версиях разметка не проверялась, вскоре по праву займет достойное место "дедушки" (IE6), которому давно пора на пенсию, хотя с возложенной на него задачей, даже не понимая одновременно top:XX; и bottom:XX; справился отменно, получив "черную" метку и будет первым браузером, занесенным мной в разряд изгоев, за свою тупость :(
'Техника Gordi'. Часть третья
Продолжим, возможно, бесконечный сериал.
В принципе основная идея была изложена, и повторяться нет необходимости. Сделаем остановку на частном случае. Он больше всего подходит в качестве иллюстрации гибкости применения концепции блочно-модульного построения глобальной разметки web-страницы.
Использование стилевых правил:
margin-bottom:-32767px;padding-bottom:32767px;
Решает эмуляцию равной высоты колонок, позволяя задавать колонкам разный background-color (background:url(…)), но кроме проблемы не корректной работы меток-якорей есть и еще одна - нижний border, его-то простыми средствами никак не пристроишь, пример, где он явно указан, но визуально отсутствует.
В попытках обойти данное препятствие предлагал несколько вариантов, но все они при внимательном рассмотрении оказались не лишены недостатков. Не увлекаясь подробностями, а об экспериментах на тему можно почитать, посмотреть и убедиться в этом наглядно.
Приведу только одно наблюдение, по любой из методик в прикручивании нижнего border’a, кроме как прорисовка solid, а нам-то этого мало, и то не идеальная, сводит, на нет все усилия.
К счастью, в отличии, скажем от произведений искусства, которые после создания начинают жить собственной жизнью и уже никак не зависят от воли автора, при создании разметки web-страниц, всегда есть возможность не только отыграть назад, но и сделать что-то лучше и проще.
Часто обращаюсь опубликованным мной ранее статьям и примерам. И не только для того, чтобы освежит в памяти, в момент написания, увлеченный той или иной идеей, на многие вещи просто не обращал должного внимания и многие нюансы, оставались за кадром.
Вот и давайте "закроем" проблему нижнего border’a раз и навсегда.
К сожалению избыточной разметки, не избежать, но данную ситуацию можно обыграть и в свою пользу.
Что является основой блочно-модульной концепции "Техника Gordi"?
Это так многим, да и самому себе изрядно поднадоевший контейнер (кирпич), которому посвящена не одна страница блога, скоро потянет на книгу :), а именно блок middle со своей внутренней структурой, позволяющий простыми средствами получить, как минимум пять вариантов расположения колонок навигации относительно области контента.
В общем случае этого вполне достаточно для любителей и профессионалов, занимающихся версткой web-страниц. Набор шаблонов построенных на основе блока middle, в каком-то смысле универсален и может быть рекомендован к применению, практически во всех случаях.
Рассмотрим решение проблемы нижнего border’a на основе стандартной трех колоночной разметки.
<div class="middle">
<div class="wrap">
<div class="center">Middle Content</div>
<div class="left">Middle Left</div>
<div class="right">Middle Right</div>
</div>
</div>
html-код ставший классикой для подобного рода публикаций.
Такой же слой с минимальными изменениями стилей и добавлением класса height, который в зависимости от поставленных задач может присутствовать или отсутствовать, его стоит переименовать.
<div class="footer">
<div class="wrap">
<div class="center height"></div>
<div class="left height"></div>
<div class="right height"></div>
</div>
</div>
Пояснять стили не буду, переходим на страницу, что приведет вас к примерам, там имеется по два варианта, выбирайте, то что вам нужно, с учетом того, что дополнительные блоки не обладают иллюзий равной высоты, это накладывает определенные ограничения на размещаемую в них информацию.
В заключении приведу один из вариантов полноценной страницы.
Комбинируя, используя блок middle в качестве header и footer, через наследование соответствующих стилей можно получить многочисленные вариации web-страниц, имеющих все необходимые атрибуты – сто процентная высота, независимая фоновая заливка, border для каждой колонки различного цвета и т.д. и т.п.
P.S. Предложенное решение актуально и для фиксированных блоков на web-странице, но об этом в следующий раз.
По горячим следам…
В комментариях к предыдущему посту Дмитрий выразил сожаление, в том плане, что нет возможности сделать сто процентную высоту к предложенной мной разметке.
Как оказалось это не совсем так.
Спасибо Дима, твой комментарий заставил поискать решение данной проблемы.
Так бы остановился на достигнутом и дело с концом :)
Была первоначальная попытка, но не увенчалась успехом. При более детальном анализе, чуть сместил акценты, и все встало на свои места.
Великое дело эти акценты, иногда все лежит на поверхности, но в упор не видишь. А когда сделаешь, то понимаешь, как же оно все просто, и чего же раньше-то не додумался.
Один пример, html-код header и footer может быть иным.
Использование блочно-модульной концепции "Техника Gordi" в данном случае позволяет простыми методами создать web-страницу с хорошо структурированными блоками без необходимости в дополнительной разметке.
Хочу обратить ваше внимание на то, что при первоначальном открытие страницы в OPERA, макет подожмется, любое действие со страницей приведет в сто процентной высоте оной, а вынос стилей в отдельный файл исправляет положение вещей, и в дальнейшем обходимся без лишних телодвижений.
Проверенно и работает в IE6(7,8), OPERA9.64, FireFox3.0, Chrome, SafariWin.
Горизонтальный banner counters.php - width:494px;