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_1231439010.html <p>Создавая полноценную <em>web</em>-страницу, все, так или иначе, сталкиваются с проблемой, а какую технику для создания оной выбрать.</p> <p>Их по сути всего раз-два и обчелся - техника на основе <span>float</span> и абсолютное позиционирование.</p> <p>Останавливаться на первой нет смысла, и сам посвятил ей много времени, она довольно хорошо известна и есть множество примеров, можно сказать на все случаи жизни, ищем в Google, а проще всего на страницах этого блога, уж, что-что, а тут есть из чего выбрать.</p> <p>Решений с использованием абсолютного позиционирования не так уж и много, писал и сам об этом.</p> <p>Понятное дело, что самой злободневной проблемой, является проблема <span>footer</span>-а, он может принадлежать только одной из колонок, но есть и ряд других, не менее значимых.</p> <p>Об одной из них и поговорим сегодня.</p> <p>Как вы могли заметить, предпочтения автора при разработке <em>web</em>-страницы, лежат в области создания иллюзии одинаковой высоты колонок. С помощью техники <span>float</span> это уже не является неосуществимым.</p> <p>Другое дело, <em>абсолютное</em> позиционирование.</p> <p>Вообще, мне нравится использование этого стилевого правила, а также страницы сделанные на основе <em>фиксированного</em> позиционирования. Привлекают они своей простотой и прозрачностью. На этом ресурсе есть, что почитать, посмотреть, да и применить на практике.</p> <p>Отвлекся :)</p> <p>Итак, решаем проблему одинаковой высоты колонок при абсолютном позиционировании.</p> <p>С чем будем работать. <span>html</span>-код и стили от макета справой колонкой навигации.</p> <p>html</p> <pre class="pre"> &lt;div class="middle"&gt; &lt;div class="content"&gt;Content&lt;/div&gt; &lt;div class="right"&gt;Right&lt;/div&gt; &lt;/div&gt;</pre> <p>Как видите, нет ничего лишнего, только необходимый и достаточный минимум.</p> <p>css</p> <pre class="pre"> * {margin:0;padding:0;} body {background:#fff;} .middle { background-color:#eee; border-right:#cc9 200px solid; margin:0 auto; position:relative; width:400px; } .right { position:relative; right:-400px; top:0; width:200px; z-index:1; } .content { background-color:#eee; border-right:#cc9 200px solid; position:absolute; left:0; top:0; width:400px; }</pre> <p>Стилей тоже совсем чуть-чуть.</p> <p>Даже не очень внимательный взгляд обнаружит, присутствие <span>border</span>-а в некоторых местах. А в нем, собственно, все и дело. С его помощью мы и создаем иллюзию одинаковой высоты колонок.</p> <p>Кстати это еще одна мечта, ладно пусть и не мечта, а желание, прихоть назовите это, как угодно, с самых, что ни на есть первых моих шагов на ниве верстки, сделать такую конструкцию.</p> <p>Стоит добавить, что ни с чем подобным ранее не встречался. Возможно, что что-то и упустил, но думаю, а тут я в теме, на сколько это возможно, и вам не приходилось видеть такого решения.</p> <p>Не претендую на лавры первооткрывателя, хотя, как знать, как знать :), решение задачи лежало на поверхности, но многие, в том числе и я, довольно часто проходим мимо самых очевидных вещей.</p> <p>А очевидные вещи, порой требуют не тривиального подхода. Конечно, проще всего писать о гламурных прибамбасах, количество посетителей, комментариев будет если не зашкаливать, то может в известной степени сильно напрячь владельца того или иного ресурса.</p> <p>Но это, на мой взгляд, свидетельствует только об отсутствии собственных идей. Отсюда, сплошные повторы давно избитых тем, пекутся они, как блины и персонажам, подвизающимся на этом поле, не счесть числа. Причем, все такие "крутые", не дай бог слово лишнее скажешь поперек :)</p> <p>Так, что больше <em>креатива</em>, дорогие товарищи, ставим, стараемся и стремимся, решать более глобальные проблемы и задачи.</p> <p>Но, довольно лирики.</p> <p>Переходим на <a href=absolute.html>страницу</a>, где находятся линки на примеры.</p> <p>Тестовые страницы, только рыба и многое требует дальнейшего анализа и доработки, прежде чем может быть пущено на поток, и применяться на практике.</p> <p>Возможно, автор еще не раз вернется к этой теме, сериалы-то никто не отменял :)</p> <p>В заключении, остается добавить, что проблема <span>footer</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_1231439010.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1231439010.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_1231439010.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1231439010.html">All Comments</a></div> <!-- RSS_link_to_post end --> Fri, 09 Jan 2009 00:23:30 GMT