Укладання в оболонку
2. Додайте наступні правила CSS до таблиці стилів, щоб оформити меню:
margin: 0 0 0 0.5em;
border: 2px solid #f00;
3. Збережіть обидва файли та оновіть сторінку у браузері. Ви побачите своє меню у верхньому лівому кутку. Давайте зробимо його горизонтально центрованим.
4. Змістіть елемент оболонки на половину сторінки, модифікуючи правило для .wrap, як показано нижче:
Меню буде починатися в горизонтальному центрі сторінки, але це не те, що ми хочемо – воно занадто зміщене вправо, тому треба змістити його трохи назад вліво. Так як оболонка є плаваючою, вона скорочується відповідно до розміру списку. Ви хочете змістити список на відстань, яка дорівнює половині його ширини, що означає також половину ширини оболонки, тому робимо зміщення на -50%.
5. Модифікуємо правило #menu так:
Меню тепер центроване; єдина проблема полягає в тому, що ви можете отримати горизонтальну панель прокручування залежно від ширини списку та вікна браузера. Це з тим, що ви змістили елемент оболонки на половину екрана; якщо список буде ширшим за половину вікна, частина його опиниться за межами екрана.
6. Можна позбутися цього, задаючи властивість overflow:hidden на відповідному елементі предку, щоб зробити переповнення прихованим. І тут предком оболонки є body. Іноді неможливо приховати переповнення на елементі body, і в цьому випадку потрібно створити оболонку для оболонки, проте в даному випадку все нормально.
Додайте наступне правило до таблиці стилів:
7. Насправді є ще одна проблема. Якщо подивитися на це в Internet Explorer ви побачите, що все, як і раніше, працює неправильно. Вирішення проблеми в тому, щоб зробити плаваючим самсписок, але тільки в Internet Explorer, оскільки це не працює в інших браузерах. Це можна обійти за допомогою невеликого прийому, який гарантує, що це правило застосовує лише браузер Internet Explorer.
Додайте наступне правило до таблиці стилів: