Хостинг, который может больше

Рубрика: Верстка

<div> – основной инструмент блочной верстки. Работа с тегом.

Предлагаю вам, уважаемый читатель, познакомится с тегом <div>. Да так познакомится, чтобы никаких вопросов больше не возникало, о том, каким образом можно позиционировать, выравнивать, смещать, растягивать и сжимать этот блок.

Ведь тег <div> – это основной инструмент для позиционирования элементов сайта на странице и все его свойства и особенности нужно знать максимально подробно.

Информацию о теге я записал в формате видеоурока.

Тематика видеоурока:

  • Размеры блока div и контента, их соотношение.
  • Рассматриваю особенности позиционирования (position:absolute, position:fixed, position:relative).
  • Объясняю принципы построения плавающей модели.
  • Иллюстрирую необходимость использования свойства CSS clear:both.

Переходите к просмотру видео.

Читать полностью »

Post to Twitter

Верстка простой кнопки

Проблема, которую мы будем решать, заключается в том, что обычные кнопки, сформированные тегом <input type=”submit”> выглядят в разных браузерах по разному. Кроме того, при изменении стандартного размера кнопки, некоторые браузеры отображают ее просто ужасно.

Оказывается можно приложить немного усилий и из обычной кнопки по умолчанию сделать стильную и модную, да еще и во всех популярных браузерах кнопка будет выглядеть одинаково хорошо (ну или почти во всех, почти хорошо). Теперь поговорим об этом подробно. Читать полностью »

Post to Twitter

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

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

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

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

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

Так вот, проблема заключается в IE 6 и в IE 7. Данные браузеры имеют свою точку зрения на верстку описанных жизненных ситуаций, в отличие от нормальных браузеров.

Кстати, я решил причислить IE 8 к нормальным браузерам.

Возможно, часть уважаемых верстальщиков начнет бить себя пяткой в грудь и кричать: “Под IE 6 верстать не надо, это мертвый старый браузер”.

Отвечаю – надо!

Браузер, конечно, старый и дурацкий. Но это не освобождает нас от ответственности перед несколькими сотнями посетителей сверстанного сайта, которые серфят просторы интернета по старинке, используя предустановленный в XP IE 6. Эту проблему я раскрываю в первой части видеоурока.

А во второй части будем верстать.

Ну что же вы ждете, скорее к просмотру видео!

Читать полностью »

Post to Twitter