16 октября 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:

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