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_1231602080.html <p>Как вы понимаете, довольно, сильно сказано и все, что написано ниже скорее игра воображения, но результаты занятны, решил опубликовать в качестве наглядного пособия, к чему могут привести эксперименты на ниве верстки.</p> <p>Это в каком-то роде продолжение темы предыдущего поста, <a href="http://trifler.ru/blog/comment_1231439010.html">"Верстаем без float"</a>, решил сделать стандартную разметку в три колонки – <span>left-content-right</span>. Без нее картина была бы не полной. Да и другое расположение колонок отведенных под навигацию, не помешает, но этот вопрос оказался достаточно сложным и, прочитав статью до конца, вы поймете почему.</p> <p>Но тут сплошные вопросы без ответов. Суть проблем понятна, но от чувства сожаления трудно избавиться.</p> <p>В принципе мне все равно, в каком браузере верстать, вернее, просматривать, что получается, разницы собственно никакой и дискомфорта особого тоже не испытываю. Так получилось, страница была открыта в IE7, отсюда все и началось.</p> <p>Что хотим? Скриншот.</p> <img src="i/layouts/absolute/abs_01.png" style="display:block;margin:10px auto;"width:420px;height:130px;> <p>Естественно, колонки должны быть равной высоты, не зависимо от их наполнения и по возможности разная фоновая заливка, про <span>background:url(…) repeat-y</span> тут речи нет, у них желательна.</p> <p>Стартовый html-код и стили.</p> <pre class=pre> &lt;div class="middle"&gt; &lt;div class="content&gt;Center&lt;/div&gt; &lt;div class="left&gt;Left&lt;/div&gt; &lt;div class="right"&gt;Right&lt;/div&gt; &lt;/div&gt; .middle { background-color:#eee; border-right:#cc9 100px solid; border-left:#dd9 100px solid; margin:20px auto; position:relative;width:200px; } .right {position:relative;top:0;right:-100px;width:100px;} .left { background-color:#dd9; position:relative;top:0;left:-100px; width:100px; } .content { background-color:#eee; border-right:#cc9 100px solid; border-left:#dd9 100px solid; position:absolute;left:-100px;top:0; width:200px;; }</pre> <p>Результат плачевный. Скриншот.</p> <img src="i/layouts/absolute/abs_01a.png" style="display:block;margin:10px auto;"width:417px;height:242px;> <p>Картина одинаковая во всех имеющихся у меня браузерах.</p> <p>Исправляем.</p> <p>Еще раз напомню, страничка была открыта в IE7.</p> <p>Так, как только связкой <span>position:relative</span> и <span>position:absolute;</span> уже не обойтись, а вы можете поэкспериментировать сами, попробуем подключить подзабытый нами <span>float</span>.</p> <img src="i/layouts/absolute/abs_02.png" style="display:block;margin:10px auto;"width:451px;height:130px;> <p><span>float:left;</span> добавлен в <span>.left</span></p> <p>Ну, думаю ура, получилось. Но рано радовался :(</p> <p>Смотрим в альтернативных браузерах.</p> <img src="i/layouts/absolute/abs_03.png" style="display:block;margin:10px auto;"width:419px;height:234px;> <p>По сравнению со вторым скриншотм, ничего не изменилось, а жаль.</p> <p>Или все слишком просто или кто-то явно не прав. И шагает IE7 не в ногу с остальными в гордом одиночестве, а ведь могло бы быть все совершенно иначе.</p> <p>Получилась бы практически идеальная разметка, правда с присущими абсолютному позиционированию недостатками – проблема привязки <span>footer</span>-а и общий <span>border</span> вокруг макета.</p> <p>Если продолжить, добавив <span>float:right;</span> для <span>.right,</span> то будет так.</p> <p>Скриншот IE6.</p> <img src="i/layouts/absolute/abs_04.png" style="display:block;margin:10px auto;"width:418px;height:177px;> <p>Центральна часть, исчезла, словно ее корова языком слизала. Но макет работает, почти, как задумано :)</p> <p>Скриншот OPERA, FF3.</p> <img src="i/layouts/absolute/abs_05.png" style="display:block;margin:10px auto;"width:414px;height:174px;> <p>Здесь правая колонка вообще не тянет за собой фон, он заканчивается для нее на уровне центральной :(</p> <p>Что и говорить, IE7 во всех случаях просто молодец, о чем и поведал вам шуточный заголовок поста.</p> <p>Возможно, свежий не предвзятый взгляд поможет решить проблему.</p> <p>Вообще, постановка подобный задач и поиск решений, хорошая практика не только для начинающего верстальщика. Иногда, изучение поведения тех или иных макетов, даже не имеющих права на жизнь, может стать хорошим подспорьем при разработке, как простых, так и более сложных приложений связанных с версткой.</p> <p>На тестовой <a href="absolute.html">странице</a> все <span>float</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_1231602080.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1231602080.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_1231602080.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1231602080.html">All Comments</a></div> <!-- RSS_link_to_post end --> Sat, 10 Jan 2009 21:41:20 GMT