Выравнивание подписей к полям ввода

Приветствую вас, уважаемый читатель! Сегодня я приготовил для вас небольшой видеоурок, посвященный верстке полей ввода и кнопок, формируемых тегом <input>. Вся соль данного видео заключается в том, что я покажу вам, как правильно сделать выравнивание подписей к полям <input> на все случаи жизни.
Все случаи жизни:
- Маленький размер шрифта подписи, а рядом с ней большая кнопка.
- Маленький размер шрифта подписи, а рядом уже не кнопка, а поле ввода.
- Аналогичные случаи, но теперь маленькие и большие поменялись местами.
- И, наконец-то, случай всеобщего равенства.
Так вот, проблема заключается в IE 6 и в IE 7. Данные браузеры имеют свою точку зрения на верстку описанных жизненных ситуаций, в отличие от нормальных браузеров.
Кстати, я решил причислить IE 8 к нормальным браузерам.
Возможно, часть уважаемых верстальщиков начнет бить себя пяткой в грудь и кричать: “Под IE 6 верстать не надо, это мертвый старый браузер”.
Отвечаю – надо!
Браузер, конечно, старый и дурацкий. Но это не освобождает нас от ответственности перед несколькими сотнями посетителей сверстанного сайта, которые серфят просторы интернета по старинке, используя предустановленный в XP IE 6. Эту проблему я раскрываю в первой части видеоурока.
А во второй части будем верстать.
Ну что же вы ждете, скорее к просмотру видео!
Первая часть видео с сервиса RuTube. Нужно ли верстать под IE6 или нет:
Первая часть видео с сервиса YouTube:
Вторая часть видео на RuTube:
Видео на YouTube #2-1:
Видео на YouTube #2-2:
HTML-файл, выступающий в качестве примера в видеоуроке, можно посмотреть здесь.
Из-за конвертации видео сервисом YouTube и RuTube мелкие детали могут стать плохо различимы. Вы можете скачать видеоурок в лучшем качестве с Deposit Files:
С уважением, Андрей Морковин.
Похожие материалы:
1 отзыв на «Выравнивание подписей к полям ввода»









Автор: , 15.12.2009 в 01:24
Вёрстке элементов форм вообще мало уделяют внимание. А зря. Серьёзная тема. И сказать можно не только о vertical-align:middle. Например, можно сказать, что подписи к инпутам нужно делать с помощью тега label. Такой тег вообще мало кто из новичков знает.