...

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 (

position: absolute;

width: 143px;

top: 9px;

left: 9px;

)

Для правого навігаційного блоку ми використовували шар "rgtBar". Нам було важливо, що б його верхній край збігся з верхнім краєм шару "main", що містить основний контент. Тому ми вирішили вкласти "rgtBar" в "level2", до або після "level3", встановивши для "level2" відносне позиціонування, а для "rgtBar" - нульові координати top і left і ширину, рівну правому краю шару "level3". Погляньте.

# level2 (

background: # FFF3AC;

position: relative;

)

...

# rgtBar (

position: absolute;

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 (

position: absolute;

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 систематично виникають помилки, якщо у батьків теж задані відступи.

Список літератури

Для підготовки даної роботи були використані матеріали з сайту http://www.webmascon.com/