У цьому уроці ми досконально розберемо всі підводні камені такого, здавалося б, простого поняття, як ширина елемента. Зрозуміємо, з чого вона складається і що представляє насправді. Так само розглянемо роботу властивості float. Розглянемо на прикладі, чому плаваючі елементи при зміні ширини вікна браузера з'їжджають на новий рядок, і вирішимо цю проблему. Розглянемо і вирішимо проблему схлопування кордонів блоку.
Навігація - це, мабуть, найголовніша частина сайту. І у гумового сайту, як правило, навігація теж гумова. Створити гумове меню, використовуючи таблиці, труднощів не складе. Але коли мова заходить про створення такого меню, використовуючи списки, виникає багато питань. В уроці ми якраз створимо гумове меню, використовуючи списки. Розберемося з теорією створення такого меню. Виявимо і вирішимо можливі проблеми.
Часто виникають ситуації, коли потрібно зробити перекриття елементів. Або змусити елемент розташовуватися, наприклад, в правому нижньому кутку, незалежно від того, як розташовані навколишні блоки. Дану проблему найкраще вирішує властивість position. В уроці ми розберемося з позиціонуванням елементів. Попрацюємо над перекриттям елементів за допомогою властивості z-index. З'ясуємо необхідна умова для роботи властивості z-index.
При верстці гумових макетів, часто виникає ситуація, коли необхідно центрувати елемент. Коли відома ширина центрована елемента, то проблем не виникає. Все ставати складніше, коли ширина блоку, який потрібно розташувати по центру, не відома або вона може змінюватися. В уроці ми розглянемо приклад центрування блоку змінної ширини, на прикладі створення посторінкового навігації.
Іноді виникає завдання, коли потрібно розташувати кілька блоків по всій ширині батьківського блоку. Тобто перший блок повинен бути у самого лівого краю, останній блок повинен бути біля правого краю. А відстані між іншими елементами щоб було однаковим. Такого нескладно домогтися при верстці макету фіксованої ширини. Але ми ускладнити завдання і вирішимо її в уроці для гумового блоку.