FastVPS-хостинг, который может больше
16.10.2009

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

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

Приветствую вас, уважаемый читатель! Сегодня я приготовил для вас небольшой видеоурок, посвященный верстке полей ввода и кнопок, формируемых тегом <input>. Вся соль данного видео заключается в том, что я покажу вам, как правильно сделать выравнивание подписей к полям <input> на все случаи жизни.

Все случаи жизни:

  1. Маленький размер шрифта подписи, а рядом с ней большая кнопка.
  2. Маленький размер шрифта подписи, а рядом уже не кнопка, а поле ввода.
  3. Аналогичные случаи, но теперь маленькие и большие поменялись местами.
  4. И, наконец-то, случай всеобщего равенства.

Так вот, проблема заключается в 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:

С уважением, Андрей Морковин.

Post to Twitter



Если статья вам понравилась и вы не хотите пропустить свежие публикации, то подписывайтесь на RSS-ленту или получайте обновления сайта на эл. почту.


Похожие материалы:


1 отзыв на «Выравнивание подписей к полям ввода»

  1. Автор: Never Lex, 15.12.2009 в 01:24

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

Ваш отзыв