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_1236082863.html <p>Редко использую <span>expression</span>, только в случае указания максимальной/минимальной ширины при разметке страницы для IE6.</p> <p>Нельзя сказать, что разновидностей подобного рода <em>эмуляций</em>, существует великое множество, да и не входит в мою задачу все их представить.</p> <p>Все дело в том, что нет единственно верного решения подходящего на все случаи жизни. Некоторые работаю, но не так, как бы этого хотелось, очень многое зависит от конкретной ситуации.</p> <p>Поводом для написания заметки послужило и то обстоятельство, что в макете (имея в виду, что там, нет ограничения по min/max-width), предложенном на всеобщее обозрение в <a href="http://trifler.ru/blog/post_1235230569.html">Эмуляция position:fixed;…</a>, в приведенном там <a href="http://trifler.ru/blog/i/layouts/fixed/fixed_center.htm">примере</a>, при использовании вот такого:</p> <pre class="pre"> *html #XXX { width:expression( (document.compatMode && document.compatMode == 'CSS1Compat') ? (document.documentElement.clientWidth &lt; 930 ? "930px" : (document.documentElement.clientWidth &gt; 100 ? "100%" : "auto")) : (document.body.clientWidth &lt; 930 ? "930px" : (document.body.clientWidth &gt; 100 ? "100%" : "auto"))); } </pre> <p>После первоначального открытия страницы с дальнейшим уменьшением размеров окна браузера фиксированная колонка срывалась со своего места:</p> <img src="i/layouts/fixed/fix_ie6_02.png" style="display:block;margin:10px auto;width:475px;height:393px;" alt="/"> <p>Но стоит только взять мышкой за любую границу окна с целью продолжить уменьшение или расширить окно, то все приходит в норму:</p> <img src="i/layouts/fixed/fix_ie6_01.png" style="display:block;margin:10px auto;width:498px;height:398px;" alt="/"> <p>Следующая попытка уменьшения размеров окна, с раскрытой на полную катушку страницей, повторяет описанное выше.</p> <p>На мой взгляд, <em>физика</em> процесса ломается из-за того, что браузеру просто не хватает времени правильно обработать событие, отсюда и сбой.</p> <p>Были, опробованы и другие варианты, но они или не работали вообще или имели тот же негативный эффект.</p> <p>В данном конкретном случае был применен <em>JavaScript</em>:</p> <pre class="pre"> &lt;script type="text/javascript"&gt; window.attachEvent('onload', width); window.attachEvent('onresize', width); function width(){ document.getElementById('XXX').style.width = ( (document.documentElement.clientWidth || document.body.clientWidth) &lt; 930) ? '930px' : ( (document.body.clientWidth &gt; 100) ? '100%' : '100%'); }; &lt;/script&gt; </pre> <p>Но все дело в том, что для этого примера нет необходимости в указании максимальной ширины, к тому же при попытке определении разрешения монитора с помощью скрипта, и подстановкой <em>иных</em> значений минимальной ширины, этот вариант не самый лучший.</p> <p>А то, что для этого макета такая необходимость существует, все только усугубляет, мне же надо добиться, чтобы он работал <em>идеально</em> везде и всюду, при разных разрешениях и при различном расположении фиксированной колонки.</p> <p>Порывшись в своих архивах, нашел подходящий вариант, где проблемы, изложенные выше, отсутствуют:</p> <pre class="pre"> *html .XXX { width:expression(documentElement.clientWidth &lt; 930 ? (documentElement.clientWidth == 0 ? (body.clientWidth &lt; 930 ? "930" : "auto") : "930px") : "auto" ); } </pre> <p>Не привожу примера, информации на страницах блога посвященной эмуляции <a href= "http://trifler.ru/blog/comment_1225998098.html">position:fixed;</a>, достаточно и поискать решение вы можете самостоятельно.</p> <p>Возможно, сделав пару-тройку проектов, выложу все в <em>паблик</em> и вы навсегда забудете вот о таких неприятностях, где ситуация может быть лучше, где откровенно говоря, ни в какие ворота не лезет.</p> <p>Пара примеров:</p> <ul> <li><a href= "i/layouts/fixed/fix_no_03.png">Плохо</a></li> <li><a href= "i/layouts/fixed/fix_no_02.png">Тоже не очень</a></li></ul> <p>А вот, как может все быть по моей методе, опробовано на скриптах <em>Мастера</em> Lasto:</p> <ul> <li><a href= "i/layouts/fixed/fix_yes_07.png">Agent</a></li> <li><a href= "i/layouts/fixed/fix_yes_05.png">Multiagent</a></li> <li><a href= "i/layouts/fixed/fix_yes_02.png">nano-CMS</a></li> <li><a href= "i/layouts/fixed/fix_yes_06.png">Lasto Blog</a></li></ul> <p>Обратите внимание на положение горизонтальной прокрутки на некоторых скриншотах.</p> <p>С использованием приема эмуляции <span>position:fixed;</span> предложенного мной, фиксированная колонка, отделяющая область контента и колонку навигации, <em><u>всегда</u></em> находится на строго отведенном ей месте, а сама область контента имеет <em>”резиновые”</em> свойства с ограничением по <span>min/max-width</span>.</p><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1236082863.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1236082863.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_1236082863.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1236082863.html">All Comments</a></div> <!-- RSS_link_to_post end --> Tue, 03 Mar 2009 18:21:03 GMT