Приветствую вас, уважаемый читатель! Сегодня я приготовил для вас небольшой видеоурок, посвященный верстке полей ввода и кнопок, формируемых тегом <input>. Вся соль данного видео заключается в том, что я покажу вам, как правильно сделать выравнивание подписей к полям <input> на все случаи жизни.
Все случаи жизни:
- Маленький размер шрифта подписи, а рядом с ней большая кнопка.
- Маленький размер шрифта подписи, а рядом уже не кнопка, а поле ввода.
- Аналогичные случаи, но теперь маленькие и большие поменялись местами.
- И, наконец-то, случай всеобщего равенства.
Так вот, проблема заключается в IE 6 и в IE 7. Данные браузеры имеют свою точку зрения на верстку описанных жизненных ситуаций, в отличие от нормальных браузеров.
Кстати, я решил причислить IE 8 к нормальным браузерам.
Возможно, часть уважаемых верстальщиков начнет бить себя пяткой в грудь и кричать: “Под IE 6 верстать не надо, это мертвый старый браузер”.
Отвечаю – надо!
Браузер, конечно, старый и дурацкий. Но это не освобождает нас от ответственности перед несколькими сотнями посетителей сверстанного сайта, которые серфят просторы интернета по старинке, используя предустановленный в XP IE 6. Эту проблему я раскрываю в первой части видеоурока.
А во второй части будем верстать.
Ну что же вы ждете, скорее к просмотру видео!
Читать полностью »
Уважаемый читатель, устраивайтесь поудобнее и я познакомлю вас с принципами резиновой блочной верстки сайта.
Ранее рассмотренная нами фиксированная модель превращается в резиновую всего-на-всего заменой пикселной ширины блока <div id=”wrapper”> на процентную. Таким образом, ширина сверстанного сайта будет изменяться в зависимости от размера окна браузера.
В видеоуроке я установил ширину блока <div id=”wrapper”> в 100% от ширины окна браузера. Можно задавать и меньшее количество процентов, тогда сайт будет занимать лишь часть окна браузера.
Без определенных стилей выравнивания блока сайт съедит в левую часть окна. И это, на мой взгляд, некрасиво. Хочется выравнять сайт посередине. Вот и вопрос, «как же это сделать?». А вот и ответ.
Читать полностью »
Во-первых, что такое динамическая кнопка. Динамическая кнопка — это кнопка, вид которой меняется при наведении на нее указателя мыши.
Вы можете посмотреть как выглядит динамическая кнопка.
Такая красота очень часто верстается путем программирования на JavaScript. По умолчанию загружена первая картинка, которая и представляет собой кнопку. При наведении на нее указателя мыши происходит смена предыдущей картинки на новую этим самым JavaScript-ом.
Что мы имеем в результате.
В результате у нас есть две картинки: первая — это вид кнопки по умолчанию, вторая — при наведении мыши. Когда я навожу мышь на кнопку по умолчанию у меня происходит загрузка изображения номер два. И, если используется большая и красивая кнопка или мой интернет медленный, какое-то время, после наведения мыши, кнопка тупит и не меняет своего вида. За это время происходит подгрузка изображения номер два.
Проблемы тупости кнопки, при первой загрузке сайта, можно решить путем установки скрипта-загрузчика. Этот скрипт будет заливать в кеш сразу оба изображения для моей динамической кнопки.
А можно пойти совсем другим путем и сверстать эту кнопку вообще без применения JavaScript. И все это дело будет называется динамической кнопкой на CSS.
Процесс создания изображения для кнопки в Photoshop и ее верстку я записал в формате видеоурока.
Поехали!
Читать полностью »
Верстка | Андрей Морковин 16.10.2009 | 
Отзывов (1) 
