Сдам Сам

ПОЛЕЗНОЕ


КАТЕГОРИИ







Демонстрация 8: сопутствующие рассмотрения





· Самой большой проблемой, которая встречается при оформлении кнопок отправки, состоит в размещении их точно так, как требуется дизайнеру. Обычная практика получения требуемого вида состоит в тщательной подгонке компоновки и свойств line-height;некоторые разработчики могут найти менее трудоемким использование вместо этого замену изображения (см. Библиографию) илиinput type="image".

· На первый взгляд задание display: block для этого объекта кажется избыточным — и действительно является избыточным, если думать только в терминах единственной формы на единственной странице. Однако в контексте всего сайта это может оказаться не избыточным; многие сайты и приложения имеют несколько форм в одном документе с различными значениями display.

Демонстрация 9

Разместим "требуемые" теги там, где они должны находиться.

Выравниваем "требуемые" теги к воображаемому правому полю формы, и изменяем их текстовые свойства.

 

Новые стили оформления:

li.required span.note { display: block; width: auto; float: right; color: rgb(128,128,128); font-size:.714em; line-height: 2.4em; font-style: italic;}

Демонстрация 9: сопутствующие рассмотрения

· В своем текущем состоянии элемент fieldset, содержащий элементы управления radio все еще является блочным элементом, поэтому он распространяется до правого поля формы. В результате тег, присоединенный к этому множеству элементов управления, смещается ниже вычисленного нижнего края fieldset.

· Значение auto, задаваемое для width "требуемых" тегов, определяет, что они не могут быть шире своего контента.

· Более внимательное рассмотрение арифметики, использованной для набора текста "требуемых" тегов, покажет, размер шрифта в десять пикселей, и интерлиньяж в 24 пикселя (эквивалентный одной атомарной единице используемой сетки).

· Структура, использованная для индикации требуемых полей, создана с учетом интерактивного взаимодействия с пользователями; с помощью различных классов, использованных на форме, можно проверять ввод пользователя с помощью JavaScript, и изменять оформление меток, полей, и/или тегов в настройках меток/элементов управления, которые не были правильно обработаны пользователем.

Демонстрация 10

Наконец пришло время уладить конфликты элементов управления radio с полями под ними в порядке исходного кода.

Выравниваем элементы управления radio и их метки по горизонтали.

 

Новые стили оформления:

fieldset label { margin-right:.25em; padding-right: 0; line-height: 1;} fieldset.rInput { margin-right:.75em; } fieldset label, fieldset.rInput { width: auto; display: inline; float: none; font-size:.857em;} li.required fieldset { width: 18.857em; float: left;}

Демонстрация 10: сопутствующие рассмотрения

· Основной результат этих правил, кроме выполнения косметических настроек, состоит в изменении значения display элементов управления radio и checkbox снова на inline. Это делается с целью избежать трудностей, которые возникают, когда они становятся плавающими, как остальные элементы input в форме.

· Вместо задания display: inline соответствующим элементам управления, они остаются "замененными" элементами: строковыми элементами с известными во время выполнения статическими размерами (т.е., до того как браузер реально начнет визуализацию контента). В связи с этим к этим объектам можно применять поля.

· Специфическая природа элементов fieldset — в частности, то что они являются только элементами %block, специально предназначенными для использования в формах — требует, чтобы в этом случае применялась дискретная ширина к любым fieldset, содержащим элементы управления, которые требуют активации пользователя. (См. обсуждение выше значений "требуемого" тега компоновки.)

Демонстрация 11

Для последней атаки, чтобы выровнять последние штрихи просто так …

Делаем корректировку окончательной компоновки для различных элементов управления.

 

Новые стили оформления:

#acctTypeField fieldset { padding:.286em 0 0 0; line-height: normal;} #acctTypeField.rInput { margin-top:.167em; } #availabilityField label { height: 3.143em; padding-top:.286em; line-height: normal;} #availabilityField.rInput { margin-top:.286em; } #availabilityField, #messageField { height: 1%; overflow: auto;}





ЧТО ПРОИСХОДИТ ВО ВЗРОСЛОЙ ЖИЗНИ? Если вы все еще «неправильно» связаны с матерью, вы избегаете отделения и независимого взрослого существования...

Что способствует осуществлению желаний? Стопроцентная, непоколебимая уверенность в своем...

ЧТО И КАК ПИСАЛИ О МОДЕ В ЖУРНАЛАХ НАЧАЛА XX ВЕКА Первый номер журнала «Аполлон» за 1909 г. начинался, по сути, с программного заявления редакции журнала...

Что вызывает тренды на фондовых и товарных рынках Объяснение теории грузового поезда Первые 17 лет моих рыночных исследований сводились к попыткам вычис­лить, когда этот...





Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:


©2015- 2024 zdamsam.ru Размещенные материалы защищены законодательством РФ.