Верстая очередной проект (или ещё только проектируя макетную сетку) многие сталкивались с дилеммой - использовать фиксированную ширину макета или «резиновую» сетку, адаптируемую под размер окна браузера.
У каждого из этих решений есть свои плюсы и минусы, хочу заострить внимание на минусах, так как обычно именно между двух зол именно в отражении минусов этих решений приходится выбирать.
Фиксированная ширина макетной сетки
Вёрстку загоняют в горизонтальный габарит 960-980 пикселей (чтобы на большинстве устройств в большинстве разрешений всё входило), что при больших горизонтальных размерах окна выглядит как-то зябко - тонкая вертикальная полоса полезного содержимого страницы и огромные бесполезные поля неиспользуемого пространства по бокам.«Резиновая» макетная сетка по ширине окна
Опять же при больших горизонтальных размерах окна есть другая проблема: строки текста становятся очень длинными, и читать их становится совсем не так комфортно, как хотелось бы.Ещё одна распространённая проблема этого решения - боковые отступы при больших горизонтальных размерах окна уже не так удачно визуально согласуются с горизонтальными размерами элементов, что также не добавляет комфорта при взгляде на свёрстанный макет.
Хочу предложить нехитрый вариант решения - ограничить минимальный горизонтальный размер фиксированным значением в пикселях, а максимальный сделать относительным в процентном соотношении к ширине окна. Это очень банально решается простыми средствами ещё 2 версии спецификации CSS.
Update: Хочу оговориться, что речь не идёт о классическом эффекте резины и об адаптации под абсолютно все разрешения, скорее лишь про некий разумный диапазон разрешений, под который проектируется макет. В примерах ниже - это классический десктопный диапазон разрешений с горизонтальным габаритом разрешения от 1024 пикселей.Ещё раз акцентирую внимание: в посте не идёт речь про решение для всех видов устройств и все диапазоны разрешений. В рамках одного макета эта задача не решаема в принципе , для её решения так или иначе потребуется несколько макетов. Мухи отдельно, котлеты отдельно.
Создаём контейнер макета:
...
Оформляем его незатейливым кодом стиля:
div.page-container { min-width: 960px; max-width: 75%; margin: 0 auto; padding: 0; }
Однако этого решения кому-то может показаться мало в силу того что при очень больших горизонтальных размерах окна опять проявляются проблемы с длиной строк. Это решается настолько же простым дополнительным приёмом: создание дополнительного внешнего контейнера внутри уже описанного и ограничение его максимальной ширины фиксированным значением (мне субъективно кажется, что лучше всего подходят значния в диапазоне 1400-1600 пикселей). Опять же используем лишь средства CSS 2.0. Такое решение вместо предложенного в первом комментарии простого добавления ширины в процентах для исходного контейнера будет работать ещё и в IE, который вплоть до 9 версии не понимает одновременного указания значений.
Дополняем HTML:
И немного меняем CSS:
div.page-container { max-width: 75%; min-width: 960px; margin: 0 auto; padding: 0; } div.page-container-inner { min-width: 960px; max-width: 1600px; margin: 0 auto; padding: 0; }
Как видите - решение предельно просто и достаточно универсально, может применяться для любых блочных элементов.
Внешний вид HTML формы можно значительно улучшить с помощью CSS:
Стили полей ввода
Использовать свойство width для определения ширины поля ввода:
Пример относится ко всем элементам . Если вы хотите только установить стиль определенного типа ввода, можно использовать селекторы атрибутов:
- input - будут выбраны только текстовые поля
- input - будет выбирано только поля пароля
- input - будут выбраны только числовые поля
- и т.д...
Дополнительные вводы
Использовать свойство padding для добавления пространства внутри текстового поля.
Совет: Если у вас есть много вводов друг за другом, Вы можете также добавить margin , чтобы было больше места за пределами:
Обратите внимание, что мы установили свойство box-sizing к
border-box . Это гарантирует, что заполнение в конечном итоге границы включены в
общюю ширину и высоту элементов.
Подробнее о свойстве box-sizing в главе CSS Стили Бокс .
Границы ввода
Использовать свойство border для изменения размера и цвета границы, и свойство border-radius для добавления закругленных углов:
Если вам нужна только нижняя граница, используйте свойство border-bottom:
Цвет ввода
Использовать свойство background-color цвета фона ввода, свойство color для добавления изменение цвета текста:
Фокус ввода
По умолчанию некоторые браузеры добавляют синий контур вокруг ввода, когда он получает фокус (щелчок мышью). Это поведение можно удалить, добавив outline: none; в input .
Использовать селектор:focus , чтобы поле ввода, получил фокус:
Ввод иконка и изображение
Если вы хотите установить иконку внутри ввода, используйте свойство background-image и расположите его в свойстве background-position . Также обратите внимание, что мы добавили большую левую прокладку для резервирования места иконки:
Пример
input
{
background-color: white;
background-image: url("searchicon.png");
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
Трансформация поиска ввода
В данном примере мы используем CSS свойство transition оживить ширину поискового ввода, когда он получает фокус. Вы узнаете больше о свойствах transition позже, в нашей главе
Внешний вид HTML-формы может быть значительно улучшена с помощью CSS:
Стилизация поля ввода
Используйте width свойство, чтобы определить ширину поля ввода:
Приведенный выше пример относится ко всем элементов. Если вы хотите, чтобы стиль определенный тип входного сигнала, можно использовать атрибут селекторы:
- input - будет выбирать только текстовые поля
- input - будет только выбрать поля паролей
- input - будет только выбрать номер поля
- и т.д..
проложенные Входы
Используйте padding свойство, чтобы добавить пространство внутри текстового поля.
Совет: Если у вас есть много входов после того, как друг с другом, вы также можете добавить margin , чтобы добавить больше пространства за их пределами:
Граничит Входы
Используйте border собственности, чтобы изменить размер и цвет границы, а также использовать border-radius свойство, чтобы добавить закругленные углы:
Если вы хотите только нижнюю границу, используйте border-bottom свойство:
Цветные входы
Используйте background-color свойство, чтобы добавить цвет фона на вход, и color свойство изменять цвет текста:
Входы Фокусированные
По умолчанию некоторые браузеры будут добавлять синий контур вокруг входа, когда он получает фокус (нажал на). Вы можете удалить это поведение путем добавления outline: none; на вход.
Используйте:focus селектор, чтобы сделать что - то с полем ввода, когда он получает фокус:
Ввод с помощью значка / изображения
Если вы хотите иконку внутри входа используйте background-image свойства и поместить его с background-position собственности. Также обратите внимание, что мы добавим большой левый отступ резервировать пространство иконы:
пример
input
{
background-color: white;
background-image: url("searchicon.png");
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
Анимированные Поиск Входной
В этом примере мы используем CSS3 transition свойство анимировать ширину поля поиска, когда он получает фокус. Вы узнаете больше о transition собственности позже, в нашем
Без применения каскадных таблиц стилей элементы формы будут отображены в соответствии с используемыми броузером и операционной системой настройками по умолчанию. Однако использование CSS позволяет создать формы, соответствующие дизайну вашего сайта.
Решение
Стиль элемента формы, как и любого другого HTML-элемента, можно задать с помощью CSS.
Рис. 6.1 . Вид формы по умолчанию в броузере Firefoxi
Изображенная на рис. 6.1 форма оформлена в соответствии с настройками по умолчанию, используемыми броузером Firefox под Windows XP. Ее вид будет изменяться при просмотре в различных броузерах под разными платформами. Ниже представлена типичная форма:
"http://www.w3.org/1999/xhtml" lang = "en-US" >
Внешний вид этой формы можно изменить, написав правила стилей для элементов:
form { border: 1px dotted #AAAAAA ; padding: 0 .5em ; } form div { margin-bottom: 1em ; } input { color: #00008B ; background-color: #ADD8E6 ; border: 1px solid #00008B ; } select { width: 100px ; color: #00008B ; background-color: #ADD8E6 ; border: 1px solid #00008B ; } textarea { width: 200px ; height: 40px ; color: #00008B ; background-color: #ADD8E6 ; border: 1px solid #00008B ; }
Теперь форма выглядит, как на рис. 6.2.
Обсуждение
Как вы наверняка догадались, заданные правила стилей для HTML-элементов form, input, textarea и select
будут применены по отношению к каждому их экземпляру, находящемуся на странице, с которой связан файл таблицы стилей. Для изменения оформления полей формы мож- но использовать множество различных свойств. С помощью CSS можно управлять практически всеми аспектами поля
:
Совет
Формы и фоновый цвет
. Часть посетителей вашего сайта могут плохо различать цвета, а часть, возможно, пользуется голосовым броузером. Поэтому цвета никогда не должны выполнять важных функций - к примеру, указания вроде «Желтые поля обязательны для заполнения» должны быть под полным запретом.
Рассмотрим значения свойств более подробно:
