Реалии современного веб-дизайна достаточно суровы — назвался веб-программистом — держись в тренде… Разнообразие гаджетов, применяемых пользователями для путешествий просторами интернета впечатляет, не говоря уже об их конструкционных особенностях и технических характеристиках.
Вот девушка в кафе сидит «Вконтакте» со смартфона, рядом обедает бизнесмен и листает на планшете странички сайта поставщика арматуры…
Разные люди, разные интересы, разные размеры мониторов портативных ЭВМ. И наша задача — создать такой интернет-ресурс, который обеспечил бы максимальную адекватность отображения результатов и удобность в использовании.
«Резиновая» верстка уже длительной период времени уверенно держится в тренде наряду с другими методами адаптации отображения содержимого под разрешение клиентского терминала.
Об некоторых алгоритмах этого дивного метода мы и поговорим сегодня.
Постановка задачи
Давайте представим ситуацию — мы работаем над каталогом интеренет-магазина и нам необходимо отверстать визитную карточку товара, на которой размещается изображение этого товара и кнопочка для заказа. Но поскольку наш магазин (допустим, готовой пищи), должен быть доступен всегда и везде, кнопочка «обязана» быть резиновой.
Вот тут у нас и появляется логичный вопрос. Как позиционировать кнопку, если она резиновая? Задать границы 0px auto не получится, ибо размеры блока-кнопки не фиксированы. Строчное представление кнопки тоже нам не подходит, ведь настроить дизайн при таком раскладе становится практически невозможно.
Алгоритм решения задачи
Как говорилось раньше определенные benefits нам принесет блочно-строчный рендеринг элемента. А если говорить по-русски, то мы используем CSS свойство display: inline-block.
Для подробного рассмотрения данного вопроса воспользуемся примером. Создадим html страничку со следующим содержимым.
HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" media="all" type="text/css" href="./style.css"> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="kartochka"> <div class="photo"> <img src="./omar.jpg" alt=" Блюдо с омаров" /> </div> <a class="button" href="#">Заказать<span></span></a> </div> </body> </html>
CSS:
.kartochka{ text-align: center; /*Выравниваем текст родителя по центру*/ background: url(./carbon2.png); /*Задаем картинку-бэкграунд*/ padding: 31px; /*Внутренние отступы родителя*/ -moz-border-radius: 11px;/*Фаска для мозиллы*/ border-radius: 11px;/*Фаска для остальных*/ min-width: 400px;/*Ограничиваем ширину*/ min-height: 300px; ;/*Ограничиваем высоту*/ } .button{ display: inline-block;/*Создаем строчно-блоковое отображение*/ color: red; /*Задаем цвет текста*/ position: relative; /*Позиционируем*/ margin: 21px auto 0px auto; /*Отодвигаем от картинки*/ padding: 11px 41px 11px 41px;/*Внутренние отступы*/ font: 21px/41px Arial; /*Корректируем шрифт*/ font-weight: bolder;/*Жирность шрифта*/ text-transform: uppercase; /*Подымаем маленьких*/ background: url(./white.png);/*Фоновая картинка*/ } .button a { text-decoration: none; /*Убираем подчеркивание*/ cursor: pointer;/*Задаем указатель «рука»*/ }
Данный метод показал неплохую работоспособность, но как Вы уже могли привыкнуть, в семье не без… строптивого. И речь конечно же идет о семействе браузеров IE. CSS свойство display: inline-block не понимает IE6, да и в IE7 возникает куча проблем, и управлять отображением блочных элементов так же как и отображением строчных элементов становиться потенциально проблематично.
Для того, чтобы «укротить строптивого», нам придется насильно задать инлайновое отображение элементов и задать раскладку.
Таким образом наша работа станет одинаково эффективной как с блочными так и строчными элементами:
Код нашей странички будет следующим.
HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" media="all" type="text/css" href="./style.css"> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="kartochka"> <div class="photo"> <img src="./omar.jpg" alt=" Блюдо с омаров" /> </div> <a class="button" href="#">Заказать<span></span></a> </div> </body> </html>
Раскладка, или другими словами мелкософтовское свойство hasLayout! Зададим при помощи свойства zoom.
CSS
.kartochka{ text-align: center; /*Выравниваем текст родителя по центру*/ background: url(./carbon2.png); /*Задаем картинку-бэкграунд*/ padding: 31px; /*Внутренние отступы родителя*/ -moz-border-radius: 11px;/*Фаска для мозиллы*/ border-radius: 11px;/*Фаска для остальных*/ min-width: 400px;/*Ограничиваем ширину*/ min-height: 300px; ;/*Ограничиваем высоту*/ } .button { display: inline-block;/*Создаем строчно-блоковое отображение*/ //display: inline; /*Работаем на IE*/ zoom: 2;/*Задаем has layout*/ color: red; /*Задаем цвет текста*/ position: relative; /*Позиционируем*/ margin: 21px auto 0px auto; /*Отодвигаем от картинки*/ padding: 11px 41px 11px 41px;/*Внутренние отступы*/ font: 21px/41px Arial; /*Корректируем шрифт*/ font-weight: bolder;/*Жирность шрифта*/ text-transform: uppercase; /*Подымаем маленьких*/ background: url(./white.png);/*Фоновая картинка*/ } .button a { text-decoration: none; /*Убираем подчеркивание*/ cursor: pointer;/*Задаем указатель «рука»*/ }
Важно!!!
- Кросс-браузерность. Данное решение показало свою работоспособность в браузерах, начиная с: IE6, Fx3, Op9.5, Sa4, Cr5.
Для Fx2 свойство отображения inline-block не подает признаков работоспособности, и если Вы решили оптимизировать Ваш ресурс под такой реликварий, воспользуйтесь отображением -moz-inline-stack.
- Не забывайте, что задание hasLayout при помощи зума делает наш код не валидным. По этому, если у вас в техническом задании прописано «соответствие w3c стандартам» — воспользуйтесь условными комментариями и вынесите этот кусок кода в отдельный CSS файл.
Послесловие
В реальной практике веб-мастера задачи связанные с резиновой версткой возникают сплошь и рядом, ведь написание отдельных CSS файлов для разных разрешений монитора оправдано лишь в определенных диапазонах. По сути, флекси-верстка это всего лишь взгляд на уже известный Вам мир немного под другим углом. Но на самом деле, иногда простые на первый взгляд задачи доставляют не мало проблем, пока не привыкните…
Сегодня мы на примере рассмотрели потенциальные возможности CSS свойства display: inline-block в задачах «гибкой» верстки. Как было показано, резиновый строчный (блочный) элемент с фоновым изображением можно превратить в строчно-блочный (inline-block), и выровнять по центру, присвоив обертке центральный text-align.
Успехов Вам!!!
