position:relative, position:absolute and float

Trifler Blog

position:relative, position:absolute and float

Симбиоз перечисленных в заголовке стилевых правил, для полноты картины не хватает border-а, позволит, а тут мы возвращается к публикациям – "Верстаем без float" и "IE7 самый крутой браузер…", минимальными средствами получить нормально функционирующую web-страницу, не без недостатков конечно.

Их по сути два. Невозможность сделать footer на всю ширину макета, или хотя бы прикрутить его к центральной колонке и дать тому же макету окантовку в виде border-а.

Туда же можно и отнести отсутствие разделительных вертикальных линий (border), отделяющих область контента от боковых колонок.

Это собственно и есть все ограничения.

По моему мнению, наличие footer-а, важное, но не всегда обязательно условие. В некоторых случаях он и не нужен вовсе. Возможно, страница выглядит в этом случае несколько не привычно, но многие ли добираются до footer-а и уж понятное дело едва ли там находят, что-нибудь интересное и уж тем более, читают находящуюся в нем информацию.

Окантовка вокруг макета? Очень часто в ней тоже нет необходимости.

Вертикальные линии между контентной частью и колонками навигации, в общем-то, тут тоже на любителя.

Что получаем взамен?

Простой, ясно читаемый html-код с минимумом css.

Иллюзию равной высоты колонок, тут она действительно, самая, что ни на есть иллюзия. Без особых на то усилий, боковые колонки можно сделать разной ширины.

Легко создаваемая, с включением header-а, сто процентная высота макета.

Область котнента сразу идет за header-ом. При известном желании, header можно довольно просто сбросить вниз по html-коду.

На мой взгляд, плюсы и минусы уравновешивают друг друга, и не побоюсь сказать это, что появление еще одной новой техники глобальной разметки web-страницы, никогда и никому не помешает.

Желающие могу оспорить мое право первооткрывателя, упирая на то, что ничто не ново под Луной. Все возможно. Но конкретные линки на те или иные материалы с примерами, где это было сделано значительно раньше, только приветствуются, и будут интересны, как автору блога, так и всем остальным его читателям.

Вот о читателях и поговорим.

Настойчивость Ивана Броткина, в комментариях к "Верстаем без float", с иллюстрацией примерами, помогла решить проблему, озвученную в здесь.

Могу ошибаться, но Иван, судя по его ресурсу, только начинает свой путь в паутине. Даже если это не так, то все равно, думаю, он двигается в верном направлении.

Люблю таких читателей и сам являюсь таковым. Нам мало просто примера, надо его еще и пощупать, что-то попытаться изменить, прикрутить, а не просто все взять на веру и использовать, как есть.

Стиль SMS-постинга, присущий, к сожалению, большинству, увлечение описанием гламурных прибамбасов, успешно кочующих с ресурса на ресурс, часто имеющими под собой одну единственную цель - привлечь посетителей, никогда мной не приветствовалась.

Любой более или менее значимый материал должен быть обеспечен соответствующей примерной базой. Какой толк и прок оттого, что иные "гуру-гении" могут в одном слове озвучить проблему и ее решение? И что в таком случае делать тому, кто только начинает свой путь, а он не усыпан, как известно розами?

Риторические это вопросы, как же без них :)

Предлагаю всем вспомнить свои первые шаги на том или ином поприще, и тогда все станет на свои места и будет понятно, с чем иногда приходится сталкиваться, даже профи, при достижении цели.

Наша дискуссия, вернее диалог с Иваном, позволил сделать вывод, что использование только связки - relative/absolute, не позволит создать трех колоночный макет и включение float насущно необходимо.

Проблема с трех колоночным шаблоном была решена. Иван отметился у себя постом.

Со своей стороны, так как "резиновая" область контента для двух колоночной разметки была мной сделана еще в момент написания статьи, но макеты не были выставлены в качестве примеров, подразумевался если не сериал :), то мини продолжение уж точно, соорудить подобное для трех колонок не составило большого труда.

Для фиксации правой колонки при уменьшении размеров окна браузера по горизонтали, .right пришлось добавить float:right.

Правда, IE6 не послушался, но ему фикс, как нельзя будет кстати :)

Примеры дополнены header и имеют сто процентную высоту. Обратите внимание, как это сделано, есть разница между двух и трех колоночными шаблонами.

html-код и стили, находятся на тестовых страницах.

Создание макетов с иным расположением колонок под вертикальное меню и рекламные блоки, можно сделать по аналогии, но тогда эти колонки будут одного цвета, а чего вы ждали, таковы особенности разметки :)

P.S.

Чуть позже покажу, как используя подобный прием, технику, можно получить страницу с минимумом контейнеров, но с включением footer-а.

Предваряя сказанное выше, приведу лишь html-код:

<div class="header">Header</div>
<div class="middle">
  <div class="content">Content</div> 
  <div class="left">Left</div> - исключаем, если не нужен
  <div class="right">Right</div> - исключаем, если не нужен
</div>
<div class="footer">Footer</div>

Будет сто процентная высота макета, иллюзия равной высоты колонок, резиновая область контента, footer, который всегда внизу, все или почти все, что можно желать от столь простой конструкции :)

Комментарии к этой заметке больше не принимаются.


Рейтинг популярности - на эти заметки чаще всего ссылаются:

banner counters.php

leftcounters
width:160px;
height:160px;

banner counters.php

centercounters
width:160px;
height:160px;

banner counters.php

rightcounters
width:160px;
height:160px;

Горизонтальный banner counters.php - width:494px;

январь, 2009
пн вт ср чт пт сб вс
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
free  counters