В основу створення шапки я поклав властивість вкладених шарів на
Для чистоти експерименту наведу ці розміри:
задача якого буде містити в собі фонове зображення для навігаційного списку шапки. Висоту цього шару встановлюю рівній висоті шапки, а сам фоновий малюнок позиціоную в правому куті блоку. Висота його дорівнює висоті шапки, тому досить кошторису його по-горизонталі вправо, а по-вертикалі залишаю як є.
Малюнок короткий і буде займати не всю ширину шапки, а тільки деяку її праву частину, як раз рівно настільки, щоб вмістити в себе навігаційний список. CSS-код для цього шару представлений нижче:
Тепер створюю ще один шар
в якому буде розміщено ще одне фонове зображення. По висоті воно менше, ніж фонове зображення шару
і буде знаходитись над цього шару, перекриваючи його.
Тому фон шару
буде бачити тільки частково, лише його нижній краєчок, для якого і відводиться роль фону навігації. для шару
явно задаю його висоту. Код з властивостями наведено нижче:
Ну ось, завдання практично і вирішена. При цьому не було використано ні абсолютного, ні відносного позиціонування. тільки зміщення фону шару. Залишилося створити останній шар, який буде виконувати завдання логотипу сайту. Розміщую його поверх всіх інших шарів і роблю клікабельним на все його простір.
При цьому знову скористаюся фоновим зображення, яке вкладу всередину цього шару. Ніяких img в html-коді! Позиціонувати або зміщувати його нікуди не треба, так як він по-замовчуванню розташується в лівому верхньому кутку блоку (як мною задумано для простоти експерименту). Тільки явно задам цього шару висоту і ширину, рівну висоті і ширині шпалер:
Щоб зробити шар клікабельним, розміщую всередину нього посилання. Так як спочатку вона є рядковим елементом (
), То їй неможливо задати правила, щоб "розтягнути" на всю висоту і ширину шару-батька
Тому "перетворюю" посилання в блоковий елемент за допомогою властивості
А ось тепер бійся посилання, задавши для неї ширину і висоту в процентах. Звичайно, можна вказати ці параметри і за допомогою пікселів, так як розміри логотипу відомі. Але краще покласти це завдання на плечі браузера - нехай сам обчислює розміри блоку-посилання:
Залишилося створити навігаційне меню шапки, яке повинно знаходитись над шару
Створюю ненумерований список, який розміщую всередину шару
Так як за кодом шар
розташований вище і має фіксовану висоту, то список займе все залишився під ним:
Тепер досить змістити список вправо за допомогою
і прописати для нього звичайні властивості, щоб розташувати горизонтально і стилізувати:
Єдиний момент, який викликав у мене труднощі, це що з'явилися ледве помітні відступи між зовнішнім блоком