Інструкції - Поради щодо CSS - Створення «гумового» макета зліва – меню, а праворуч – область з
Сайти з меню ліворуч і великою областю з контентом праворуч, як на рис. 9.27 , дуже часто зустрічаються в Мережі. Розглянемо спосіб створення такого макету за допомогою CSS.
Мал. 9.27. Створення «гумового» макету з двома колонками за допомогою CSS (DEMO)
Рішення Для досягнення показаного нарис. 9.27 ефекту використовувалися наступна розмітка та CSS-код:
Обговорення За основу макета візьмемо «шапку», створену в розділі «Як розмістити логотип сайту зліва, а слоган – праворуч?». Додавши трохи контенту, розмістимо його всередині блоку div із ID content. Меню навігації складається з двох маркованих списків, розміщених у блоці з ID nav. другом у документі (як показано нарис. 9.28 ).
Мал. 9.28. Відображення контенту та навігації без позиціонування
На цьому етапі CSS-код виглядає так:
Завдання розміру та позиціонування меню Для розміщення меню безпосередньо під панеллю із заголовком скористаємося методом абсолютного позиціонування, а також задаємо його ширину:
Як видно на рис. 9.29 після додавання цього правила меню розташовується поверх тексту, оскільки при абсолютному позиціонуванні воно було видалено із загального потоку елементів документа.
Мал. 9.29. Абсолютне позиціонування меню
Позиціонування блоку з контентом Оскільки перед нами стоїть завдання створення «гумового» макета, небажано задавати ширину області з контентом, але, втім, це не обов'язково. Проте в даний час область зконтентом розміщується там, де має бути меню. Щоб все стало на свої місця, достатньо задати для області з контентом властивість margin, звільнивши простір для меню. Результат показаний на рис. 9.30.
Тепер всі елементи розташовані акуратно один до одного, і можна перейти до завдання стилю кожного з них за допомогою CSS, щоб отримати результат, зображений на рис. 9.27. Використана таблиця стилів наведена повністю на початку розділу.
=====Рада Використання em для позиціонування блоків з текстом. Як одиниці вимірювання для позиціонування елементів документа я використовувала em. Це забезпечить пропорційну зміну розмірів блоку під час зміни користувачем розміру шрифту, що дозволяє уникнути перекриття елементів. Таке рішення оптимальне для завдання ширини блоків та відступів на сайті, що містить багато текстової інформації. Однак якщо дизайн сайту має на увазі використання великої кількості зображень, цей підхід слід використовувати з обережністю, адже зображення не змінюють свій розмір поряд із текстом. Якщо вам необхідний точний контроль за розташуванням елементів на сторінці, можливо, слід використовувати як одиниці вимірювання пікселі.
Мал. 9.30. Додавання зовнішніх відступів для області з вмістом