В сегодняшнем видеоуроке по div верстке сайта я познакомлю вас, уважаемый читатель, с принципами верстки блока с закругленными углами. Причем не просто блока, а резинового блока, который может тянуться в ширину и высоту без ограничений.
На настоящий момент существует множество способов верстки блоков с закругленными углами (статья на HabraHabr с 38-ю способами). Многие из них даже очень оригинальны и изящны.
Только ко всему этому изящному многообразию у меня есть ряд претензий:
Во-первых, сложность CSS-конструкций, в которой разобраться новичку будет очень сложно.
Во-вторых, зачем городить огород и искать себе проблемы, когда поставленную задачу можно решить, быть может, не так изящно, но все же, решить достойно и в соответствии со стандартами.
В-третьих, большое количество способов базируются на методе раздвижных дверей, а для этого метода необходимо загружать большое изображение. Размеры этого изображения бывает сложно предугадать. Кстати, если вы не знакомы с методом раздвижных дверей, то я рассказываю про него в статье Верстка динамической кнопки на CSS.
Мы решим поставленную задачу дубовым методом, но не лишенным некоего изящества.
И, конечно же, верстать мы будем при помощи тегов div, без применения таблиц. В процессе просмотра видеоурока вы оцените простату данного метода, по сравнению даже с табличной реализацией.
За одно с версткой вы, как и всегда, получите порцию знаний по работе с программой Photoshop.
Предлагаю вам, уважаемый читатель, познакомится с тегом <div>. Да так познакомится, чтобы никаких вопросов больше не возникало, о том, каким образом можно позиционировать, выравнивать, смещать, растягивать и сжимать этот блок.
Ведь тег <div> – это основной инструмент для позиционирования элементов сайта на странице и все его свойства и особенности нужно знать максимально подробно.
Информацию о теге я записал в формате видеоурока.
Тематика видеоурока:
Размеры блока div и контента, их соотношение.
Рассматриваю особенности позиционирования (position:absolute, position:fixed, position:relative).
Объясняю принципы построения плавающей модели.
Иллюстрирую необходимость использования свойства CSS clear:both.
Проблема, которую мы будем решать, заключается в том, что обычные кнопки, сформированные тегом <input type=”submit”> выглядят в разных браузерах по разному. Кроме того, при изменении стандартного размера кнопки, некоторые браузеры отображают ее просто ужасно.
Оказывается можно приложить немного усилий и из обычной кнопки по умолчанию сделать стильную и модную, да еще и во всех популярных браузерах кнопка будет выглядеть одинаково хорошо (ну или почти во всех, почти хорошо). Теперь поговорим об этом подробно. Читать полностью »
Приветствую вас, уважаемый читатель! Сегодня я приготовил для вас небольшой видеоурок, посвященный верстке полей ввода и кнопок, формируемых тегом <input>. Вся соль данного видео заключается в том, что я покажу вам, как правильно сделать выравнивание подписей к полям <input> на все случаи жизни.
Все случаи жизни:
Маленький размер шрифта подписи, а рядом с ней большая кнопка.
Маленький размер шрифта подписи, а рядом уже не кнопка, а поле ввода.
Аналогичные случаи, но теперь маленькие и большие поменялись местами.
И, наконец-то, случай всеобщего равенства.
Так вот, проблема заключается в IE 6 и в IE 7. Данные браузеры имеют свою точку зрения на верстку описанных жизненных ситуаций, в отличие от нормальных браузеров.
Кстати, я решил причислить IE 8 к нормальным браузерам.
Возможно, часть уважаемых верстальщиков начнет бить себя пяткой в грудь и кричать: “Под IE 6 верстать не надо, это мертвый старый браузер”.
Отвечаю – надо!
Браузер, конечно, старый и дурацкий. Но это не освобождает нас от ответственности перед несколькими сотнями посетителей сверстанного сайта, которые серфят просторы интернета по старинке, используя предустановленный в XP IE 6. Эту проблему я раскрываю в первой части видеоурока.
