This is the top navigation bar.
This is the advertisement bar.
The code you are reading.
...
"Порада дня"
Тепер у нас є три блоки, куди ми можемо помістити будь-який вміст, основна область, верхній навігаційний блок і рекламний блок. Кожен з цих елементів приймає висоту вмісту, але ширина у них фіксована. Давайте тепер створимо блок, що містить "Порада дня". Зробимо його плаваючим, щоб вміст центральній області його обминало. Вкладемо в "main" шар "tipDay", і задамо для нього переміщення вправо. Також зазначимо для нього деяку ширину (для плаваючих елементів ширина обов'язково повинна бути задана). Гляньте.
# TipDay {
float: right;
width: 175px;
background: # FFF3AC;
}
Що з контентом?
Тепер давайте вирішимо, як саме ми будемо заповнювати блоки вмістом. Самим природним рішенням було б використовувати властивість float, але через проблеми з відображенням плаваючих блоків в Opera і IE нам доведеться використовувати абсолютне позиціонування. Помилки в IE невеликі, і ними можна було б знехтувати, але, на жаль, з проблемами в Opera нам впоратися не вдалося. За цими посиланнями розташовані опису виниклих помилок: одна помилка в Opera, інша помилка в Opera, помилка в IE.
Заповнюємо бічні блоки
Почнемо з лівого навігаційного блоку - додамо до нього шар "lftBar". Так як ми вирішили використовувати абсолютне позиціонування, то у нас тепер є відносна свобода у виборі місця для коду, що визначає шар. Його можна поставити всередину "level0", до або після "level1" або навіть на один рівень вкладеності з шаром "level0" - це не вплине на його відображення - якщо, звичайно, ми виберемо правильні координати.
Ми спробували вкласти "lftBar" в "level0", вказавши для "lftBar" нульові координати top і left, а для "level0" - відносне позиціонування (position: relative), але в IE5.5 шари чомусь перекривалися. Тому ми вирішили встановити для "lftBar" абсолютні координати щодо тіла документа. Гляньте. А також - одна помилка в IE, інша помилка в IE.
# LftBar {
;
width: 143px;
top: 9px;
left: 9px;
}
Для правого навігаційного блоку ми використовували шар "rgtBar". Нам було важливо, що б його верхній край збігся з верхнім краєм шару "main", що містить основний контент. Тому ми вирішили вкласти "rgtBar" в "level2", до або після "level3", встановивши для "level2" відносне позиціонування, а для "rgtBar" - нульові координати top і left і ширину, рівну правому полю шару "level3". Гляньте.
# Level2 {
background: # FFF3AC;
position: relative;
}
...
# RgtBar {
;
width: 143px;
top: 0;
right: 0;
}
Розставляємо по місцях
З нашою версією було дві проблеми в IE для Windows. Перша проблема полягала в тому, що блок з «Радою дня» зникав, хоча вміст блоку main його справно обминало. Цю проблему ми дозволили, встановивши для шару "tipDay" відносне позиціонування (така установка призвела до підвищення z-index і шар автоматично розмістився поверх інших).
Дивацтва наслідування: "Auto" проти "Inherit"
Другою проблемою в IE / Windows було те, що правий навігаційний блок відсувався максимально вправо. Для вирішення проблеми нам довелося явно вказати ширину шару "level2" (у який вкладено "rgtBar"). IE не розуміє декларацію 'auto', але зате розуміє 'inherit' (хоча і досить-таки дивним чином), і це можна використовувати для наших цілей. Ми встановили для "level0" ширину в 100%, а в якості ширини для "level2" вказали 'inherit'. Фокус у тому, що в IE "level2" успадковує значення ширини від "level0" (100%), у той час як в інших броузерах - відбувається спадкування від "level1" ('auto') (а вкажи ми для "level2" ширину в 100%, то у нас виникли б проблеми з відображенням в IE 5.5 +, який розуміє 100%, як ширину всього вікна броузера). Цю помилку CSS в IE5 ви, до речі, цілком можете використовувати для вирішення подібних проблем - подробиці дивіться в розділі використаних прийомів. Погляньте
# Level0 {
background: # FC0;
width: 100%; # - New, outermost DIV
}
# Level2 {
background: # FFF3AC;
position: relative;
width: inherit; # - New, inherits 100% from level0 in IE5
# Inherits auto from level1 in all others
}
# TipDay {
float: right;
width: 175px;
background: # FFF3AC;
position: relative; # - New, forces z-index so this div displays in IE
}
Очищаємо стиль
Тепер саме час провести генеральне прибирання. Для початку позбудемося шару "level3" і передамо всі його стильові декларації шару "main". Додамо правому блоку кордон за допомогою властивості border-right шару "main". Також зробимо два заголовки для основної області і поставимо в правий блок кілька тестових підзаголовків. Внизу правого блоку додамо підзаголовок "A_Long_String", щоб продемонструвати проблеми, що виникають при використанні великих шрифтів. Цей підзаголовок не можна розбити на кілька ліній, і він може розсунути блок, якщо перевищить його по ширині. Гляньте.
# Main {# Where the main content goes
margin-right: 143px;
padding-right: 9px;
background: # FFF;
}
# Main h1 {# Where our main section headers go
margin: 0;
padding-left: .3 em;
font: 1.25em Verdana, Helvetica, Arial;
color: # 609;
background: # FC0;
}
# Main dt {# Bump up the main content links
font-weight: bold;
font-size: 120%;
margin-top: .8 em
}
# RgtBar h3 {# Subheads for right nav bar, (newsletter, experts ...)
margin: 0;
padding: 3px;
background: # FC0;
font-weight: bold;
font-size: 1em;
text-align: center;
}
Розмір фіксований проти розміру відносного
Щоб запобігти перевищення довгим підзаголовком ширини блоку, ми змінимо деякі декларації для "rgtBar" і "main", переписавши їх у відносних одиницях ("em"). Колись ми ставили ширину в 143 px. Це становить приблизно 9em, якщо розмір шрифту в броузері дорівнює стандартним дванадцяти пунктів (дванадцять пунктів - ето16px). Тому ми ставимо для "rgtBar" і "main" поля та ширину не в 143px, а в 9em. Тепер, завдяки відносним одиницям, правий блок буде міняти свою ширину пропорційно встановленому користувачем розміру шрифту. Гляньте.
# Main {
margin-right: 9em; # - Use variable widths rather than fixed, they are
more user-friendly. This also applies to font sizes.
padding-right: 9px;
background: # FFF;}
...
# RgtBar {
;
width: 9em; # - likewise
top: 0;
right: 0;
}
Описана методика вирішує більшість проблем з перевищенням розміру вмісту над розміром містить блоку. Для блоку "Порада дня" ми теж поставили ширину в відносних одиницях, але для лівого блоку все ж таки вирішили зупинитися на одиницях абсолютних, так як його вміст не могло зруйнувати верстку.
Плаваюча форма пошуку
Тепер розмістимо форму пошуку і текстові посилання у верхньому навігаційному блоці. Форму ми визначимо як першого нащадка "topBar" і вкажемо їй переміщення вправо. Ми вже з'ясували, що для плаваючих елементів слід явно задавати ширину, і наша форма не є винятком. Визначимо їй ширину 10.5em - завдяки відносним одиницям елементи форми будуть пропорційно змінювати розмір в залежності від розміру шрифту в броузері користувача. Також ми поставимо для форми вирівнювання до правого краю (text-align: right), так як сама форма трохи ширше, ніж її елементи. Але ми, очевидно, ще не закінчили - погляньте, і ви зрозумієте, яку проблему нам належить вирішити.
# TopBar form {
float: right;
width: 10.5em;
text-align: right;
}
Нам потрібно встановити в нуль всі поля форми пошуку, щоб максимально зменшити її розмір по вертикалі. Для Netscape ми визначимо висоту рядка в 0.7 em, тоді кнопка "Search" по висоті зрівняється з полем вводу (на відображення в IE і Opera ця директива ніяк не вплине). Рухаємося далі. Форма частково накладається на рекламний блок. Цього ми дозволити не можемо, тому що в ньому прямо під формою буде розташовуватися текстове посилання, тому визначимо для "advBar" властивість clear. Наостанок, встановимо для "topBar" ширину в 100%, щоб уникнути помилки в IE і вкажемо для поля введення розмір шрифту в .8 em, щоб його розмір змінювався відповідно розміру шрифту в броузері. Гляньте.
# AdvBar {
background: # FFF3AC;
clear: right; # - New, clear the search form
}
...
# TopBar form {# The search form
float: right;
width: 10.5em;
text-align: right;
margin: 0;
line-height: .7 em; # - Crucial!
}
# TopBar input {
font-size: .8 em;
}
Додаємо текстові посилання
Помістимо текстові посилання на належне їм місце. Ці п'ять посилань розділені Буллітом і укладені в тег, тому саме цей тег повинен стати другим нащадком блоку "topBar". В IE 5.0 для Windows ми виявили дивний ефект, через який посилання вирівнювалися до правого краю. Вирішити цю проблему можна було або уклавши посилання в шар з вирівнюванням ліворуч, або зробивши блоковим елементом, вказавши для нього необхідне вирівнювання. Ми віддали перевагу другому спосіб. Також ми вказали стиль для шрифту і необхідну висоту рядка, щоб посилання були вирівняні по вертикалі. Гляньте.
# TopBar b {# Top nav bar text links (sitemap, experts ...)
display: block;
text-align: left;
font: bold .8em/1.7em Arial, Geneva, sans-serif;
}
Додаємо вміст і заголовок для "Ради дня"
На цьому етапі ми замінимо тестові заголовки на кшталт "Це заголовок 1" і "Це заголовок 2" на реальні заголовки сайту WebReference - "WebReference.com: Dev the Web ™" і "internet.com" відповідно. Ще ми додамо заголовок для блоку "Порада дня", причому розташовуватися він буде в тому ж блоці, що і заголовок "WebReference.com: Dev the Web ™". Для цього нам знадобиться новий шар, назвемо його "tipTit", який буде першим нащадком шару "main". Зазначимо для нього переміщення та вирівнювання до правого краю, ширину, стиль шрифту і висоту рядка для вертикального вирівнювання. Ширину визначимо в 7em (таку ж, як і у блоку "tipDay"). Щоб уникнути проблем в IE, які описані вище, позиціонування його зробимо відносним. Гляньте.
# TipTit {
float: right;
width: 7em;
text-align: right;
position: relative;
font: .8em/1.8em Arial, Geneva, sans-serif;
background: red;
}
. Note {
color: red
}
Справу зроблено! Ми успішно відтворили основну сторінку WebReference.com без єдиної таблиці. Нам залишилося тільки додати банер на його законне місце. Гляньте. Примітка: фінальний варіант розмітки ще не тестувався в IE6, але ми обов'язково це зробимо в самому найближчому майбутньому. (Прим. перекладача: IE6 сторінка відображається цілком коректно)
# AdvBar p {text-align: right; margin: 0 0.5em; font-weight: bold;}
# AdvBar img {margin-bottom: 1em}
Подальші плани
Сподіваємося, що з цієї статті ви почерпнули деякі ідеї щодо використання CSS для створення многоколоночной верстки. Для подальшого поліпшення дизайну ми можемо додати в ліву колонку додаткові інформаційні або рекламні блоки. Для верхнього блоку ([sitemap | experts .... search]) і центрального заголовка (WebReference: Dev the Web .... Tip of the Day]) ми можемо застосувати методику, описану в A List Apart (хоча напевно виникнуть проблеми з позиціонуванням форми пошуку). Зрозуміло, будь-які зміни ми будемо тестувати у всіх основних броузерах.
Нижче коротко сказано про те, чого ми навчилися в процесі розробки нового дизайну.
Основні прийоми CSS
Зберігайте гнучкість
По можливості використовуйте відносні величини (em або% для шрифтів, em для шарів)
Вкладайте шари один в одного
Ця техніка допомагає вирішити проблему з варіаціями реалізації блочної моделі в різних броузерах. У IE5 поля, межі і відступи в одному блоці не дуже-то добре уживаються один з одним. Обов'язково відокремлюйте декларації полів і кордонів від декларацій ширини. У невірної блокової моделі, реалізованої в IE5/Windows, поля і кордони не додаються до загальної ширині блоку, тоді як W3C з повною визначеністю говорить про те, що ширина блоку складається з ширини його вмісту плюс ширина полів і меж. Зауважимо, що IE5/Mac і броузери Gecko коректно відображають блокову модель. Тому якщо вам необхідно задати ширину шару, який містить поля або межі, розділіть його на два, один з яких буде вкладено в іншій.
Не використовуйте "nowrap" для шарів
У Netscape і Opera можуть виникнути проблеми при великих розмірах шрифту
У IE 5.x є помилка CSS, якою можна скористатися
IE 5.x інтерпретує коментарі, хоча повинен їх ігнорувати. Це можна використовувати для створення якоїсь подібності "if-then", щоб обійти в ньому деякі помилки CSS. Ми використали цей прийом, але потім перейшли на методику з використанням властивості inherit. У IE6 цей прийом не працює.
# FontChanger {font-size: .8 em; / / font-size: 1em;}
Слідкуйте за шириною шарів і таблиць
Установка ширини у 100% може призвести до того, що ширина такого шару в IE не співпаде з шириною шару, для якого ширина задана як auto (за замовчуванням). Крім того, для таблиці з width = 100% IE5.5 встановить ширину рівну ширині всього екрану, а зовсім не блоку, в який ця таблиця вкладена. Щоб уникнути ви можете використовувати / / width: 100% для зовнішнього блоку і width: inherit для самої таблиці.
# TopBar {background: # FC0; / / width: 100%;}
# TopBar form {display: inline;}
table.c {font: .8em/1em Arial, Geneva, sans-serif; width: 100%; / / width: inherit;}
В IE некоректно працює механізм спадкування, тому таблиця успадковує ширину від найближчого батьків, для якого ширина зазначена (в абсолютних одиницях, відносних одиницях чи значенням inherit).
У плаваючих блоків можуть виникати проблеми з директивою clear
Особливо у форм. Щоб уникнути можна укладати блоки в додаткові контейнери і вказувати clear для них. Хороша також методика, описана в A List Apart.
Не використовуйте фіксовану висоту
Агенти п'ятих і шостих версій її просто не підтримують, так само як і min-height. А IE 5.5 до того ж не розуміє min-width, max-width і max-height.
У Opera і Netscape задавайте для форм нульової відступ (margin: 0)
Особливо в плаваючих блоках.
Якщо ви хочете задати ненульові відступи зверху (з боків), обов'язково вказуйте висоту (ширину) для батьківського блоку.
Opera розходиться з W3C у тлумаченні специфікації CSS, тому для коректного відображення відступів вам доведеться поставити висоту і ширину не тільки для батьків, але і для нащадка. Відзначимо, що в Opera і IE 5.5 систематично виникають помилки, якщо у батька теж задані відступи.