Мал. 6.10. Трава відображається поверх кордону
Ще один момент, який слід врахувати заздалегідь - як відображати підвал при невеликому обсязі контенту. Можливий "висить" підвал, внизу якого відображається фон веб-сторінки (рис. 6.11а) або підвал, заповнений до нижнього краю вікна (рис. 6.11б).
а. висить підвал
б. Підвал притиснутий до краю
Мал. 6.11. різновиди підвалу
Насправді притискати підвал до нижнього краю не доведеться, достатньо заповнити порожній простір під підвалом тим же кольором, що і у трави. За рахунок такого трюку буде створюватися враження, що підвал займає все простір, що залишився.
Малюнок з травою спеціально виконаний вузьким і має висоту 27 пікселів, що явно недостатньо для висоти нашого підвалу, тому доповнимо малюнок тим же фоновим кольором # e2ed9c. Для цього додамо шар з ім'ям footer-bg і для нього вкажемо необхідний колір фону.
Код HTML буде простим.
Тут до ширини контенту (width) додається значення padding ліворуч і праворуч, що в підсумку і дає ширину нашого макета в 760px. Текст зсувається вправо за допомогою універсального властивості margin. додається до селектора P. Код для створення підвалу і тексту:
Залишилося тільки включити малюнок з лежачим левом і остаточно підкоригувати стилі. Льва додамо у вигляді звичайного зображення через тег. а щоб управляти його положенням помістимо малюнок в
з класом lion. Втім, цей клас можна також встановити безпосередньо тегу. Остаточний код нашого підвалу представлений в прикладі 6.16.
Приклад 6.16. код підвалу
Положення лева вкажемо за допомогою позиціонування. Для цього батьківського елементу слід вказати властивість position як relative. а елементу lion як absolute. В такому випадку властивості left і top керують координатами щодо батька, тобто Однак тут є одна складність, займає всю ширину сторінки, а лева треба встановити щодо макета в 760px. Значення для left вказати не можна, тому що ми не знаємо, чому в пікселах одно відстань від лівого краю браузера до лівого краю макету. Скористаємося наступним трюком: для left встановимо 50%. що вирівняє край малюнка по центральній осі, і щодо цього положення будемо зрушувати малюнок властивістю margin-left з негативним (вліво) або позитивним (вправо) значенням.
Значення margin-left і top підбираються дослідним шляхом, щоб домогтися найкращого результату.
Додавання малюнка вносить плутанину з фоновими малюнками, і вони починають накладатися один на одного, так що пора відновити їх споконвічне місце. Для початку зрушимо малюнок з травою вниз на 53 пікселя. Це число вийшло вирахуванням з висоти малюнка лева (80px) висоти малюнка трави (27px). І піднімемо наш підвал цілком вгору на 77-80 пікселів. По-перше, підняти треба, тому що через малюнка лева підвал опускається вниз, по-друге, отримаємо накладення підвалу на кордон макета, як показано на рис. 6.10.
На жаль, всі ці дії не мають ніякого сенсу, тому що через ефект схлопивающіхся відступів положення елементів вважається зовсім інакше. Скасувати цей ефект можна різними способами, наприклад, за допомогою полів, кордонів, абсолютного позиціонування, але в конкретному випадку вони не підходять. Тут поля і кордони виявляться зайвими. Так що згадаємо ще один метод і додамо властивість overflow із значенням auto. Взагалі-то це властивість при необхідності додає смуги прокрутки, якщо контент не поміщається в задані розміри. Але зараз overflow нам потрібно тільки для одного - скасувати колапсуючу відступи.
Текст в підвалі і зелений фон також піднімається вгору, тому для шару footer-bg треба встановити відступ зверху на висоту малюнка лева.
Остаточно для контенту основної частини додаємо поле знизу рівне висоті малюнка, щоб текст не закривався підвалом.
Стиль для підвалу приведений в прикладі 6.17.
Приклад 6.17. стиль підвалу
Залишилося вирішити останнє питання, робити підвал висить чи ні (див. Рис. 6.11). Вся реалізація, показана вище, спрямована на висить підвал, змінити поведінку можна всього-на-всього перенісши background з footer-bg в BODY. Хоча це дія встановить зелений колір фону для всієї сторінки повністю, помітно це буде тільки там, де видно простір під підвалом. Для інших розділів начебто шапки, основної частини заданий свій власний колір фону, тому включення фону для селектора BODY на них не вплине.