Як розташувати логотип сайту зліва, а слоган - справа
Якщо ви коли-небудь верстали макет сторінки за допомогою таблиць, то вам добре відомо, наскільки просто досягти зображеного на рис. 9.10 ефекту. Досить вирівняти вміст лівого вічка таблиці, що складається з двох колонок, по лівому краю, а правою - по правому. На щастя, того ж результату можна добитися і за допомогою CSS.
Мал. 9.10. Розташування логотипу зліва, а слогана - справа за допомогою CSS
Рішення
Для позиціонування елементів зазначеним чином можна скористатися властивістю float:
Обговорення
За допомогою властивості float можна вирівнювати елементи «шапки» по будь-якій стороні. Перед додаванням даного властивості елементи будуть відображатися поруч один з одним, як показано на рис. 9.11.
Таке позиціонування елементів обумовлено HTML-розміткою, в якій не міститься ніяких вказівок щодо їх розташування. Саме тому вони просто йдуть один за одним.
Мал. 9.11. Розташування елементів за замовчуванням
Розглянемо HTML-код, керуючий розташуванням слогана:
За допомогою властивості float можна розмістити елементи класу logo зліва, а елементи класу slogan - справа. Крім того, я додала правило для вирівнювання тексту слогана вправо, без якого він притискався б до лівого краю містить його елемента span, який вирівняний вправо! Результат проведених дій показаний на рис. 9.12.
Мал. 9.12. Застосування властивості float для позиціонування елементів
Для створення додаткового порожнього простору навколо елементів додамо до логотипу зовнішній відступ зверху і зліва, а до слогану - зверху і справа:
При використанні такого підходу слід врахувати наступне: якщо ви робите все елементи в контейнері плаваючими, то ніщо не змушує контейнер залишатися відкритим, і його висота зменшується до нуля, як показано на рис. 9.13.
Мал. 9.13. При вказівці властивості float для дочірніх елементів «шапки» вона повністю згортається
Для більшої наочності я додала до контейнера логотипу та слогану рамку. На рис. 9.14. показаний вид контейнера до привласнення дочірнім елементам властивості float.
Мал. 9.14. Розмір «шапки» до привласнення дочірнім елементам властивості float
Після присвоювання дочірнім елементам властивості float висота контейнера зменшується до нуля, оскільки тепер вони видалені із загального потоку елементів в документі, в результаті чого рамка контейнера перетворилася на суцільну червону лінію, як видно на рис. 9.13.
Щоб уникнути такої ситуації можна задати висоту блоку за допомогою властивості height:
Тепер блок займає відведену йому область сторінки, як показано на рис. 9.15.
Мал. 9.15. Після завдання властивості height для div c «шапкою» сторінка відображається абсолютно нормально
При виборі значення властивості height в такій ситуації слід враховувати можливі зміни в документі при збільшенні розміру шрифту користувачем. В якості одиниць виміру при цьому найкраще використовувати em, оскільки при цьому висота елемента буде збільшуватися відповідно до розміру тексту, і він як і раніше зможе вмістити його, не "виштовхуючи» плаваючі елементи.
Якби обсяг тексту в даному контейнері був невідомий, то слід було б скористатися властивістю clear, про який ми говорили трохи раніше.