Реалії сучасного веб-дизайну досить суворі - назвався веб-програмістом - тримайся в тренді ... Різноманітність гаджетів, які застосовуються користувачами для подорожей просторами інтернету вражає, не кажучи вже про їх конструкційних особливостях і технічних характеристиках.
Різні люди, різні інтереси, різні розміри моніторів портативних ЕОМ. І наше завдання - створити такий інтернет-ресурс, який забезпечив би максимальну адекватність відображення результатів і зручність у використанні.
«Гумова» верстка вже тривалої період часу впевнено тримається в тренді поряд з іншими методами адаптації відображення вмісту під дозвіл клієнтського терміналу.
Про деяких алгоритмах цього чудового методу ми і поговоримо сьогодні.
Постановка задачі
Давайте уявимо ситуацію - ми працюємо над каталогом інтеренет-магазину і нам необхідно отверстать візитну картку товару, на якій розміщується зображення цього товару і кнопочка для замовлення. Але оскільки наш магазин (припустимо, готової їжі), повинен бути доступний завжди і скрізь, кнопочка «зобов'язана» бути гумовою.
Ось тут у нас і з'являється логічне запитання. Як позиціонувати кнопку, якщо вона гумова? Задати кордону 0px auto не вийде, бо розміри блоку-кнопки не фіксовані. Рядкове уявлення кнопки теж нам не підходить, адже налаштувати дизайн при такому розкладі стає практично неможливо.
Алгоритм рішення задачі
Як говорилося раніше певні benefits нам принесе блочно-рядковий рендеринг елемента. А якщо говорити по-російськи, то ми використовуємо CSS властивість display: inline-block.
Для докладного розгляду даного питання скористаємося прикладом. Створимо html сторінку з наступним змістом.
Даний метод показав непогану працездатність, але як Ви вже могли звикнути, в сім'ї не без ... норовливого. І мова звичайно ж йде про сімейство браузерів IE. CSS властивість display: inline-block не розуміє IE6. та й в IE7 виникає купа проблем, і управляти відображенням блокових елементів так само як і відображенням малих елементів ставати потенційно проблематично.
Для того, щоб «приборкати норовливого», нам доведеться насильно задати інлайновое відображення елементів і задати розкладку.
Таким чином наша робота стане однаково ефективною як з блочними так і малими елементами:
Код нашої сторінки буде наступним.
Розкладка, або іншими словами мелкософтовское властивість hasLayout! Задамо за допомогою властивості zoom.
- Кросбраузерну. Дане рішення показало свою працездатність в браузерах, починаючи з: IE6, Fx3, Op9.5, Sa4, Cr5.
Для Fx2 властивість відображення inline-block не подає ознак працездатності, і якщо Ви вирішили оптимізувати Ваш ресурс під такою релікварій, скористайтеся відображенням -moz-inline-stack.
Післямова
У реальній практиці веб-майстри завдання пов'язані з гумовою версткою виникають часто-густо, адже написання окремих CSS файлів для різних дозволів монітора виправдано лише в певних діапазонах. По суті, флексі-верстка це всього лише погляд на вже відомий Вам світ трохи під іншим кутом. Але насправді, іноді прості на перший погляд завдання доставляють чимало проблем, поки не звикнете ...
Сьогодні ми на прикладі розглянули потенційні можливості CSS властивості display: inline-block в задачах «гнучкою» верстки. Як було показано, гумовий рядковий (блоковий) елемент з фоновим зображенням можна перетворити в рядково-блоковий (inline-block), і вирівняти по центру, присвоївши обгортці центральний text-align.
Успіхів вам.
Оцінок: 4 (середня 5 з 5)
