5 технік гумової верстки сайту

Від автора: 5 безкоштовних уроків з гумової верстки сайту. Це прям-таки те, що ніяк не дає спокою всім тим, хто має свій сайт або лише планує його створити. Загалом – мастхев (повинен вивчити абсолютно кожен, хто не хоче, щоб його сайти розліталися як їм заманеться при різних дозволах екрану). Ніякої води, лише практичний досвід.

Техніка 1. Ширина елемента і властивість float.

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

Техніка 2. Створення гумового меню, використовуючи списки.

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

Техніка 3. Вибудовуємо елементи позиціонуванням.

Часто виникають ситуації, коли потрібно зробити перекриття елементів. Або змусити елемент розташовуватися, наприклад, у правому нижньому кутку, незалежно від того, як розташовані оточуючі блоки. Дану проблему найкраще вирішує властивість position. В уроці ми розберемося з позиціонуванням елементів. Попрацюємо над перекриттям елементів за допомогою властивості z-index. З’ясуємо необхідна умова для роботи властивості z-index.

Техніка 4. Центрування елемента змінної ширини.

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

Техніка 5. Центрування елемента змінної ширини.

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

Ваші побажання, відгуки та рекомендації залишайте в коментарях!