В этой статье мы начинаем подробное рассмотрение того, как можно использовать CSS для позиционирования элементов HTML в любом требуемом месте на странице, используя свойство CSS position и другие связанные свойства.
Свойство position в CSS имеет четыре законных значения (в дополнение к вездесущему inherit ): static, relative, absolute и fixed. Эти значения имеют существенное влияние на то, как изображается элемент. Два значения, static и relative, тесно связаны, и мы подробно рассмотрим их в этой статье. Значения absolute и fixed также тесно связаны, и будут рассмотрены в следующей статье этой серии.
Статья имеет следующую структуру:
Удивительный мир прямоугольников Статическое позиционирование Компоновка блочных боксов Компоновка строковых боксов Относительное позиционирование Много-столбцовая компоновка Создание столбцов Обход особенностей Internet Explorer Другие применения относительного позиционирования Заключение Контрольные вопросы
Поговорим немного о боксах CSS и HTML, которые были рассмотрены в статье 35 о плавающих элементах и очистке. Документ HTML состоит из ряда элементов, перемешанных с символьными данными (текст). Когда такой документ изображается на экране компьютера или печатается на бумаге, эти элементы генерируют прямоугольные боксы. Также как элементы HTML делятся на блочные и строковые элементы, боксы в CSS являются по сути либо блочными боксами, либо строковыми боксами. По умолчанию встроенная таблица стилей агента пользователя в браузере заставляет элементы HTML блочного уровня, такие как p и div, генерировать блочные боксы, в то время как строковые элементы, такие как strong и span, генерируют строковые боксы. Можно управлять типом генерируемого бокса, используя свойство display.
Сгенерированные элементами в документе боксы размещаются согласно четко определенному в спецификации CSS2.1 множеству правил. Эти правила написаны для относительно небольшого числа людей, которые пишут программное обеспечение браузеров, чтобы они знали, как работает CSS, хотя не для тех, кто создает Web-страницы для заработка - или как хобби. Именно поэтому существует весь этот курс! Как результат, спецификация может быть немного трудна для восприятия. В этой статье делается попытка объяснить основы таким образом, который лучше подходит для Web-дизайнеров и разработчиков.
На самом деле это неправильное название. Боксы со свойством position:static вообще не "позиционируются" в смысле CSS. Они просто выкладываются в том порядке, в котором они появляются в разметке, и занимают столько места, сколько им надо - это поведение по умолчанию, которое применяется, когда к коду HTML вообще не применяется никакой CSS.
Существуют фундаментальные различия в том, как выкладываются блочные боксы, по сравнению с тем, как выкладываются строковые боксы, поэтому давайте рассмотрим оба типа по очереди. Мы начнем с блочных боксов, так как они проще.
Если не применяются никакие специальные объявления CSS, блочные боксы выкладываются вертикально сверху вниз в том порядке, в котором они появляются в разметке. Каждый бокс обычно имеет ширину документа (элемента body ), но даже если сделать их более узкими, они не будут укладываться рядом бок о бок, даже если для этого имеется пространство, они по-прежнему будут выкладываться один под другим. Можно считать, что каждый блочный бокс имеет неявный разрыв строки перед и после себя, чтобы гарантировать, что он заканчивается на своей собственной "строке".
Вертикальное расстояние между двумя блочными боксами управляется свойством margin-bottom первого блока и свойством margin-top второго бокса (вы видели, как манипулировать ими ранее в курсе). Для боксов в нормальном потоке, т.е. боксов, которые не являются плавающими или абсолютно позиционированными,
Рассмотрим следующий фрагмент HTML:
<p style="margin-bottom:40px">This paragraph has a 40px bottom margin. </p> <p style="margin-top:20px">This paragraph has a 20px top margin. </p>
При просмотре в браузере поля схлопываются, как показано на рис 36.1.
(рис 36.1) Схлопывание полей - расстояние между боксами равно 40px, а не 60px
Блочный бокс будет содержать либо только блочные боксы, либо только строковые боксы. Если блочный элемент содержит смесь блочных и строковых потомков - что допустимо, хотя семантически сомнительно, будут генерироваться так называемые анонимные блочные боксы для охвата строковых боксов потомков, так чтобы предок содержал только блочные боксы.
Можно определить размеры блочного бокса с помощью свойств .
(рис 36.2) Блочные боксы укладываются вертикально
Этот раздел может оказаться трудным для понимания, если вы новичок в CSS, но не отчаивайтесь, если не поймете его при первом чтении. Поэкспериментируйте немного самостоятельно, что будет, вероятно, лучшим способом хорошо понять эти вопросы - убедитесь только в том, что используете при тестировании хороший, соответствующий стандартам браузер, такой как Opera или Firefox.
Строковые боксы генерируются по умолчанию строковыми элементами HTML, но существуют также анонимные строковые боксы, генерируемые для охвата текстового контента элементов.
Строковые боксы располагаются горизонтально, или один за другим, в том порядке, в котором они появляются в разметке. В зависимости от свойства direction, строковые боксы будут располагаться либо слева направо ( direction: ), либо справа налево ( direction:rtl ). Направление слева направо используется, например, для европейских языков, в то время как направление справа налево используется с такими языками, как арабский или иврит.
Множество строковых боксов, которые составляют строку на экране (или бумаге) заключаются еще в один прямоугольник, называемый линейным боксом. Линейные боксы выкладываются вертикально в своих предках блочного уровня, без дополнительного пробела между ними. Можно изменить высоту линейных боксов с помощью свойства line-height. Для строковых боксов нельзя определить никакие размеры. Можно определить горизонтальные поля, но не
В случае необходимости строковый бокс будет делиться на несколько строковых боксов, распределенных на два или большее количество строковых боксов. Когда происходит такое деление, любые горизонтальные поля и заполнение, и любые вертикальные границы будут применяться только перед первым боксом и после последнего бокса. Рассмотрим документ со следующим правилом для элементов em:
em {
margin: 0 2em;
padding: 0 1em;
border: 1px dotted blue;
}
Это правило создает компоновку, до некоторой степени похожую на рис 36.3, когда оформленные элементы разбиваются на несколько строк.
(рис 36.3) Поля, заполнение и граница не применяются в точках разрыва
Вертикальное выравнивание строковых боксов в охватывающем линейном боксе определяется свойством .
(рис 36.4) Буквы располагаются на воображаемой базовой линии
Отметим, что свойство показывает несколько маленьких изображений с различным вертикальным выравниванием.
(рис 36.5) Изображения, размещенные с помощью настроек свойства CSS vertical-align
Когда общая ширина строковых боксов в линейном боксе меньше ширины самого линейного бокса, горизонтальное выравнивание управляется свойством показывает результат применения различных значений свойства text-align к тексту в ячейках таблицы.
(рис 36.6) Управление выравниванием текста с помощью свойства text-align
Элемент с position:relative сначала размещается также как любой top, bottom, left и right.
Необходимо помнить об относительном позиционировании, что смещается только сгенерированный бокс. Элемент по-прежнему остается там, где он был в потоке статического документа. Именно здесь он "занимает место" насколько это касается других элементов. Это означает, что смещенный бокс может перекрывать боксы других элементов, так как они по-прежнему действуют, как если бы относительно позиционированный элемент остался там, где он должен был быть, перед применением позиционирования. Что касается потока документа, то элемент не смещается - это просто конечный визуальный результат, который показывает смещенный бокс. Давайте посмотрим это на практике.
1. Скопируйте приведенный ниже код HTML в новый документ в текстовом редакторе и сохраните его как relative.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Relative Positioning</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing elit.
Curabitur feugiat feugiat purus.
Aenean eu metus. Nulla facilisi.
Pellentesque quis justo vel massa suscipit sagittis.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Quisque mollis, justo vel rhoncus aliquam, urna tortor varius lacus, ut tincidunt metus arcu vel lorem.
Praesent metus orci, adipiscing eget, fermentum ut, pellentesque non, dui.
Sed sagittis, <span>metus a semper</span> dictum, sem libero sagittis nunc, vitae adipiscing leo neque vitae tellus.
Duis quis orci quis nisl nonummy dapibus.
Etiam ante. Phasellus imperdiet arcu at odio.
In hac habitasse platea dictumst. Aenean metus.
Quisque a nibh. Morbi mattis ullamcorper ipsum.
Nullam odio urna, feugiat sed, bibendum sed, vulputate in, magna.
Nulla tortor justo, convallis iaculis, porta condimentum, interdum nec, arcu.
Proin lectus purus, vehicula et, cursus ut, nonummy et, diam. </p>
</body>
</html>
2. Откройте этот файл в Web-браузере, чтобы увидеть, как он выглядит на этом этапе -- вы должны увидеть только простой параграф текста.
Создайте в редакторе новый документ, скопируйте в него приведенный ниже код CSS, и сохраните файл как style.css.
p {
width: 20em;
}
span {
background-color: lime;
}
Соедините таблицу стилей с документом HTML, вставляя следующую строку сразу перед тегом </head>:
<link rel="stylesheet" type="text/css" href="style.css" >
Сохраните оба файла и перезагрузите страницу в браузере.
Я сузил параграф, чтобы разрывы строк произошли в одних и тех же позициях даже в небольших окнах браузеров. Элемент span имеет теперь яркий цвет фона, чтобы сделать его более заметным.
Затем давайте модифицируем таблицу стилей, добавляя в правило три объявления для элемента span:
span {
position: relative;
top: 1em;
left: 2em;
background-color: lime;
}
Сохраните и перегрузите страницу в браузере, чтобы увидеть результат
Мы сместили элемент span по вертикали и горизонтали. Обратите внимание, как он теперь перекрывает следующую строку текста, и как появилась пустая дыра там, где он был раньше.
Такое смещение сгенерированного бокса, может быть не тем, что вы ожидали от кода. Вы определили top:1em, но бокс сместился вниз. Бокс также сместился вправо, даже хотя вы определили left:2em. Почему это происходит?
Ключом к пониманию, как эти свойства работают с относительным позиционированием, является осознание, что они определяют край, к которому применяется смещение, а не направление движения. Другими словами, свойство top смещает бокс относительно его верхнего края, свойство left смещает бокс относительно его левого края, и т.д. Бокс смещается от указанного края, поэтому top:1em смещает бокс на 1em от верхней позиции - другими словами, вниз. Отрицательные значения смещают бокс в противоположном направлении, поэтому bottom:-1em то же самое, что top:1em.
Это ведет к другому заключению: бессмысленно определять оба свойства, top и bottom (или left и right ) для одного элемента. Правила CSS говорят, что bottom должно игнорироваться, если определено top. Для горизонтального перемещения это зависит от свойства direction. Если направление задано слева направо, то игнорируется right, если заданы одновременно left и right ; если направление задано справа налево, то игнорируется left.
Рассматриваемый в данный момент пример объясняет
Предупреждение: этот пример несколько сложнее. Если вы новичок в мире
Существует тип компоновки, который очень распространен на Web-сайтах. Он состоит из верхнего колонтитула страницы, содержащего часто титульную графику, под которым располагаются бок о бок два или больше "столбцов". Ниже всего этого часто находится по всей ширине нижний колонтитул, возможно с заявлением об авторских правах или контактной информацией. рис 36.7 показывает пример такой компоновки.
(рис 36.7) Типичная многостолбцовая компоновка, со столбцами расположенными между верхним и нижним колонтитулами
Такой тип компоновки создавался раньше с помощью таблиц компоновки (в 1990 гг.). Это является злоупотреблением разметкой HTML для презентационных целей, что не рекомендуется, именно поэтому мы не изучаем такие методы в данном курсе. CSS предлагает способы достижения таких же результатов с помощью свойства display: и аналогичных средств, но основной недостаток такого решения состоит в том, что оно в настоящее время не поддерживается ни одной версией Internet Explorer, поэтому мы не будем рассматривать его также. Остаются только две возможности: плавающие элементы или абсолютное позиционирование. Оба метода имеют свои достоинства и недостатки, но если вы хотите иметь нижний колонтитул по всей ширине, и не знаете заранее, какой столбец будет самым длинным, то для обеспечения целостности дизайна потребуются плавающие элементы.
Проблема с плавающими элементами состоит в том, что они смещаются влево или вправо только до тех пор, пока не коснутся края блока предка, или другого плавающего элемента. Это означает, что плавающие столбцы должны появиться в разметке в правильном порядке. Но иногда желательно иметь порядок представления, отличающийся от исходного порядка. Вы можете захотеть, например, поместить контент до навигации, чтобы улучшить юзабилити для клавиатурной навигации, или для улучшения оптимизации для поисковой системы. Этого можно добиться, даже с помощью плавающих элементов, с помощью некоторого благоразумного использования отрицательных полей и
1. Скопируйте приведенный ниже код в текстовый редактор и сохраните файл как layout.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
<html lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Static and Relative Positioning</title>
<link rel="stylesheet" type="text/css" href="layout.css" >
</head>
<body>
<div id="header" >Header</div>
<div id="main" >Main content</div>
<div id="sidebar" >Sidebar</div>
<div id="nav" >Navigation</div>
<div id="footer" >Footer</div>
</body>
</html>
2. Затем создайте зачаточную таблицу стилей. Скопируйте приведенный ниже код в текстовый редактор и сохраните файл как layout.css.
#header {
background-color: #369;
color: #fff;
}
#sidebar {
background-color: #ff6;
}
#nav {
background-color: #ddd;
}
#footer {
border-top: 1px solid #369;
}
3. Сохраните оба файла и загрузите страницу в браузер. Пять разделов появятся в определенном порядке сверху вниз.
Предположим, что отдел разработки определил, что навигация должна быть слева, а боковая панель справа, а столбец основного контента посредине. Верхний и нижний колонтитулы должны распространяться на всю ширину страницы, и мы не знаем, какой из трех столбцов между ними будет самым длинным. Порядок исходного кода определяют эксперты по доступности и юзабилити и не обсуждается. Как можно объединить все эти требования в рабочую компоновку?
Мы собираемся добавить в разметку дополнительный элемент, чтобы это работало. Это неизбежно, но один дополнительный элемент вы должны пережить. Требуется элемент, который создает оболочку вокруг трех "столбцов".
4. Добавьте две выделенные ниже строки в документ HTML:
<div id="header" >Header</div>
<div id="wrapper" >
<div id="main" >Main content</div>
<div id="sidebar" >Sidebar</div>
<div id="nav" >Navigation</div>
</div>
<div id="footer" >Footer</div>
Дизайнеры (которые, к счастью, понимают доступность и независимость устройств) определили, что навигация должна иметь в ширину 12em, а боковая панель должна быть шириной 14em. Столбец основного контента должен иметь переменную ширину, так чтобы компоновка адаптировалась к различным размерам окон, так как компоновки с фиксированной шириной не слишком удобны для пользователей. Чтобы строки текста не были слишком длинными, мешая удобочитаемости, необходимо ограничить компоновку максимальной шириной. Чтобы избежать перекрытия в крайне узких окнах необходимо также ограничить компоновку минимальной шириной. В этих рамках компоновка должна быть центрирована по горизонтали в окне браузера.
5. Присваиваем значение ширины для навигации и боковой панели, и задаем ограничения по ширине, и общее центрирование, добавляя следующие правила внизу файла CSS:
body {
margin: 0 auto;
min-width: 40em;
max-width: 56em;
}
#sidebar {
width: 13em;
padding: 0 0.5em;
background-color: #ff6;
}
#nav {
width: 11em;
padding: 0 0.5em;
background-color: #ddd;
}
6. Сохраните эти файлы и перезагрузите - вы должны увидеть, что элементы желтой боковой панели и серой навигации имеют требуемую ширину. Если окно браузера достаточно широкое, вы увидите также, что вся страница ограничена по ширине и центрирована по горизонтали.
7. Попробуйте изменить размер окна и посмотрите, как изменится компоновка.
Примечание: При использовании Microsoft Internet Explorer версии 6 или более старой, вы не увидите результатов каких-либо ограничений по ширине. Это связано с тем, что эти версии IE не поддерживают минимальную и максимальную ширину (или высоту). Мы рассмотрим способ обойти это ограничение в конце примера. Фактически, вы получите странные результаты с этим примером, даже в IE7, так как Internet Explorer имеет много странных ошибок воспроизведения. Мы сосредоточимся на соответствующем стандарту способе реализации этого примера, и вернемся к средствам обхода в конце.
Если внимательно посмотреть на код, то можно увидеть, что ширина задана как 13em и 11em вместо 14em и 12em. Это связано с тем, что нам требуется некоторое горизонтальное заполнение, нежелательно, чтобы контент этих столбцов располагался до самых краев, так как это выглядит не слишком хорошо. Заполнение добавляется к ширине, поэтому 13em + 0.5em + 0.5em как раз и определяют требуемые 14em.
Итак, мы имеем базовые строительные блоки, но они появляются только один за другим. Нам требуются три столбца, поэтому нужно сделать их плавающими.
1. Добавьте в файл CSS следующие правила:
#main {
float: left;
}
#sidebar {
float: left;
width: 13em;
padding: 0 0.5em;
background-color: #ff6;
}
#nav {
float: left;
width: 11em;
padding: 0 0.5em;
background-color: #ddd;
}
Это сделает их плавающими, отлично, но они находятся в неправильном порядке. Также столбец основного контента слишком узкий. И что произошло с нашим нижним колонтитулом?
2. Давайте сначала разберемся с нижним колонтитулом. Проблема состоит в том, что три столбца являются плавающими, что извлекает их из потока документа. Нижний колонтитул выталкивается вверх рядом с верхним колонтитулом и содержащий текст линейный бокс укорачивается, так что слово "Footer" появляется справа от плавающих элементов. Можно исправить это, очищая нижний колонтитул от всех плавающих столбцов. Добавьте в файл CSS следующее правило:
#footer {
clear: left;
border-top: 1px solid #369;
}
3. Теперь займемся тремя столбцами. Это будет сделано шаг за шагом, и будет выглядеть достаточно уродливо в течение некоторого времени, но не отчаивайтесь - в конце все встанет на свои места.
Ключевым моментом в этом подходе является элемент оболочки. Мы зададим на нем левое и правое поле, которые соответствуют по ширине боковым столбцам (навигации и боковой панели). Столбец основного контента будет занимать всю ширину оболочки, в то время как боковые столбцы будут смещаться в пространство, освобожденное полями. Звучит замысловато? Не беспокойтесь, мы разберем это подробно, маленькими шагами. Сначала зададим для оболочки поля, добавляя следующее правило в файл CSS:
#wrapper {
margin: 0 14em 0 12em;
padding: 0 1em;
}
Помните, что значения в сокращенном свойстве margin определяются в следующем порядке: top, right, bottom, left. Мы задаем верхнее и нижнее поля как 0, правое поле равным 14em (для боковой панели) и левое поле как 12em (для навигации). Мы добавляем также горизонтальное заполнение в 1em, так как мы не хотим, чтобы контент вплотную подходил к боковым столбцам, ему нужно немного пространства для дыхания.
4. Следующий шаг состоит в задании для столбца основного контента всей ширины оболочки его предка; код временно также задаёт для него яркий цвет фона, итак делаем следующее:
#main {
float: left;
width: 100%;
background-color: lime;
}
5. Сохраните и перезагрузите - вы увидите ярко-зеленый столбец контента, с боковой панелью и навигацией ниже его. Вы также заметите, что с обеих сторон имеется много свободного пространства. Нам надо заставить наши боковые столбцы проскользнуть в это свободное пространство.
Затем мы перейдем к боковой панели - она является плавающей и имеет правильную ширину, но так как столбец #main имеет ширину 100%, он смещает боковую панель вниз. Как заставить ее подняться вверх и остаться рядом с #main, когда #main занимает всю ширину? Давайте сделаем это за два маленьких шага: сначала мы переместим ее вверх, а затем сместим ее на поле.
6. Здесь мы используем хитроумный прием, чтобы заставить плавающую боковую панель, которая была смещена вниз, снова переместиться вверх - сделаем следующее добавление в правило #:
#sidebar {
float: left;
width: 13em;
padding: 0 0.5em;
background-color: #ff6;
margin-left: -14em;
}
7. Сохраните и перезагрузите, и вы увидите, что боковая панель теперь находится на том же вертикальном уровне, что и столбец контента. Задавая отрицательное левое поле равным ширине боковой панели, мы смещаем элемент назад в оболочку и он не выталкивается вниз. Проблема теперь в том, что он перекрывает контент.
8. Нам нужно сместить панель на место поля так, чтобы она не упала снова вниз, и именно здесь начинает играть - наконец - #:
#sidebar {
float: left;
width: 13em;
padding: 0 0.5em;
background-color: #ff6;
margin-left: -14em;
position: relative;
left: 15em;
}
Отметим, что нужно сместить ее на 15em, а не 14em - потому что имеется правое заполнение в 1em для оболочки, которое необходимо пропустить. Боковая панель находится теперь там, где должна быть: на месте поля, рядом со столбцом контента, аккуратно выровненная с правыми краями верхнего и нижнего колонтитулов.
9. Теперь нужно сделать то же самое с навигацией, что делается аналогично, но со своими особенностями. Перемещение и сдвиг боковой панели выполняется легко, так как эти движения были по сути такими же, как и ширина столбца: отрицательное поле 14em и смещение на 14em+1em вправо. Но столбец навигации необходимо переместить через весь столбец контента и затем сдвинуть еще дальше на поле.
Нашим помощником здесь будут проценты. Значение процента на полях навигационного столбца будет задаваться относительно ширины его предка, оболочки. Чтобы переместить столбец через всю оболочку - добавьте свойство, выделенное ниже в правиле #nav:
#nav {
float: left;
width: 11em;
padding: 0 0.5em;
background-color: #ddd;
margin-left: -100%;
}
10. Сохраните и перезагрузите еще раз, и вы должны увидеть как навигация перекрывает левую сторону столбца контента. Теперь необходимо сместить ее на поле. Добавьте следующие выделенные свойства в правило для #nav:
#nav {
float: left;
width: 11em;
padding: 0 0.5em;
background-color: #ddd;
margin-left: -100%;
position: relative;
right: 13em;
}
Ширина навигации снова будет 12em, но еще надо пропустить 1em заполнения оболочки, поэтому требуется сместить бокс на 13em. Вы смещаете его влево, другими словами от правого края, поэтому и используется свойство right.
11. Удалите ярко-зеленый фон из столбца контента, и все будет готово.
Имеется две особенности этой компоновки, которые приводят к отказу в Internet Explorer 6 для Windows. Одна из них состоит в том, что IE6 не поддерживает свойства min-width и max-width, другая в том, что IE известен плохой работой с процентами.
Можно использовать собственное средство компании Microsoft expression() для эмуляции ограничений по ширине. Оно получает выражение JScript в качестве аргумента и возвращает значение этого выражения. Это может создавать проблемы с производительностью, если выражение требует много вычислений, так как оно вычисляется всякий раз, когда браузеру необходимо получить ширину body. Также требуется, чтобы был активен JScript, но можно добавить постепенное сокращение возможностей, поэтому, если, скажем, JScript не будет доступен, то дизайн будет откатываться к чему-то, что все еще доступно. В этом примере мы сделаем компоновку полностью гибкой вместо созданного выше текучего дизайна с ограничениями, если JScript будет деактивирован.
Рекомендованным способом обработки правил стилей исправления ошибок в Internet Explorer является использование "условных комментариев". Это свойство, имеющееся только в браузере Microsoft, которое встраивает условную логику в комментарии HTML (существует специальная статья по условным комментариям на сайте dev.opera.com (http://dev.opera.com/articles/view/supporting-ie-with-conditional-comments/).
Добавьте следующие строки в код HTML, сразу перед тегом </head>:
<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="layout-ie6.css"> <![endif]-->
Затем создайте новый файл с именем layout-ie6.css со следующим содержанием:
body {
width: 50em;
width: expression(w=document.documentElement.offsetWidth, em=document.getElementById("nav").offsetWidth/12,
(w<40*em?"40em"w>56*em? "56em": "auto")));
}
#wrapper {
height: 1em;
}
#nav {
margin-left: -22em;
margin-left: expression((-(document.getElementById("wrapper").clientWidth))+ "px");
left: 13em;
}
Это решает две проблемы в IE6. Вы используете выражения JScript для эмуляции свойств min-width и max-width, которые не поддерживает IE6, с гибким резервным значением 50em. Затем используется другое выражение JScript для задания левого поля в пикселях вместо процентов, снова с гибким резервом. Высота #wrapper служит только для запуска специфического свойства Microsoft hasLayout, которое требуется для правильной работы hasLayout в MSDN, но этот документ не так просто понять.
Что тогда насчет IE7? Этот браузер поддерживает min-width и max-width, но он тем не менее позиционирует навигационный элемент неправильно - все та же ошибка hasLayout, что и в IE6, снова поднимает свою ужасную голову. Необходимо включать hasLayout на элементе #wrapper. К счастью, это можно сделать таким образом, который не компрометирует поддерживающие стандарты браузеры, поэтому не нужно создавать отдельную таблицу стилей для IE7; можно просто добавить следующее правило для манипуляций с оболочкой:
#wrapper {
margin: 0 14em 0 12em;
padding: 0 1em;
min-height: 1em;
}
Задание минимальной высоты запускает hasLayout и не вызывает никаких проблем в других браузерах, и может поэтому находиться в основной таблице стилей.
Эти варианты обхода несовершенны, компоновка по-прежнему будет делать странные вещи в IE6 и IE7, если окно браузера изменяется до определенных размеров, хотя если страницу затем перезагрузить, компоновка снова будет выглядеть нормально.
Наиболее распространенное применение
Задание position:relative (без смещения бокса) помогает также при некоторых странных ошибках воспроизведения в Internet Explorer. Оно задает имеющее дурную славу внутреннее свойство hasLayout, которое оказывает сильное влияние на то, как Internet Explorer представляет элементы.
Статическое позиционирование используется обычно по умолчанию. Блочные боксы выкладываются вертикально в порядке исходного кода, в то время как строковые блоки выкладываются горизонтально в линейных боксах среди этих блочных боксов.
Предыдущая статья - Плавающие элементы и очистка
Следующая статья - Абсолютное и фиксированное позиционирование CSS
Томми Олссон является прагматичным пропагандистом стандартов Web и доступности, который живет в малонаселенной области центральной Швеции. Он написал свой первый документ HTML в 1993 г. и является в настоящее время техническим Web-мастером для правительственного агентства Швеции.
Он написал пока одну книгу - Полный справочник по CSS (совместно с Полем О'Брайеном) - и поддерживает крайне нерегулярно блог с названием Кукушка-аутист (http://www.autisticcuckoo.net/).
В этой статье мы начинаем подробное рассмотрение того, как можно использовать CSS для позиционирования элементов HTML в любом требуемом месте на странице, используя свойство CSS position и другие связанные свойства.
Свойство position в CSS имеет четыре законных значения (в дополнение к вездесущему inherit ): static, relative, absolute и fixed. Эти значения имеют существенное влияние на то, как изображается элемент. Два значения, static и relative, тесно связаны, и мы подробно рассмотрим их в этой статье. Значения absolute и fixed также тесно связаны, и будут рассмотрены в следующей статье этой серии.
Статья имеет следующую структуру:
Удивительный мир прямоугольников Статическое позиционирование Компоновка блочных боксов Компоновка строковых боксов Относительное позиционирование Много-столбцовая компоновка Создание столбцов Обход особенностей Internet Explorer Другие применения относительного позиционирования Заключение Контрольные вопросы
Поговорим немного о боксах CSS и HTML, которые были рассмотрены в статье 35 о плавающих элементах и очистке. Документ HTML состоит из ряда элементов, перемешанных с символьными данными (текст). Когда такой документ изображается на экране компьютера или печатается на бумаге, эти элементы генерируют прямоугольные боксы. Также как элементы HTML делятся на блочные и строковые элементы, боксы в CSS являются по сути либо блочными боксами, либо строковыми боксами. По умолчанию встроенная таблица стилей агента пользователя в браузере заставляет элементы HTML блочного уровня, такие как p и div, генерировать блочные боксы, в то время как строковые элементы, такие как strong и span, генерируют строковые боксы. Можно управлять типом генерируемого бокса, используя свойство display.
Сгенерированные элементами в документе боксы размещаются согласно четко определенному в спецификации CSS2.1 множеству правил. Эти правила написаны для относительно небольшого числа людей, которые пишут программное обеспечение браузеров, чтобы они знали, как работает CSS, хотя не для тех, кто создает Web-страницы для заработка - или как хобби. Именно поэтому существует весь этот курс! Как результат, спецификация может быть немного трудна для восприятия. В этой статье делается попытка объяснить основы таким образом, который лучше подходит для Web-дизайнеров и разработчиков.
На самом деле это неправильное название. Боксы со свойством position:static вообще не "позиционируются" в смысле CSS. Они просто выкладываются в том порядке, в котором они появляются в разметке, и занимают столько места, сколько им надо - это поведение по умолчанию, которое применяется, когда к коду HTML вообще не применяется никакой CSS.
Существуют фундаментальные различия в том, как выкладываются блочные боксы, по сравнению с тем, как выкладываются строковые боксы, поэтому давайте рассмотрим оба типа по очереди. Мы начнем с блочных боксов, так как они проще.
Если не применяются никакие специальные объявления CSS, блочные боксы выкладываются вертикально сверху вниз в том порядке, в котором они появляются в разметке. Каждый бокс обычно имеет ширину документа (элемента body ), но даже если сделать их более узкими, они не будут укладываться рядом бок о бок, даже если для этого имеется пространство, они по-прежнему будут выкладываться один под другим. Можно считать, что каждый блочный бокс имеет неявный разрыв строки перед и после себя, чтобы гарантировать, что он заканчивается на своей собственной "строке".
Вертикальное расстояние между двумя блочными боксами управляется свойством margin-bottom первого блока и свойством margin-top второго бокса (вы видели, как манипулировать ими ранее в курсе). Для боксов в нормальном потоке, т.е. боксов, которые не являются плавающими или абсолютно позиционированными,
Рассмотрим следующий фрагмент HTML:
<p style="margin-bottom:40px">This paragraph has a 40px bottom margin. </p> <p style="margin-top:20px">This paragraph has a 20px top margin. </p>
При просмотре в браузере поля схлопываются, как показано на рис 36.1.(рис 36.1) Схлопывание полей - расстояние между боксами равно 40px, а не 60px
Блочный бокс будет содержать либо только блочные боксы, либо только строковые боксы. Если блочный элемент содержит смесь блочных и строковых потомков - что допустимо, хотя семантически сомнительно, будут генерироваться так называемые анонимные блочные боксы для охвата строковых боксов потомков, так чтобы предок содержал только блочные боксы.
Можно определить размеры блочного бокса с помощью свойств .(рис 36.2) Блочные боксы укладываются вертикально
Этот раздел может оказаться трудным для понимания, если вы новичок в CSS, но не отчаивайтесь, если не поймете его при первом чтении. Поэкспериментируйте немного самостоятельно, что будет, вероятно, лучшим способом хорошо понять эти вопросы - убедитесь только в том, что используете при тестировании хороший, соответствующий стандартам браузер, такой как Opera или Firefox.
Строковые боксы генерируются по умолчанию строковыми элементами HTML, но существуют также анонимные строковые боксы, генерируемые для охвата текстового контента элементов.
Строковые боксы располагаются горизонтально, или один за другим, в том порядке, в котором они появляются в разметке. В зависимости от свойства direction, строковые боксы будут располагаться либо слева направо ( direction: ), либо справа налево ( direction:rtl ). Направление слева направо используется, например, для европейских языков, в то время как направление справа налево используется с такими языками, как арабский или иврит.
Множество строковых боксов, которые составляют строку на экране (или бумаге) заключаются еще в один прямоугольник, называемый линейным боксом. Линейные боксы выкладываются вертикально в своих предках блочного уровня, без дополнительного пробела между ними. Можно изменить высоту линейных боксов с помощью свойства line-height. Для строковых боксов нельзя определить никакие размеры. Можно определить горизонтальные поля, но не
В случае необходимости строковый бокс будет делиться на несколько строковых боксов, распределенных на два или большее количество строковых боксов. Когда происходит такое деление, любые горизонтальные поля и заполнение, и любые вертикальные границы будут применяться только перед первым боксом и после последнего бокса. Рассмотрим документ со следующим правилом для элементов em:
em {
margin: 0 2em;
padding: 0 1em;
border: 1px dotted blue;
}
Это правило создает компоновку, до некоторой степени похожую на рис 36.3, когда оформленные элементы разбиваются на несколько строк.(рис 36.3) Поля, заполнение и граница не применяются в точках разрыва
Вертикальное выравнивание строковых боксов в охватывающем линейном боксе определяется свойством .(рис 36.4) Буквы располагаются на воображаемой базовой линии
Отметим, что свойство показывает несколько маленьких изображений с различным вертикальным выравниванием.(рис 36.5) Изображения, размещенные с помощью настроек свойства CSS vertical-align
Когда общая ширина строковых боксов в линейном боксе меньше ширины самого линейного бокса, горизонтальное выравнивание управляется свойством показывает результат применения различных значений свойства text-align к тексту в ячейках таблицы.(рис 36.6) Управление выравниванием текста с помощью свойства text-align
Элемент с position:relative сначала размещается также как любой top, bottom, left и right.
Необходимо помнить об относительном позиционировании, что смещается только сгенерированный бокс. Элемент по-прежнему остается там, где он был в потоке статического документа. Именно здесь он "занимает место" насколько это касается других элементов. Это означает, что смещенный бокс может перекрывать боксы других элементов, так как они по-прежнему действуют, как если бы относительно позиционированный элемент остался там, где он должен был быть, перед применением позиционирования. Что касается потока документа, то элемент не смещается - это просто конечный визуальный результат, который показывает смещенный бокс. Давайте посмотрим это на практике.
1. Скопируйте приведенный ниже код HTML в новый документ в текстовом редакторе и сохраните его как relative.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Relative Positioning</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing elit.
Curabitur feugiat feugiat purus.
Aenean eu metus. Nulla facilisi.
Pellentesque quis justo vel massa suscipit sagittis.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Quisque mollis, justo vel rhoncus aliquam, urna tortor varius lacus, ut tincidunt metus arcu vel lorem.
Praesent metus orci, adipiscing eget, fermentum ut, pellentesque non, dui.
Sed sagittis, <span>metus a semper</span> dictum, sem libero sagittis nunc, vitae adipiscing leo neque vitae tellus.
Duis quis orci quis nisl nonummy dapibus.
Etiam ante. Phasellus imperdiet arcu at odio.
In hac habitasse platea dictumst. Aenean metus.
Quisque a nibh. Morbi mattis ullamcorper ipsum.
Nullam odio urna, feugiat sed, bibendum sed, vulputate in, magna.
Nulla tortor justo, convallis iaculis, porta condimentum, interdum nec, arcu.
Proin lectus purus, vehicula et, cursus ut, nonummy et, diam. </p>
</body>
</html>
2. Откройте этот файл в Web-браузере, чтобы увидеть, как он выглядит на этом этапе -- вы должны увидеть только простой параграф текста.
Создайте в редакторе новый документ, скопируйте в него приведенный ниже код CSS, и сохраните файл как style.css.
p {
width: 20em;
}
span {
background-color: lime;
}
Соедините таблицу стилей с документом HTML, вставляя следующую строку сразу перед тегом </head>:
<link rel="stylesheet" type="text/css" href="style.css" >
Сохраните оба файла и перезагрузите страницу в браузере.
Я сузил параграф, чтобы разрывы строк произошли в одних и тех же позициях даже в небольших окнах браузеров. Элемент span имеет теперь яркий цвет фона, чтобы сделать его более заметным.
Затем давайте модифицируем таблицу стилей, добавляя в правило три объявления для элемента span:
span {
position: relative;
top: 1em;
left: 2em;
background-color: lime;
}
Сохраните и перегрузите страницу в браузере, чтобы увидеть результат
Мы сместили элемент span по вертикали и горизонтали. Обратите внимание, как он теперь перекрывает следующую строку текста, и как появилась пустая дыра там, где он был раньше.
Такое смещение сгенерированного бокса, может быть не тем, что вы ожидали от кода. Вы определили top:1em, но бокс сместился вниз. Бокс также сместился вправо, даже хотя вы определили left:2em. Почему это происходит?
Ключом к пониманию, как эти свойства работают с относительным позиционированием, является осознание, что они определяют край, к которому применяется смещение, а не направление движения. Другими словами, свойство top смещает бокс относительно его верхнего края, свойство left смещает бокс относительно его левого края, и т.д. Бокс смещается от указанного края, поэтому top:1em смещает бокс на 1em от верхней позиции - другими словами, вниз. Отрицательные значения смещают бокс в противоположном направлении, поэтому bottom:-1em то же самое, что top:1em.
Это ведет к другому заключению: бессмысленно определять оба свойства, top и bottom (или left и right ) для одного элемента. Правила CSS говорят, что bottom должно игнорироваться, если определено top. Для горизонтального перемещения это зависит от свойства direction. Если направление задано слева направо, то игнорируется right, если заданы одновременно left и right ; если направление задано справа налево, то игнорируется left.
Рассматриваемый в данный момент пример объясняет
Предупреждение: этот пример несколько сложнее. Если вы новичок в мире
Существует тип компоновки, который очень распространен на Web-сайтах. Он состоит из верхнего колонтитула страницы, содержащего часто титульную графику, под которым располагаются бок о бок два или больше "столбцов". Ниже всего этого часто находится по всей ширине нижний колонтитул, возможно с заявлением об авторских правах или контактной информацией. рис 36.7 показывает пример такой компоновки.(рис 36.7) Типичная многостолбцовая компоновка, со столбцами расположенными между верхним и нижним колонтитулами
Такой тип компоновки создавался раньше с помощью таблиц компоновки (в 1990 гг.). Это является злоупотреблением разметкой HTML для презентационных целей, что не рекомендуется, именно поэтому мы не изучаем такие методы в данном курсе. CSS предлагает способы достижения таких же результатов с помощью свойства display: и аналогичных средств, но основной недостаток такого решения состоит в том, что оно в настоящее время не поддерживается ни одной версией Internet Explorer, поэтому мы не будем рассматривать его также. Остаются только две возможности: плавающие элементы или абсолютное позиционирование. Оба метода имеют свои достоинства и недостатки, но если вы хотите иметь нижний колонтитул по всей ширине, и не знаете заранее, какой столбец будет самым длинным, то для обеспечения целостности дизайна потребуются плавающие элементы.
Проблема с плавающими элементами состоит в том, что они смещаются влево или вправо только до тех пор, пока не коснутся края блока предка, или другого плавающего элемента. Это означает, что плавающие столбцы должны появиться в разметке в правильном порядке. Но иногда желательно иметь порядок представления, отличающийся от исходного порядка. Вы можете захотеть, например, поместить контент до навигации, чтобы улучшить юзабилити для клавиатурной навигации, или для улучшения оптимизации для поисковой системы. Этого можно добиться, даже с помощью плавающих элементов, с помощью некоторого благоразумного использования отрицательных полей и
1. Скопируйте приведенный ниже код в текстовый редактор и сохраните файл как layout.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
<html lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Static and Relative Positioning</title>
<link rel="stylesheet" type="text/css" href="layout.css" >
</head>
<body>
<div id="header" >Header</div>
<div id="main" >Main content</div>
<div id="sidebar" >Sidebar</div>
<div id="nav" >Navigation</div>
<div id="footer" >Footer</div>
</body>
</html>
2. Затем создайте зачаточную таблицу стилей. Скопируйте приведенный ниже код в текстовый редактор и сохраните файл как layout.css.
#header {
background-color: #369;
color: #fff;
}
#sidebar {
background-color: #ff6;
}
#nav {
background-color: #ddd;
}
#footer {
border-top: 1px solid #369;
}
3. Сохраните оба файла и загрузите страницу в браузер. Пять разделов появятся в определенном порядке сверху вниз.
Предположим, что отдел разработки определил, что навигация должна быть слева, а боковая панель справа, а столбец основного контента посредине. Верхний и нижний колонтитулы должны распространяться на всю ширину страницы, и мы не знаем, какой из трех столбцов между ними будет самым длинным. Порядок исходного кода определяют эксперты по доступности и юзабилити и не обсуждается. Как можно объединить все эти требования в рабочую компоновку?
Мы собираемся добавить в разметку дополнительный элемент, чтобы это работало. Это неизбежно, но один дополнительный элемент вы должны пережить. Требуется элемент, который создает оболочку вокруг трех "столбцов".
4. Добавьте две выделенные ниже строки в документ HTML:
<div id="header" >Header</div>
<div id="wrapper" >
<div id="main" >Main content</div>
<div id="sidebar" >Sidebar</div>
<div id="nav" >Navigation</div>
</div>
<div id="footer" >Footer</div>
Дизайнеры (которые, к счастью, понимают доступность и независимость устройств) определили, что навигация должна иметь в ширину 12em, а боковая панель должна быть шириной 14em. Столбец основного контента должен иметь переменную ширину, так чтобы компоновка адаптировалась к различным размерам окон, так как компоновки с фиксированной шириной не слишком удобны для пользователей. Чтобы строки текста не были слишком длинными, мешая удобочитаемости, необходимо ограничить компоновку максимальной шириной. Чтобы избежать перекрытия в крайне узких окнах необходимо также ограничить компоновку минимальной шириной. В этих рамках компоновка должна быть центрирована по горизонтали в окне браузера.
5. Присваиваем значение ширины для навигации и боковой панели, и задаем ограничения по ширине, и общее центрирование, добавляя следующие правила внизу файла CSS:
body {
margin: 0 auto;
min-width: 40em;
max-width: 56em;
}
#sidebar {
width: 13em;
padding: 0 0.5em;
background-color: #ff6;
}
#nav {
width: 11em;
padding: 0 0.5em;
background-color: #ddd;
}
6. Сохраните эти файлы и перезагрузите - вы должны увидеть, что элементы желтой боковой панели и серой навигации имеют требуемую ширину. Если окно браузера достаточно широкое, вы увидите также, что вся страница ограничена по ширине и центрирована по горизонтали.
7. Попробуйте изменить размер окна и посмотрите, как изменится компоновка.
Примечание: При использовании Microsoft Internet Explorer версии 6 или более старой, вы не увидите результатов каких-либо ограничений по ширине. Это связано с тем, что эти версии IE не поддерживают минимальную и максимальную ширину (или высоту). Мы рассмотрим способ обойти это ограничение в конце примера. Фактически, вы получите странные результаты с этим примером, даже в IE7, так как Internet Explorer имеет много странных ошибок воспроизведения. Мы сосредоточимся на соответствующем стандарту способе реализации этого примера, и вернемся к средствам обхода в конце.
Если внимательно посмотреть на код, то можно увидеть, что ширина задана как 13em и 11em вместо 14em и 12em. Это связано с тем, что нам требуется некоторое горизонтальное заполнение, нежелательно, чтобы контент этих столбцов располагался до самых краев, так как это выглядит не слишком хорошо. Заполнение добавляется к ширине, поэтому 13em + 0.5em + 0.5em как раз и определяют требуемые 14em.
Итак, мы имеем базовые строительные блоки, но они появляются только один за другим. Нам требуются три столбца, поэтому нужно сделать их плавающими.
1. Добавьте в файл CSS следующие правила:
#main {
float: left;
}
#sidebar {
float: left;
width: 13em;
padding: 0 0.5em;
background-color: #ff6;
}
#nav {
float: left;
width: 11em;
padding: 0 0.5em;
background-color: #ddd;
}
Это сделает их плавающими, отлично, но они находятся в неправильном порядке. Также столбец основного контента слишком узкий. И что произошло с нашим нижним колонтитулом?
2. Давайте сначала разберемся с нижним колонтитулом. Проблема состоит в том, что три столбца являются плавающими, что извлекает их из потока документа. Нижний колонтитул выталкивается вверх рядом с верхним колонтитулом и содержащий текст линейный бокс укорачивается, так что слово "Footer" появляется справа от плавающих элементов. Можно исправить это, очищая нижний колонтитул от всех плавающих столбцов. Добавьте в файл CSS следующее правило:
#footer {
clear: left;
border-top: 1px solid #369;
}
3. Теперь займемся тремя столбцами. Это будет сделано шаг за шагом, и будет выглядеть достаточно уродливо в течение некоторого времени, но не отчаивайтесь - в конце все встанет на свои места.
Ключевым моментом в этом подходе является элемент оболочки. Мы зададим на нем левое и правое поле, которые соответствуют по ширине боковым столбцам (навигации и боковой панели). Столбец основного контента будет занимать всю ширину оболочки, в то время как боковые столбцы будут смещаться в пространство, освобожденное полями. Звучит замысловато? Не беспокойтесь, мы разберем это подробно, маленькими шагами. Сначала зададим для оболочки поля, добавляя следующее правило в файл CSS:
#wrapper {
margin: 0 14em 0 12em;
padding: 0 1em;
}
Помните, что значения в сокращенном свойстве margin определяются в следующем порядке: top, right, bottom, left. Мы задаем верхнее и нижнее поля как 0, правое поле равным 14em (для боковой панели) и левое поле как 12em (для навигации). Мы добавляем также горизонтальное заполнение в 1em, так как мы не хотим, чтобы контент вплотную подходил к боковым столбцам, ему нужно немного пространства для дыхания.
4. Следующий шаг состоит в задании для столбца основного контента всей ширины оболочки его предка; код временно также задаёт для него яркий цвет фона, итак делаем следующее:
#main {
float: left;
width: 100%;
background-color: lime;
}
5. Сохраните и перезагрузите - вы увидите ярко-зеленый столбец контента, с боковой панелью и навигацией ниже его. Вы также заметите, что с обеих сторон имеется много свободного пространства. Нам надо заставить наши боковые столбцы проскользнуть в это свободное пространство.
Затем мы перейдем к боковой панели - она является плавающей и имеет правильную ширину, но так как столбец #main имеет ширину 100%, он смещает боковую панель вниз. Как заставить ее подняться вверх и остаться рядом с #main, когда #main занимает всю ширину? Давайте сделаем это за два маленьких шага: сначала мы переместим ее вверх, а затем сместим ее на поле.
6. Здесь мы используем хитроумный прием, чтобы заставить плавающую боковую панель, которая была смещена вниз, снова переместиться вверх - сделаем следующее добавление в правило #:
#sidebar {
float: left;
width: 13em;
padding: 0 0.5em;
background-color: #ff6;
margin-left: -14em;
}
7. Сохраните и перезагрузите, и вы увидите, что боковая панель теперь находится на том же вертикальном уровне, что и столбец контента. Задавая отрицательное левое поле равным ширине боковой панели, мы смещаем элемент назад в оболочку и он не выталкивается вниз. Проблема теперь в том, что он перекрывает контент.
8. Нам нужно сместить панель на место поля так, чтобы она не упала снова вниз, и именно здесь начинает играть - наконец - #:
#sidebar {
float: left;
width: 13em;
padding: 0 0.5em;
background-color: #ff6;
margin-left: -14em;
position: relative;
left: 15em;
}
Отметим, что нужно сместить ее на 15em, а не 14em - потому что имеется правое заполнение в 1em для оболочки, которое необходимо пропустить. Боковая панель находится теперь там, где должна быть: на месте поля, рядом со столбцом контента, аккуратно выровненная с правыми краями верхнего и нижнего колонтитулов.
9. Теперь нужно сделать то же самое с навигацией, что делается аналогично, но со своими особенностями. Перемещение и сдвиг боковой панели выполняется легко, так как эти движения были по сути такими же, как и ширина столбца: отрицательное поле 14em и смещение на 14em+1em вправо. Но столбец навигации необходимо переместить через весь столбец контента и затем сдвинуть еще дальше на поле.
Нашим помощником здесь будут проценты. Значение процента на полях навигационного столбца будет задаваться относительно ширины его предка, оболочки. Чтобы переместить столбец через всю оболочку - добавьте свойство, выделенное ниже в правиле #nav:
#nav {
float: left;
width: 11em;
padding: 0 0.5em;
background-color: #ddd;
margin-left: -100%;
}
10. Сохраните и перезагрузите еще раз, и вы должны увидеть как навигация перекрывает левую сторону столбца контента. Теперь необходимо сместить ее на поле. Добавьте следующие выделенные свойства в правило для #nav:
#nav {
float: left;
width: 11em;
padding: 0 0.5em;
background-color: #ddd;
margin-left: -100%;
position: relative;
right: 13em;
}
Ширина навигации снова будет 12em, но еще надо пропустить 1em заполнения оболочки, поэтому требуется сместить бокс на 13em. Вы смещаете его влево, другими словами от правого края, поэтому и используется свойство right.
11. Удалите ярко-зеленый фон из столбца контента, и все будет готово.
Имеется две особенности этой компоновки, которые приводят к отказу в Internet Explorer 6 для Windows. Одна из них состоит в том, что IE6 не поддерживает свойства min-width и max-width, другая в том, что IE известен плохой работой с процентами.
Можно использовать собственное средство компании Microsoft expression() для эмуляции ограничений по ширине. Оно получает выражение JScript в качестве аргумента и возвращает значение этого выражения. Это может создавать проблемы с производительностью, если выражение требует много вычислений, так как оно вычисляется всякий раз, когда браузеру необходимо получить ширину body. Также требуется, чтобы был активен JScript, но можно добавить постепенное сокращение возможностей, поэтому, если, скажем, JScript не будет доступен, то дизайн будет откатываться к чему-то, что все еще доступно. В этом примере мы сделаем компоновку полностью гибкой вместо созданного выше текучего дизайна с ограничениями, если JScript будет деактивирован.
Рекомендованным способом обработки правил стилей исправления ошибок в Internet Explorer является использование "условных комментариев". Это свойство, имеющееся только в браузере Microsoft, которое встраивает условную логику в комментарии HTML (существует специальная статья по условным комментариям на сайте dev.opera.com (http://dev.opera.com/articles/view/supporting-ie-with-conditional-comments/).
Добавьте следующие строки в код HTML, сразу перед тегом </head>:
<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="layout-ie6.css"> <![endif]-->
Затем создайте новый файл с именем layout-ie6.css со следующим содержанием:
body {
width: 50em;
width: expression(w=document.documentElement.offsetWidth, em=document.getElementById("nav").offsetWidth/12,
(w<40*em?"40em"w>56*em? "56em": "auto")));
}
#wrapper {
height: 1em;
}
#nav {
margin-left: -22em;
margin-left: expression((-(document.getElementById("wrapper").clientWidth))+ "px");
left: 13em;
}
Это решает две проблемы в IE6. Вы используете выражения JScript для эмуляции свойств min-width и max-width, которые не поддерживает IE6, с гибким резервным значением 50em. Затем используется другое выражение JScript для задания левого поля в пикселях вместо процентов, снова с гибким резервом. Высота #wrapper служит только для запуска специфического свойства Microsoft hasLayout, которое требуется для правильной работы hasLayout в MSDN, но этот документ не так просто понять.
Что тогда насчет IE7? Этот браузер поддерживает min-width и max-width, но он тем не менее позиционирует навигационный элемент неправильно - все та же ошибка hasLayout, что и в IE6, снова поднимает свою ужасную голову. Необходимо включать hasLayout на элементе #wrapper. К счастью, это можно сделать таким образом, который не компрометирует поддерживающие стандарты браузеры, поэтому не нужно создавать отдельную таблицу стилей для IE7; можно просто добавить следующее правило для манипуляций с оболочкой:
#wrapper {
margin: 0 14em 0 12em;
padding: 0 1em;
min-height: 1em;
}
Задание минимальной высоты запускает hasLayout и не вызывает никаких проблем в других браузерах, и может поэтому находиться в основной таблице стилей.
Эти варианты обхода несовершенны, компоновка по-прежнему будет делать странные вещи в IE6 и IE7, если окно браузера изменяется до определенных размеров, хотя если страницу затем перезагрузить, компоновка снова будет выглядеть нормально.
Наиболее распространенное применение
Задание position:relative (без смещения бокса) помогает также при некоторых странных ошибках воспроизведения в Internet Explorer. Оно задает имеющее дурную славу внутреннее свойство hasLayout, которое оказывает сильное влияние на то, как Internet Explorer представляет элементы.
Статическое позиционирование используется обычно по умолчанию. Блочные боксы выкладываются вертикально в порядке исходного кода, в то время как строковые блоки выкладываются горизонтально в линейных боксах среди этих блочных боксов.
Предыдущая статья - Плавающие элементы и очистка
Следующая статья - Абсолютное и фиксированное позиционирование CSS
Томми Олссон является прагматичным пропагандистом стандартов Web и доступности, который живет в малонаселенной области центральной Швеции. Он написал свой первый документ HTML в 1993 г. и является в настоящее время техническим Web-мастером для правительственного агентства Швеции.
Он написал пока одну книгу - Полный справочник по CSS (совместно с Полем О'Брайеном) - и поддерживает крайне нерегулярно блог с названием Кукушка-аутист (http://www.autisticcuckoo.net/).
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.