67256

Статичне і відносне позиціонування CSS

Лекция

Информатика, кибернетика и программирование

Властивість position в CSS має чотири законних значення (на додаток до всюдисущому inherit): static, relative, absolute і fixed. Ці значення мають суттєвий вплив на те, як змальовується елемент. Два значення, static і relative, тісно пов’язані, й ми докладно розглянемо їх у цій темі.

Украинкский

2014-09-06

260.5 KB

1 чел.

Тема № 10: «Статичне і відносне позиціонування CSS»

ЗМІСТ

Вступ

Дивовижний світ прямокутників

Статичне позиціонування 

Компонування блокових боксів

Компонування строкових боксів

Відносне позиціонування 

Багатостовпцеве компонування 

Інші застосування відносного позиціонування

Резюме

Контрольні запитання


Вступ

У цій темі ми починаємо докладний розгляд того, як можна використовувати CSS для позиціонування елементів HTML у будь-якому необхідному місці на сторінці, використовуючи властивість CSS position та інші пов’язані властивості.

Властивість position в CSS має чотири законних значення (на додаток до всюдисущому inherit): static, relative, absolute і fixed. Ці значення мають суттєвий вплив на те, як змальовується елемент. Два значення, static і relative, тісно пов’язані, й ми докладно розглянемо їх у цій темі. Значення absolute і fixed також тісно пов’язані, і будуть розглянуті в наступній темі цього курсу.

  1.  Дивовижний світ прямокутників

Поговоримо трохи про бокси CSS і HTML, які були розглянуті у попередніх темах. Документ HTML складається з ряду елементів, перемішаних з символьними даними (текст). Коли такий документ зображується на екрані комп’ютера або друкується на папері, ці елементи генерують прямокутні бокси. Так само як елементи HTML діляться на блокові і рядкові елементи, бокси в CSS є по суті або блоковими боксами, або строковими боксами. За замовчуванням вбудована таблиця стилів агента користувача в браузері змушує елементи HTML блокового рівня, такі як p і div, генерувати блокові бокси, в той час як рядкові елементи, такі як strong та span, генерують рядкові бокси. Можна керувати типом боксу, що генерується, використовуючи властивість display.

Згенеровані елементами в документі бокси розміщуються згідно з чітко визначеною у специфікації CSS 2.1 множиною правил. Ці правила написані для відносно невеликого числа людей, які пишуть програмне забезпечення браузерів, щоб вони знали, як працює CSS, хоча не для тих, хто створює Web-сторінки для заробітку – або як хобі. Саме тому існує весь цей курс! Як результат, специфікація може бути трохи важка для сприйняття. У цій темі робиться спроба пояснити основи таким чином, який краще підходить для Web-дизайнерів і розробників.

  1.  Статичне позиціонування

Насправді, це неправильна назва. Бокси з властивістю position: static взагалі не “позиціонуються” в сенсі CSS. Вони просто викладаються в тому порядку, в якому вони з’являються в розмітці, й займають стільки місця, скільки їм треба – це поведінка за замовчуванням, що застосовується, коли до коду HTML взагалі не застосовується ніякий CSS.

Існують фундаментальні відмінності в тому, як викладаються блокові бокси, в порівнянні з тим, як викладаються рядкові бокси, тому давайте розглянемо обидва типи по черзі. Ми почнемо з блокових боксів, так як вони простіше.

Компонування блокових боксів

Якщо не застосовуються ніякі спеціальні оголошення CSS, блочні бокси викладаються вертикально зверху вниз в тому порядку, в якому вони з’являються в розмітці. Кожен бокс зазвичай має ширину документа (елемента body), але, навіть якщо зробити їх більш вузькими, вони не будуть укладатися поруч пліч-о-пліч, навіть якщо для цього є простір, вони як і раніше будуть викладатися один під іншим. Можна вважати, що кожен блоковий бокс має неявний розрив рядка перед і після себе, щоб гарантувати, що він закінчується на своєму власному “рядку”.

Вертикальна відстань між двома блочними боксами управляється властивістю margin-bottom першого блоку і властивістю margin-top другого боксу (ви бачили, як маніпулювати ними раніше в курсі). Для боксів у нормальному потоці, тобто боксів, які не є плаваючими або абсолютно позиційованими, вертикальні поля між двома суміжними блочними боксами будуть схлопуватися – перекриватися – так що кінцевий результат не буде сумою двох полів, але великим з них, як показано нижче на малюнку 1.

Розглянемо наступний фрагмент 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>

При перегляді в браузері поля “схлопуються”, як показано на мал.1.

Мал.1. “Схлопування” полів – відстань між боксами дорівнює 40px, а не 60px

Блоковий бокс буде містити або тільки блокові бокси, або тільки рядкові бокси. Якщо блоковий елемент містить суміш блочних та строкових нащадків – що припустимо, хоча семантично сумнівно, будуть генеруватися так звані анонімні блокові бокси для охоплення строкових боксів нащадків, так щоб предок містив тільки блокові бокси.

Можна визначити розміри блочного боксу за допомогою властивостей width і height. Можна також задати на них вертикальні і горизонтальні поля. Початковим значення (за замовчуванням) для width і height буде auto, а початкове значення для властивостей полів буде 0. Ці фактори разом означають, що блоковий бокс буде за замовчуванням такої ж ширини, як і його предок, як показує мал.2.

Мал.2. Блокові бокси укладаються вертикально

Компонування строкових боксів

Цей розділ може виявитися важким для розуміння, якщо ви новачок в CSS, але не впадайте у відчай, якщо не зрозумієте його при першому читанні. Поекспериментуйте трохи самостійно, що буде, ймовірно, кращим способом добре зрозуміти ці питання – переконайтеся тільки в тому, що використовуєте при тестуванні хороший, відповідний стандартам браузер, такий як Opera або Firefox.

Строкові бокси генеруються за замовчуванням строковими елементами HTML, але існують також анонімні рядкові бокси, що генеруються для охоплення текстового контенту елементів.

Строкові бокси розташовуються горизонтально, або один за іншим, в тому порядку, в якому вони з’являються в розмітці. Залежно від властивості direction, рядкові бокси будуть розташовуватися або зліва направо (direction: ltr), або справа наліво (direction: rtl). Напрям зліва направо використовується, наприклад, для європейських мов, у той час як напрямок справа наліво використовується з такими мовами, як арабський чи іврит.

Безліч строкових боксів, які складають рядок на екрані (або папері) заключаються ще в один прямокутник, званий лінійним боксом. Лінійні бокси викладаються вертикально в своїх предках блокового рівня, без додаткового пробілу між ними. Можна змінити висоту лінійних боксів за допомогою властивості line-height. Для строкових боксів не можна визначити ніякі розміри. Можна визначити горизонтальні поля, але не вертикальні поля.

У разі необхідності рядковий бокс буде ділитися на кілька строкових боксів, розподілених на два або більшу кількість строкових боксів. Коли відбувається такий розподіл, будь-які горизонтальні поля і заповнення, і будь-які вертикальні кордони будуть застосовуватися тільки перед першим боксом і після останнього боксу. Розглянемо документ з наступним правилом для елементів em:

em {

margin: 0 2em;

padding: 0 1em;

border: 1px dotted blue;

}

Це правило створює компонування, до деякої міри схоже на мал.3, коли оформлені елементи розбиваються на кілька рядків.

Мал.3. Поля, заповнення і кордон не застосовуються в точках розриву

Вертикальне вирівнювання строкових боксів у лінійному боксі, що охоплює, визначається властивістю vertical-align. Значенням за замовчуванням є baseline, яке означає, що рядкові бокси вирівнюються так, що вирівнюються базові лінії їх тексту. Базова лінія є уявною лінією, на якій розташовуються літери без нижніх виносних елементів. Вона розташовується на деякій відстані над нижнім краєм лінійного боксу, щоб залишити простір для виносних елементів прописних літер, як показано на мал.4.

Мал.4. Літери розташовуються на уявній базовій лінії

Відзначимо, що властивість vertical-align застосовується тільки до строкових боксів і комірок таблиці, і не успадковується. Мал.5 показує кілька маленьких зображень з різним вертикальним вирівнюванням.

Мал.5. Маленькі зображення з різним вертикальним вирівнюванням

Коли загальна ширина строкових боксів у лінійному боксі менша ширини самого лінійного боксу, горизонтальне вирівнювання управляється властивістю text-align. При використанні text-align: justify між рядковими боксами вставляється додатковий простір, якщо буде потрібно, щоб вирівняти контент зліва і справа. Ця властивість застосовується до блокових боксів, клітинок таблиці і успадковується – мал.6 показує результат застосування різних значень властивості text-align до тексту у клітинках таблиці.

Мал.6. Контроль вирівнювання тексту за допомогою властивості text-align.

  1.  Відносне позиціонування

Відносне позиціонування є схемою позиціювання в CSS, але воно більш тісно пов’язано зі статичним “позиціонуванням”, ніж з іншими родичами – абсолютним і фіксованим позиціонуванням.

Елемент з 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>

  1.  Відкрийте цей файл у Web-браузері, щоб побачити, як він виглядає на цьому етапі – ви повинні побачити тільки простий параграф тексту.
  2.  Створіть у редакторі новий документ, скопіюйте в нього наведений нижче код CSS, і збережіть його як style.css.

p {

width: 20em;

}

span {

background-color: lime;

}

  1.  З’єднайте таблицю стилів з документом HTML, вставляючи наступний рядок відразу перед тегом </head> :

<link rel="stylesheet" type="text/css" href="style.css" >

  1.  Збережіть обидва файли і перезавантажте сторінку в браузері. Я звузив параграф, щоб розриви рядків відбулися в одних і тих же позиціях навіть у невеликих вікнах браузерів. Елемент span має тепер яскравий колір фону, щоб зробити його більш помітним.
  2.  Потім давайте модифікуємо таблицю стилів, додаючи в правило три оголошення для елемента span:

span {

position: relative;

top: 1em;

left: 2em;

background-color: lime;

}

  1.  Збережіть та перезавантажте сторінку в браузері, щоб побачити результат відносного позиціонування.

Ми змістили елемент 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.

Розглянутий в даний момент приклад пояснює відносне позиціонування, але він здається не дуже корисним, чи не так? Для чого ж використовується відносне позиціонування? Давайте подивимося на більш розвинений приклад.

Багатостовпцеве компонування

Попередження: цей приклад дещо складніший. Якщо ви новачок в світі CSS, то він може навіть здатися страшним, але ми розглянемо його поступово, не поспішаючи, розбираючи по ходу скоєні дії. Якщо ви ще не прочитали тему про плаваючі елементи й очищення, то зараз найбільш відповідний час це зробити.

Існує тип компонування, який дуже поширений на Web-сайтах. Він складається з верхнього колонтитула сторінки, що містить часто титульну графіку, під яким розташовуються пліч-о-пліч два або більше “стовпців”. Нижче всього цього часто знаходиться по всій ширині нижній колонтитул, можливо з заявою про авторські права або контактною інформацією. Мал.7 показує приклад такого компонування.

Мал.7. Типове багатостовпцеве компонування, із стовпцями розташованими між верхнім і нижнім колонтитулами

Такий тип компонування створювався раніше за допомогою таблиць компонування (у 1990 рр..). Це є зловживанням розміткою HTML для презентаційних цілей, що не рекомендується, саме тому ми не вивчаємо такі методи в даному курсі. CSS пропонує способи досягнення таких же результатів за допомогою властивості display: table-cell і аналогічних засобів, але основний недолік такого рішення полягає в тому, що воно в даний час не підтримується жодною версією Internet Explorer, тому ми не будемо розглядати його також. Залишаються тільки дві можливості: плаваючі елементи або абсолютне позиціонування. Обидва методи мають свої переваги і недоліки, але якщо ви хочете мати нижній колонтитул по всій ширині, і не знаєте заздалегідь, який стовпець буде найдовшим, то для забезпечення цілісності дизайну потрібні плаваючі елементи.

Проблема з плаваючими елементами полягає в тому, що вони зміщуються вліво або вправо тільки до тих пір, поки не торкнуться краю блоку предка, або іншого плаваючого елементу. Це означає, що плаваючі стовпчики повинні з’явитися в розмітці в правильному порядку. Але іноді бажано мати порядок подання, що відрізняється від вихідного порядку. Ви можете захотіти, наприклад, помістити контент до навігації, щоб поліпшити практичність для клавіатурної навігації, або для поліпшення оптимізації для пошукової системи. Цього можна домогтися, навіть за допомогою плаваючих елементів, за допомогою деякого розсудливого використання негативних полів і відносного позиціонування – давайте подивимося, як це можна зробити. Почнемо зі скелета, або каркаса, документа HTML.

  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>

  1.  Потім створіть зародкову таблицю стилів. Скопіюйте наведений нижче код в текстовий редактор і збережіть файл як layout.css.

#header {

background-color: #369;

color: #fff;

}

#sidebar {

background-color: #ff6;

}

#nav {

background-color: #ddd;

}

#footer {

border-top: 1px solid #369;

}

  1.  Збережіть обидва файли і завантажте сторінку в браузер. П’ять розділів з’являться в певному порядку зверху вниз.

Припустимо, що відділ розробки визначив, що навігація повинна бути ліворуч, а бічна панель праворуч, а стовпець основного контенту посередині. Верхній і нижній колонтитули повинні поширюватися на всю ширину сторінки, і ми не знаємо, який із трьох стовпців між ними буде найдовшим. Порядок вихідного коду визначають експерти по доступності та практичності й не обговорюється. Як можна об’єднати всі ці вимоги в робоче компонування?

Ми збираємося додати в розмітку додатковий елемент, щоб це працювало. Це неминуче, але один додатковий елемент ви повинні пережити. Потрібно елемент, який створює оболонку навколо трьох “стовпців”.

  1.  Додайте дві виділені нижче рядка в документ 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. Стовпець основного контенту повинен мати змінну ширину, так щоб компонування адаптовувалося до різних розмірів вікон, так як компонування з фіксованою шириною не надто зручні для користувачів. Щоб рядки тексту не були занадто довгими, заважаючи легкості читання, необхідно обмежити компонування максимальною шириною. Щоб уникнути перекриття у вкрай вузьких вікнах необхідно також обмежити компонування мінімальною шириною. У цих рамках компонування повинно бути центроване по горизонталі у вікні браузера.

  1.  Надаємо значення ширини для навігації і бічної панелі й ставимо обмеження по ширині, й загальне центрування, додаючи наступні правила внизу файлу 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;

}

  1.  Збережіть ці файли і перезавантажте – ви повинні побачити, що елементи жовтої бічної панелі і сірої навігації мають необхідну ширину. Якщо вікно браузера досить широке, ви побачите також, що вся сторінка обмежена по ширині і центрована по горизонталі.
  2.  Спробуйте змінити розмір вікна і подивіться, як зміниться компонування.

Примітка: При використанні 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;

}

Це зробить їх плаваючими, але вони знаходяться в неправильному порядку. Також, стовпець основного контенту занадто вузький. І що сталося з нашим нижнім колонтитулом?

  1.  Давайте спочатку розберемося з нижнім колонтитулом. Проблема полягає в тому, що три стовпці є плаваючими, що витягує їх з потоку документа. Нижній колонтитул виштовхується нагору поруч з верхнім колонтитулом і лінійний бокс, що містить текст, коротшає, так що слово “Footer” з’являється праворуч від плаваючих елементів. Можна виправити це, очищаючи нижній колонтитул від всіх плаваючих стовпців. Додайте в файл CSS наступне правило:

#footer {

clear: left;

border-top: 1px solid #369;

}

  1.  Тепер займемося трьома стовпчиками. Це буде зроблено крок за кроком і буде виглядати досить потворно протягом деякого часу, але не впадайте у відчай – в кінці все стане на свої місця.

Ключовим моментом у цьому підході є елемент оболонки. Ми поставимо на ньому ліве і праве поле, які відповідають за шириною бічним стовпцям (навігації і бічний панелі). Стовпець основного контенту буде займати всю ширину оболонки, у той час як бічні стовпці будуть зміщуватися в простір, звільнений полями. Звучить хитромудро? Не турбуйтеся, ми розберемо це докладно, маленькими кроками. Спочатку задамо для оболонки поля, додаючи наступне правило в файл CSS:

#wrapper {

margin: 0 14em 0 12em;

padding: 0 1em;

}

Пам’ятайте, що значення в скороченій властивості margin визначаються у такому порядку: top, right, bottom, left. Ми задаємо верхнє і нижнє поля як 0, праве поле рівним 14em (для бічної панелі) і ліве поле як 12em (для навігації). Ми додаємо також горизонтальне заповнення у 1em, так як ми не хочемо, щоб контент впритул підходив до бічних стовпців, йому потрібно трохи простору для дихання.

  1.  Наступний крок полягає в завданні для стовпця основного контенту всієї ширини оболонки його предка; код тимчасово також задає для нього яскравий колір фону, отже робимо наступне:

#main {

float: left;

width: 100%;

background-color: lime;

}

  1.  Збережіть і перезавантажте – ви побачите яскраво-зелений стовпець контенту, з бічною панеллю та навігацією нижче за нього. Ви також помітите, що з обох сторін є багато вільного простору. Нам треба примусити наші бічні стовпці прослизнути в цей вільний простір.

Потім ми перейдемо до бічної панелі – вона є плаваючою і має правильну ширину, але так як стовпець #main має ширину 100%, він зміщує бічну панель вниз. Як змусити її піднятися вгору і залишитися поруч з #main, коли #main займає всю ширину? Давайте зробимо це за два маленьких кроки: спочатку ми перемістимо її вгору, а потім змістимо її на полі.

  1.  Тут ми використовуємо хитромудрий прийом, щоб змусити плаваючу бічну панель, яка була зміщена вниз, знову переміститися вгору – зробимо наступне додавання в правило #sidebar:

#sidebar {

float: left;

width: 13em;

padding: 0 0.5em;

background-color: #ff6;

margin-left: -14em;

}

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

  1.  Нам потрібно змістити панель на місце поля так, щоб вона не впала знову вниз, і саме тут починає грати – нарешті – відносне позиціонування. Воно робить саме те, що потрібно: воно зміщує згенерований бокс, не переміщуючи сам елемент. Додайте виділені нижче властивості для #sidebar:

#sidebar {

float: left;

width: 13em;

padding: 0 0.5em;

background-color: #ff6;

margin-left: -14em;

position: relative;

left: 15em;

}

Відзначимо, що потрібно змістити її на 15em, а не 14em – тому що є праве заповнення у 1em для оболонки, яке необхідно пропустити. Бічна панель знаходиться тепер там, де повинна бути: на місці поля, поруч зі стовпцем контенту, акуратно вирівняна з правими краями верхнього та нижнього колонтитулів.

  1.  Тепер потрібно зробити те ж саме з навігацією, що робиться аналогічно, але зі своїми особливостями. Переміщення і зрушення бічної панелі виконується легко, тому що ці рухи були по суті такими ж, як і ширина стовпця: негативне поле 14em і зсув на 14em +1 em вправо. Але стовпець навігації необхідно перемістити через весь стовпець контенту і потім зрушити ще далі на полі.

Нашим помічником тут будуть відсотки. Значення відсотка на полях навігаційного стовпця буде задаватися щодо ширини його предка, оболонки. Щоб перемістити стовпець через всю оболонку – додайте властивість, виділену нижче в правилі #nav:

#nav {

float: left;

width: 11em;

padding: 0 0.5em;

background-color: #ddd;

margin-left: -100%;

}

  1.  Збережіть і перезавантажте ще раз, і ви повинні побачити як навігація перекриває ліву сторону стовпця контенту. Тепер необхідно змістити її на полі. Додайте наступні виділені властивості для #nav:

#nav {

float: left;

width: 11em;

padding: 0 0.5em;

background-color: #ddd;

margin-left: -100%;

position: relative;

right: 13em;

}

Ширина навігації знову буде 12em, але ще треба пропустити 1em заповнення оболонки, тому потрібно змістити бокс на 13em. Ви зміщуєте його вліво, іншими словами від правого краю, тому і використовується властивість right.

  1.  Видаліть яскраво-зелений фон зі стовпця контенту, і все буде готово.

Обхід особливостей Internet Explorer

Є дві особливості цього компонування, які призводять до відмови в Internet Explorer 6 для Windows. Одна з них полягає в тому, що IE6 не підтримує властивості min-width і max-width, інша в тому, що IE відомий поганою роботою з відсотками.

Можна використовувати власний засіб компанії Microsoft expression() для емуляції обмежень по ширині. Він отримує вираження JScript як аргумент і повертає значення цього виразу. Це може створювати проблеми з продуктивністю, якщо вираз вимагає багато обчислень, так як воно обчислюється кожного разу, коли браузеру необхідно отримати ширину body. Також потрібно, щоб був активний JScript, але можна додати поступове скорочення можливостей, тому, якщо, скажімо, JScript не буде доступний, то дизайн буде відкочуватися до чогось, що все ще доступне. У цьому прикладі ми зробимо компонування повністю гнучким замість створеного вище текучого дизайну з обмеженнями, якщо JScript буде активовано.

Рекомендованим способом обробки правил стилів виправлення помилок в Internet Explorer є використання “умовних коментарів”. Це властивість, яка наявна тільки в браузері Microsoft, що вбудовує умовну логіку в коментарі HTML.

  1.  Додайте наступні рядки в код HTML, відразу перед тегом </head>:

<!--[if lte IE 6]>

<link rel="stylesheet" type="text/css" href="layout-ie6.css">

<![endif]-->

  1.  Потім створіть новий файл з ім’ям 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, яка потрібна для правильної роботи відносного позиціонування елемента навігації. Компанія Microsoft документувала властивість 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 представляє елементи.

  1.  Резюме

Статичне позиціонування використовується зазвичай за замовчуванням. Блокові бокси викладаються вертикально в порядку вихідного коду, в той час як рядкові блоки викладаються горизонтально в лінійних боксах серед цих блокових боксів.

Відносне позиціонування дозволяє зміщувати згенерований бокс в одному або двох напрямках. Елемент по колишньому займає простір, якщо б він був статичним, але згенерований бокс може зміщуватися в іншу позицію. Відносне позиціонування використовується, в основному, спільно з плаваючими елементами для створення компонувань, де презентаційний порядок відрізняється від порядку вихідного коду.

  1.  Контрольні запитання
  •  Що станеться, коли два суміжних поля в контексті статичного форматування сплющуються, і одне з полів – або обидва – є негативними?
  •  Додайте вертикальну межу між кожною з бічних колонок або кожним стовпцем основного контенту. Не забудьте, що всі три стовпці є плаваючими, тому висота елементу оболонки сплющується до нуля.
  •  Як можна зробити, щоб всі стовпці мали однакову висоту (або принаймні здавалися такими), так щоб фонові кольори розповсюджувалися до нижнього колонтитула, незалежно від того, який стовпець довше? (Підказка: знайдіть “помилкові стовпці” за допомогою пошукової системи.)


 

А также другие работы, которые могут Вас заинтересовать

55915. Державне управління та адміністративне право 33 KB
  Характеристика методу адміністративного права. Проблеми реформування адміністративного права. Адміністративне право є самостійною галуззю права яка характеризується надмірною мобільністю комплексним характером тернистим шляхом свого становлення.