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-нутыми блоками, поможет выкрутиться в сложных ситуациях с проблемой отображения при разных разрешениях и здесь.
Меню. Border. Треугольники.
Раз уж начали, то надо бы и закончить. Все только на html и css. А иначе не стоило и огород городить. Скрипт и прочие ингредиенты будут предложены чуть ниже. Сразу хочу огорчить, пользователей продуктов Мастера Lasto, в связи с особенностями движка блога, напрямую описанное работать не будет. По этому поводу с Мастером были консультации, решение есть, но из-за не контролируемого размножения клонов не стоит даже надеяться, к этому надо отнестись с должным пониманием, на массовое распространение данной фишки. В nano-CMS меню не проверялось, но вполне возможно, будет работать без лишних заморочек.
Код скрипта о котором шла речь в предыдущей публикации:
<attach for=element event=onmouseover handler=absolute>
<attach for=element event=onmouseout handler=float>
<script>
function absolute(){element.className='hover';}
function float(){element.className='';}
</script>
Из скриншота из той же статьи видно, что при наведении курсора мыши, рядом ссылкой появляется треугольник. В общем случае, технология его создания проста и никаких особых познаний не требует. Скриншот.
В качестве html-кода подойдет любой блок или строчный элемент со стилевым правилом display:block; Остается, только каждому border-у присвоить свой цвет. Выбор, в какую сторону будет направлена вершина треугольника, определяется заданием одному border-у цвета на ваш вкус, а остальным цвет фона на котором этот треугольник будет появляться.
Стили для треугольника:
q {
border-top:red 70px solid;
border-right:blue 70px solid;
border-bottom:000 70px solid;
border-left:green 70px solid;
display:block;
margin:20px auto;
overflow:hidden;
height:1px;
width:1px
}
Запись, определяющая цвет может и должна выглядеть так:
border:#fff 70px solid; /* цвет фона */
border-left:green 70px solid; /* цвет вершины */
html треугольника:
<q></q>
Теперь стоит остановиться на html самого меню. Из-за того, что :hover будет у блока в котором расположены и ссылка и сам треугольник есть смысл использовать cписок определений. В этом случае отпадает необходимость, в каких либо классах, к примеру, для выделения заголовка к нашему меню. Хрестоматийно, в полном соответствии с семантикой для подобного рода случаев.
Соберем все воедино.
сss меню
.menu_absolute {border:#ddd 1px solid;margin:20px auto;width:200px;}
.menu_absolute a {color:#777;display:block;font:bold 12px georgia,helvetica,sans-serif;position:relative;text-decoration:none;}
.menu_absolute a:hover {color:#c60;}
.menu_absolute dl {font:bold 13px arial,georgia,helvetica,sans-serif;margin:0;padding:10px;}
.menu_absolute dt {color:#960;}
.menu_absolute dd {list-style-type:none;margin:0;padding:2px 0 0 10px;position:relative;}
.menu_absolute dd em {
border-top:#fff 5px solid;
border-right:#fff 5px solid;
border-bottom:#fff 5px solid;
border-left:#a00 5px solid;
display:none;
position:absolute;left:1px;top:4px;z-index:2;
overflow:hidden;
height:1px;
}
.menu_absolute dd:hover em {display:block;margin:0 0 0 -6px;}
*html .menu_absolute dd {behavior:url(hover.htc);}
*html .menu_absolute dd.hover em {display:block;margin:0 0 0 -6px;}
.menu_absolute span {color:#905;}
html меню
<div class="menu_absolute"> <dl> <dt>Навигация <span>(absolute)</span></dt> <dd><em></em><a href="#">Menu</a></dd> <dd><em></em><a href="#">Float</a></dd> <dd><em></em><a href="#">Left</a></dd> <dd><em></em><a href="#">For IE6</a></dd> <dd><em></em><a href="#">Script hover.htc</a></dd></dl> </div>
На тест-странице два варианта меню. Во втором случае вместо абсолютного позиционирования используется float. При наведении курсора мыши на ссылку происходит ее смещение влево, а на освободившемся месте появляется треугольник. Тут нет никаких сложностей, все предельно просто. Пробуйте, экспериментируйте.
Весенняя эйфория. Треугольники.
Весною все не так, Бессилен прежний опыт, Заведомый пустяк – Круговорот и омут…Gordi
Бывает иногда, наступает время ничего не деланья. Все откладывается в сторону до лучших времен. За окном весна, что наводит уже на совершенно «левые» мысли. Милые дамы снимают зимние кольчуги, обнажаясь и расцветая, стреляя во всю глазками, вводя в неописуемый грех. Весенняя эйфория, закрадывается в истощенный, разболтанный до не возможности отсутствием витаминов, серыми хмурыми днями, хотя зима и была похожа на позднюю осень, что радости, тем не менее, не прибавляло совершенно, организм…
$, тоже в подвешенном состоянии, играет туда сюда и не знает, куда ему податься – то ли упасть в бездонную пропасть, то ли взлететь до заоблачных вершин.
Очередной опус Мастера "Неожиданный испуг бакса собственной тени" - не лишен субъектива с известной долей пессимизма и, как ласковый весенний ветерок, грозящий превратиться в бурю по имени дефолт, навевает легкую тоску и печаль. Но виртуальное общение с ним, позволяет мне думать, не смотря ни на что, все будет хорошо :) К тому же он не одинок в своем мнении, а уж в подаче оного, даст солидную фору паре-тройке доцентов с кандидатами и иже с ними, что так часто и так заумно глаголют о чем угодно, но почти всегда, находясь явно не в «теме», делая из нас совершеннейших идиотов, словно мы дети и только вчера народились на свет белый…
Еще одна отрада, начался футбольный сезон, смотрю редко, но болею, тая надежду, что, в конце концов, и на нашей улице будет праздник…
Эх, водочки бы холодной по более в граненых стаканах, пластмассовые стаканчики, такая гадость, чокнуться по настоящему нельзя. Теплая дружеская компания, где-нибудь на берегу речки, с полным ассортиментом заядлых рыболовов, сам не рыбак, так же, как и друзья, да и водка не на первом и даже не на втором месте, главное, чтоб хватило - было бы о чем вспомнить, о чем поговорить :)
К примеру, о шахматах, коим автор отдал приличную часть своей жизни. А, что? Хотя, параллели и аналогии с версткой совершенно не уместны, но все же. Про объем необходимой информации, для более или менее приличного уровня понимания, даже и говорить не хочется, сравнение явно не в пользу верстки, это как сравнивать букварь для первоклашек с Большой Советской Энциклопедией энного количества томов.
А лимит времени на принятие решения, а сумасшедшая ответственность, связанная с выбором хода, это вам не макет страницы, который можно шлифовать до бесконечности. Так, что заблуждаются многие «гуру» от верстки, проповедующие "дзен" и проникновение в самые, что ни на есть, потаенные, придуманные им же самими уголки таинственного дизайна и загадочных web-стандартов, чушь все это собачья, откровенно говоря, по большому-то, гамбугскому счету.
Все гораздо проще. Набор необходимых знаний html и css и практика. А если продолжить аналогию с шахматами, то соперников от силы четыре, пять, ну да, постоянно играем черными, но всегда побеждаем :)
И вот, лежа на диване в томной лени, с праздными и не очень мыслями в буйной головушке, поддавшись настроению, подумалось, а не сотворить или что-нибудь эдакое, подстать, так сказать, всему выше описанному, в честь весны и наступающего лета, что не за горами. Простенько так, со вкусом, в полном согласии, слившись в безумном экстазе слова и дела…
Сразу оговорюсь, ничто не ново под луной. Десятки, сотни, а может и тысячи раз, в самых различных вариациях, с изрядной долей изощренности, было показанно и рассказанно, стоит только поискать. Другое дело, что в большинстве случаев, все повешено на тег а.
Мы же чуть сместим акценты. Считайте это моей прихотью, ссылка в моем понимании, должна менять только цвет на :hover и ничего более, для всех других эффектов существует контейнер в который она вложена, а для меню-то, это как раз то, что доктор прописал. К тому же, в одном из примеров это позволит добиться разнообразия и индивидуальности в оформлении, что в обычном исполнении вряд ли возможно.
Естественно, предстоит помучаться с IE6, но не преодолимых препятствий, как вы понимаете, здесь не существует. Скриптик из шести строк и пара лишних строчек стилевых правил в таблице стилей для «любимого» браузера, решают и эту проблему.
Не смотря на критику на одном из форумов, за частое употреблении данного скрипта, возьму на себе смелость утверждать, пусть не без изъяна, но это лучшее решение, заточенное под один единственный, конкретный браузер, век которого судя по всему на закате. И городить нечто подобное на JavaScript, ну уж совсем нет никакой необходимости.
Скажу больше – с помощью всего шести строк кода, подчеркиваю 6 (шести), ничего не меняя в нем, могу подвесить :hover практически на любой тег с различной степени вложенности, все будет определяться только стилевыми правилами, примеров на страницах блога достаточно, поиск вам в руки :)
Не стоит обращаться с просьбами, как это сделать в том или ином случае. Автор плывет по течению своих часто не осознанных в полной мере представлений, что делать, о чем писать. Работа на заказ его тяготит, из-за свойственной ему лени и необязательности :)
В любом случае ваши предложения будут рассмотрены, но могут быть отклонены без объяснений причин. И дело вовсе не в сумме гонорара, а скорее всего в том насколько ваше предложение интересно и насколько оно соответствует настроению автора на данный момент времени.
К тому же данный ресурс для автора, это не вожделенная кнопка «бабло», которую он холит и лелеет всеми возможными способами днем и ночью. Надо правильно понимать, что изначально целью проекта ставилось показать, что в верстке нет ничего сверхсложного, поэтому подача материалов на страницах блога, происходит именно в таком ключе, а не иначе.
Для особо не внимательных, читаем внимательно "Trifler Blog". Есть "трудности перевода"?
Что ж, и приступим не спеша…
Посмотрим, к чему стремимся. Скриншот.
Стоп, говорю сам себе, про треугольники в следующий раз :)
Горизонтальный banner counters.php - width:494px;