03 апреля 2008, 21:59

position:absolute; Ликбез

В серых буднях бытия, Кто-то в поисках дороги, Плюнул в душу. Вытер ноги. И уже далече бл…

Gordi

Прежде, чем перейти собственно к разметке на основе position:fixed; стоит не много остановиться на position:absolute; единственное отличие между ними состоит в том, что в первом случае контейнер фиксируется в области окна браузера и не прокручивается вместе с другими блоками, оставаясь не подвижным.

В общем случае, использование position:absolute; является самым предпочтительным способом разметки макета страницы, но простота обманчива, есть тут и свои подводные камни, о чем даже вполне грамотные и сведущие в область верстки люди, не всегда имеют достаточно четкого представления.

Вот об этих нюансах и поговорим сегодня.

Слегка коснувшись темы роста парка мониторов с размером диагонали 19 дюймов и более, а так же широкоформатных. 17 дюймов давно дефолт. А так же проблем связанных с отображением сайтов в них, начинаешь понимать, что пришло время задуматься о разрешении экрана монитора, что является следствием, неумолимого технического прогресса, и о том, как и каким образом, минимизировать погрешности визуальных разночтений.

Многие сайты, макет которых заточенный под 1024*768, очень часто выглядят не важно на более высоких разрешениях.

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

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

Тут, в не всякого сомнения, надо отдать должное Microsoft, то, как это сделано в IE7 достойно уважения. В этом, как нельзя лучше проявляется забота о пользователях. Есть возможность выбора, что не может не радовать и приятно само по себе, в отличие от той же «оперетки» и самое главное от этого никому не будет хуже.

Промежуточные варианты экспериментов не рассматриваются.

На первой тестовой странице автор намеренно отказался от абсолютных единиц измерения в пользу относительных, полностью определяющих поведение макета. К чему это может привести, Вы можете убедиться, просто меняя размер шрифта любым доступным вам способом. Из этого следует вывод, для верстки на основе абсолютного позиционирования или position:fixed; предпочтительнее использовать фиксированные размеры, в некоторых случаях более эффективной представляется комбинация из них.

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

Та же тестовая страница, но уже сделанная с использованием фиксированных размеров.

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

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

Ничего кроме, как JavaScript, тут собственно, не поможет. Не долгий поиск, консультации с Мастером Lasto привели к такой конструкции:

<head>
<link type="text/css" href="css/1024.css" rel="stylesheet">
<script>
w=1024;
 if (screen.width >= 1152) w=1152;
 if (screen.width >= 1280) w=1280;
 if (w > 1024) document.write(
  '<link type="text/css" href="css/'+w+'.css" rel="stylesheet">'
 );
</script>
</head>

Подчеркну, автором скрипта является Вадим. Скрипт определяет разрешение монитора пользователя и в соответствии с этим отдает необходимые стили для того или иного разрешения.

Как видно, если отключен JavaScript, стили берутся из основного файла 1024.css, в нем же находятся все стили, определяющие работу не только разметки страницы, но и всего ресурса.

В дополнительных стилевых файлах - 1152.css и 1280.css присутствуют только те параметры, которые определяют поведение макета при соответствующем разрешении.

Следующая тест-страница с помощью скрипта приведена практически в идеальное состояние, визуальные разночтения при переходе от одного разрешения к другому сведены к минимуму. Для более быстрого пересчета размеров можно воспользоваться следующими коэффициентами - для перехода с 1024 на 1152 необходимо нужный параметр разделить на 0.88, а с 1024 на 1280 на 0.8, округляя полученное значение. Далее, уже по месту, не значительная корректировка в ту или иную сторону. Тут самое главное сохранять пропорции, а подгонять с точностью до 1px, поверьте, не стоит.

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

И вот тут-то, макет на position:fixed; в какой-то мере позволит решить и эту проблему, естественно, с учетом того, что в зафиксированной колонке есть ограничение на объем находящейся в ней информации. Но об этом в другой раз.

P.S. Область применения скрипта весьма широка и не исчерпывается только для макетов на основе position:absolute; или position:fixed;. С учетом нюансов присущих макетам с float-нутыми блоками, поможет выкрутиться в сложных ситуациях с проблемой отображения при разных разрешениях и здесь.

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

Все заметки категории «HTML and CSS»

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

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;

апрель, 2008
пн	вт	ср	чт	пт	сб	вс
	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