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_1232810354.html <pre class="postzit"> Надежда умирает последней, даже если надежда, уже умерла… </pre> <br class="clear"> <p>Как не печально, но полноценной альтернативы верстке с помощью <span>float</span> нет и видимо не предвидится.</p> <p><u>Нонсенс</u>, но выстроить блоки по горизонтали, сделать иллюзию равной высоты для этих контейнеров, сегодня средствами "Каскадных таблиц стилей" практически невозможно.</p> <p>Результаты экспериментов, показывают, что ни <span>display:table</span>, ни <span>display:inline-block/inline</span> для настоящей кроссбраузерной верстки не годятся</p> <p>Кто не мечтал о такой конструкции?</p> <pre class="pre"> &lt;div id="middle"&gt; &lt;div class="content"&gt;Content&lt;/div&gt; &lt;div class="left"&gt;Left&lt;/div&gt; &lt;div class="right"&gt;Right&lt;/div&gt; &lt;/div&gt;</pre> <p>И чтобы поведение нашей страницы было таким:</p> <img src="i/layouts/float/utopia.png" style="display:block;margin:10px auto;width:496px;height:550px; alt="utopia"> <p>Естественно, о таблицах нет и речи. Строго по <span>html</span>-коду приведенному выше.</p> <p>Согласитесь, приятно получить такую вещицу без всяких извращений. И область контента впереди, фон у колонок разный, сюда же можно присовокупить, возможность вместо фоновой заливки графику пристроить с размножением по вертикали/горизонтали, <span>border</span> у каждой колонки свой, в общем, красиво смотрится.</p> <p>На таблицах воспроизвести подобное - раз плюнуть, но мы же не о таблицах. Мы пытаемся сверстать нормальный макет <em>web</em>-страницы, идентично выглядящий во всех популярных браузерах.</p> <p>Утопия скажете вы и будете не правы.</p> <p>Это великолепие можно сделать по разному.</p> <p>Вариант номер один - с использованием <em>JavaScript</em>. Рассматривать не будем, хотя интересен сам по себе и снимает практически все проблемы с лишним кодом, но он выбивается из тематики блога, посвященной практике <em>html and css</em>.</p> <p>Вот ссылка, где все это можно <a href="http://www.projectseven.com/tutorials/css/pvii_columns/col3fluid.htm">посмотреть</a>.</p> <p>Вариант номер два - <span>display:table</span> плюс <span>float</span>. Тоже не лучшее решение. Мало того, что приходится писать чуть ли не двойные стили собственно для разметки. Но и необходимость в дополнительных контейнерах. Цель, которых именно борьба с табличным поведением – любой блок, графика больше заданной ширины распирает колонки макета, что никак не украшает его.</p> <p>Также появление индивидуальных стилевых правил при попытке придать макету полную визуальную гармонию в разных браузерах. Причем для создания эмуляции равной высоты колонок для IE6(7) задействован <span>height:expression</span>, что, безусловно, тормозит жутко и ряд прочих <em>"радостей"</em>.</p> <p>Если добавить к перечисленному проблемы сто процентной высоты колонок с <span>header</span> и <span>footer</span> и строго фиксированную по ширине область контента, то конструкция явно не жизнеспособна. И одного примера хватит, чтобы убедиться в этом.</p> <p>Третий вариант, чисто на <span>float</span>, гораздо проще, выполнен на основе:</p> <pre class="pre"> margin-bottom:-32767px;padding-bottom:32767px;</pre> <p>В нем нет никаких проблем с расположением колонок, область контента, всегда впереди колонок навигации. Сто процентная высота макета вместе с <span>header</span> и <span>footer</span>, исключение <em>"любимый"</em> IE6, из-за особенностей его поведения, ему тут не светит.</p> <p>Единственная сложность это привязка нижнего <span>border</span>-а, присущая данной технике создания <em>web</em>-страницы. Если просто его прописать любой центральной колонке, он будет не видимым. Здесь без дополнительных контейнеров не обойтись и это препятствует созданию резиновой области контента, так, как применено абсолютное позиционирование со всеми вытекающими :( </p> <p>Не привожу <span>html</span>-код и стили, все достаточно прозрачно и на <a href="float.html">тестовых</a> страницах, взглянув на их нутро, вы поймете, о чем идет речь.</p> <p>К сожалению, проблема с наличием нижнего <span>border</span>-а, а без него картина была бы не полной, еще раз подтверждает, что для подобного рода изысков, наши возможности, при такой компоновке <em>web</em>-страницы, на сегодняшний день сильно ограничены.</p> <p>Еще один вариант, но без использования:</p> <pre class="pre"> margin-bottom:-32767px;padding-bottom:32767px;</pre> <p>Будет предложен в одной из следующих публикаций.</p> <p>Данные стилевые правила, почему-то очень многих смущают. Но это говорит лишь о том, что очень мало внимания уделяется стилям, не относящимся собственно к глобальной разметке, отсюда и мучения с иногда возникающей вертикальной прокруткой.</p> <p>Он мало чем отличается то варианта номер три, но в нем решена проблема резиновой области контента, а также сто процентная высота макета для IE6. Не без дополнительных блоков, но кого этим испугаешь :)</p> <p>Гремучая смесь <span>float, position:relative/absolute</span>, поможет справиться и с этим.</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_1232810354.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1232810354.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_1232810354.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1232810354.html">All Comments</a></div> <!-- RSS_link_to_post end --> Sat, 24 Jan 2009 21:19:14 GMT