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_1258565552.html <p>Автор блога, слывущий в узких кругах Мастером Горди, не является профессиональным web-верстальщиком и уж тем более, боже меня упаси, профессиональным web-дизайнером.</p> <p>В первом случае хобби и не более того, а во втором и вовсе ноль без палочки :)</p> <p>В любом случае нисколько не переоцениваю свои возможности, так как всегда предпочитал заниматься тем, что нравиться и к чему лежит душа.</p> <p>Сегодня речь пойдет о графике, вернее о проблеме, как оную заставить растягиваться не только по высоте, что довольно просто и в общем-то не вызывает никаких вопросов, но и по ширине.</p> <p>Как вы понимаете, решений имеется масса, но в большинстве своем все они требуют, на мой взгляд, не оправданных изысков как по html-коду, так и по стилям. Не говоря уж о сложности нарезки графики и состыковки нарезанных кусочков в единое целое.</p> <p>Зададимся вопросом, есть ли универсальный способ позволяющий решить заявленную проблему?</p> <p>Еще раз повторю – есть графический элемент web-страницы, в нем может находиться все что угодно, нам надо заставить этот блок растягиваться как по высоте, так и по ширине.</p> <p>Главная идея метода состоит в том, что необходимо все выполнить с минимумом графики, разметки и стилей, описывающих ее поведение.</p> <p>Как вы думаете, сколько графических файлов надо для выполнения поставленной задачи?</p> <p>Наверное, удивитесь, когда я произнесу магическую цифру <strong>два</strong>. Да именно столько и не файлом больше.</p> <p>Все остальное это оптимизация html-кода и стилей.</p> <p>Графика.</p> <p>Первый файл уменьшенная копия, все зависит от того, какая ширина необходима в конечном итоге, тут естественно надо брать с запасом.</p> <img src="i/image/tbc.png" style="display:block;margin:10px auto;width:220px;height:40px;" alt="основной файл"> <p>Второй файл вырезан из первого – центральная часть.</p> <img src="i/image/tbc_m.png" style="display:block;margin:10px auto;width:220px;height:1px;" alt="вырезка из основного файла"> <p>html</p> <pre class="pre"> &lt;div class="top"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="middle"&gt; &lt;div&gt;Content&lt;/div&gt; &lt;/div&gt; &lt;div class="bottom"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt; </pre> <p>Стили</p> <pre class="pre"> * {margin:0;padding:0;} body { background-color:#fff; margin:0 auto; min-width:500px; max-width:80%; } .top,.middle,.bottom {padding:0 0 0 14px;} .top div,.bottom div {height:12px;} .top {margin-top:20px;background:url(tb.png);} .top div {background:url(tb.png) no-repeat right top #fff;} .middle {background:url(tb_m.png);} .middle div { background:url(tb_m.png) right top #eee; padding:5px 19px 5px 3px;} .bottom {background:url(tb.png) no-repeat 0 -24px;} .bottom div {background:url(tb.png) no-repeat right -24px #fff;} p {padding:0 10px;text-align:justify} /* hack for IE6 */ *html body { width:expression( document.documentElement.clientWidth < 500 ? '500px' : (document.documentElement.clientWidth > 80 ? '80%' : 'auto')); }</pre> <p>Вот собственно и все. Поставленная задача решена - минимум графики, работает везде, а про html-код и стили и говорить не чего - просто конфетка :)</p> <p>Идем и смотрим <a href="i/image/test_silver.htm">пример</a>.</p> <p>Для проявления эффекта уменьшаем размер окна браузера по горизонтали, также меняем разрешение экрана монитора.</p><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1258565552.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1258565552.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_1258565552.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1258565552.html">All Comments</a></div> <!-- RSS_link_to_post end --> Wed, 18 Nov 2009 23:32:32 GMT