Псевдоколонкі.
Початківці дизайнери часто задають питання: «Як зробити так, щоб фон колонки розтягувався на всю висоту сторінки». Насправді це дуже просто, і можливо ви вже знайомі з деякими способами, але для тих, хто ще не знає відповіді на це питання, я хочу запропонувати свою техніку.
вертикальне розтягування
Завдання ускладнюється тим, що в CSS блок розтягується рівно на стільки, скільки потрібно, щоб вмістити весь вміст (якщо висота не задана явно), наприклад, якщо блок містить зображення висотою 200px, то його висота буде дорівнює тим же 200px.
При створенні багатоколоночних розміток за допомогою CSS, одна з колонок може бути більша за іншу, в залежності від кількості контенту в них, що призводить до зрозумілих складнощів, якщо потрібно зробити колонки однакової висоти, з різним кольором фону.
Є кілька способів зробити колонки однакової висоти, незалежно від кількості контенту міститься в них. Я хочу розповісти про своє рішення проблеми, яке відрізняється простотою реалізації, і використовується на багатьох сайтах, в тому числі і на A List Apart.
У чому хитрість
Весь секрет полягає в використанні, що повторюється по вертикалі фонового зображення, для створення ілюзії колонок з різним фоном. для SimpleBits , Я зробив зображення з декоративними смужками по краях, коричневої правої колонкою і широкою смужкою білого кольору для області контенту.
Незважаючи на те, що висота зображення всього кілька пікселів, повторюване багато разів, воно легко створює ілюзію колонок однакової висоти.
CSS
Щоб техніка працювала, досить одного простого правила:
background: #ccc url (../ images / bg_birch_800.gif) repeat-y 50% 0;
Ми робимо фон сторінки сірим, а зображення багаторазово повторюємо по вертикалі (repeat-y). Цифри 50% 0 вказують, що зображення потрібно центрувати щодо елемента body і почати повторювати з самого верху сторінки.
позиціонування колонок
Позиціонувати колонки можна будь-яким зручним способом, для цього підійде як float, так і абсолютне позиціонування.
Якщо ви хочете додати кордону або відступи для однієї з колонок, і не отримати при цьому проблем в IE5.x потрібно використовувати виправлення від Тантека Челік Box Model Hack або Mid Pass Filter , Для IE6 + досить вказати правильний DOCTYPE. Якщо в відступи або кордонах немає необхідності, і використовуються тільки поля, то ці виправлення не потрібні.
Не варто забувати, що в браузері користувача може бути відключено відображення графіки, тому колір тексту і фону потрібно підбирати так, щоб він залишався читабельним і в такому випадку.
PS
Незважаючи на свою простоту, ця техніка дозволяє вирішити одну з серйозних проблем, з якою стикаються дизайнери при розробці розміток заснованих на CSS.