http://trifler.ru/blog/ Lasto Blogging Engine ru gordi serg_gordi@mail.ru serg_gordi@mail.ru http://trifler.ru/blog/i/lastoblog.png http://trifler.ru/blog/ http://trifler.ru/blog/post_1243587066.html <p>Продолжая ставшим кажется уже бесконечным сериал о фиксированных блоках (колонках) на <em>web</em>-странице, предлагаю вашему вниманию еще одну из возможных реализаций.</p> <p>Наверняка найдутся воинствующие критиканы и противники, сомнений тут у меня нет никаких, вот только не надо пальцы "веером", все аргументы "за" и "против" должны нести позитив с конкретными примерами на подобный функционал, ибо рассматриваемое сегодня по мимо неизбежных минусов имеет и ряд неоспоримых достоинств.</p> <p>Останавливаться на тех и других, нет смысла, цикл посвященный фиксированным блокам (колонкам) остается в планах автора и возможно, будет выделен в отдельный ресурс, в связи с огромным количеством материала, о чем сообщу дополнительно.</p> <p>Хочется выразить признательность <strong>Вадиму <a href="http://lasto.com/blog/">Ласто</a></strong>, благодаря которому и появилась вариация на тему.</p> <p>Одной из главных проблем в предлагаемом мной методе разметки каркаса <em>web</em>-страницы с фиксированными элементами, является вполне закономерное желание простыми средствами получить возможность центрирования макета относительно вертикальных границ окна браузера при различных размерах диагонали и разрешениях экрана монитора с помощью привычной всем связки - <em>margin:0 auto;</em> и <em>min/max-width</em> с эмуляцией оного для IE6, без изменения остальных размеров.</p> <p>Рассмотрим базовую разметку:</p> <img src="i/layouts/absolute/fixed_baza.png" style="display:block;margin:10px auto;width:476px;height:87px;" alt="fixed_baza"> <pre class="pre"> &lt;body&gt; &lt;div class="wrap"&gt; &lt;div class="header"&gt;Header&lt;/div&gt; &lt;div class="middle"&gt;Middle&lt;/div&gt; &lt;div class="footer"&gt;Footer&lt;/div&gt; &lt;/div&gt; &lt;div class="fixed"&gt;Fixed&lt;/div&gt; &lt;/body&gt;</pre> <p>Чтобы зафиксировать колонку, запретив ее прокручивание по вертикали, выполняем стандартную процедуру, прописав в стилях:</p> <pre class="pre"> 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; }</pre> <p>Теперь вертикальный скролл принадлежит контейнеру с классом <em>wrap</em>, и вот тут-то начинаются разночтения, блоки <em>header, middle, footer</em> позиционируются относительно границ <em>.wrap</em>, а блок <em>.fixed</em> относительно границ <em>body</em>.</p> <p>Если задать <em>margin:0 auto;</em> и <em>min/max-width</em> для </em>.wrap</em> наша фиксированная колонка при уменьшении размеров окна браузера будет наезжать или прятаться под него, здесь рулит <em>z-index</em>.</p> <p>Этого можно избежать передав стили: <em>margin:0 auto;</em> и <em>min/max-width</em> - <em>body</em>, но вертикальная прокрутка принадлежащая контейнеру <em>wrap</em> будет оторвана от правой границы окна браузера, что по визуалу смотрится совершенно не к месту и нарушает целостную <a href="i/layouts/absolute/centerfix_scroll.htm">картинку</a>.<p> <p>Идея Мастера <strong>Lasto</strong> заключается в следующем - надо тем или иным способом попытаться скрыть вертикальный скролл. И ему удалось, мягко, но настойчиво побороть мои сомнения, относительно того, что для пользователя подобного рода изыск, может показаться ущербным и ввести его в ступор :)</p> <p>А ведь одним из минусов метода, является отсутствие возможности прокручивать страницу по вертикали, если курсор мыши находится над фиксированным блоком (колонкой), к этому теперь добавляется свободное пространство между самой страницей и вертикальными границами окна браузера.</p> <p>Но стоит ли этого бояться?</p> <p>Нечто подобное предлагалось пару лет назад - <a href="http://www.alistapart.com/articles/conflictingabsolutepositions">оригинал</a>, <a href="http://designformasters.info/posts/absolute-position-layout/">перевод</a>, но, посмотрев пример к статье и увидев дополнительные прокрутки, что абсолютно не украшают, кто бы, что не говорил, и не под каким "соусом" делать этого я бы не стал, а также отсутствие возможности простыми средствами прикрутить <em>min/max-width</em>, в голову, так или иначе, придет мысль, что прием, озвученный в данной публикации - путь в никуда.</p> <p>В общем, предложение <em>Вадима</em> прошло проверку в боевых условиях, даю <a href="http://nanocms.name">линк</a> на реально работающий ресурс, побродите по ссылкам меню, там есть несколько вариантов разметки, ставший полигоном для эксперимента, за что еще раз говорю большое спасибо Мастеру, не убоявшегося отдать свое детище в руки маньяка, которому дай только волю, а для этого дела времени и не жаль вовсе...</p> <p>Поиздеваться над стилями и <em>html</em> - ох, как люблю :)</p> <p>Стоит заметить, там разметка выполнена несколько по иному принципу и с использованием процентов, что при уменьшение размеров окна браузера, переходе с одного разрешения на другое, приводит к небольшим погрешностям - расстояние между областью контента и фиксированной колонкой, меняется.</p> <p>В статьях автора, посвященным вопросам глобальной разметке, в большинстве примеров, почти всегда, все блоки имеют <em>border</em>, что довольно наглядно показывает взаимное расположение их относительно друг друга, а также позволяет четко отследить возможные не состыковки в реальных условиях.</p> <p>Вообще, абсолютное позиционирование, на мой взгляд, предполагает в качестве единиц измерения абсолютные значения, тогда практически все, можно вывести с точностью до пикселя.</p> <p>Вернемся к вертикальному скроллу.</p> <p>Так, как мы используем абсолютное позиционирование, проблем нет никаких.</p> <p>Собственно в базовой разметке это решается сдвигом фиксированного блока в право, что приводит к накрыванию прокрутки.</p> <p>Но лучше и проще всего, завести еще одну фиксированную колонку соответствующего размера по высоте и ширине, с фоновой заливкой цвета <em>body</em>, позиционируя ее на вертикальную прокрутку и задав необходимый <u>отступ</u> слева контейнеру с классом <em>wrap</em> на туже ширину, что имеет дополнительная фиксированная колонка, получая строго отцентрированный каркас страницы при любых размерах диагонали и разрешениях экрана монитора.</p> <p><a href="i/layouts/absolute/centerfix_no_scroll.htm">Пример</a>.</p> <p>Это наиболее универсальное решение и оно пригодится для иных макетов, производных от базовой разметки, не все, но возможные <a href=" i/users/opera/fixed_lik.png">варианты</a>.</p> <p>Тогда наш <em>html</em>-код примет следующий вид:</p> <pre class="pre"> &lt;body&gt; &lt;div class="wrap"&gt; &lt;div class="header"&gt;Header&lt;/div&gt; &lt;div class="middle"&gt;Middle&lt;/div&gt; &lt;div class="footer"&gt;Footer&lt;/div&gt; &lt;/div&gt; &lt;div class="fixed"&gt;Fixed&lt;/div&gt; &lt;div class="fixed_scroll"&gt;&lt;/div&gt; &lt;/body&gt;</pre> <p>При отсутствии вертикальной прокрутки, страница вглядит несколько не обычно, нет опознавательных знаков для пользователя, чтобы хотя бы приблизительно определиться на каком участке оной он находится, но меню расположенное в фиксированной колонке, которое всегда доступно, с лихвой окупает это маленькое досадное недоразумение :)</p> <p>Проверено и работоспособно в IE6(7,8), FireFox 3.08, Google Chrome, SafariWin.</p> <p>OPERA, у меня стоит версия 9.64, в мадших версиях разметка не проверялась, вскоре по праву займет достойное место "дедушки" (IE6), которому давно пора на пенсию, хотя с возложенной на него задачей, даже не понимая одновременно <em>top:XX;</em> и <em>bottom:XX;</em> справился отменно, получив "черную" метку и будет первым браузером, занесенным мной в разряд <em>изгоев</em>, за свою тупость :(</p><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1243587066.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1243587066.html">All Comments</a></div> <!-- RSS_link_to_post end --><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1243587066.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1243587066.html">All Comments</a></div> <!-- RSS_link_to_post end --> Fri, 29 May 2009 15:51:06 GMT